跳到主要内容

用 D2 画流程图：另一种「文本即图表」的打开方式

· 阅读需 3 分钟
sumshare
sumshare
coder

Mermaid 大家都很熟了，但「文本即图表」还有另一个后起之秀——D2（d2lang.com），一个用 Go 写的声明式图表语言。它把布局交给引擎（dagre / ELK）自动排版，写图就像写数据一样：节点、连线、容器，全部是声明。

这篇博客本身就在用 D2 画图——下面的流程图和应用架构图都是 ```d2 代码块在构建时编译成的 SVG。你可以直接看效果，再决定要不要入坑。

一张流程图​

D2 最基础的语法就是「节点 -> 节点」，连线上的说明用冒号跟在后面：

d2 diagram

对比 mermaid 的 flowchart，这里没有 graph TD、没有箭头语法 -->，就一个 ->。D2 会自动根据连线关系决定分层排版，你不用管左右上下。

嵌套容器：D2 的看家本领​

D2 最出彩的地方是容器（container）——用花括号把一组节点包进一个「框」，还能一层套一层。画系统架构图时，这种表达力是 mermaid 给不了的：

d2 diagram

注意两件事：

  1. 跨容器连线：api.services.notes -> db.pg 用点号路径直接指到嵌套节点，D2 会把它画成穿越容器边界的连线，而不是「框」之间的连接。
  2. 容器即命名空间：同一个 auth 出现在不同容器里不会冲突，因为完整路径是唯一的。

这篇博客是怎么渲染 D2 的​

本站用 remark-d2 插件在构建时把 ```d2 代码块编译成 SVG（产出到 static/d2/，页面引用 /d2/*.svg）。关键配置：

// docusaurus.config.js
const d2Options = {
  defaultD2Opts: ['--theme=301', '--dark-theme=200'], // 亮色 Terminal Grayscale / 暗色 Dark Mauve
  defaultImageAttrs: { alt: 'd2 diagram' },
};

所以：

  • 构建期需要机器上装 d2 二进制（brew install d2）
  • SVG 内嵌了 prefers-color-scheme 媒体查询——亮/暗模式下图会自动切换配色，不需要两套图
  • 和 mermaid 完全共存：```mermaid 走原来的主题，```d2 走 d2，互不干扰

总结​

D2 适合什么？容器嵌套、跨层连线的架构图，是它的主场；纯流程图的表达力也够用，语法比 mermaid 更干净。代价是要多装一个二进制、生态比 mermaid 小。对于自建博客这种「构建期编译、产物是纯静态 SVG」的场景，D2 是个很舒服的选择。