Markdown Mermaid 图表示例

图表用 mermaid 代码块写，语法就是 Mermaid 官网那一套。构建时它先被转成一个占位容器，页面加载后由浏览器渲染成 SVG；成图可以点右上角放大，明暗主题切换时会自动重绘。下面每种图表都给一段最小可用的写法，跟着渲染结果对照就能上手。

流程图

最常用的一种。[] 是矩形、{} 是判断、() 是圆角，箭头上的文字写在 -- 文字 --> 里：

flowchart TD
    A[写一篇带图表的文章] --> B{需要画图吗}
    B -- 需要 --> C[写 mermaid 代码块]
    B -- 不需要 --> D[正常写正文]
    C --> E[浏览器渲染成 SVG]
    E --> F[点右上角的放大镜]

TD 是自上而下，也可以写 LR（从左到右）、BT、RL。

时序图

参与者用 participant 起别名，->> 是实线箭头、-->> 是虚线；autonumber 自动编号：

sequenceDiagram
    autonumber
    participant U as 读者
    participant P as 文章页
    participant M as Mermaid
    U->>P: 打开文章
    P->>M: 传入图表源码
    M-->>P: 返回 SVG
    P-->>U: 显示图表

类图

+ 表示 public、- 表示 private，--> 画依赖，冒号后面是关系标签：

classDiagram
    class Diagram {
      +String type
      +render() SVG
    }
    class Lightbox {
      +open(svg)
      +close()
    }
    Diagram --> Lightbox : 点击放大

状态图

[*] 是起点和终点，箭头上的文字用 : 描述 写：

stateDiagram-v2
    [*] --> Idle
    Idle --> Rendering: 页面加载
    Rendering --> Done: 渲染成功
    Rendering --> Failed: 语法错误
    Failed --> Rendering: 改好再试
    Done --> [*]

甘特图

dateFormat 决定日期怎么写，任务行是 名称: 状态, id, 开始日期, 时长，after a1 表示接在上一项之后：

gantt
    title 图表功能的排期
    dateFormat YYYY-MM-DD
    axisFormat %m-%d
    section 接入
    安装与配置: done, a1, 2026-10-01, 3d
    代码块转换: done, a2, after a1, 2d
    section 交互
    灯箱与遮罩: active, b1, 2026-10-06, 4d
    移动端适配: b2, after b1, 3d

饼图

showData 会把数值和百分比一起标出来，每行一条 "名称" : 数值：

pie showData
    title 文章里的图表类型分布
    "流程图" : 45
    "时序图" : 25
    "类图" : 15
    "其他" : 15

ER 图

||--o{ 表示「一 对 多」，实体下面的花括号里写字段，PK 标记主键：

erDiagram
    POST ||--o{ DIAGRAM : contains
    POST {
        string slug PK
        string title
    }
    DIAGRAM {
        string type
        string source
    }

几点使用经验

• 代码块语言写 mermaid，其它语言的代码块仍然交给 Expressive Code 高亮，两者互不影响。
• 渲染发生在浏览器里，所以图表越多，首屏之后浏览器要做的排版越多；一篇文章里放三五张通常没问题，几十张就该考虑拆篇。
• 主题跟随站点：切换明暗会整页重绘图表，配色不用自己维护。
• 点右上角放大：每张图右上角有一个放大镜按钮（图表本体不可点，选文字不会误触）。点开后是带遮罩的灯箱，弹窗始终在屏幕中央。灯箱左上角可以缩小、放大、恢复默认比例，也支持滚轮缩放与双指捏合；放大后拖动查看，松手位置会保持居中。×、Esc、点击遮罩都能关闭。
• 语法错误不会让构建失败：写错的图表会在原位显示 Mermaid 的错误信息，改好再刷新即可。
• 主题、是否跟随明暗、角标放大等开关都在 src/config/mermaid.ts。