sequenceDiagramv0.9.4

什么是时序图?

按时间顺序展示参与者与系统之间的消息。

在编辑器中打开 →即用模板

sequenceDiagram

何时使用

Use a 时序图 when…

API request/response timelines

Authentication and OAuth flows

Multi-actor workflows where order matters

语法基础

The minimal syntax

Copy this and you have a working 时序图. Build from here.

sequence.mmd

sequenceDiagram
    autonumber
    participant U as User
    participant W as Web app
    participant A as API
    participant D as Database
    U->>W: Click class="code-str">"Save"
    W->>A: POST /diagrams
    A->>D: INSERT INTO diagrams
    D-->>A: id = 4f2…
    A-->>W: 201 Created
    W-->>U: ✓ Saved

常见写法

Patterns worth memorizing

autonumber

Add `autonumber` at the top — every arrow gets a step number, perfect for RFCs.

Notes

`Note over A,B: text` spans multiple actors and is great for assumption callouts.

loop / alt / opt

Use control blocks for retries, branches, and optional steps without leaving the diagram.

常见坑点

The things that will trip you up

Mermaid silently ignores misspellings — these are the failures we see most.

01
Solid `->>` is synchronous; dashed `-->>` is the response — mixing them up reads as a different protocol.
02
Participants render in declaration order. If you want a specific order, declare them up front.
03
Long messages overflow — break them with `<br/>` inside the label.