What is the difference between stateDiagram and stateDiagram-v2?

`stateDiagram-v2` is the current recommended syntax in Mermaid v10+. It adds support for composite (nested) states, concurrent regions, choice pseudostates, forks, and joins — features missing from the original `stateDiagram`. The v1 syntax still works for backward compatibility, but all new diagrams should use `stateDiagram-v2` to access the full feature set.

How do I show nested (composite) states in Mermaid?

Use a `state` block with curly braces: `state Processing { [*] --> Validating \n Validating --> Charging \n Charging --> [*] }`. The outer state 'Processing' contains its own inner state machine. Composite states model complex workflows where a high-level state has internal sub-processes, like an order that goes through multiple substeps while in 'Processing' status.

How do I add labels to state transitions?

Add a colon after the transition arrow: `Idle --> Loading : user submits form`. The label documents the event or condition that triggers the transition. Well-labeled transitions turn a state diagram into executable specification — developers can map each label directly to a function call, event handler, or API response in their implementation.

What are concurrent states and when should I use them?

Concurrent states (using `--` separator inside a composite state) model parts of a system that run in parallel. For example, a music player might have concurrent states for playback (playing/paused) and display (fullscreen/normal). Use concurrent states when two independent behaviors coexist and each needs its own state machine, rather than modeling every combination as a separate top-level state.

Mermaid State Diagram Viewer

Render Mermaid state diagrams and state machines in your browser. Preview transitions and export to SVG or PNG. Free online tool.

Mermaid Code

Preview

Enter Mermaid code to preview your diagram

State diagrams model the behavior of a system by showing all possible states and the transitions between them triggered by events. They are essential for designing finite state machines, modeling UI component lifecycles, documenting order workflows, and specifying embedded system behavior. Mermaid's `stateDiagram-v2` syntax is widely generated by AI assistants when developers ask questions like 'Model the states of a payment order', 'Show me the lifecycle of a React component', or 'Design the state machine for a traffic light'. Pasting the output into Zolkit immediately reveals whether the transitions are complete, whether any states are unreachable, and whether the happy path and error paths are correctly connected. Zolkit's state diagram viewer supports `stateDiagram-v2` features including initial and terminal states (`[*]`), transition labels, composite states (nested statediagrams), concurrent states using `--`, choice pseudostates, and notes. The viewer renders both simple finite automata and complex hierarchical state machines found in real-world applications.

Related Diagrams

← Mermaid Diagram Viewer Mermaid Flowchart Viewer Mermaid Sequence Diagram Viewer Mermaid Class Diagram Viewer

Free Online Mermaid Diagram Viewer and Exporter

Zolkit's Mermaid Diagram Viewer lets you paste any Mermaid code and see a rendered diagram instantly — no installation, no sign-up, no server uploads. Everything runs in your browser, making it the fastest way to verify AI-generated diagrams from Claude, ChatGPT, or Gemini. Supports all major Mermaid diagram types: flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, mind maps, Git graphs, pie charts, and timelines.

Instant Live Preview

Diagrams render automatically as you type, with a 300ms debounce so it never feels sluggish.

100% Private

All rendering happens in your browser using mermaid.js. Your code is never sent to any server.

Export SVG & PNG

Download your diagram as a crisp vector SVG or a high-resolution 2× PNG ready for docs and slides.

All Mermaid Diagram Types

Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, mind maps, Git graphs, and more.

AI Diagram Ready

Built for the AI era — directly preview diagrams generated by Claude, ChatGPT, Gemini, or any LLM.

Always Free

No account needed, no usage limits, no watermarks. Zolkit's Mermaid viewer is completely free forever.

How to Preview a Mermaid Diagram

1
Paste your Mermaid code into the editor on the left — you can copy it from an AI assistant or write it manually.
2
The diagram renders instantly in the preview panel on the right. If there's a syntax error, a message explains the issue.
3
Click 'Export SVG' or 'Export PNG' to download your diagram as a file ready for documentation, slides, or sharing.