You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Mermaid sequenceDiagram中能否垂直堆叠对等客户端参与者?

Mermaid时序图:对等客户端与源处理服务器的布局优化方案

能不能将两个客户端垂直堆叠?

目前Mermaid的sequenceDiagram不支持将参与者垂直堆叠,它的默认布局逻辑是按参与者的声明顺序横向排列所有角色,没办法直接修改为纵向排列。

最清晰的展示方式

1. 明确消息流向,避免客户端间视觉混淆

确保所有客户端的请求都明确指向服务器,不要出现客户端之间的消息箭头,同时给消息添加来源标注,让流程一目了然:

sequenceDiagram
    participant ClientA as Client A
    participant ClientB as Client B
    participant Server as 源处理服务器

    ClientA->>Server: 请求(来自Client A)
    Server-->>ClientA: 响应(返回Client A)
    ClientB->>Server: 请求(来自Client B)
    Server-->>ClientB: 响应(返回Client B)

2. 使用结构化块区分独立会话

用par(并行)块把两个客户端与服务器的交互拆分成独立会话,视觉上会自动分组,清晰区分对等客户端的请求流程:

sequenceDiagram
    participant ClientA as Client A
    participant ClientB as Client B
    participant Server as 源处理服务器

    par Client A 交互流程
        ClientA->>Server: 业务请求A
        Server-->>ClientA: 处理结果A
    end
    par Client B 交互流程
        ClientB->>Server: 业务请求B
        Server-->>ClientB: 处理结果B
    end

3. 结合激活状态与注释强化区分

用activate/deactivate标记客户端的活跃状态,配合note注释明确交互阶段,进一步避免视觉混淆:

sequenceDiagram
    participant ClientA as Client A
    participant ClientB as Client B
    participant Server as 源处理服务器

    activate ClientA
    ClientA->>Server: 请求A
    Server-->>ClientA: 响应A
    deactivate ClientA

    note over ClientB: 独立发起请求
    activate ClientB
    ClientB->>Server: 请求B
    Server-->>ClientB: 响应B
    deactivate ClientB

内容的提问来源于stack exchange,提问作者javanoob

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.12 08:12:10