当前位置: 首页 > news >正文

Mermaid 语法

Mermaid 是一种通过文本描述生成图表的工具,支持多种图表类型(如流程图、时序图、类图等)。不同图表类型的​​图形符号​​(节点、连接线、子图等)有特定的语法规则。以下是最常用图表类型的符号说明及示例:


​一、流程图(Flowchart)​

流程图是最基础的图表类型,用 graph 关键字声明,支持​​自上而下(TD)​​或​​自左向右(LR)​​等方向。

​1. 图表方向声明​

  • graph TD:自上而下(Top-Down)的流程图(默认方向)。
  • graph LR:自左向右(Left-Right)的流程图。
  • graph BT:自底向上(Bottom-Top)。
  • graph RL:自右向左(Right-Left)。

​2. 节点(Node)符号​

节点是流程图的基本单元,用 标识符["节点文本"]标识符(节点文本) 格式定义,不同符号表示不同形状:

符号/语法形状示例说明
A["文本"]矩形(默认)A["开始"]最常用,适合表示步骤、事件。
A([文本])圆角矩形A([处理])强调流程中的处理步骤(如计算、操作)。
A{(文本)}菱形(决策节点)A{判断条件?}用于条件判断(如 if/else 分支)。
A>/文本/]六边形A>/开始循环/]表示循环或迭代(非标准形状,需确认Mermaid版本支持)。
A:::子图内节点(需配合 subgraphsubgraph 子图名 A::: 子图节点定义子图内的节点(通过样式类区分)。
A["文本<br/>换行"]带换行的矩形A["步骤1<br/>子步骤"]<br/> 实现文本换行(HTML语法)。

​3. 连接线(Edge)符号​

连接线用于关联节点,用 起点 --> 终点 格式定义,支持不同箭头和样式:

符号/语法含义示例
A --> B默认实线箭头(正向)开始 --> 处理
`A -->条件B`
`A -->条件B`
A ~~~> B虚线箭头准备 -->~~~> 清理
A ==> B粗实线箭头关键步骤 ==> 下一步
A --> B:::class带样式的箭头(需配合 classDef自定义样式(如颜色、字体)。
A -.-> B点线箭头可选步骤 -.-> 备用流程

​4. 子图(Subgraph)​

subgraph 定义子图,用于分组节点(如模块、阶段):

graph TDsubgraph 阶段1["数据准备"]A["读取文件"] --> B["清洗数据"]endsubgraph 阶段2["数据处理"]C["分析数据"] --> D["生成报告"]endB --> C

​5. 特殊节点​

符号/语法用途示例
note left of A: 文本左侧注释(贴在节点A左侧)note left of A: 注意参数!
note right of A: 文本右侧注释note right of B: 记录日志
note top of A: 文本顶部注释note top of C: 开始执行
note bottom of A: 文本底部注释note bottom of D: 结束

​二、时序图(Sequence Diagram)​

时序图用于描述对象间的交互顺序,用 sequenceDiagram 声明,核心符号包括​​参与者(Participant)​​、​​消息(Message)​​等。

​1. 参与者(Participant)​

participant 标识符 as 别名 定义交互对象:

sequenceDiagramparticipant 用户 as 用户端participant 服务端 as 服务器

​2. 消息(Message)​

用箭头表示对象间的消息传递,支持不同类型:

符号/语法含义示例
用户->>服务端: 请求数据普通实线箭头(同步消息)用户->>服务端: 登录请求
用户-->>服务端: 异步通知虚线箭头(异步消息)服务端-->>用户: 返回结果
服务端->>数据库: 查询自定义参与者(如数据库)服务端->>DB: 执行SQL
用户->>用户: 提示输入自己到自己的消息(循环反馈)用户->>用户: 输入密码
alt 条件条件分支(if-else)alt 验证成功
else 其他条件条件分支的另一情况else 验证失败
end结束条件分支end
loop 循环条件循环结构loop 3次
note right of 用户: 提示参与者右侧注释note right of 用户: 超时处理

​三、类图(Class Diagram)​

类图用于描述类的结构、属性、方法及类间关系,用 classDiagram 声明。

​1. 类定义​

class 标识符 { ... } 定义类,内部用 +(public)、-(private)、#(protected)标记成员:

classDiagramclass 用户 {+姓名: string-密码: string#登录(): boolean}

​2. 类间关系​

符号/语法含义示例
`用户 <-- 管理员`继承(子类 -> 父类)
`用户 <.. 实现类`实现(接口 -> 实现类)
用户 --* 订单组合(整体-部分,强依赖)用户 --* 地址
用户 o-- 订单关联(整体-部分,弱依赖)部门 o-- 员工
用户 ..> 订单依赖(类A使用类B)用户 ..> 支付服务
用户 -- 订单关联(无方向,双向关联)用户 -- 订单

​四、ER图(实体关系图)​

ER图用于描述数据库实体间的关系,用 erDiagram 声明。

​1. 实体(Entity)​

实体名 { 属性: 类型 } 定义实体:

erDiagramUSER {int id PKstring namestring email}

​2. 关系(Relationship)​

实体1 ||--o{ 实体2 定义关系(符号表示基数):

符号/语法基数含义(实体1 -> 实体2)示例
`--o{`
`--{`
`}o--`
`}--{`
PK主键(Primary Key)int id PK
FK外键(Foreign Key)int user_id FK

​五、甘特图(Gantt Chart)​

甘特图用于项目进度规划,用 gantt 声明:

gantttitle 项目计划dateFormat  YYYY-MM-DDsection 阶段1需求分析       :a1, 2024-01-01, 7d设计开发       :a2, after a1, 14dsection 阶段2测试上线       :b1, after a2, 5d
  • dateFormat:定义日期格式。
  • section:分组(阶段)。
  • :a1:任务ID(唯一标识)。
  • 2024-01-01:开始日期。
  • 7d:持续7天。

​总结​

Mermaid 的图形符号通过​​关键字+语法结构​​定义,不同图表类型的核心符号差异较大:

  • ​流程图​​:关注节点形状(矩形、菱形)和连接线箭头。
  • ​时序图​​:关注参与者、消息类型(同步/异步)和交互顺序。
  • ​类图​​:关注类的属性/方法和类间关系(继承、实现)。
  • ​ER图​​:关注实体属性和关系基数(1:1、1:N、N:M)。

实际使用时,可通过 Mermaid Live Editor 实时验证语法,快速生成图表。

http://www.lryc.cn/news/594417.html

相关文章:

  • SpringBoot集成Skywalking链路跟踪
  • 44.sentinel授权规则
  • Dev-C++——winAPI贪吃蛇小游戏
  • codepen使用
  • 网鼎杯2020青龙组notes复现
  • AG32:解锁MCU+FPGA应用新姿势,功能与实战全解析
  • 《杜甫传》读书笔记与经典摘要(一)
  • 桑科草原一景
  • RabbitMQ:解锁高效消息传递的密码[特殊字符]
  • C++STL之stack和queue
  • 【pandoc实践】如何将wordpress文章批量导出为Markdown格式
  • Spring Boot 自动装配用法
  • 从0开始学linux韦东山教程Linux驱动入门实验班(4)
  • Spring Boot 一个注解搞定「加密 + 解密 + 签名 + 验签」
  • 零基础 “入坑” Java--- 十三、再谈类和接口
  • KOSMOS-2: 将多模态大型语言模型与世界对接
  • 算法训练营day25 回溯算法④ 补充联系题目 332.重新安排行程、51. N皇后、37. 解数独
  • PID控制原理分析及应用(稳态误差详细分析)(一)
  • 30天打牢数模基础-卷积神经网络讲解
  • STM32-第八节-TIM定时器-4(编码器接口)
  • 2025 年科技革命时刻表:四大关键节点将如何重塑未来?
  • 【高等数学】第四章 不定积分——第五节 积分表的使用
  • 【实战1】手写字识别 Pytoch(更新中)
  • RTC外设详解
  • Vuex 核心知识详解:Vue2Vue3 状态管理指南
  • Qt--Widget类对象的构造函数分析
  • 【vue-7】Vue3 响应式数据声明:深入理解 reactive()
  • 2024年青少年信息素养大赛图形化编程小低组初赛真题(含答案)
  • ZooKeeper学习专栏(二):深入 Watch 机制与会话管理
  • C语言:深入理解指针(2)