Diagrams should live with your code.

What we build

@zenuml/core is an open-source JavaScript library, published on npm, that turns a small Markdown-inspired language into sequence diagrams. You write messages like A -> B: request and calls like A.method(); an ANTLR4-based parser reads that text into an ordered model of participants and messages, and a React 19 renderer paints the diagram — entirely in the browser, with no server round-trip. Your diagram source never has to leave the page it lives on.

Because the source is text, a diagram behaves like any other file in your repository. It diffs in a pull request, reverts cleanly, and stays close to the code it documents. That is the whole idea: diagrams as code, reviewed and versioned like everything else you ship. The language stays deliberately code-like, covering method calls with nested blocks, return-value assignment, async messages (A -> B: text), typed participants such as @Actor and @Database, inline // comments, == dividers ==, and the full UML fragment set: if/else (alt), while/for/loop, opt, par, critical, section/frame, try/catch/finally, and ref.

One DSL feeds two renderers — the interactive React 19 HTML renderer and a headless native-SVG renderer (renderToSvg()) — plus a server-safe parser subpath (@zenuml/core/parser), a zenuml CLI that renders .zenuml files to SVG or PNG, and a Langium-based language server.

The diagrams-as-code philosophy

Traditional diagram tools make you place every box and drag every line by hand. That work is slow, hard to review, and it rots the moment the underlying system changes. ZenUML takes the opposite view: the diagram is a description, not a drawing. You state what happens — who calls whom, in what order, under which condition — and the layout is computed for you. Change the text and the picture follows. It is the same idea that made infrastructure-as-code and docs-as-code stick: text is portable, searchable, and reviewable, and it keeps a diagram honest by making it cheap to update.

Where it runs

The same engine powers the ZenUML Live Editor at app.zenuml.com, the ZenUML Confluence app on the Atlassian Marketplace, a JetBrains IDE plugin, a Chrome extension, and Mermaid, which supports zenuml as a diagram type. Install the library from npm to embed the renderer in your own product, documentation site, or internal dashboard. One small language, many homes.

Open source, developed in the open

@zenuml/core is free and open source under the MIT license (© 2022 Peng Xiao), developed in public at github.com/mermaid-js/zenuml-core. The repository lives inside the mermaid-js GitHub organization: ZenUML is not a Mermaid competitor but an alternative sequence-diagram syntax available inside the Mermaid ecosystem — Mermaid's mermaid-zenuml package calls this library's renderer — and it is also usable standalone. Anyone can read the source, file an issue, propose a change, or fork it.

Contact & contributing

@zenuml/core is maintained by the ZenUML team together with its open-source contributors. The best place to report a bug, request a feature, or ask a question is the GitHub issue tracker, where discussion happens in the open and history is preserved. For anything that does not belong in a public issue — partnerships, security disclosures, or press — email us directly at hello@zenuml.com.