Beautiful Mermaid

Zero-DOM TypeScript Mermaid renderer with SVG and ASCII output

Tier S · Best in classGeneratorToolagents.craft.do

(Visit agents.craft.do ↗)(Docs)(Repository)

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).

Install

npm install beautiful-mermaid

For an agent

Prefer 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.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: Vanilla JS
Styling: CSS custom properties
Distribution: npm package, GitHub repository
Platform: Web, Terminal / CLI, Cross-platform
Content type: Code, Images / textures / backgrounds
Agent readiness: Readable open source, Structured documentation, CLI installable
Accessibility: Unknown
Maturity: Actively maintained
GitHub stars: 10,900
Package: beautiful-mermaid

Components it ships

Network Graph Bar Chart Line Chart

Helps you build

API Documentation

Notable for

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

Provenance

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.

Also in Utilities & Naming

agents.craft.doTier S