将 Mermaid 转为终端风格 Unicode 框图（grok-mermaid）
英文标题：Mermaid to Unicode box art (grok-mermaid)
我在浏览新开源的 Grok CLI 编码代理代码库时，发现了用 Rust 编写的“自包含终端 Mermaid 渲染器”。于是通过 WebAssembly 将其搬到了浏览器中，并展示了用 Claude Code 生成的结果工具。这个实验说明了将终端渲染逻辑移植到 Web 的可行性，也为开发者在无图形环境或终端工具中预览 Mermaid 图表提供了新途径。
打开原文相关 9.6 · 机会 3
80.3 KB
72.5 KB
中文
在探索新开源的 Grok CLI 编码代理代码库时，我偶然发现了 xai-grok-markdown/src/mermaid.rs，一个用 Rust 编写的“自包含终端 Mermaid 渲染器”。
我想通过 WebAssembly 在浏览器里试试它会很有趣。这是我在 Claude Code for web（Fable 5）中运行的提示词，下面是最终工具的效果：
![Mermaid 图表编辑器截图，显示了源代码和渲染后的流程图。代码内容为：graph TD Start[收到请求] --> Auth{已认证？} Auth -->|是| Rate{速率限制正常？} Auth -->|否| R401[401 未授权] Rate -->|是| H(处理请求) Rate -->|否| R429[429 请求过多] H -.-> Log[审计日志] H ==> Resp[200 OK]。代码下方有标签为 Max width: Fit output panel、Copy as text 和 Copy link to this diagram 的控件。深色背景上渲染出的流程图自上而下：收到请求流向已认证？，已认证？分支“是”到速率限制正常？，“否”到401未授权。速率限制正常？分支“是”到处理请求，“否”到429请求过多。处理请求通过虚线箭头连接到审计日志，粗箭头连接到200 OK。](https://static.simonwillison.net/static/2026/grok-mermaid-wasm.png)
English / 原文
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: