Mermaid Flowchart

Create professional flowcharts to visualize processes and workflows. Use our real-time editor to design decision trees, process maps, and system flows.

Code

Preview

100%

Start typing to see your diagram

100% • Drag to pan

Quick Syntax Reference

Master the basic syntax for creating flowcharts with these common patterns.

Node DefinitionDefine different node shapes

A[Square] --> B{{Rounded}}
B --> C([Stadium])
C --> D[(Database)]

Arrow TypesVarious arrow styles

A --> B
A --> C
A -.-> D
A ==> E
A --text--> F

DirectionSet diagram direction

flowchart TB
A --> B

flowchart LR
A --> B

SubgraphsGroup nodes together

subgraph Subtitle [Title]
  A --> B
end
C --> Subtitle

StylingApply CSS styles

style A fill:#f9f,stroke:#333,stroke-width:4px
classDef red fill:#f96
class A,B red

Click EventsAdd interactivity

click A callback "Tooltip"
click B "http://example.com" "Open link"

Use Cases

Flowcharts are versatile tools used across industries to visualize processes and decision-making paths.

Process Documentation

Document business processes, workflows, and standard operating procedures.

Algorithm Design

Map out logic flows and decision trees in software development.

Decision Making

Create decision trees to visualize choices and outcomes.

User Flows

Design user journeys and navigation paths in applications.

System Architecture

Illustrate system components and their interactions.

Training Materials

Create visual guides for training and onboarding.