-
-
Notifications
You must be signed in to change notification settings - Fork 965
Description
Describe the bug
When a composite state contains child states, Mermaid correctly nests them.
However, when you wrap that same composite state inside an additional container state, Mermaid incorrectly renders the child states outside the parent composite.
This happens even when:
All states have unique IDs
Child states are not referenced before being declared
There is no ID reuse
The exact same diagram works perfectly without the wrapper
This indicates a layout / grouping bug triggered specifically by nested composite states + external transitions involving child states.
To Reproduce
Steps to reproduce:
Working version (renders correctly):
stateDiagram-v2
direction LR
state "Parent" as Parent {
state "Child" as Child
}
StateA --> Child : to child
Parent --> StateB : from parent
Child appears inside Parent — correct.
Broken version (wrap in outer state → bug appears):
stateDiagram-v2
direction LR
state "Wrapper" as Wrapper {
state "Parent" as Parent {
state "Child" as Child
}
StateA --> Child : to child
Parent --> StateB : from parent
}
Now Mermaid incorrectly renders Child outside of Parent, even though nothing else changed except the addition of the wrapper.
Expected behavior
Child should remain nested inside Parent even when the entire composite structure is wrapped inside another state. The wrapper state should not affect the internal structure of nested composite states.
Browser: Chrome 120+
Version: Mermaid Live Editor (latest)
Smartphone
(Not tested)
Additional context
This issue prevents correct visualization of hierarchical state machines with deep nesting.
The bug only triggers when:
a composite state is nested inside another composite state, and
there is a transition involving one of the composite child states from outside
Removing the wrapper state fixes the issue entirely
This likely indicates Mermaid is incorrectly flattening composite nodes during layout resolution.
This is a minimal reproducible case isolated from a larger project using hierarchical state machines.