Beautiful Mermaid — serverless diagram rendering

★ 11.1K

beautiful-mermaid is an open-source TypeScript library that renders Mermaid diagrams as beautiful SVGs or ASCII/Unicode art with zero DOM dependencies and no external runtime requirements. Reach for it when an AI agent or script produces a Mermaid diagram that needs to be shown to a human — in a report, documentation, or UI; when there is no browser environment at all (server pipeline, CLI tool, terminal output); when the default Mermaid look feels unprofessional and you want full visual control. Supports 6 diagram types: Flowchart, State, Sequence, Class, ER, and XY charts (bar, line, combined). Rendering is fully synchronous — works with React useMemo() for zero-flash output; 15 built-in themes, full Shiki compatibility for any VS Code theme, and CSS custom properties for live theme switching without re-render. Install via npm, bun, or pnpm; core API is renderMermaidSVG() and renderMermaidASCII(). The ASCII engine is a TypeScript port of Alexander Grooff's mermaid-ascii. Direction: it renders Mermaid syntax into visual output — not the other way around, and not a general-purpose diagram converter. Works in any Node.js/TypeScript project and React apps. Accepts valid Mermaid syntax only; arbitrary graphics are outside its scope.