Mermaid 图表合集 - 蓝色大肥鱼

Mermaid 能把 Markdown 里的文字描述变成图表。下面用 Shirone 的内容工作流演示技术文章与项目笔记中常用的几类图表。

流程图#

流程图用来描述一个过程，包括判断分支以及回到先前步骤的路径。

flowchart TD
    accTitle: 文章发布流程
    accDescr: 一篇文章依次经过写作、校验、预览与构建才会发布。校验不通过则退回修改。
    Draft[编写 Markdown] --> Check{校验通过？}
    Check -->|否| Revise[修改文章]
    Revise --> Check
    Check -->|是| Preview[本地预览]
    Preview --> Build[构建静态页面]
    Build --> Publish[发布]

时序图#

时序图按时间顺序展示各参与方之间的协作。这个例子跟着一次 Swup 站内导航，从发起请求走到 Mermaid 渲染。

sequenceDiagram
    accTitle: 站内导航后的图表渲染
    accDescr: 读者发起导航，Swup 替换文章内容，Mermaid 渲染器再对新页面上的图表做增强。
    actor Reader as 读者
    participant Browser as 浏览器
    participant Swup
    participant Content as 文章区域
    participant Renderer as Mermaid 渲染器
    Reader->>Browser: 打开另一篇文章
    Browser->>Swup: 发起站内导航
    Swup->>Content: 替换页面内容
    Swup-->>Renderer: 触发 content:replace
    Renderer->>Content: 查找 Mermaid 容器
    Renderer-->>Browser: 插入适配主题的 SVG

实体关系图#

实体关系图为结构化数据建模，刻画作者、文章、标签与评论之间的关联。

erDiagram
    accTitle: 博客内容关系
    accDescr: 作者撰写文章，文章接收评论，并通过关联记录与多个标签相连。
    AUTHOR ||--o{ POST : writes
    POST ||--o{ COMMENT : receives
    POST ||--o{ POST_TAG : classified_by
    TAG ||--o{ POST_TAG : groups
    AUTHOR {
        string id PK
        string display_name
    }
    POST {
        string slug PK
        string title
        datetime published_at
        string author_id FK
    }
    COMMENT {
        string id PK
        string post_slug FK
        string body
    }
    TAG {
        string id PK
        string label
    }
    POST_TAG {
        string post_slug FK
        string tag_id FK
    }

类图#

类图用来表达软件设计中的职责划分、公开方法与依赖方向。

classDiagram
    accTitle: Markdown 渲染模块
    accDescr: 内容管线借助 Mermaid 插件生成降级标记，客户端渲染器随后把它增强为 SVG。
    class ContentPipeline {
        +render(markdown)
        +collectMetadata()
    }
    class MermaidPlugin {
        +transform(codeFence)
        +createFallback()
    }
    class DiagramRenderer {
        +initialize()
        +renderAll()
        +refreshTheme()
    }
    class ThemeTokens {
        +primary
        +surface
        +outline
    }
    ContentPipeline --> MermaidPlugin : uses
    DiagramRenderer --> MermaidPlugin : enhances output
    DiagramRenderer --> ThemeTokens : reads

状态图#

状态图展示一个对象在生命周期内的各种状态，以及推动状态迁移的事件。

stateDiagram-v2
    accTitle: 文章生命周期
    accDescr: 文章从草稿走到审核与发布，可能被退回修改，最终也可能归档。
    [*] --> Draft
    Draft --> InReview : submit
    InReview --> Draft : request changes
    InReview --> Published : approve
    Published --> Draft : retract
    Published --> Archived : archive
    Archived --> [*]

XY 图#

XY 图把柱形与折线放在同一套坐标轴上，用来比较数值与趋势。

xychart-beta
    accTitle: 六周的内容表现
    accDescr: 柱形表示归一化后的每周发布量，折线表示归一化后的读完率。
    title "六周的内容表现"
    x-axis "周" [1, 2, 3, 4, 5, 6]
    y-axis "相对得分" 0 --> 100
    bar [36, 52, 44, 68, 76, 84]
    line [48, 55, 62, 61, 73, 81]

饼图#

饼图用来紧凑地呈现各部分在整体中的占比。

pie showData
    accTitle: 文章主题占比
    accDescr: 工程类占四成，设计系统占两成五，其余由指南与随笔分摊。
    title 文章主题占比
    "工程" : 40
    "设计系统" : 25
    "指南" : 20
    "随笔" : 15

甘特图#

甘特图把任务、依赖与里程碑排布在日历时间轴上。

gantt
    accTitle: 主题发布计划
    accDescr: 发布计划从需求与交互设计出发，经过组件开发、测试，最后发布。
    title 主题发布计划
    dateFormat YYYY-MM-DD
    axisFormat %m/%d
    section 设计
    确认需求 :done, brief, 2024-05-06, 2d
    打磨交互 :done, interaction, after brief, 3d
    section 实现
    开发组件 :active, components, after interaction, 6d
    编写示例 :examples, after interaction, 4d
    section 校验
    自动化测试 :tests, after components, 3d
    发布 :milestone, release, after tests, 0d

思维导图#

思维导图把一个中心主题铺开成相关领域与支撑概念。

mindmap
  root((Shirone))
    内容体验
      Markdown
      搜索
      图表
    界面体系
      M3E 令牌
      响应式布局
      配色方案
    工程质量
      Astro Check
      Playwright
      无障碍

时间线#

时间线用来概述重要事件或阶段，不要求精确的日历时长。

timeline
    title Mermaid 支持的演进
    管线设计 : 识别 Mermaid 代码块
             : 保留源码降级
    客户端增强 : 按需加载运行时
               : 应用主题令牌
    可靠性 : 兼容 Swup 导航
           : 校验响应式与无障碍输出

用户旅程图#

用户旅程图把一次任务各阶段中的行为、参与方与体验评分合在一起看。

journey
    accTitle: 读者读懂一篇技术文章
    accDescr: 读者发现文章，结合正文与图表理解内容，然后继续探索相关话题。
    title 读者读懂一篇技术文章
    section 发现
      浏览文章列表: 4: Reader
      挑一个话题: 5: Reader
    section 理解
      阅读正文: 4: Reader
      查看关系图: 5: Reader
    section 继续
      打开相关文章: 4: Reader
      收藏页面: 3: Reader

Git 图#

Git 图展示一条功能分支在合入主线之前是如何推进的。

gitGraph
    accTitle: Mermaid 功能分支历史
    accDescr: 功能分支先加入渲染器与测试，再合入主分支准备发布。
    commit id: "base"
    branch mermaid
    checkout mermaid
    commit id: "add-renderer"
    commit id: "add-tests"
    checkout main
    merge mermaid id: "merge-mermaid"
    commit id: "release"

看板#

看板按工作流状态把任务分组，方便一眼看清当前进度。

kanban
  backlog[待办]
    docs[编写作者文档]
    examples[扩充示例数据]
  active[进行中]
    themes[验证主题适配]
  complete[已完成]
    fallback[源码降级]
    rendering[客户端渲染]

桑基图#

桑基图用连线的宽度表示流量或其他数量在节点之间的流转。

sankey-beta
Landing,Reading,720
Discovery,Reading,430
Reading,Explore,360
Reading,Topics,210
Reading,Outbound,140

每个示例都使用标准的 mermaid 代码块。服务端保留可读的源码标记，浏览器再把它增强成跟随当前主题的 SVG。主题切换或 Swup 导航到这篇文章时，图表都会重新渲染。

蓝色大肥鱼

流程图#

时序图#

实体关系图#

类图#

状态图#

XY 图#

饼图#

甘特图#

思维导图#

时间线#

用户旅程图#

Git 图#

看板#

桑基图#

继续阅读

换条路线

评论

蓝色大肥鱼

流程图#

时序图#

实体关系图#

类图#

状态图#

XY 图#

饼图#

甘特图#

思维导图#

时间线#

用户旅程图#

Git 图#

看板#

桑基图#

分享文章

沿着主题读

换条路线