本指南将重点整理序列图 (Sequence Diagram)、类图 (Class Diagram) 和 状态图 (State Diagram) 的核心语法和实际应用。
I. 序列图 (Sequence Diagrams)：交互和时序
序列图展示了对象（参与者）之间如何按照时间顺序进行交互。它在微服务设计、API调用流程和复杂业务逻辑的梳理中非常实用。
1. 参与者定义 (Participants)
参与者是交互的实体，可以是系统、服务或用户。
概念 | 语法 | 示例代码 | 实际应用场景 |
隐式定义 | 通过消息自动创建 | Alice->>John: Hello | 简单快速的草稿 |
显式定义 (标准) | participant [Name] | participant OrderService | 明确定义所有交互实体 |
角色定义 (Actor) | actor [Name] | actor User | 强调该实体是用户或外部系统 |
别名 | participant [ID] as [Label] | participant A as Client | 方便在代码中引用长名称 |
特殊类型 | Boundary, Control, Entity, Database, Collections, Queue | participant DB@{ "type": "database" } | UML标准中的对象类型区分 |
2. 消息类型和箭头 (Messages & Arrows)
消息连接参与者的生命线，表示调用或信息传递。
符号 | 描述 | 示例代码 | 实际应用场景 |
->> | 实线带实心箭头 (同步调用) | Client->>Server: Request | 典型的同步API调用 |
-->> | 虚线带实心箭头 (同步返回) | Server-->>Client: Response | 调用成功后的响应 |
-) | 实线带开放箭头 (异步调用) | ServiceA-)Queue: Send Event | 发送消息到消息队列 (Queue) |
--) | 虚线带开放箭头 (异步返回) | Queue--)ServiceB: Consume | 异步事件被消费 |
-x | 实线带交叉 (销毁/终止) | Client-xServer: Abort | 连接终止或请求失败 |
示例：各种消息类型
3. 激活与生命线 (Activation)
激活框表示参与者正在执行操作。
概念 | 语法 (显式) | 语法 (快捷) | 实际应用场景 |
激活 | activate [Name] | A->>+B: Call | B 开始执行业务逻辑 |
去激活 | deactivate [Name] | B-->>-A: Return | B 完成执行并返回 |
堆叠激活 | 连续使用 + | A->>++B: Nested Call | 表示递归调用或内部方法调用 |
示例：堆叠激活
4. 流程控制结构 (Control Structures)
用于描述复杂的条件、循环或并行逻辑。
结构 | 语法 | 描述 |
循环 | loop [Text] ... end | 重复执行的消息序列 (如重试逻辑) |
可选 | opt [Text] ... end | 流程是可选的 (如日志记录) |
替代 | alt [Condition1] else [Condition2] ... end | 条件分支 (如 A/B 测试或错误处理) |
并行 | par [Action1] and [Action2] ... end | 多个操作同时发生 (如并发任务) |
关键区域 | critical [Action] option [C] ... end | 必须自动发生的原子操作或事务 |
中断 | break [Condition] ... end | 发生特定条件时流程立即终止 (异常建模) |
示例：替代 (Alt) 和 循环 (Loop)
5. 注释和分组 (Notes and Grouping)
概念 | 语法 | 示例代码 |
单侧注释 | Note right of [Actor]: Text | Note left of John: Check status |
跨越注释 | Note over [A],[B]: Text | Note over Client, DB: Data Flow |
垂直分组 (Box) | box [Color] [Description] ... end | box Purple Backend Services ... end |
背景高亮 (Rect) | rect rgb(191, 223, 255) ... end | 用于高亮流程中的特定步骤或阶段 |
II. 类图 (Class Diagrams)：静态结构和关系
类图描述了系统的静态结构，包括类、属性、操作和类之间的关系。这是面向对象编程 (OOP) 和数据库建模的基础。
1. 类和成员定义 (Classes and Members)
概念 | 语法 | 示例代码 | 描述 |
定义类 | class [Name] | class User | 最小定义 |
定义成员 (属性/方法) | [Class] : [Visibility][Type] [Name][()] [ReturnType] | Car : +String model <br> Car : -startEngine() bool | 单独定义成员 |
区块定义 (推荐) | class [Name] { ... } | class Engine { +power: int } | 推荐，结构清晰 |
示例: 使用区块定义类和成员
2. 成员可见性 (Visibility)
用于描述类成员的封装性。
符号 | 描述 |
+ | Public (公有) |
- | Private (私有) |
# | Protected (保护) |
~ | Package/Internal (包内/内部) |
示例: 可见性、泛型和静态成员
3. 特殊成员修饰符 (Classifiers)
符号 | 描述 | 示例代码 | 实际应用场景 |
* | Abstract (抽象) | +abstractMethod() * | 抽象方法或抽象类 |
$ | Static (静态) | +count$ : int | 类级别属性或方法 |
~ | Generic (泛型) | List~String~ items | 定义泛型类型 |
4. 类关系 (Relationships)
Mermaid支持UML中定义的八种主要关系类型。
关系类型 | 符号 (A到B) | 描述 | 实际应用场景 |
继承 (Inheritance) | `< | --` | A 继承 B |
实现 (Realization) | `.. | >` | A 实现 B (接口) |
聚合 (Aggregation) | o-- | 弱拥有关系 (部分可独立于整体) | Department o-- Employee |
组合 (Composition) | *-- | 强拥有关系 (部分生命周期依赖整体) | Car *-- Engine |
关联 (Association) | --> | 两个类之间的结构性关系 | Customer --> Order |
依赖 (Dependency) | ..> | 临时的使用关系 | Client ..> Logger |
连接 (Solid Link) | -- | 无特定语义的连接 | A -- B |
连接 (Dashed Link) | .. | 虚线连接 | A .. B |
5. 关系标签和基数 (Labels and Multiplicity)
用于详细描述关系的两端。
概念 | 语法 | 示例代码 | 常见基数符号 |
关系标签 | [A] [Arrow] [B] : [Label] | Customer --> Order : Places | 1, 0..1, 1..*, * (Many), n..m |
基数 (Multiplicity) | [A] "C1" [Arrow] "C2" [B] | Customer "1" --> "*" Ticket | 解释: 1个Customer拥有多张Ticket |
6. 类注解 (Annotations)
用于为类添加元数据，提供清晰的指示。
概念 | 语法 (内联) | 示例代码 |
接口 | class [Name] <<interface>> | class PaymentService <<interface>> |
抽象类 | class [Name] <<abstract>> | class BaseClass <<abstract>> |
枚举 | class [Name] <<enumeration>> | class Color <<enumeration>> |
III. 状态图 (State Diagrams)：行为和生命周期
状态图描述了一个系统或对象在其生命周期内可能经历的所有状态以及触发状态转换的事件。
1. 基本状态与转换 (States and Transitions)
概念 | 语法 | 示例代码 |
图表开始 | stateDiagram-v2 | ㅤ |
简单状态 | stateId 或 stateId : Description | state Waiting |
定义带描述的状态 | state "State Label" as StateId | state "User is Active" as Active |
转换 (Transition) | StateA --> StateB | Idle --> Running |
带事件/动作的转换 | StateA --> StateB : Event [Action] | Running --> Paused : click [save context] |
起点 (Start) | [*] --> StateA | [*] --> Initializing |
终点 (End) | StateB --> [*] | Finished --> [*] |
2. 复合状态 (Composite States)
复合状态（或子图）允许将一组相关的状态封装在一起。
概念 | 语法 | 示例代码 | 实际应用场景 |
复合状态定义 | state [ID] { ... } | state Processing { [*] --> Step1 } | 模块化复杂的流程 |
命名复合状态 | NamedState: Label <br> state NamedState { ... } | Payment: Handling Payment | ㅤ |
3. 决策节点 (Choice, Fork, Join)
用于建模并发和条件决策。
概念 | 语法 | 示例代码 | 实际应用场景 |
决策点 (Choice) | state [ID] <<choice>> | state CheckCondition <<choice>> | 基于条件选择下一状态 (If/Else) |
分叉 (Fork) | state [ID] <<fork>> | state StartParallel <<fork>> | 将单一流分解为多个并行路径 |
汇合 (Join) | state [ID] <<join>> | state EndParallel <<join>> | 等待所有并行路径完成后再继续 |
并发 (Concurrency) | 使用 -- 分隔符 | state Active { State1 -- State2 } | 在复合状态内表示并行区域 |
IV. 常用配置与定制 (Configuration & Customization)
1. 全局配置（Mermaid Initialize）
在部署环境中，您可以通过初始化参数来调整渲染行为（如启用序列号）。
2. 序列图配置项 (sequenceConfig)
参数 | 描述 | 默认值 | 实用性 |
mirrorActors | 是否在底部重复显示参与者 | false | 流程较长时，便于追踪 |
boxTextMargin | 组框中文本的边距 | 5 | 调整分组描述的视觉效果 |
3. 样式类定义 (classDef)
Mermaid鼓励使用
classDef 和 ::: 操作符进行统一样式管理。语法 | 描述 | 示例 |
定义类 | classDef [Name] [CSS Props] | classDef ErrorState fill:#F00,color:white |
应用类 (语句) | class [NodeID] [ClassName] | class Crash ErrorState (类图中应用) |
应用类 (快捷) | [NodeID]::: [ClassName] | Crash:::ErrorState (类图/状态图中应用) |
4. 交互式链接 (Interaction)
在
securityLevel='loose' 的配置下，可以为节点添加点击事件（如跳转链接或调用 JS 回调）。类型 | 语法 | 示例 |
URL 链接 | click [NodeID] href "[URL]" "[Tooltip]" | click Animal href "<https://zoo.com>" "Visit Zoo" |
回调函数 | click [NodeID] call [CallbackFunc]("[Param]") "[Tooltip]" | click Shape call selectShape("id1") "Select" |
- Author:CoderWdd
- URL:https://www.wuinsights.top//article/0e998b54-e706-4952-baeb-2b41b3533b47
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
Relate Posts