Mermaid to Unicode box art (grok-mermaid)

Simon Willison's Blog Tools
mermaid unicode box-art webassembly rust grok cli

Summary

Simon Willison built a browser-based tool using WebAssembly to convert Mermaid diagrams into Unicode box art, inspired by an open-sourced Rust component from the Grok CLI coding agent.

No content available
Original Article
View Cached Full Text

Cached at: 07/16/26, 01:40 AM

# Tool: Mermaid to Unicode box art (grok-mermaid) Source: [https://simonwillison.net/2026/Jul/16/grok-mermaid/](https://simonwillison.net/2026/Jul/16/grok-mermaid/) 16th July 2026 [Tool](https://simonwillison.net/elsewhere/tool/)[Mermaid to Unicode box art \(grok\-mermaid\)](https://tools.simonwillison.net/grok-mermaid) While[exploring the codebase](https://simonwillison.net/2026/Jul/15/grok-build/)for the newly open\-sourced Grok CLI coding agent I came across[xai\-grok\-markdown/src/mermaid\.rs](https://github.com/xai-org/grok-build/blob/b189869b7755d2b482969acf6c92da3ecfeffd36/crates/codegen/xai-grok-markdown/src/mermaid.rs), a "self\-contained terminal renderer for Mermaid diagrams" written in Rust\. I figured it would be fun to try that out in a browser via WebAssembly\. Here's[the prompt](https://github.com/simonw/tools/pull/293#issue-4897479396)I ran in Claude Code for web \(Fable 5\), and this is what the resulting tool looks like: ![Screenshot of a Mermaid diagram editor showing source code and rendered flowchart. The code reads: graph TD Start[Request received] --> Auth{Authenticated?} Auth -->|yes| Rate{Rate limit OK?} Auth -->|no| R401[401 Unauthorized] Rate -->|yes| H(Handle request) Rate -->|no| R429[429 Too Many Requests] H -.-> Log[Audit log] H ==> Resp[200 OK]. Below the code are controls labeled Max width: Fit output panel, Copy as text, and Copy link to this diagram. The rendered flowchart on a dark background flows top-down: Request received leads to Authenticated?, which branches yes to Rate limit OK? and no to 401 Unauthorized. Rate limit OK? branches yes to Handle request and no to 429 Too Many Requests. Handle request connects with a dotted arrow to Audit log and a thick arrow to 200 OK.](https://static.simonwillison.net/static/2026/grok-mermaid-wasm.png) Posted[16th July 2026](https://simonwillison.net/2026/Jul/16/)at 12:33 am

Similar Articles

Mermaid to ASCII art (mermaid-ascii)

Simon Willison's Blog

A web tool that converts Mermaid diagram syntax into ASCII and Unicode box-drawing art, rendered entirely in the browser using a Go library compiled to WebAssembly. Supports flowcharts, sequence diagrams, colors, and customizable output.

merman: Mermaid.js, but headless, in Rust

Lobsters Hottest

Merman is a headless Rust implementation of Mermaid.js that parses, lays out, and renders diagrams (SVG, raster, ASCII) without a browser or JavaScript runtime, targeting parity with Mermaid.js v11.15.0.

@wsl8297: Mermaid makes drawing flowcharts and sequence diagrams really easy, but the default rendering is far from beautiful, let alone usable in the terminal. I found a new open-source project on GitHub: beautiful-mermaid, which is specifically designed to make Mermaid rendering both beautiful and practical — it can export exquisite…

X AI KOLs Timeline

beautiful-mermaid is an open-source tool implemented in pure TypeScript that renders Mermaid diagrams as beautiful SVGs or terminal-friendly ASCII art. It supports 15 built-in themes and has zero DOM dependencies, making it suitable for use in AI-assisted programming.

Show HN: Free Mermaid Diagram Editor

Hacker News Top

A free, no-signup Mermaid diagram editor with live preview, instant SVG/PNG export, and shareable links that run entirely in the browser. Optionally connects to GitHub to auto-generate architecture diagrams from source code.