API flows, auth handshakes, message queues — describe who says what to whom, one line per message, and get a clean UML sequence diagram with live preview.
sequenceDiagram
participant U as User
participant E as Editor
participant M as Mermaid
U->>E: Types code
E-->>M: render() (debounced)
alt Valid syntax
M-->>E: SVG
E-->>U: Preview
else Syntax error
M--xE: Exception
E-->>U: Error overlay
end
Aliases (participant U as User) keep the code short while the diagram shows full names. The alt/else block documents the failure path in the same picture as the happy path — where it belongs.
Sync calls ->>, responses -->>, failed calls --x, async fire-and-forget -) — each with its own arrowhead.
alt/else branches, opt optional steps, loop repetition, par parallel lanes and critical regions.
Show lifeline activations with +/-, and annotate with Note over A,B: to explain context inline.
Add autonumber and every message gets a sequence number — handy for referencing steps in reviews and specs.
Mermaid sequence diagrams render natively in GitHub, GitLab, Notion and most Markdown tooling. Merflow is the fast feedback loop: autocompletion for participants and arrows, inline error markers when a line doesn't parse, and instant preview — then the same text goes straight into your README, design doc or pull request. Need an image instead? Export SVG for docs that scale, or PNG (up to 3×) for slides.
Start with sequenceDiagram, declare participants, then one message per line: User->>API: POST /login. Solid arrows are calls, dashed are responses.
Wrap messages in alt … else … end, use opt for optional steps, loop for repetition, par for parallel blocks, and --x for failed calls.
Yes — the same code renders in GitHub, GitLab and Notion Markdown. Prototype in Merflow, paste into your docs.
Yes — free, no signup, no watermark, with SVG and high-resolution PNG export.