一天两工具,只隔一个 Prompt

2026.07.17 13:22
Simon Willison 在 2026 年 7 月 16 日一天之内,借助 Claude Fable 5 分别将 Rust(Grok Build)和 Go(mermaid-ascii)两套 Mermaid 终端渲染库编译为 WebAssembly,推出了两款浏览器端工具。这种“LLM 辅助 → 跨语言编译 → WASM → 浏览器工具”的流水线,正在把终端工具浏览器化的成本压缩到极致——从开源代码到可用工具,中间只隔了一个 Prompt。

一天之内,同一个作者,用两种语言、两个开源库、两轮 LLM 辅助编码,推出了两款功能互补的浏览器端 Mermaid 渲染工具。这不是某个大公司的产品发布会,而是 Simon Willison 在 2026 年 7 月 16 日的一个“小动作”。

但这个小动作,恰好戳中了一个正在加速的趋势。

同一天的两款工具

故事的起点是 Grok Build 的开源。xAI 在 7 月中旬放出了 Grok CLI 编码代理的源码——一个 84.4 万行 Rust 代码的庞然大物。Simon Willison 翻代码库时,发现了一个藏在 xai-grok-markdown/src/mermaid.rs 中的文件:一个“自包含的 Mermaid 图表终端渲染器”,用 Unicode 框线绘图字符在终端里画出流程图。

“我琢磨着,把它用 WebAssembly 搬到浏览器里应该挺好玩。”

于是他在 Claude Code for Web(Fable 5)中跑了一个 Prompt,把这段 Rust 代码编译成 WASM,放到了 tools.simonwillison.net 上。这是第一款工具,他命名为 grok-mermaid。

但故事没有结束。就在同一天,他发现了一个更成熟的方案:AlexanderGrooff 开发的 Go 语言版 mermaid-ascii 库。这个库的功能更丰富——支持颜色、子图、标签边、序列图、注释和控制流片段。Simon Willison 再次让 Claude Fable 5 出手,把 Go 代码也编译成 WebAssembly,推出了第二款工具。

两款工具的差异肉眼可见。Rust 版只做黑白 Unicode 框线图,Go 版直接支持彩色输出。Simon Willison 在自己的博客里只写了一句话来评价这个版本:“This one includes support for colors!”两个工具都跑在浏览器里,不需要安装任何东西,打开网页就能用。

WebAssembly 的“终端工具浏览器化”范式

这两款工具的价值不在于它们本身有多复杂。Mermaid 渲染库早已存在,终端里跑 ASCII 图也不是新鲜事。真正有意思的是那个“把 Go/Rust 代码编译成 WASM 扔进浏览器”的操作模式。

这其实是 Simon Willison 在过去几年反复实践的一个模式。从 SQLite 的 WASM 版本,到 MicroPython 的 WASM 沙箱,再到如今一天两个 Mermaid 工具——他的技术栈里,“LLM 辅助 → 跨语言编译 → WASM → 浏览器工具”已经成了一条成熟的流水线。

这条流水线的核心杠杆是:终端工具的作者们已经用 Go 和 Rust 写好了功能完善的库,但它们的用户界面局限在命令行。WASM 提供了一座桥,让这些“终端原生”的库可以零成本地获得浏览器的 UI 能力——HTML 输入框、实时预览、一键分享链接。

WASM 正在把“在终端里跑得挺好”的工具,变成“在浏览器里也能用而且更好用”的工具,而这个过程的人力成本,正在被 LLM 编码助手压缩到几乎可以忽略。

Mermaid 的独特位置

Mermaid 是一个 diagrams as code 标准,用类似 Markdown 的文本语法描述流程图、时序图、甘特图等。它解决了技术人员的一个长期痛点:画图很麻烦,但写文字说明很简单。

GitHub 在 2022 年 2 月原生支持了 Mermaid 渲染,加上 Mermaid Live Editor 等在线工具的普及,这项标准已经成为技术文档和代码协作中事实上的图表语言。但有一个细分场景一直没被很好覆盖——终端和纯文本环境。

当你在 SSH 会话里看 README,或者在 CLI 工具的输出里需要画个流程图时,你没法渲染 SVG。你需要的是 ASCII 艺术。这正是 mermaid-ascii 这类库的用武之地。它把 Mermaid 语法解析为网格坐标系统,然后绘制成由 +-| 等字符组成的 ASCII 图形。

这个功能被搬进浏览器后,价值又被放大了。你可以写一段 Mermaid 代码,实时看到它对应的 ASCII 渲染效果,然后把它复制进代码注释、文档、邮件或者终端脚本里。不需要安装任何本地工具,不需要记住命令行参数,只需要一个浏览器标签页。

两个库的对比:Rust 与 Go 的技术选择

Rust 版(grok-mermaid)来自 Grok Build 仓库,是 xAI 团队为 CLI 编码代理开发的附属组件。它的风格更克制,只做 Unicode 框线渲染,不支持颜色。这符合 Grok CLI 的产品定位——终端输出需要保持简洁和可读性。

Go 版(AlexanderGrooff/mermaid-ascii)则是一个独立项目,243 次提交,26 个 Release,功能覆盖面更广。它支持 classDef 颜色定义、子图嵌套、标签边、序列图中的 Note 和片段控制。

从用户角度看,Go 版显然更实用。你可以在浏览器里写出带颜色的流程图,然后直接复制 ASCII 结果。但从生态角度看,Rust 版的存在同样有意义。它来自 Grok Build——一个 84.4 万行 Rust 的开源 CLI 编码代理。这意味着未来可能有更多 Grok Build 生态中的终端组件通过同样的 WASM 路径“浏览器化”。

Simon Willison 的“工具制造机”方法论

这不是 Simon Willison 第一次做这样的事情。翻看他的博客和 tools.simonwillison.net,你会看到一个持续不断的工具流——几乎每周都有新工具上线,从 HTML 表格提取器到 Zip 文件浏览器,从 Markdown 转 SVG 渲染器到二维码生成器。

核心在于三个成本的同步下降。

发现成本趋近于零。在开源代码库中翻找有价值的独立组件,这是他日常工作流的一部分。Grok Build 开源后,他花了几个小时就找到了藏在 84.4 万行代码中的 Mermaid 渲染器。

编译成本被 LLM 压缩。无论是 Rust 还是 Go,编译到 WASM 的过程基本由 Claude Code 完成,他只需要写一个 Prompt。他在 GitHub 上公开了 grok-mermaid 的 Prompt 记录,其他人可以完全复现这个流程。

部署成本同样极低。静态 HTML 加 JavaScript,托管在 GitHub Pages 或 Netlify 上,不需要服务器。Simon Willison 的 tools.simonwillison.net 本身就是这样一个纯静态工具集。

这三者叠加的效果是:一个开发者可以在一天之内,把一个藏在大公司开源仓库角落里的终端渲染器,变成一个全世界都能用的浏览器工具。

这种效率对传统软件开发意味着什么?过去,做一个浏览器版的 Mermaid ASCII 渲染器,你需要了解 WASM 编译工具链、配置 Go 的 GOOS=js GOARCH=wasm 交叉编译、处理 JavaScript 胶水代码、设计前端界面。现在,你只需要一个 Prompt 给 Claude Fable 5。

启示:WASM 流水线时代

如果你也在写技术博客、做开源项目或者维护技术文档,这个“WASM + LLM”的工具制造范式可能有两点值得关注。

第一,终端工具浏览器化的成本已经低到值得成为内容创作的标准环节。你写了一篇关于某款 CLI 工具的教程,可以顺手用 WASM 做一个浏览器 Demo 页面,让读者在线体验而不需要安装任何东西。这比贴一段终端录屏 GIF 更有说服力。

第二,Mermaid 作为“可渲染的纯文本”这一属性,在 AI 时代正在被重新估值。大模型输出的内容天然是文本,而 Mermaid 语法恰好是一种可以用文本描述、用工具渲染的图表格式。AI 可以直接生成 Mermaid 代码,然后由 mermaid-ascii 这样的工具渲染为 ASCII 或 SVG。GPT-5.6 系列(Luna、Terra、Sol)已经在代码生成上展示了飞跃式的进步,下一个被 LLM 大规模“吃掉”的领域,可能就是图表。

Simon Willison 在 2026 年 7 月 16 日做的两件事,看起来只是两个小工具。但它们暗示了一条正在成型的流水线——从开源代码到 WASM 到浏览器工具,中间只隔了一个 Prompt。当制造工具的工具本身变得足够便宜,每个人都能成为工具制造者。

作品声明:内容由AI生成