有些东西用文字讲很绕，画一张图最快。生成器现在支持 mermaid：把代码块的围栏语言标成 mermaid，里面照常写图表定义，页面加载时会自动渲染成矢量图。

下面拿三种常用图各演示一个，顺便当语法示例。

流程图

flowchart TD
  A[写下 markdown] --> B{围栏语言是 mermaid?}
  B -->|是| C[输出图容器 + pre.mermaid]
  B -->|否| D[照旧输出代码块]
  C --> E[浏览器端渲染成 SVG]
  D --> F[原文显示]

时序图

sequenceDiagram
  participant R as 读者
  participant P as 页面
  participant M as mermaid.js
  R->>P: 打开文章
  P->>M: 按需加载脚本
  M->>M: 解析图表定义
  M-->>P: 替换成内联 SVG
  P-->>R: 看到图

状态图

stateDiagram-v2
  [*] --> idle
  idle --> rendering: initialize()
  rendering --> done: 生成 SVG
  rendering --> failed: 语法有误
  failed --> idle: 保留源码可读

实现上的几个取舍

  • 只在有图表的页面加载脚本。mermaid 压缩后 3.4MB，放在列表页和标签页上纯属浪费，所以解析阶段就记下「这篇有没有图」，没有的页面一个字节都不下发。
  • 库跟站点一起发布，不走公共 CDN。内网和离线环境照样能显示，也不把读者的访问记录交给第三方。
  • 主题跟随系统。深色模式用暗色主题，浅色模式用默认主题——否则深色页面上会突然出现一块白底流程图。
  • 没有 JavaScript 时优雅降级。脚本没跑起来的话，看到的是图表源码而不是一片空白。

图比卡片宽的时候会等比缩到容器内，手机上不会被撑破。