用 WebAssembly 在浏览器中渲染 Mermaid 终端图
Simon Willison11 天前
一位开发者在研究新近开源的 Grok CLI 编码代理代码库时，发现其中包含一个用 Rust 编写的 Mermaid 图表终端渲染器。该模块的定位是“自包含的 Mermaid 图表终端渲染器”，可以把 Mermaid 图形表示转换成适合终端显示的 Unicode 方框字符图。
出于实验目的，开发者尝试通过 WebAssembly 将这个 Rust 渲染能力搬到浏览器中运行，并制作了一个小工具：用户可以输入 Mermaid 图表代码，在页面中查看对应的 Unicode 文本图形输出。
示例流程图包含如下逻辑：
- 请求进入系统；
- 判断是否已认证；
- 未认证则返回
401 Unauthorized； - 已认证则继续检查限流；
- 限流通过后处理请求；
- 限流未通过则返回
429 Too Many Requests； - 请求处理后记录审计日志，并返回
200 OK。
这个实验展示了一个有趣的方向：原本用于终端环境的图表渲染能力，可以通过 WebAssembly 复用到浏览器中，让 Mermaid 图不仅能生成 SVG 或图片，也能输出便于复制、粘贴和在纯文本环境中展示的字符画版本。
对于经常在终端、Markdown、代码评审或文本日志中展示架构图和流程图的开发者来说，这类工具可能会很实用。