tools 工具 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,两者互补。