Visualizing Mermaid diagrams usually requires a heavy setup: a headless browser (Puppeteer/Playwright), SVG-to-image conversion, or a web preview. That's fine for documentation sites, but it's overkill for TUI apps, CI logs, or quick terminal previews.
The Solution is a small engine (<= 1000 LOC) that uses a deterministic grid-based layout to render diagrams using box-drawing characters. Key Features
- Intelligent Routing: It uses corner characters (┌, ┐, └, ┘) for orthogonal paths.
- Topological Layering: Attempts a readable, structured layout.
- Support for Chained Edges: A --> B --> C works out of the box.
- Zero Heavy Dependencies: No Mermaid internals, no Chromium, just pure TypeScript/JavaScript. With commander for the CLI, not the MermaidTUI library
I wanted a way to see high-quality diagrams in my CLI tools quickly, it’s great for SSH sessions where you can’t easily open an SVG. I was initially embedding this within a cli tool I’m working on and figured I’d extract out a library for others to use. I also initially used regex to parse, but now I made the parser a bit more robust. I'd love to hear your thoughts on the layout engine or any specific Mermaid syntax you'd like to see supported next!
GitHub: https://github.com/tariqshams/mermaidtui
npm i mermaidtui
No comments yet.
