State diagrams — composite states and notes now render
Mermaid state diagrams can now contain a diagram of their own, and notes are drawn beside the state they annotate instead of being clipped away.
stateDiagram-v2 now draws two constructs it previously dropped. A composite state — state Editing { … } — renders as a dashed frame with its own start marker and its inner states laid out and labelled inside it; the surrounding transitions still connect to the state as a whole:
stateDiagram-v2
[*] --> Editing
state Editing {
[*] --> Typing
Typing --> Validating
}
Editing --> Published
Published --> [*]
note right of <state>: … (and note left of) attaches a sticky note beside a state, vertically centred on it. Notes are measured and word-wrapped to their text, and the diagram's canvas grows to include them — previously the box was drawn at a fixed size outside the computed bounds, so the viewBox clipped both the box and its text and the note was invisible.
Both work wherever Mermaid does: fenced ```mermaid blocks in POST /api/v1/md, the canvas renderer, the CLI, and the /mermaid/state syntax page, which now shows both as live examples.