← All diagram types
MERMAID DIAGRAM GUIDE

Mermaid flowchart online editor

Visualize processes, decisions, and system flows with connected nodes. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the Flowchart editor See an example

WHAT IT IS FOR

Make the important relationships clear

Turn a process, decision tree, or system flow into a diagram that is easy to review and share.

  • Document business processes
  • Map product and engineering workflows
  • Explain decisions to a team
Why use Mermaid Studio?
  • Write the source as versionable Mermaid code.
  • Preview changes immediately in the browser.
  • Export the finished diagram as SVG or PNG.
  • Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

flowchart TD
  Idea[Idea planning] --> Review{Team review}
  Review -- Approve --> Build[Build]
  Review -- Revise --> Idea
  Build --> Ship[Deploy]

HOW TO START

Create your diagram in four steps

  1. 1Start with the first action or trigger.
  2. 2Connect each step with a directional arrow.
  3. 3Use decision nodes when a condition changes the path.
  4. 4Review the flow from start to finish and export it.

WRITING TIPS

Keep the diagram useful

Use TD or LR to change the flow direction.

Use diamond nodes for decisions.

FAQ

Frequently asked questions

What is a Mermaid flowchart used for?+

Mermaid flowcharts are useful for processes, decision trees, onboarding flows, and system behavior that can be expressed as connected steps.

Can I export a Mermaid flowchart?+

Yes. Mermaid Studio lets you inspect the rendered flow and export the result as SVG or PNG from the editor.

TEMPLATES

Start from a related template

Product decision flow

Map the decisions and feedback loops from idea review to launch.

Open template

Incident response process

Document detection, triage, mitigation, resolution, and review.

Open template

Customer onboarding flow

Guide a new customer through signup, setup, activation, and support.

Open template

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Read the guide

Mermaid class diagram

Design domain objects, properties, methods, inheritance, and relationships.

Read the guide

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Read the guide

Mermaid state diagram

Show how an object or workflow changes state in response to events.

Read the guide

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Read the guide

Mermaid Gantt chart

Plan projects with tasks, milestones, dependencies, and dates.

Read the guide

Ready to make a Flowchart?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio