← Spell Book

beautiful-mermaid

ai-tools

Spell Rating
🔮🔮🔮○○
Pricing
open-source
Difficulty
intermediate

Best For

Frontend developers rendering Mermaid diagrams in React who are tired of mermaid.js DOM dependency and async flicker. Also, AI agent developers who need structured diagrams in the terminal with no good options today. If your diagram needs fall within the six supported types (Flowchart, Sequence, Class, ER, State, XY Chart), this tool directly improves the development experience.

How I Actually Use It

The core API is one function: renderMermaidSVG(text, options) returns an SVG string synchronously. Use it inside React's useMemo() directly, no flicker, no useEffect waterfall. The theme system needs only a background and foreground color, everything else is derived via color-mix(). To sync with your VS Code theme, fromShikiTheme() handles it in one call. For terminal scenarios, renderMermaidASCII() outputs Unicode box-drawing character diagrams.

Where It Is Strong

  • Fully synchronous rendering. Achieved by intercepting ELK.js FakeWorker setTimeout(0) callbacks. True zero-DOM rendering
  • Install size under 2MB with only elkjs and entities as dependencies. Compare mmdc which requires Puppeteer/Chromium at ~300MB
  • 15 built-in themes (Tokyo Night, Catppuccin, Dracula, Nord, etc.) with visual quality far beyond native mermaid.js
  • ASCII rendering engine uses A* pathfinding for edge routing. No competing solution for terminal diagrams

Where It Fails

  • Only supports 6 diagram types. Gantt, Mindmap, Timeline, and Git Graph are missing. Continue using mmdc for those
  • CJK characters have double-width alignment issues in ASCII mode. Avoid for Chinese/Japanese/Korean terminal diagrams
  • SVG output used with dangerouslySetInnerHTML requires trusted Mermaid syntax input

Pricing, Difficulty, and Risk

Free, MIT license. Install via npm. Medium difficulty, requires Mermaid syntax knowledge and basic SVG understanding. Main risk is incomplete diagram type coverage and the project being only 4 months old with potential API changes. Craft Docs backing and 10,000+ stars are positive signals.

Verdict

Fills the gap where you need Mermaid syntax compatibility, zero DOM dependency, synchronous rendering, and polished themes. If your diagram needs fit the 6 supported types, use it now. Otherwise, watch for v1.2.x to add Timeline and Mindmap before evaluating a full switch from mmdc.

Source