Skip to content

Nested composite states render incorrectly when wrapped inside another state in stateDiagram-v2 #1852

@ronald0samuel

Description

@ronald0samuel

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

Live Editor link (minimal repro):
https://mermaid.live/edit#pako:eNpFkE9rwzAMxb-K0Dktrt04iw-FrTtuMNbDYPhiYrUNNHZwnbGu9LvPifvnJun9np7QGRtvCRUeo4n02ppdMN3sh2tn20BNbL2Dt0_ttJsA0PgVTN9T0AjmCNcGztoB3IgPE8jFDOQ66w9ivW8PNgO5TOplDAHYjMgzzGarLIGC6KG5Udd9ozyRL0nfBt9Bn0NdWoMF7kJrUW3N4UgFdhQ6M_Y4naEx7qkjjSqVlrZmOKRjkzP5euO-ve9QxTAkZ_DDbn_fM_T28aP71AzRb06uuXvIWQprP7iIShRIto0-vOcvT8-eYlCd8TcBfF6xBa-XQtZltRByWeAJFefVvBa85KWsWPlUCnkp8G-6jM0lE6xaygXjQggm68s_duOQZg

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions