Sequence
API communication and user journeys
QUICK START
Build a Mermaid diagram
in three steps.
- 1
Declare the diagram type
Start with a type such as
sequenceDiagramorflowchart. - 2
Describe the relationships
Write participants, nodes, and connections as text to update the live preview.
- 3
Export an image
Use SVG for vector editing and PNG for documents or sharing.
ONE EDITOR, MANY FLOWS
Turn ideas into clear
diagrams.
Map service architecture, system communication, workflows, and data structures with Mermaid in one focused editor.
Flowchart
Processes and decisions
Class
Objects and data relationships
State
State changes and transitions
FAQ
Frequently asked questions
Is my code stored on a server?+
No. Your code is processed in the browser, and autosaved data stays on this device.
What diagrams can I create?+
You can use Mermaid syntax for sequence, flowchart, class, state, ER, Gantt, pie, and more.
Can I edit downloaded SVG files?+
Yes. Open SVG files in Figma, Illustrator, Inkscape, or another vector editor.