本文主要介绍使用Mermaid绘制常用图表的基础语法帮助大家快速入门在线Mermaid渲染工具Modern Mermaid1. 流程图流程图以关键词graph开头并在其后编写方向参数指定图表的布局方向常用方向参数有TB(Top to Bottom从上到下)BT(Bottom to Top从下到上)LR(Left to Right从左到右)RL(Right to Lef 从右到左)示例代码graph TB A[起床] -- B{查看冰箱} B -- |有食材| C[做三明治] B -- |无食材| D[叫外卖] C -- E[摆盘拍照] D -- E E -- F[享用早餐]渲染效果解析graph TB声明开始编写一个流程图布局方向为从上到下编写完流程图声明后建议接下来的代码缩进4个空格(或一个Tab)这样代码结构更清晰可读性更高但不缩进也能正常渲染A[起床] -- B{查看冰箱}每个节点需要一个ID(Identifier标识符)来在代码中表示该节点对象ID可以由字母、数字、下划线组成当节点数不超过26时可以按照流程顺序使用A-Z如果预估节点较多可以使用纯数字作为变量名(1~无限大)或者同级分支的不同节点可以使用B1、B2这样的变量名来节省字母大家可依据自己的习惯来命名[]表示矩形框{}表示菱形框--表示节点之间的流程走向流程走向和ID名称无关B -- |有食材| C[做三明治]B -- |无食材| D[叫外卖]C -- E[摆盘拍照]D -- EE -- F[享用早餐]箭头符号后添加用| |包裹的文本可以显示在流程线上节点只需在第一次创建的时候声明ID、节点形状、文本内容已经存在的节点可以只用ID代表该节点如果想要代码更易读也可以每次都加上节点形状、文本内容例如B{查看冰箱} -- |有食材| C[做三明治]B{查看冰箱} -- |无食材| D[叫外卖]C[做三明治] -- E[摆盘拍照]D[叫外卖] -- E[摆盘拍照]E[摆盘拍照] -- F[享用早餐]补充([])表示椭圆形框从上往下布局也可用TD(Top Down)表示和TB效果一样示例代码graph TD A([开始]) -- B{工作正常吗?} B --|是| C[太好了!] B --|否| D[调试] D -- E[修复问题] E -- B C -- F([结束])2. 时序图时序图以关键词sequenceDiagram开头 (我感觉翻译为序列图更合适重点不在时间)从上往下纵向阅读每个箭头是事件发生的先后顺序横向阅读箭头是参与者之间的消息交互 (事件)示例代码1sequenceDiagram participant 顾客 participant 手机 participant 咖啡店 顾客-手机: 下单 手机-咖啡店: 咖啡店--顾客:渲染效果解析1participant 顾客participant 手机participant 咖啡店participant关键词用来声明参与者渲染时会按照声明顺序从左往右排列角色如果不写则会按照代码中参与者出现的先后顺序从左往右排列participant关键词可以换成actor矩形图案会变成一个人形图案常用来表示人、使用者、用户等例如sequenceDiagram actor 顾客 participant 手机 participant 咖啡店 顾客-手机: 下单 手机-咖啡店: 咖啡店--顾客:渲染效果顾客-手机: 下单手机-咖啡店:咖啡店–顾客:在时序图中-表示实线箭头--表示虚线箭头由于时序图强调不同参与者之间的消息交互(事件)因此一般每个箭头上都有本次交互的动作描述在箭头目标参与者后面写一个英文冒号:在冒号后编写描述文本不需要文本可以空着示例代码2sequenceDiagram 顾客-手机: 下单 手机-咖啡店: 咖啡店--顾客: Note over 手机,咖啡店: 系统自动处理br无需人工操作渲染效果解析2可以使用Note关键词添加备注br表示插入换行语法格式Note [right of | left of | over] [参与者]: 备注内容Note over 手机,咖啡店: 系统自动处理br无需人工操作over可以让备注横跨在多个参与者中间 (显示在它们上面)用英文逗号分隔多个参与者right of和left of只能绑定单个参与者备注在目标参与者的左侧或右侧3. 甘特图甘特图是一种将活动与时间关联的可视化工具能够清晰地展示各个活动的持续时间甘特图以关键词gantt开头示例代码gantt title 新功能开发计划 dateFormat YYYY-MM-DD section 计划 需求分析 :done, req, 2025-04-22, 3d 设计 :design, after req, 5d section 开发 编码 :code, after design, 7d section 测试 单元测试 :unit, after code, 3d 集成测试 :integration, after unit, 4d section 部署 部署上线 :deploy, after integration, 2d渲染效果解析title 新功能开发计划dateFormat YYYY-MM-DD在开头使用title关键词声明标题使用dateFormat关键词声明时间格式section 计划 需求分析 :done, req, 2025-04-22, 3d 设计 :design, after req, 5d section 开发 编码 :code, after design, 7d section 测试 单元测试 :unit, after code, 3d 集成测试 :integration, after unit, 4d section 部署 部署上线 :deploy, after integration, 2d使用section关键词给不同任务阶段分组并编写任务内容语法格式section 分组名任务名 :任务标记(可选), 标识ID, 开始时间, 结束时间 或 任务时长不需要任务标记时可以不写任务标记可选的关键词有crit(critical关键任务)标记为红色色块done(已完成任务)标记为灰色色块milestone(里程碑)标记为菱形一般里程碑的任务时长设置为0d如果颜色没有变化大家可以切换渲染主题任务起止时间格式固定起止日期任务A :taskA, 2025-06-01, 2025-06-05起始时间 任务时长(天数)任务B :taskB, 2025-06-01, 3d跟着上个任务结束(after ID)常用格式任务C :task3, after taskB, 2d其它示例代码gantt title 项目开发时间线 dateFormat YYYY-MM-DD section 规划阶段 需求分析 :a1, 2024-01-01, 10d 设计原型 :a2, after a1, 15d section 开发阶段 后端API开发 :a3, 2024-01-26, 20d 前端UI开发 :a4, after a3, 15d 系统集成 :a5, after a4, 10d section 测试阶段 单元测试 :a6, after a5, 7d 集成测试 :a7, after a6, 5d section 部署阶段 生产环境部署 :a8, after a7, 5d4. 饼图饼图以关键词pie开头示例代码pie title 一天的时间分配 睡眠 : 8 工作 : 9 学习 : 2 娱乐 : 3 其他 : 2渲染效果颜色分不清可以换 Playful Doodle 主题解析title 一天的时间分配使用title关键词指定饼图的标题“睡眠” : 8“工作” : 9“学习” : 2“娱乐” : 3“其他” : 2使用类似Python字典中键值对的格式声明饼图中各扇区的数据值分类1 : 数值分类2 : 数值渲染时会自动计算百分比5. 思维导图思维导图以关键词mindmap开头示例代码mindmap root((今日新闻)) 财经 股票市场 科技股 能源股 宏观经济 GDP 数据 CPI 数据 科技 AI ChatGPT 生成式 AI 消费电子 手机发布 可穿戴设备 社会 城市事件 天气灾害 国际 国际关系 全球疫情渲染效果颜色区别不大的可以换 Playful Doodle 主题解析root表示根节点思维导图只有一个根节点((节点内容))表示圆形如果没有指定形状就会使用默认形状思维导图中可选的形状[节点内容]矩形(节点内容)圆角矩形((节点内容))圆形))节点内容((爆炸形状)节点内容(云朵形状通过缩进表示不同节点之间的层级关系
Mermaid极简教程
本文主要介绍使用Mermaid绘制常用图表的基础语法帮助大家快速入门在线Mermaid渲染工具Modern Mermaid1. 流程图流程图以关键词graph开头并在其后编写方向参数指定图表的布局方向常用方向参数有TB(Top to Bottom从上到下)BT(Bottom to Top从下到上)LR(Left to Right从左到右)RL(Right to Lef 从右到左)示例代码graph TB A[起床] -- B{查看冰箱} B -- |有食材| C[做三明治] B -- |无食材| D[叫外卖] C -- E[摆盘拍照] D -- E E -- F[享用早餐]渲染效果解析graph TB声明开始编写一个流程图布局方向为从上到下编写完流程图声明后建议接下来的代码缩进4个空格(或一个Tab)这样代码结构更清晰可读性更高但不缩进也能正常渲染A[起床] -- B{查看冰箱}每个节点需要一个ID(Identifier标识符)来在代码中表示该节点对象ID可以由字母、数字、下划线组成当节点数不超过26时可以按照流程顺序使用A-Z如果预估节点较多可以使用纯数字作为变量名(1~无限大)或者同级分支的不同节点可以使用B1、B2这样的变量名来节省字母大家可依据自己的习惯来命名[]表示矩形框{}表示菱形框--表示节点之间的流程走向流程走向和ID名称无关B -- |有食材| C[做三明治]B -- |无食材| D[叫外卖]C -- E[摆盘拍照]D -- EE -- F[享用早餐]箭头符号后添加用| |包裹的文本可以显示在流程线上节点只需在第一次创建的时候声明ID、节点形状、文本内容已经存在的节点可以只用ID代表该节点如果想要代码更易读也可以每次都加上节点形状、文本内容例如B{查看冰箱} -- |有食材| C[做三明治]B{查看冰箱} -- |无食材| D[叫外卖]C[做三明治] -- E[摆盘拍照]D[叫外卖] -- E[摆盘拍照]E[摆盘拍照] -- F[享用早餐]补充([])表示椭圆形框从上往下布局也可用TD(Top Down)表示和TB效果一样示例代码graph TD A([开始]) -- B{工作正常吗?} B --|是| C[太好了!] B --|否| D[调试] D -- E[修复问题] E -- B C -- F([结束])2. 时序图时序图以关键词sequenceDiagram开头 (我感觉翻译为序列图更合适重点不在时间)从上往下纵向阅读每个箭头是事件发生的先后顺序横向阅读箭头是参与者之间的消息交互 (事件)示例代码1sequenceDiagram participant 顾客 participant 手机 participant 咖啡店 顾客-手机: 下单 手机-咖啡店: 咖啡店--顾客:渲染效果解析1participant 顾客participant 手机participant 咖啡店participant关键词用来声明参与者渲染时会按照声明顺序从左往右排列角色如果不写则会按照代码中参与者出现的先后顺序从左往右排列participant关键词可以换成actor矩形图案会变成一个人形图案常用来表示人、使用者、用户等例如sequenceDiagram actor 顾客 participant 手机 participant 咖啡店 顾客-手机: 下单 手机-咖啡店: 咖啡店--顾客:渲染效果顾客-手机: 下单手机-咖啡店:咖啡店–顾客:在时序图中-表示实线箭头--表示虚线箭头由于时序图强调不同参与者之间的消息交互(事件)因此一般每个箭头上都有本次交互的动作描述在箭头目标参与者后面写一个英文冒号:在冒号后编写描述文本不需要文本可以空着示例代码2sequenceDiagram 顾客-手机: 下单 手机-咖啡店: 咖啡店--顾客: Note over 手机,咖啡店: 系统自动处理br无需人工操作渲染效果解析2可以使用Note关键词添加备注br表示插入换行语法格式Note [right of | left of | over] [参与者]: 备注内容Note over 手机,咖啡店: 系统自动处理br无需人工操作over可以让备注横跨在多个参与者中间 (显示在它们上面)用英文逗号分隔多个参与者right of和left of只能绑定单个参与者备注在目标参与者的左侧或右侧3. 甘特图甘特图是一种将活动与时间关联的可视化工具能够清晰地展示各个活动的持续时间甘特图以关键词gantt开头示例代码gantt title 新功能开发计划 dateFormat YYYY-MM-DD section 计划 需求分析 :done, req, 2025-04-22, 3d 设计 :design, after req, 5d section 开发 编码 :code, after design, 7d section 测试 单元测试 :unit, after code, 3d 集成测试 :integration, after unit, 4d section 部署 部署上线 :deploy, after integration, 2d渲染效果解析title 新功能开发计划dateFormat YYYY-MM-DD在开头使用title关键词声明标题使用dateFormat关键词声明时间格式section 计划 需求分析 :done, req, 2025-04-22, 3d 设计 :design, after req, 5d section 开发 编码 :code, after design, 7d section 测试 单元测试 :unit, after code, 3d 集成测试 :integration, after unit, 4d section 部署 部署上线 :deploy, after integration, 2d使用section关键词给不同任务阶段分组并编写任务内容语法格式section 分组名任务名 :任务标记(可选), 标识ID, 开始时间, 结束时间 或 任务时长不需要任务标记时可以不写任务标记可选的关键词有crit(critical关键任务)标记为红色色块done(已完成任务)标记为灰色色块milestone(里程碑)标记为菱形一般里程碑的任务时长设置为0d如果颜色没有变化大家可以切换渲染主题任务起止时间格式固定起止日期任务A :taskA, 2025-06-01, 2025-06-05起始时间 任务时长(天数)任务B :taskB, 2025-06-01, 3d跟着上个任务结束(after ID)常用格式任务C :task3, after taskB, 2d其它示例代码gantt title 项目开发时间线 dateFormat YYYY-MM-DD section 规划阶段 需求分析 :a1, 2024-01-01, 10d 设计原型 :a2, after a1, 15d section 开发阶段 后端API开发 :a3, 2024-01-26, 20d 前端UI开发 :a4, after a3, 15d 系统集成 :a5, after a4, 10d section 测试阶段 单元测试 :a6, after a5, 7d 集成测试 :a7, after a6, 5d section 部署阶段 生产环境部署 :a8, after a7, 5d4. 饼图饼图以关键词pie开头示例代码pie title 一天的时间分配 睡眠 : 8 工作 : 9 学习 : 2 娱乐 : 3 其他 : 2渲染效果颜色分不清可以换 Playful Doodle 主题解析title 一天的时间分配使用title关键词指定饼图的标题“睡眠” : 8“工作” : 9“学习” : 2“娱乐” : 3“其他” : 2使用类似Python字典中键值对的格式声明饼图中各扇区的数据值分类1 : 数值分类2 : 数值渲染时会自动计算百分比5. 思维导图思维导图以关键词mindmap开头示例代码mindmap root((今日新闻)) 财经 股票市场 科技股 能源股 宏观经济 GDP 数据 CPI 数据 科技 AI ChatGPT 生成式 AI 消费电子 手机发布 可穿戴设备 社会 城市事件 天气灾害 国际 国际关系 全球疫情渲染效果颜色区别不大的可以换 Playful Doodle 主题解析root表示根节点思维导图只有一个根节点((节点内容))表示圆形如果没有指定形状就会使用默认形状思维导图中可选的形状[节点内容]矩形(节点内容)圆角矩形((节点内容))圆形))节点内容((爆炸形状)节点内容(云朵形状通过缩进表示不同节点之间的层级关系
