Simon Willison 的博客
赞助商：Atlassian — 给你的智能体一个计划，而非一条提示词。全新的 Jira 功能为 AI 原生软件开发解锁了完整上下文。现在可以直接从 Jira 将任务分配给 Claude、Cursor 或 GitHub Copilot。了解更多
工具：Mermaid 转 Unicode 字符画（grok-mermaid）— 将 Mermaid 图表语法转换为终端风格的 Unicode 字符画，完全在浏览器中通过 WebAssembly 渲染。该工具支持流程图、时序图、状态图、类图和 ER 图，其他图表类型则会回退为带边框的源码列表。你可以调整输出宽度、将渲染后的图表复制为文本，或生成一个可分享的图表链接。
在探索新近开源的 Grok CLI 编码智能体的代码库时，我发现了 xai-grok-markdown/src/mermaid.rs，这是一个用 Rust 编写的“Mermaid 图表自包含终端渲染器”。
我想，通过 WebAssembly 在浏览器中尝试一下应该会很有趣。以下是我在 Claude Code for web（Fable 5）中运行的提示词，以及最终工具的样子：
发布于 2026 年 7 月 16 日 12:33 am
Simon Willison’s Weblog
Sponsored by: Atlassian — Give your agents a plan. Not a prompt. New Jira capabilities unlock full-context for AI-native software development. Assign tasks to Claude, Cursor, or GitHub Copilot, now directly from Jira. Learn more
ToolMermaid 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:
Posted 16th July 2026 at 12:33 am