sequence

API request sequence

Sequence diagram showing a user, editor, and Mermaid renderer exchanging a live preview request.

sequenceDiagram
  participant U as User
  participant E as Editor
  participant M as Mermaid
  U->>E: Edit source
  E->>M: render(code)
  alt Valid syntax
    M-->>E: SVG markup
    E-->>U: Live preview
  else Parse error
    M-->>E: Error message
    E-->>U: Show fix hint
  end

sequenceDiagram
  participant U as User
  participant E as Editor
  participant M as Mermaid
  U->>E: Edit source
  E->>M: render(code)
  alt Valid syntax
    M-->>E: SVG markup
    E-->>U: Live preview
  else Parse error
    M-->>E: Error message
    E-->>U: Show fix hint
  end

Scroll to zoom · drag to pan

sequenceDiagram
  participant U as User
  participant E as Editor
  participant M as Mermaid
  U->>E: Edit source
  E->>M: render(code)
  alt Valid syntax
    M-->>E: SVG markup
    E-->>U: Live preview
  else Parse error
    M-->>E: Error message
    E-->>U: Show fix hint
  end

Sequence diagrams make request and response timing obvious. Swap participant names to match your own service boundaries.