elefcode

Mermaid diagram

State Diagram — free online editor

Mermaid state diagrams visualize finite-state machines — perfect for UI states, workflow engines, and protocol design.

▶ Open in editor

What is a Mermaid state diagram?

State diagrams (also called state charts) show all the states a system can be in and the transitions between them. Mermaid supports labelled transitions, nested composite states, fork/join nodes, and start/end markers via `[*]`.

When to use it

  • ▸Document a UI component's loading/error/success states
  • ▸Design a workflow or approval flow
  • ▸Model a protocol or game state
  • ▸Communicate state behaviour in a code review

Syntax in one paragraph

Use `stateDiagram-v2` for the modern syntax. `[*] --> Idle` marks an entry, `Idle --> Active : trigger` is a labelled transition, and nested states go inside `state Outer { … }`.

Example: Fetch lifecycle with retry

stateDiagram-v2
    [*] --> Idle
    Idle    --> Loading : fetch()
    Loading --> Success : data received
    Loading --> Error   : request failed
    Success --> Idle    : reset()
    Error   --> Loading : retry()
    Error   --> Idle    : dismiss()
    Success --> [*]     : unmount
▶ Try this example in the editor

More Mermaid diagrams

Flowchart

A Mermaid flowchart visualizes a process as connected nodes and arrows — perfect for documenting algorithms, decision trees, and user journeys.

Sequence Diagram

Mermaid sequence diagrams show how participants exchange messages over time — ideal for API flows, auth handshakes, and protocol design.

Class Diagram

Mermaid class diagrams model UML classes — their members, methods, and the relationships between them.

ER Diagram

Mermaid ER diagrams model database schemas — tables, columns, and the relationships between them using crow's-foot cardinality.

Gantt Chart

Mermaid Gantt charts plan projects across time — tasks, durations, dependencies, and milestones.

Pie Chart

Mermaid pie charts visualize a single dataset as proportional slices — the easiest Mermaid diagram to start with.

Git Graph

Mermaid Git graphs visualize branching workflows — commits, branches, merges, and tags — in a clean SVG diagram.

Mindmap

Mermaid mindmaps capture ideas around a central topic — branches grow outward by indentation alone, no UI dragging required.

Timeline

Mermaid timelines show events over time grouped into sections — great for histories, roadmaps, and onboarding stories.

Kanban Board

Mermaid 11 added native Kanban boards — list-based, version-controllable, and renderable straight from text.

Full Mermaid editor →

All 11+ diagram templates, live preview, themes