Mermaid 图表渲染测试集

Mermaid 是一款基于 JavaScript 的图表生成工具，可以用类 Markdown 的文本语法绘制流程图、时序图、类图、甘特图等数十种图表。它让开发者无需离开文本编辑器就能创建专业的技术图表，非常适合嵌入文档和博客。官方文档：mermaid.ai/open-source/intro，GitHub 仓库：mermaid-js/mermaid。

这是一篇专门用来测试博客 Mermaid 渲染能力的文章。

如果下面每一段都能显示为图表，而不是普通代码块，就说明 mermaid 代码围栏已经被博客正确识别、加载和渲染。

基础图表

Class Diagram / 类图

源码：

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }

Flowchart / 流程图

源码：

flowchart TD
    A[写 Markdown] --> B{包含 mermaid 代码块?}
    B -- 是 --> C[remark 插件转换占位节点]
    B -- 否 --> D[按普通 Markdown 渲染]
    C --> E[浏览器按需加载 Mermaid]
    E --> F[渲染 SVG 图表]
    D --> G[生成静态页面]
    F --> G

Sequence Diagram / 时序图

源码：

sequenceDiagram
    participant User as 读者
    participant Page as 博客页面
    participant Mermaid as Mermaid Runtime

    User->>Page: 打开文章
    Page->>Page: 查找 data-mermaid-figure
    Page->>Mermaid: 按需加载本地脚本
    Mermaid-->>Page: 返回渲染 API
    Page->>Mermaid: run(nodes)
    Mermaid-->>User: 显示 SVG 图表

State Diagram / 状态图

源码：

stateDiagram-v2
    [*] --> RawMarkdown
    RawMarkdown --> HtmlPlaceholder: Astro build
    HtmlPlaceholder --> ScriptLoaded: 页面发现图表
    ScriptLoaded --> Rendered: Mermaid run
    Rendered --> Rerendered: 切换主题
    Rerendered --> Rendered

ER Diagram / 实体关系图

源码：

erDiagram
    POST ||--o{ TAG : has
    POST ||--o{ ASSET : uses
    POST {
        string title
        string description
        datetime published
        boolean draft
    }
    TAG {
        string name
        string slug
    }
    ASSET {
        string path
        string type
    }

项目与进度

Gantt / 甘特图

源码：

gantt
    title Mermaid 支持上线计划
    dateFormat  YYYY-MM-DD
    section 编译
    新增 remark 插件           :done,    a1, 2026-05-21, 1d
    转换 mermaid 代码块        :done,    a2, 2026-05-21, 1d
    section 运行时
    按需加载 Mermaid           :done,    b1, 2026-05-21, 1d
    浏览器渲染验证             :active,  b2, 2026-05-21, 1d

Pie Chart / 饼图

源码：

pie showData
    title 图表测试类型占比
    "结构关系" : 4
    "流程协作" : 3
    "计划统计" : 2
    "代码历史" : 1

Git Graph / Git 图

源码：

gitGraph
    commit id: "Markdown"
    branch mermaid
    checkout mermaid
    commit id: "remark"
    commit id: "runtime"
    checkout main
    merge mermaid
    commit id: "test-post"

Timeline / 时间线

源码：

timeline
    title Mermaid 渲染路径
    Markdown 阶段 : 编写 mermaid 代码块
    Astro 构建 : remark 插件转换 HTML
    浏览器阶段 : 本地 Mermaid 脚本渲染 SVG
    交互阶段 : 主题切换后重渲染

User Journey / 用户旅程图

源码：

journey
  title Mermaid test journey
  section Authoring
    Write code block: 5: Author
    Preview article: 4: Author
  section Publishing
    Build site: 5: CI
    Read diagram: 5: Reader

结构与系统

Mindmap / 思维导图

源码：

mindmap
  root((Mermaid))
    流程表达
      Flowchart
      Sequence
      State
    结构表达
      类图
      实体关系图
      思维导图
    项目表达
      Gantt
      GitGraph
      Timeline

Quadrant Chart / 象限图

源码：

quadrantChart
    title 文档图表选择
    x-axis 简单 --> 复杂
    y-axis 静态 --> 动态
    quadrant-1 架构说明
    quadrant-2 系统建模
    quadrant-3 快速草图
    quadrant-4 状态追踪
    Flowchart: [0.25, 0.35]
    Sequence: [0.55, 0.55]
    Class Diagram: [0.78, 0.68]
    Gantt: [0.62, 0.32]

Requirement Diagram / 需求图

源码：

requirementDiagram
    requirement render_mermaid {
        id: 1
        text: Mermaid code fences render as SVG
        risk: medium
        verifymethod: test
    }

    functionalRequirement lazy_load {
        id: 1.1
        text: Mermaid runtime loads only when diagrams exist
        risk: low
        verifymethod: inspection
    }

    render_mermaid - contains -> lazy_load

Architecture / 架构图

源码：

architecture-beta
  service browser(internet)[Browser]
  service app(server)[Astro App]
  service assets(disk)[Static Assets]
  browser:R --> L:app
  app:R --> L:assets

Block Diagram / 块图

源码：

block-beta
  columns 3
  frontend["Frontend"]
  api["API"]
  db[("Database")]
  frontend --> api
  api --> db

C4 / C4 架构图

源码：

C4Context
title Blog Mermaid Support
Person(reader, "Reader", "Reads posts")
System(blog, "Tech Blog", "Astro static site")
System_Ext(mermaid, "Mermaid Runtime", "Renders diagrams")
Rel(reader, blog, "Opens article")
Rel(blog, mermaid, "Loads when needed")

Ishikawa / 鱼骨图

源码：

ishikawa-beta
  Mermaid Rendering
  Content
    Valid syntax
    Fenced code blocks
  Build
    Remark plugin
    Static HTML
  Runtime
    Local script
    Theme rerender

Kanban / 看板

源码：

kanban
  todo[Todo]
    write[Write sample article]
    verify[Verify diagrams]
  done[Done]
    build[Build site]

数据与关系

Packet / 数据包图

源码：

packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment"

Radar / 雷达图

源码：

radar-beta
  axis Speed, Quality, Safety, DX
  curve Blog{4,5,4,5}
  curve Baseline{2,3,3,2}

Sankey / 桑基图

源码：

sankey-beta
Markdown,Remark,12
Remark,HTML,12
HTML,Mermaid,8
Mermaid,SVG,8

---
config:
  sankey:
    showValues: false
---
sankey-beta

Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,NGas,40.719
Gas reserves,NGas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
NGas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366

TreeView / 树形视图

源码：

treeView-beta
  Blog
    Content
      Markdown
      MDX
    Runtime
      Mermaid
      Search

Treemap / 矩形树图

源码：

treemap-beta
  "Blog"
    "Content": 40
    "Runtime": 30
    "Styles": 20

Venn / 韦恩图

源码：

venn-beta
  title Diagram overlap
  set Markdown
  set Mermaid
  union Markdown, Mermaid: 4

Wardley Maps / 战略地图

源码：

wardley-beta
  title Blog diagram strategy
  anchor Reader [0.95, 0.9]
  component Article [0.82, 0.65]
  component Runtime [0.55, 0.7]
  component CDN [0.35, 0.9]
  Reader -> Article
  Article -> Runtime
  Runtime -> CDN

XY / XY 图表

源码：

xychart-beta
  title "Verification count"
  x-axis [Build, Render, Verify]
  y-axis "Count" 0 --> 10
  bar [3, 8, 5]
  line [2, 7, 6]

ZenUML / ZenUML 时序图

源码：

zenuml
  Controller.Get(id) {
    Service.Get(id) {
      item = Repository.Get(id)
      if(item) {
        return item
      } else {
        return null
      }
    }
    return result
  }

ZenUML 是 Mermaid 的外部图表插件，需要运行时额外注册。