Beautiful Mermaid

Summary

Why We Built This Diagrams are essential for AI-assisted programming. When you're working with an AI coding assistant, being able to visualize data flows, state machines, and system architecture—directly in your terminal or chat interface—makes complex concepts instantly graspable. Mermaid is the de facto standard for text-based diagrams. It's brilliant. But the default renderer has problems: Aesthetics — Might be personal preference, but wished they looked more professional — Might be personal preference, but wished they looked more professional Complex theming — Customizing colors requires wrestling with CSS classes — Customizing colors requires wrestling with CSS classes No terminal output — Can't render to ASCII for CLI tools — Can't render to ASCII for CLI tools Heavy dependencies — Pulls in a lot of code for simple diagrams We built beautiful-mermaid at Craft to power diagrams in Craft Agents. It's fast, beautiful, and works everywhere—from rich UIs to plain terminals. The ASCII rendering engine is based on mermaid-ascii by Alexander Grooff. We ported it from Go to TypeScript and extended it Thank you Alexander for the excellent foundation! (And inspiration that this was possible.) Features 5 diagram types — Flowcharts, State, Sequence, Class, and ER diagrams — Flowcharts, State, Sequence, Class, and ER diagrams Dual output — SVG for rich UIs, ASCII/Unicode for terminals — SVG for rich UIs, ASCII/Unicode for terminals 15 built-in themes — And dead simple to add your own — And dead simple to add your own Full Shiki compatibility — Use any VS Code theme directly — Use any VS Code theme directly Live theme switching — CSS custom properties, no re-render needed — CSS custom properties, no re-render needed Mono mode — Beautiful diagrams from just 2 colors — Beautiful diagrams from just 2 colors Zero DOM dependencies — Pure TypeScript, works everywhere — Pure TypeScript, works everywhere Ultra-fast — Renders 100+ diagrams in under 500ms Installation npm install beau...