Flowchart

Flowcharts are the most versatile diagram type in Mermaid, perfect for visualizing processes, decision trees, and system workflows. Mermaid Studio provides the most comprehensive support for flowcharts.

Basic Example

flowchart TD
    Start([Start]) --> Input[/Get Data/]
    Input --> Process[Process Data]
    Process --> Decision{Valid?}
    Decision -->|Yes| Output[Display Results]
    Decision -->|No| Error[Show Error]
    Output --> End([End])
    Error --> End

What You Get

Flowcharts have the most complete feature set in Mermaid Studio:

• Syntax highlighting - Color-coded keywords, nodes, and edges
• Code completion - Suggestions for node shapes, arrow types, and keywords
• Refactoring - Rename node IDs across your entire diagram
• Find usages - See everywhere a node is referenced
• Code folding - Collapse subgraphs in large diagrams
• Formatting - Auto-format your diagram code
• Inspections - Detect undefined nodes and duplicate IDs
• Brace matching - Navigate between paired brackets
• Color preview - See hex colors inline in style definitions

Quick Syntax Reference

Directions:

• TD or TB - Top to bottom
• LR - Left to right
• RL - Right to left
• BT - Bottom to top

Node shapes:

• [Text] - Rectangle
• ([Text]) - Stadium/pill
• {Text} - Diamond (decision)
• [/Text/] - Parallelogram (input/output)
• ((Text)) - Circle

Edges:

• --> - Arrow
• --- - Line
• -.-> - Dotted arrow
• ==> - Thick arrow
• -->|Label| - Arrow with text

Subgraphs:

flowchart LR
    subgraph Backend
        API --> DB
    end
    subgraph Frontend
        UI --> API
    end

For the complete syntax reference, see the Mermaid.js Flowchart documentation.