stateDiagram-v2v0.9.4

ステートとは？

状態機械、遷移、ライフサイクル。

エディターで開く →すぐに使えるテンプレート

stateDiagram-v2

使いどころ

Use a ステート when…

Finite state machines for UI components

Order/document lifecycles

Protocol transitions (TCP, OAuth)

構文の基本

The minimal syntax

Copy this and you have a working ステート. Build from here.

state.mmd

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : submit
    Review --> Approved : lgtm
    Review --> Draft : changes requested
    Approved --> Published : publish
    Published --> [*]

よく使うパターン

Patterns worth memorizing

Composite states

Nest states inside a parent with `state Parent { … }` for hierarchical machines.

Forks/joins

Use `<<fork>>` and `<<join>>` to model concurrent transitions.

Transition guards

`A --> B: event [guard]` is rendered as a single label; keep guards short.

ハマりどころ

The things that will trip you up

Mermaid silently ignores misspellings — these are the failures we see most.

01
Use `stateDiagram-v2` — the original `stateDiagram` is legacy and lacks composite-state support.
02
`[*]` is the start/end state, not a literal node.
03
Transition labels with colons: anything after the first `:` is the label, so don't put extra colons.