[ 01 — INPUT → OUTPUT ]

OPEN SOURCE · MIT · v4.1.0

Sequence diagrams
from text.

Help documentation catch up with development.

@zenuml/core is a JavaScript sequence-diagram library that turns Markdown-inspired text definitions into interactive diagrams entirely in the browser — no server required.

Try it live npm install @zenuml/core
hello.zenuml — editable validate() → pass: true 
Alice -> Bob: Hello Bob!
Bob -> Alice: Hello Alice!
output — sequence diagram static svg
Sequence diagram rendered from the DSL above: Alice sends the message “Hello Bob!” to Bob, and Bob replies “Hello Alice!”. Pre-rendered to SVG by the zenuml CLI.
STATIC SVG — PRE-RENDERED BY THE ZENUML CLI

[ 02 — ADD IT TO YOUR APP ]

Pick your surface.

Four ways in. Every snippet is complete and runs against v4.1.0 unmodified.

TERMINAL — @zenuml/core@4.1.0
npm install @zenuml/core # or: bun add @zenuml/core 
import ZenUml from '@zenuml/core';
const el = document.getElementById('zenuml-container');
const zenUml = new ZenUml(el);
const code = 'A->B: message';
const config = { theme: 'default' };
zenUml.render(code, config);

Renders client-side. Ships ESM + UMD. Node >= 20 for the headless parser.

Sequence-diagram CLI and headless parser

zenumlCLI — renders .zenuml files to SVG/PNG · stdin/stdout pipes · --check · --parse AST JSON source ↗
'@zenuml/core/parser' — reentrant validate() / parse(), zero DOM, Node ≥ 20

[ 03 — THE SYNTAX ]

Control flow, verbatim.

One machine-verified example (pass: true) — typed participants, nested calls, async messages, a divider. Full syntax reference ↗

order.zenuml30 lines
title Order Processing

@Actor Customer
@Boundary WebApp
@Control OrderService
@Entity OrderDB
@Queue NotificationQueue

@Starter(Customer)

// Place order
Customer -> WebApp: submitOrder(cartId)

WebApp.processOrder(cartId) {
  if (cart.isEmpty()) {
    return error("Empty cart")
  }

  String orderId = new OrderService(cart) {
    OrderService -> OrderDB: persist(order)
    return orderId
  }

  // Notify async
  WebApp -> NotificationQueue: orderCreated(orderId)
}

== Confirmation ==

WebApp --> Customer: orderConfirmed(orderId)
output fit to width · static svg — rendered by the zenuml cli
Order Processing sequence diagram: the Customer actor submits an order to WebApp; WebApp processes it, returning an error for an empty cart, creating an OrderService that persists the order to OrderDB, then asynchronously notifying NotificationQueue; after a Confirmation divider, WebApp confirms the order to the Customer. Pre-rendered to SVG by the zenuml CLI.

Project facts

v4.1.0

current release

MIT

license

REACT 19

renderer

ANTLR4

grammar-backed parser

13

named themes

Powers ZenUML inside: Mermaid Confluence JetBrains IDEs Chrome GitHub — mermaid-js/zenuml-core ↗

[ 05 — FAQ ]

Asked and answered.

What is @zenuml/core?

@zenuml/core is a JavaScript sequence-diagram library that turns Markdown-inspired text definitions into interactive diagrams entirely in the browser, with no server required. It is published on npm under the MIT license, and it is the engine that powers ZenUML syntax support in the Mermaid ecosystem.

How do I install @zenuml/core?

Install @zenuml/core from npm with `npm install @zenuml/core` or `bun add @zenuml/core`. The package requires Node.js 20 or later and ships both an ESM bundle (dist/zenuml.esm.mjs) for modern bundlers and a UMD bundle (dist/zenuml.js) for browser scripts.

Is ZenUML part of Mermaid?

ZenUML is not a Mermaid competitor — it is an alternative sequence-diagram syntax available inside the Mermaid ecosystem, and it is also usable standalone. The @zenuml/core repository lives in the mermaid-js GitHub organization, and Mermaid's mermaid-zenuml package calls this library's renderer.

Does ZenUML require a server to render diagrams?

No. ZenUML diagrams are defined as plain text and rendered fully client-side in the browser. One DSL feeds two renderers: an interactive React 19 HTML renderer and a headless native-SVG renderer exported as renderToSvg().

Can I validate ZenUML syntax on the server in Node.js?

Yes. The @zenuml/core/parser subpath exports a reentrant validate(code) function that returns { pass, errorDetails } and a parse(code) function that adds an error-recovered rootContext parse tree. It imports cleanly server-side and is safe to call repeatedly or concurrently in Node.

What UML fragments does ZenUML support?

ZenUML supports the full UML fragment set: if/else (alt), while/for/loop, opt, par, critical, section/frame, try/catch/finally, and ref. Conditions accept real expressions, including comparison, boolean, arithmetic, function calls, and the in operator.

Can I export ZenUML diagrams as PNG or SVG?

Yes. The ZenUml instance provides getPng() and getSvg() methods that return data URLs. The package also ships a zenuml CLI binary that renders .zenuml files to SVG or PNG, supports stdin/stdout pipes, and offers --check syntax validation and --parse AST-as-JSON output.

Is @zenuml/core free to use?

Yes. @zenuml/core is open source under the MIT license and free to install from npm. The current version is 4.1.0.

More about the project — the diagrams-as-code philosophy → Machine-readable reference — /llms.txt