Beautiful Mermaid
Zero-DOM TypeScript Mermaid renderer with SVG and ASCII output
The showcase and playground for beautiful-mermaid, a Mermaid diagram renderer written by the Craft team as pure TypeScript with no DOM dependency, so it runs in a browser, in Node and in a terminal alike. It renders synchronously through renderMermaidSVG, offers an async variant and a parseMermaid structural parser, and emits either SVG with optional tooltips or ASCII/Unicode for CLI output. Themes are the selling point: 15 built-ins plus Shiki VS Code theme compatibility, driven by CSS custom properties so a theme swap needs no re-render, and a Mono Mode that derives a full scheme from just a background and foreground colour. The playground carries live samples across six diagram families - flowchart (24), sequence (16), class (16), ER (14), XY chart (10) and state (4).
npm install beautiful-mermaidPrefer this over upstream mermaid-js when you need to render a diagram outside a browser or without awaiting - the synchronous, DOM-free API means you can produce SVG inside a server handler or a build step, and renderMermaidASCII gives you a diagram inside terminal output where mermaid-js gives you nothing. Pair the CSS-variable themes with your own design tokens so diagrams follow light and dark without a re-render. Watch the scope: it covers six diagram families only, so Gantt, pie, mindmap and journey diagrams still need upstream Mermaid, and it pulls elkjs for layout, which is not a trivial dependency.
Why it is here. The first Mermaid renderer designed around agent and CLI output rather than a browser canvas, and the ASCII path makes diagrams legible in places a chart has never been.
- synchronous, zero-DOM rendering
- ASCII/Unicode terminal output
- 15 themes plus Shiki compatibility
- Mono Mode derives a scheme from two colours
- 10.9k stars, MIT
Verified 2026-08-15. HTTP 200. https://agents.craft.do/mermaid (themes, diagram families, sample counts), https://github.com/lukilabs/beautiful-mermaid (stars, MIT licence, API, install), https://registry.npmjs.org/beautiful-mermaid (v1.1.3 published 2026-02-26, deps elkjs and entities). Note: the depo title implies the page is the library; it is Craft's showcase for the lukilabs/beautiful-mermaid package.
