Mermaid flowchart tutorial with an editable example
Build a decision workflow with Mermaid nodes, arrows, and labeled branches. Open a working example in the editor.
Learn by editing
From an idea to a clear diagram.
Working examples, the syntax behind them, and fixes for the moments when your diagram does not look right.
Mermaid sequence diagram tutorial: client, API, database
Document API requests and responses with an editable Mermaid sequence diagram and a concise syntax walkthrough.
Export Mermaid to SVG, PNG, JPEG or PDF
Choose the right Mermaid export format, preserve bold labels, and fix oversized or clipped exports.
Fix Mermaid parse errors, overflowing text and blank exports
A practical troubleshooting guide for Mermaid syntax errors, long labels, export formatting, and browser storage.
More starting points
Approval workflow
Model a request, a decision, and the next action.
Open example →API request
Show the conversation between a client, API, and database.
Open example →Team org chart
Start a simple reporting structure, then add your team.
Open example →Order data model
Connect customers, orders, and order items.
Open example →Release plan
Plan dependent design, build, and release tasks.
Open example →Background job states
Document retries, success, and failure transitions.
Open example →Bold and multiline labels
Try rich text and wrapping before exporting your diagram.
Open example →Class relationships
Describe an interface and the class that implements it.
Open example →