如何在mermaid.js序列图中为参与者添加描述?
Mermaid序列图实现参与者平行描述的方案
Mermaid官方序列图语法确实没有原生支持这种参与者与描述平行对齐的布局,不过可以通过两种变通方法实现:
方法1:空消息占位+定位备注
通过给每个参与者发送空消息,让时间线起点对齐,再利用备注的定位参数将描述放在对应参与者下方:
sequenceDiagram participant A as 参与者1 participant B as 参与者2 participant C as 参与者3 %% 空消息占位,确保时间线对齐 A->>A: B->>B: C->>C: note left of A: 描述1 note over B: 描述2 note right of C: 描述3
这种方式能让备注精准对应到每个参与者的正下方,适合需要将描述与参与者名称分离的场景。
方法2:参与者别名内嵌换行
直接在参与者的别名中使用换行符(\n),将描述整合到参与者名称区域:
sequenceDiagram participant A as 参与者1\n描述1 participant B as 参与者2\n描述2 participant C as 参与者3\n描述3
该方法更简洁,渲染兼容性更好,缺点是描述会和参与者名称共用同一区域,样式无法单独调整。
内容的提问来源于stack exchange,提问作者Ashwin
相关产品推荐
相关产品推荐

