beautiful-mermaid

Overview

Built by Craft for its own AI assistant, open-sourced in early 2026 (★11K+ since). It targets the friction people hit with the stock Mermaid renderer: presets that don't look professional, recolouring that means fighting CSS classes, no terminal output, and a heavy dependency tree for a simple diagram. Pure TypeScript, zero DOM dependencies, synchronous rendering — one source of text becomes either an SVG for the UI or an ASCII diagram for a terminal, across six types: flowchart, state, sequence, class, ER and XY chart.

Why it stands out

• ✓Two colours are enough: pass only background and foreground and every text level, connector and node stroke is derived with color-mix(); 15 built-in themes, any Shiki (VS Code) theme can be fed straight in, and theme switches go through CSS variables without a re-render
• ✓Dual output — vector diagrams in the UI, ASCII / Unicode box drawing in CLIs, from the same source text
• ✓Synchronous rendering with no DOM: no await, no flash, drops into a React useMemo; measured 113ms for 100 flowcharts
• ✓Two caveats from testing: nodes must sit on separate lines — the README's single-line "graph LR; A --> B" throws outright — and ASCII width is counted in code points, so CJK labels push the box borders out of alignment (Latin text is fine)
• ✓Maintenance: the npm package has stayed at 1.1.3 since 2026-02-26 and the last commit landed 2026-05-06 — the feature set looks stable, but don't expect new diagram types soon

Browse categories