Grok Mermaid 转 Unicode 终端图表工具：WebAssembly 版在线体验

一句话看懂

Simon Willison 将 xAI 开源的 Grok CLI 中的 Mermaid 终端渲染器编译为 WebAssembly，实现在浏览器中把 Mermaid 流程图转为 Unicode 字符画。

详细发生了什么

Simon Willison 在探索 xAI 新开源的 Grok 命令行编码助手代码库时，发现了一个用 Rust 编写的“自包含 Mermaid 图表终端渲染器”（位于 xai-grok-markdown/src/mermaid.rs）。他决定将其编译为 WebAssembly，在浏览器中运行。

他用 Claude Code for web（Fable 5）编写了一个提示，生成了一个在线工具：用户输入 Mermaid 语法（如 graph TD 流程图），工具会实时渲染出由 Unicode 方框字符组成的图表，并支持“Copy as text”复制纯文本。该工具已部署在 tools.simonwillison.net/grok-mermaid。

渲染效果示例：一个请求处理流程，从“Request received”到“Authenticated?”判断，再到“Rate limit OK?”分支，最终返回 200 OK 或错误码，全部用 Unicode 线条和方框表示。

中文圈视角

这个工具对中文用户有几点实用价值：

无需梯子，直接访问：工具部署在 Simon Willison 的个人站点，国内可正常打开。Mermaid 语法是标准格式，中文注释也能正常显示。
终端友好：对于经常在 SSH 终端、Vim/Neovim 或纯文本环境中工作的开发者，Unicode 字符画比图片更易嵌入文档、代码注释或日志。国内很多技术博客仍用截图贴流程图，这个工具可以生成可复制的文本版本。
国产平替：国内类似工具如“Mermaid Live Editor”（mermaid.live）主要输出 SVG/PNG，不支持 Unicode 字符画。这个工具填补了纯文本渲染的空白。不过它目前只支持基本流程图，不支持时序图、甘特图等复杂类型。
WebAssembly 性能：Rust 编译的 WASM 在浏览器中运行流畅，无需后端服务，隐私性好——所有计算在本地完成，不会上传 Mermaid 代码。

几条值得记住的细节

工具地址：https://tools.simonwillison.net/grok-mermaid
核心代码来自 xAI 开源的 Grok CLI 仓库中的 mermaid.rs 文件
使用 Claude Code for web (Fable 5) 生成，提示词公开在 GitHub PR 中
支持“Copy as text”复制纯文本 Unicode 图表，以及“Copy link”分享当前图表
目前仅支持 graph TD 等基本流程图语法，未涵盖所有 Mermaid 类型

一句话总结

一个将 Mermaid 流程图转为 Unicode 字符画的在线工具，适合终端、纯文本场景，无需安装，国内可直接访问。