mobile wallpaper 1mobile wallpaper 2mobile wallpaper 3mobile wallpaper 4mobile wallpaper 5
383 字
1 分钟
📊 Mermaid 常用语法速查表
2026-05-19

📊 Mermaid 常用语法速查表#

本公主自己学了一整套 Mermaid 图表语法,整理成笔记啦~ 复制示例代码到 Typora 或本博客即可渲染图表! 🎉


一、流程图(Flowchart)#

方向控制#

写法含义
TD / TB从上到下(默认)
LR从左到右
RL从右到左
BT从下到上

节点样式#

写法样式
A[文字]矩形
A(文字)圆角矩形
A{文字}菱形(判断)
A>文字]斜角矩形

箭头样式#

写法含义
-->实线箭头
---实线无箭头
-.->虚线箭头
==>粗线箭头

示例#

graph TD
A[开始] --> B(输入内容)
B --> C{是否正确?}
C --是--> D[提交成功]
C --否--> E[重新输入]
E --> B
D --> F[结束]
graph TD A[开始] --> B(输入内容) B --> C{是否正确?} C --是--> D[提交成功] C --否--> E[重新输入] E --> B D --> F[结束]

二、时序图(Sequence)#

核心语法#

  • participant 别名 as 名称:定义参与者
  • ->>:实线同步箭头
  • -->>:虚线异步箭头
  • Note left of/right of 节点: 备注

示例#

sequenceDiagram
participant U as 用户
participant F as 前端
participant S as 服务器
U->>F: 提交登录请求
F->>S: 发送账号密码
S-->>F: 返回登录结果
F-->>U: 显示登录状态
Note right of S: 校验账号密码
sequenceDiagram participant U as 用户 participant F as 前端 participant S as 服务器 U->>F: 提交登录请求 F->>S: 发送账号密码 S-->>F: 返回登录结果 F-->>U: 显示登录状态 Note right of S: 校验账号密码

三、思维导图(Mindmap)#

规则#

  • mindmap:声明类型
  • 根节点:顶格写
  • 子节点:2空格缩进
  • 孙节点:4空格缩进

示例#

mindmap
root((学习计划))
前端
HTML/CSS
JavaScript
React
后端
Node.js
数据库
工具
Git
Typora
mindmap root((学习计划)) 前端 HTML/CSS JavaScript React 后端 Node.js 数据库 工具 Git Typora

四、饼图(Pie)#

规则#

  • pie:声明类型
  • title 标题:图表标题
  • "名称" : 数值:数据项

示例#

pie
title 月度支出占比
"房租" : 1500
"餐饮" : 1000
"购物" : 800
"其他" : 500
pie title 月度支出占比 "房租" : 1500 "餐饮" : 1000 "购物" : 800 "其他" : 500

五、甘特图(Gantt)#

规则#

  • gantt:声明类型
  • title 标题:图表标题
  • dateFormat YYYY-MM-DD:日期格式
  • 任务名 : 开始日期, 结束日期

示例#

gantt
title 项目开发排期
dateFormat YYYY-MM-DD
section 准备阶段
需求分析 : a1, 2026-05-20, 3d
方案设计 : after a1, 2d
section 开发阶段
前端开发 : 2026-05-25, 5d
后端开发 : 2026-05-25, 5d
gantt title 项目开发排期 dateFormat YYYY-MM-DD section 准备阶段 需求分析 : a1, 2026-05-20, 3d 方案设计 : after a1, 2d section 开发阶段 前端开发 : 2026-05-25, 5d 后端开发 : 2026-05-25, 5d

六、ER 关系图(数据库表)#

示例#

erDiagram
用户 ||--o{ 订单 : "下"
订单 }o--|| 商品 : "包含"
用户 {
int id
string name
}
订单 {
int order_id
int user_id
}
商品 {
int goods_id
string goods_name
}
erDiagram 用户 ||--o{ 订单 : "下" 订单 }o--|| 商品 : "包含" 用户 { int id string name } 订单 { int order_id int user_id } 商品 { int goods_id string goods_name }

七、使用小提示#

  1. Typora 开启:文件 → 偏好设置 → Markdown → 勾选「图表」
  2. 格式:用 ​```mermaid 开头,​``` 结尾包裹代码
  3. 兼容:所有语法均适配 Typora、Mizuki(本博客)、GitHub
  4. 复制即用:直接复制上面的示例代码到编辑器即可渲染图表

—— 今天也是干货满满的火花花 💕

分享

如果这篇文章对你有帮助,欢迎分享给更多人!

📊 Mermaid 常用语法速查表
https://emilia520.icu/posts/mermaid-cheatsheet/
作者
火花花
发布于
2026-05-19
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

目录