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 : 撰写
    POST ||--o{ COMMENT : 接收
    POST ||--o{ POST_TAG : 分类关联
    TAG ||--o{ POST_TAG : 分组
    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 : 使用
    DiagramRenderer --> MermaidPlugin : 增强输出
    DiagramRenderer --> ThemeTokens : 读取

状态图#

状态图展示对象的生命周期，以及触发状态切换的事件。

stateDiagram-v2
    accTitle: 文章生命周期
    accDescr: 文章从草稿进入审核，再到发布；也可能退回修改，或最终归档。
    state "草稿" as Draft
    state "审核中" as InReview
    state "已发布" as Published
    state "已归档" as Archived
    [*] --> Draft
    Draft --> InReview : 提交
    InReview --> Draft : 要求修改
    InReview --> Published : 通过
    Published --> Draft : 撤回
    Published --> Archived : 归档
    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: 读者
      选择主题: 5: 读者
    section 理解
      阅读文章: 4: 读者
      查看关系图: 5: 读者
    section 继续
      打开相关文章: 4: 读者
      收藏页面: 3: 读者

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[客户端渲染]

桑基图#

桑基图通过连线宽度展示流量或其他数量在节点间的流动。

节点释义：Landing（落地页）、Discovery（发现）、Reading（阅读）、Explore（探索）、Topics（主题）、Outbound（外链）。

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

每个示例都使用标准的 mermaid 代码围栏。服务端保留可读的源码标记，浏览器将其增强为适配当前主题的 SVG。主题变化或 Swup 导航到本文时，图表会重新渲染。

蛋壳宇宙

Mermaid 图表示例集

流程图#

时序图#

实体关系图#

类图#

状态图#

XY 坐标图#

饼图#

甘特图#

思维导图#

时间线#

用户旅程#

Git 分支图#

看板#

桑基图#

继续阅读

换条路线

评论

蛋壳宇宙

Mermaid 图表示例集

流程图#

时序图#

实体关系图#

类图#

状态图#

XY 坐标图#

饼图#

甘特图#

思维导图#

时间线#

用户旅程#

Git 分支图#

看板#

桑基图#

分享文章

沿着主题读

换条路线

评论