跳转至

Mermaid图表代码 — Mermaid Markdown图表

一句话概述:Mermaid 让你用文本代码画流程图、序列图、类图、甘特图等,写在 Markdown 里就能自动渲染,GitHub/GitLab/Obsidian/Notion 原生支持,让图表也能用 Git 管理版本。

核心知识点速查表

概念白话解释
Mermaid用文字描述图表,浏览器自动渲染成图
流程图flowchart,用箭头连接不同步骤
序列图sequenceDiagram,展示组件之间的交互顺序
类图classDiagram,展示类和类之间的关系
甘特图gantt,展示项目时间线
ER图erDiagram,展示数据库表结构和关系

当前版本信息(2026年)

信息详情
支持平台GitHub、GitLab、Notion、Obsidian、Typora、VS Code
图表类型20+ 种
在线编辑器https://mermaid.live
官网https://mermaid.js.org
npm 下载80,000+ 次/周
新增特性Wardley Maps、30种新流程图形状

安装配置

在线使用(零配置)

# Mermaid Live Editor:https://mermaid.live
# 左边写代码,右边实时预览,可导出 PNG/SVG

# GitHub:直接在 Markdown 文件中写 mermaid 代码块
# GitLab:同样支持
# Obsidian:内置支持

网页集成

<!-- 在 HTML 中使用 Mermaid -->
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });  // 页面加载时自动渲染
</script>

<!-- 图表放在 pre.mermaid 或 div.mermaid 中 -->
<pre class="mermaid">
graph TD
    A[开始] --> B[处理]
    B --> C[结束]
</pre>

VS Code 插件

# 搜索安装 "Markdown Preview Mermaid Support"
# 在 Markdown 预览中直接渲染 Mermaid 图表

基本使用

流程图(Flowchart)

```mermaid
flowchart TD
    A[开始] --> B{数据质控通过?}
    B -->|是| C[序列比对]
    B -->|否| D[重新测序]
    C --> E[物种注释]
    E --> F[功能分析]
    F --> G[统计分析]
    G --> H[生成报告]
    D --> A

    %% 样式设置
    style A fill:#e1f5fe
    style H fill:#c8e6c9
    style D fill:#ffcdd2
```
# 方向控制:
# TD/TB — 从上到下
# BT    — 从下到上
# LR    — 从左到右
# RL    — 从右到左

# 节点形状:
# [文本]    — 矩形
# (文本)    — 圆角矩形
# {文本}    — 菱形(判断)
# ((文本))  — 圆形
# ([文本])  — 体育场形
# [[文本]]  — 子程序
# [(文本)]  — 圆柱形(数据库)

# 连线样式:
# -->   — 实线箭头
# ---   — 实线无箭头
# -.->  — 虚线箭头
# ==>   — 粗线箭头
# -->|文本| — 带标签的线

序列图(Sequence Diagram)

```mermaid
sequenceDiagram
    participant 用户
    participant 前端
    participant API
    participant 数据库

    用户->>前端: 提交分析请求
    前端->>API: POST /analysis
    API->>数据库: 查询样本数据
    数据库-->>API: 返回数据
    API->>API: 运行分析流程
    API-->>前端: 返回结果
    前端-->>用户: 显示分析结果

    Note over API,数据库: 这里可能需要几分钟
```

ER 图(数据库关系图)

```mermaid
erDiagram
    SAMPLE ||--o{ SEQUENCE : "包含"
    SAMPLE {
        int sample_id PK
        string name
        string source
        date collection_date
    }
    SEQUENCE {
        int seq_id PK
        int sample_id FK
        string platform
        int read_count
    }
    SAMPLE ||--o{ TAXONOMY : "注释"
    TAXONOMY {
        int tax_id PK
        int sample_id FK
        string species
        float abundance
    }
```

甘特图(项目时间线)

```mermaid
gantt
    title 宏基因组分析流程时间线
    dateFormat  YYYY-MM-DD

    section 数据预处理
    样本采集           :done, a1, 2026-01-01, 7d
    DNA提取             :done, a2, after a1, 3d
    建库测序           :active, a3, after a2, 14d

    section 生信分析
    质控与过滤         :b1, after a3, 2d
    宿主序列去除       :b2, after b1, 1d
    序列组装           :b3, after b2, 3d
    物种注释           :b4, after b3, 2d

    section 数据分析
    多样性分析         :c1, after b4, 3d
    差异分析           :c2, after b4, 3d
    报告撰写           :c3, after c1, 5d
```

思维导图(Mindmap)

```mermaid
mindmap
  root((生物信息学))
    基因组学
      全基因组测序
      外显子组测序
      宏基因组
    转录组学
      RNA-seq
      scRNA-seq
      空间转录组
    蛋白质组学
      质谱分析
      蛋白质结构预测
    工具与数据库
      NCBI
      UniProt
      KEGG
```

高级用法

类图

```mermaid
classDiagram
    class Pipeline {
        -samples: List
        -config: Dict
        +run()
        +validate()
    }
    class QualityControl {
        +filter_reads()
        +trim_adapters()
    }
    class Assembly {
        +assemble()
        +evaluate()
    }
    Pipeline --> QualityControl : uses
    Pipeline --> Assembly : uses
```

状态图

```mermaid
stateDiagram-v2
    [*] --> 提交
    提交 --> 排队
    排队 --> 运行中
    运行中 --> 成功 : 完成
    运行中 --> 失败 : 出错
    失败 --> 排队 : 重试
    成功 --> [*]
```

Markdown 字符串(富文本标签)

```mermaid
flowchart LR
    A["`**质控报告**
    _FastQC + MultiQC_`"] --> B["`**比对结果**
    reads: 1,000,000
    mapped: 95%`"]
```

常见报错与解决

问题原因解决方案
图表不渲染平台不支持或版本太旧检查平台 Mermaid 版本支持
语法错误缩进或关键字拼错在 mermaid.live 中调试
中文乱码字体问题添加 %%{init: {'theme':'default'}}%%
图太大被截断节点太多拆分成多个小图
GitHub 不渲染代码块格式错误确保用 ```mermaid 开头

速查表

# ===== 图表类型 =====
flowchart TD      # 流程图(上到下)
flowchart LR      # 流程图(左到右)
sequenceDiagram   # 序列图
classDiagram      # 类图
erDiagram         # ER图
gantt             # 甘特图
stateDiagram-v2   # 状态图
pie               # 饼图
mindmap           # 思维导图
timeline          # 时间线
gitgraph          # Git 提交图
block-beta        # 块图

# ===== 流程图节点 =====
A[矩形]  B(圆角)  C{菱形}  D((圆形))  E[(数据库)]

# ===== 流程图连线 =====
A --> B            # 实线箭头
A --- B            # 实线无箭头
A -.-> B           # 虚线箭头
A ==> B            # 粗线箭头
A -->|标签| B       # 带标签

同类工具对比

特性MermaidPlantUMLGraphvizDraw.io
语法难度低 ⭐⭐中 ⭐⭐⭐高 ⭐⭐⭐⭐GUI
渲染方式浏览器 JS需要服务端命令行GUI
GitHub 支持✅ 原生❌ 需插件
图表类型20+ 种最多通用图无限制
Git 友好✅ 纯文本❌ XML
最佳场景文档中嵌图UML 详细图复杂关系图精确绘图

总结:Mermaid 是 2026 年技术文档中画图的首选方案。它的优势在于"文本即图表"——可以用 Git 管理版本、可以 diff、可以 review。GitHub 原生支持意味着 README 和 Issue 中直接写就能看到图。简单图用 Mermaid,复杂精确图用 Draw.io,两者互补。