383 字
1 分钟
📊 Mermaid 常用语法速查表
📊 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 Typoramindmap
root((学习计划))
前端
HTML/CSS
JavaScript
React
后端
Node.js
数据库
工具
Git
Typora
四、饼图(Pie)
规则
pie:声明类型title 标题:图表标题"名称" : 数值:数据项
示例
pie title 月度支出占比 "房租" : 1500 "餐饮" : 1000 "购物" : 800 "其他" : 500pie
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, 5dgantt
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
}
七、使用小提示
- Typora 开启:文件 → 偏好设置 → Markdown → 勾选「图表」
- 格式:用
```mermaid开头,```结尾包裹代码 - 兼容:所有语法均适配 Typora、Mizuki(本博客)、GitHub
- 复制即用:直接复制上面的示例代码到编辑器即可渲染图表
—— 今天也是干货满满的火花花 💕
分享
如果这篇文章对你有帮助,欢迎分享给更多人!
📊 Mermaid 常用语法速查表
https://emilia520.icu/posts/mermaid-cheatsheet/ 部分信息可能已经过时
相关文章 智能推荐
1
📝 Markdown 完整语法学习笔记(Typora版)
技术教程 本公主把Markdown语法从头到尾学了一遍,整理了这份超详细的中文笔记!从标题、段落、列表到表格、代码块、数学公式、图表、链接、图片、表情...全网最全的Markdown语法速查手册,复制即用!
2
Linux操作大全(一):基础入门完全指南
Linux常见操作 从零开始认识Linux,了解什么是Linux、主流发行版对比、安装方法、桌面环境选择,适合纯小白的入门教程
3
Linux操作大全(二):文件与目录操作详解
Linux常见操作 详细讲解Linux文件和目录的各种操作,包括创建、复制、移动、删除、查找、压缩等,每个命令都有实际示例
4
Linux操作大全(三):用户与权限管理详解
Linux常见操作 深入讲解Linux用户管理、组管理、sudo权限、PAM认证等知识,让你彻底搞懂Linux的权限体系
5
Linux操作大全(九):系统监控与性能优化详解
Linux常见操作 全面讲解Linux系统监控工具、性能指标、优化技巧等知识,让你轻松掌控系统性能








