Mermaid 图表测试 · 晴空小筑

这篇文章专门测试 Mermaid。每个小节先给 Markdown 用法，再给实际渲染效果。

支持标准 fenced code block 写法。可选参数写在代码块 meta 里：

align=left|center|right 控制图表对齐，默认居中。
zoom 开启滚轮缩放、拖拽平移，双击复位。
theme=default|neutral|dark|forest|base 覆盖单个图表的 Mermaid 主题。

Flowchart 流程图

用法：

```mermaid {align=left}
flowchart TD
  A[写 Markdown] --> B{是否包含图表}
  B -->|是| C[渲染 Mermaid]
  B -->|否| D[按普通正文显示]
  C --> E[输出 SVG]
  D --> F[完成]
  E --> F
```

效果：

Sequence 序列图

用法：

```mermaid
sequenceDiagram
  participant Author as 作者
  participant Astro as Astro
  participant Browser as 浏览器

  Author->>Astro: 写入 mermaid 代码块
  Astro->>Browser: 输出文章 HTML
  Browser->>Browser: Mermaid 渲染 SVG
  Browser-->>Author: 显示图表
```

效果：

Class 类图

用法：

```mermaid {theme=neutral}
classDiagram
  class Article {
    +String title
    +String slug
    +render()
  }
  class Diagram {
    +String source
    +renderSvg()
  }
  Article "1" --> "*" Diagram
```

效果：

State 状态图

用法：

```mermaid {align=right}
stateDiagram-v2
  [*] --> Draft
  Draft --> Preview: 保存
  Preview --> Published: 发布
  Preview --> Draft: 修改
  Published --> Archived: 归档
```

效果：

ER 实体关系图

用法：

```mermaid
erDiagram
  ARTICLE ||--o{ COMMENT : has
  ARTICLE }o--|| CATEGORY : belongs_to
  ARTICLE {
    string title
    string slug
    date published_at
  }
  COMMENT {
    string author
    string body
  }
```

效果：

Journey 用户旅程

用法：

```mermaid
journey
  title 写一篇文章
  section 构思
    整理主题: 4: 作者
    准备素材: 3: 作者
  section 发布
    编写 Markdown: 5: 作者
    本地预览: 4: 作者
    推送部署: 5: 作者
```

效果：

Gantt 甘特图

用法：

```mermaid
gantt
  title 文章渲染测试计划
  dateFormat  YYYY-MM-DD
  axisFormat  %m/%d

  section 内容
  准备测试文章 :done, content, 2026-06-06, 1d
  检查图表     :active, diagram, 2026-06-06, 1d

  section 发布
  构建验证     :build, 2026-06-06, 1d
```

效果：

Pie 饼图

用法：

```mermaid
pie showData
  title 文章内容构成
  "技术笔记" : 45
  "生活记录" : 32
  "测试页面" : 12
  "其他" : 11
```

效果：

Requirement 需求图

用法：

```mermaid
requirementDiagram
  requirement render_mermaid {
    id: 1
    text: Mermaid 图表需要在文章页渲染成 SVG
    risk: medium
    verifymethod: test
  }

  element article_runtime {
    type: script
  }

  article_runtime - satisfies -> render_mermaid
```

效果：

GitGraph 分支图

用法：

```mermaid
gitGraph
  commit id: "init"
  branch feature
  checkout feature
  commit id: "mermaid"
  commit id: "tests"
  checkout main
  merge feature
  commit id: "release"
```

效果：

Zoom 缩放测试

这个例子开启 zoom，可以滚轮缩放、拖拽平移，双击复位。

用法：

```mermaid {zoom}
flowchart LR
  A[输入 Markdown] --> B[Remark 插件]
  B --> C[HTML 占位结构]
  C --> D[浏览器加载 Mermaid]
  D --> E[渲染 SVG]
  E --> F[滚轮缩放]
  E --> G[拖拽平移]
  E --> H[双击复位]
```

效果：