xAI 开源 Grok CLI 代码库中发现 Mermaid 转 Unicode 框图工具
xAI 开源的 Grok CLI 编码智能体代码库中包含一个用 Rust 编写的 Mermaid 图表示例终端渲染器 `xai-grok-markdown/src/mermaid.rs`。开发者通过 Claude Code for web (Fable 5) 将其编译为 WebAssembly，实现在浏览器中运行该工具。
Simon 从 Grok 源码里扒出终端 Mermaid 渲染器，用 Wasm 带到浏览器，生成 Unicode 图，开发者画流程图的轻量选择。
Tool Mermaid to Unicode box art (grok-mermaid) — Convert Mermaid diagram syntax into terminal-style Unicode box-drawing art rendered entirely in your browser using WebAssembly. The tool supports flowcharts, sequence, state, class, and ER diagrams, with other diagram types falling back to a framed source listing. You can adjust the output width, copy the rendered diagram as text, or generate a shareable link to your diagram.
While exploring the codebase for the newly open-sourced Grok CLI coding agent I came across 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 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)
来源：Simon Willison 博客 · simonwillison.net