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 # 带标签
同类工具对比
| 特性 | Mermaid | PlantUML | Graphviz | Draw.io |
|---|
| 语法难度 | 低 ⭐⭐ | 中 ⭐⭐⭐ | 高 ⭐⭐⭐⭐ | GUI |
| 渲染方式 | 浏览器 JS | 需要服务端 | 命令行 | GUI |
| GitHub 支持 | ✅ 原生 | ❌ 需插件 | ❌ | ❌ |
| 图表类型 | 20+ 种 | 最多 | 通用图 | 无限制 |
| Git 友好 | ✅ 纯文本 | ✅ | ✅ | ❌ XML |
| 最佳场景 | 文档中嵌图 | UML 详细图 | 复杂关系图 | 精确绘图 |
总结:Mermaid 是 2026 年技术文档中画图的首选方案。它的优势在于"文本即图表"——可以用 Git 管理版本、可以 diff、可以 review。GitHub 原生支持意味着 README 和 Issue 中直接写就能看到图。简单图用 Mermaid,复杂精确图用 Draw.io,两者互补。