跳到主要内容

Markdown 中的 mermaid 语法

· 阅读需 3 分钟

注释： %%

Flowchart 流程图​

  • TD 表示 "top-down"

  • LR 表示 "left-right"

节点形状​

  • [矩形]
  • (圆角矩形)
  • {菱形} 用于判断条件
  • ((圆))

连接线​

  • --> 带箭头的实线
  • --- 实线
  • ==> 加粗
  • -.-> 带箭头的虚线
  • |文字|，在线上添加文字， 或 --text-->
  • <--> 双向箭头

Sequence Diagram 时序图​

参与者​

  • participant 名字 参与者
  • actor 名字 将参与者显示为小人图标

消息交互​

  • A->>B: 文字 实现箭头 请求
  • B-->>A: 文字 虚线剪头 响应

生命周期​

  • activate A 激活 deactivate A 取消激活 表示一个参与者处于“处理中”的状态
  • ->>+ 激活 -->>- 取消激活

注释​

  • Note right of A: 文字 在 A 的右侧添加注释

扫码登录​

flowchart TD
  Start((开始)) --> GetQR[PC端请求登录]
  GetQR --> ShowQR[展示二维码]
  
  subgraph Mobile [手机端操作]
      Scan[用户打开App扫码] --> Auth{是否授权?}
      Auth -->|是| AppConfirm[点击确认登录]
      Auth -->|否| AppCancel[点击取消]
  end
  
  ShowQR -- 轮询/Scoket --> CheckState{检查二维码状态} 
  
  Scan -.-> CheckState
  AppConfirm -.-> CheckState
  
  CheckState -->|wait| ShowQR
  CheckState -->|scan| Prompt[请在手机端确认]
  Prompt --> CheckState
  
  CheckState -->|过期| Expired[二维码失效]
  Expired --> Refresh[点击刷新] --> GetQR
  
  CheckState -->|登录成功| Success[获取 token/跳转首页]
  Success --> End((结束))

subgraph ... end 表示把这一块逻辑框在一起，在视觉上把他们看成一个整体。

sequenceDiagram
    autonumber
    participant PC as 浏览器
    participant Server as 服务器
    participant Phone as 手机APP

    Note over PC,Server: 阶段一：初始化二维码
    PC->>Server: 1. 请求生成二维码(GET /qrcode)
    Server-->>PC: 2. 返回二维码ID(UUID)

    Note over PC,Server: 阶段二：轮询检测状态
    loop 每隔2秒查询一次
        PC->>Server: 3. 询问 UUID状态(GET /check?uuid=xyz)
        alt 状态: 已扫码（WAITING）
            Server-->>PC: keep waiting
        else 状态: 已扫码（SACNNED）
            Phone->>Server: 4. 扫码请求(POST /scan)
            Server-->>PC: scanned(PC显示用户头像)
          else 状态：已确认（CONFIRMED）
            Phone->>Server: 5. 登录确认（POST /confirm）
            Server-->>PC: token(登录凭证)
        end
    end
    
    Note over PC: 阶段三: 登录完成
    PC->>PC: 写入token并跳转首页
  1. autonumber 表示自动给箭头添加序号
  2. loop...end 表示循环块
  3. alt...else...end 表示 if -else if - else
  4. Note over ... 跨越多个参与者的注释，用于划分流程/阶段。