我把Grok Build里的终端Mermaid渲染器抽出来了

上周 Grok Build 开源的时候，我翻它的源码，发现了一个让我停下来细看的东西。

不是 agent loop，不是 Plan Mode，是一个藏在 crates/codegen/xai-grok-markdown/src/mermaid.rs 里的模块——5,237 行 Rust，零外部依赖，自包含的终端 Mermaid 渲染器。

它在终端里用 Unicode box-drawing 字符渲染 Mermaid 图表。flowchart、sequenceDiagram、classDiagram、stateDiagram、erDiagram，六种类型。

我把这个模块抽了出来，做成独立工具，叫 termermaid。

● ● ●

为什么这么做

Grok Build 的这部分代码是 Apache 2.0 许可证。技术上完全合规。

但更重要的是，这个模块本身就是自包含的——它不依赖 Grok Build 的 agent loop、不依赖 TUI 框架、不依赖 xAI API。它只做一件事：把 Mermaid 语法字符串渲染成 Unicode 字符画。

这正好是我一直在找的东西。

我之前每次要在终端里展示 Mermaid 图，要么调 mermaid-png 生成图片再传，要么开浏览器。termermaid 解决了这个问题——pipe 进 Mermaid 源码，pipe 出 ANSI 文本。

● ● ●

效果

一个简单的流程图：

$ echo 'graph TD
    A[Start] --> B{Check?}
    B -->|Yes| C[OK]
    B -->|No| D[Fail]' | termermaid

╭───────╮
│ Start │
╰───┬───╯
    │
    ▼
╭─────┼─────╮
│   Check?  │
╰───┼──┼────╯
    │  │
  Yes│  │No
    ▼  ▼
╭──────╮ ╭──────╮
│  OK  │ │ Fail │
╰──────╯ ╰──────╯

微服务架构：

$ cat arch.mmd | termermaid

╭──────╮   ╭──────────────╮   ╭───────────────╮
│ User │──▶│ API Gateway  │──▶│  Auth Service │
╰──────╯   ╰──────┬───────╯   ╰───────┬───────╯
                  │                   │
                  ▼                   ▼
          ╭──────────────╮   ╭──────────────╮
          │ Task Worker  │   │   Database   │
          ╰──────────────╯   ╰──────────────╯

● ● ●

实现细节

整个渲染管线分三层：

解析层（907 行）。处理 Mermaid 语法的完整解析：节点声明（各种括号形状——[]、()、{}、(())、[/\]）、边连接（-->、---、-.->、==>）、子图、HTML 实体解码、Markdown 标签剥离。支持五种图表类型的语法。

布局层（792 行）。拓扑排序（compute_ranks）确定节点层级，Barycenter 启发式（order_ranks）做交叉最小化，TD 放置（place_td）分配网格坐标。边路由用了 bus-based 正交算法——跨层级边分配到专用轨道，避免重叠。

渲染层。Canvas 抽象 + Unicode 制表符（╭╮╰╯ 圆角、┌┐└┘ 直角、│─┼ 连线）。用 unicode-width crate 正确处理 CJK 宽字符。渲染时优先显示显式内容（节点标签），线条字符作为背景。

还有一个 fallback 模式：不支持的图表类型（pie、gantt、gitgraph）不会报错，用框框把源码包起来展示。

● ● ●

怎么用

cargo install termermaid

# 从 stdin
echo 'graph TD; A-->B; B-->C' | termermaid

# 从文件
termermaid diagram.mmd

# 输出到文件
termermaid arch.mmd > arch.txt

也支持 Python（通过 maturin + PyO3）：

import termermaid
print(termermaid.render("graph TD; A-->B"))

● ● ●

当前状态

v0.1.0，Apache 2.0 许可证，代码在 GitHub：

github.com/alitrack/termermaid

flowchart 完全可用。classDiagram、stateDiagram、erDiagram 的解析器已就绪，渲染布局还在调。sequenceDiagram 是下一步。

这个项目只有 1,600 行 Rust（远小于原版的 5,237 行），因为我只移植了核心引擎，裁掉了 ratatui 集成、WASM 目标等 Grok Build 特有的东西。

● ● ●

为什么值得关注

不只是"又一个 Mermaid 工具"。

在 AI 编码代理这个赛道上，Grok Build 是目前唯一一个把 Mermaid 渲染做到终端里的。Codex、Claude Code、OpenCode——没有一个做了这件事。

AI 代理在终端里给你画架构图。这个能力独立出来后，任何 CLI 工具、任何 Jupyter notebook、任何 AI agent 都能在纯文本环境里展示图表。

这就是我把这个模块抽出来的原因。

它不是 Grok Build 最亮眼的功能。但它是 Grok Build 里最容易被低估的那个。