画流程图和差异对比

流程图用 mermaid 代码块，差异用 diff 代码块。语言标识本身就会映射到对应组件，不必包 widget:。数据图表用 widget:Chart，见文末。

节点标签、subgraph 标题请用双引号包起来，尤其是里面有中文或标点时。标签里不要写 Markdown（不要 **粗体**、不要反引号），部分渲染器会二次解析把图弄坏。

流程图

适合步骤、分支、流水线。

```mermaid
flowchart TD
  A["打开编辑器"] --> B["写下 Markdown"]
  B --> C["jdu push notes.md"]
```

从左到右把 TD 换成 LR。判断用菱形：C{"可见性"}。

适合多方协作：作者、CLI、站点、读者。

消息文本里不要写尖括号路径（例如 <lib>/x），会被当成 HTML 标签。改成自然语言：「该库的索引文件」。

适合文档生命周期。

鼠标移到图上，右上角有两个按钮：查看 Mermaid 源码、全屏。Esc 退出全屏。亮暗主题跟随页面右上角的主题切换。

```diff
- 旧行
+ 新行
  没改的行
```

渲染结果：

带语言后缀时，未改动行按该语言着色：

语言后缀写成 diff:ts、diff:python 均可。头部右侧的按钮切换并排 / 合并显示。

也可以当 Widget 写（适合 JSON 生成的场景），split: true 默认并排：

柱状、折线、面积、饼图四种。数据直接写在 JSON 里，不引图表库；颜色跟主题走，鼠标悬停看数值，下方「数据表」是同一份数据的表格形态。

单系列用 data 简写：

多系列用 categories + series，最多 6 个系列，自动出图例：

饼图看占比，最多六块，多出的合并进「其他」：

字段	必填	说明
`type`	是	`bar` / `line` / `area` / `pie`
`data`	否	单系列简写 `[{label, value}]`
`categories` + `series`	否	多系列；`series[].values` 与 `categories` 下标对应
`title` / `unit`	否	标题、单位
`stacked`	否	多系列柱状图堆叠
`showValues`	否	数值标在柱顶 / 折线末端
`height`	否	绘图区高度，默认 240

什么时候不用它：只有一个数字，用 Stat；类目超过七八个且都重要，用 Table；散点、双轴、地图这类复杂图表等 vega-lite 上线。

vega-lite、vega、canvas 三种语言标识已经预留，组件还没注册。现在会按普通代码块展示，不会打断整页。哪天上线之后，同一段 fence 会自动变成图表，已有文档不用改正文。