Flow & behavior
Turn a few lines of Mermaid into a clean sequence diagram of actors and messages. Live preview and SVG/PNG/PDF export, 100% on-device.
There is no upload endpoint — your files are processed in this browser tab. Open your network tab and check. See how it stays private.
How to create a sequence diagram
- List participants. Name the actors or systems involved.
- Add messages. Write the calls and responses in order (A->>B: request).
- Annotate. Add notes, loops, and activations as needed.
- Export. Download the diagram as SVG, PNG, or PDF.
When you need to explain how systems talk — a login handshake, a webhook round-trip, a payment flow — a sequence diagram is the clearest picture. Writing it in Mermaid means you list the participants and the messages in order, and the timeline draws itself.
The expressive bits matter for real flows: loops for retries, alt blocks for branches, and notes to call out invariants like "nothing leaves the browser." Because it's text, updating the flow when the code changes is a one-line edit.
For decision logic use the Flowchart, for object structure use the Class diagram, or experiment across engines in the Playground.
Frequently asked questions
What is a sequence diagram good for?
Showing how components interact over time — API calls, auth flows, message passing — as a top-to-bottom timeline of requests and responses between participants.
Can I show loops, conditions, and notes?
Yes. Mermaid supports loops, alt/opt blocks, activations, and notes over participants, so you can capture real control flow, not just a happy path.
How do I share it in docs?
Export SVG for crisp scaling in web docs, or PNG/PDF for slides and printed specs.
Does my diagram get uploaded?
No. Rendering is local to your browser, so a flow that describes your internal architecture stays private.
Related tools
- FlowchartWrite a flowchart in Mermaid text and see it render live, then export SVG, PNG, or PDF — all in your browser, nothing uploaded.
- State diagramModel state machines and transitions with Mermaid and render them instantly. Export vector or raster — your text never leaves the tab.
- Class diagramDescribe classes, fields, methods, and relationships in Mermaid and get a UML class diagram — live preview, local export, no sign-up.
- PlaygroundA free-form canvas for any Mermaid diagram or Graphviz DOT graph. Switch engines, edit live, and export — all on-device, nothing uploaded.