Skip to content
Mermaid Flow Player

Sequence Diagrams

Animate interactions between participants with messages, activations, and notes.

Basic Sequence

Section titled “Basic Sequence”
live live example
sequenceDiagram Alice->>Bob: Hello Bob Bob->>Sarah: Hi Sarah Sarah->>Alice: Hey Alice! Alice->>Sarah: How are you? Sarah-->>Alice: Great thanks! 
<script type="module">
  import { createFlowPlayer } from 'https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/index.js';


  const diagram = document.getElementById('diagram');
  const player = createFlowPlayer({
    root: diagram,
    source: diagram.textContent,
    dim: 'others'
  });


  await player.ready();


  // A sequence diagram's beats are its messages, not its participants: the
  // reader follows the arrows down the page.
  await player.play([
    { type: 'edge', from: 'Client', to: 'API' },
    { type: 'edge', from: 'API', to: 'Client' },
  ]);
</script>

Stepping a sequence

Section titled “Stepping a sequence”

The participants are the cast; the messages are the plot. Next and Previous move one message at a time, and getCurrentNode() answers with the message the reader is on — "Client->API", or "Client->API#1" where the same two participants talk more than once.

That ordinal matters when you write a step by hand. from and to can only ever name the first arrow between a pair, so add key to name a later one:

{ type: 'edge', from: 'Client', to: 'API', key: 'Client->API#1' }

player.getSteps() returns the whole exchange as a transcript — one entry per message, with its text and the participant who sent it — which is what drives chapter rails and printable walkthroughs.

Web Component:

<script src="https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/mermaid-flow-player.element.js"></script>


<mermaid-flow-player controls theme="light">
sequenceDiagram
  Alice->>Bob: Hello Bob
  Bob->>Sarah: Hi Sarah
  Sarah->>Alice: Hey Alice!
  Alice->>Sarah: How are you?
  Sarah-->>Alice: Great thanks!
</mermaid-flow-player>

API Request Flow

Section titled “API Request Flow”
live live example
sequenceDiagram participant Client participant API participant Auth participant DB Client->>API: POST /login API->>Auth: Validate credentials Auth->>DB: Query user DB-->>Auth: User data Auth-->>API: Token API-->>Client: 200 OK + JWT

With Activations

Section titled “With Activations”
live live example
sequenceDiagram participant Browser participant Server participant Cache Browser->>+Server: GET /data Server->>+Cache: Check cache Cache-->>-Server: Cache miss Server->>+Cache: Fetch & store Cache-->>-Server: Data Server-->>-Browser: Response

With Notes

Section titled “With Notes”
live live example
sequenceDiagram participant U as User participant S as System participant E as Email U->>S: Register Note over S: Validate input S->>E: Send verification Note over E: Queue email E-->>U: Verification link U->>S: Click verify Note over S: Activate account S-->>U: Welcome!

Programmatic Control

Section titled “Programmatic Control”
<script type="module">
  import { createFlowPlayer } from 'https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/index.js';


  const diagram = document.getElementById('seq-diagram');
  const player = createFlowPlayer({
    root: diagram,
    source: diagram.textContent,
    dim: 'others'
  });


  await player.ready();


  // Use diagram-specific helpers
  await player.play([
    player.participant('Client', { note: 'Browser' }),
    player.message('Client', 'API', { note: 'Request' }),
    player.activation('API', { start: true }),
    player.message('API', 'DB', { note: 'Query' }),
    player.message('DB', 'API', { note: 'Result' }),
    player.activation('API', { start: false }),
    player.message('API', 'Client', { note: 'Response' }),
  ]);
</script>

Other Diagram Types

Section titled “Other Diagram Types”