stateDiagram-v2 can't show transitions between parent and child (either direction)

[adamfk]

Description

mermaid.js can't show parent to child transitions (called local transitions by UML).

Here's an example of where the Moving state wants to have a transition to its child state A. PlantUML is capable of showing it correctly. Online example link.

When I try to do the same with mermaid, I see no transition from parent to child.

stateDiagram-v2
    [*] --> Moving

    state Moving {
        A
        B
    }
    Moving --> A : edge hidden behind A?
    A --> B
    Moving --> Stopped : STOP

Loading

Interestingly, if I change the transition to Stopped so that it originates from state B, we can see an edge hidden behind A.

stateDiagram-v2
    [*] --> Moving

    state Moving {
        A
        B
    }
    Moving --> A : edge hidden behind
    A --> B
    B --> Stopped : STOP

Loading

NOTE! Child to parent transitions also aren't shown. (A --> Moving).

Steps to reproduce

Try this mermaid text and see missing/hidden edge from parent to child:

stateDiagram-v2
    [*] --> Moving

    state Moving {
        A
        B
    }
    Moving --> A : edge hidden behind A?
    A --> B
    Moving --> Stopped : STOP

Screenshots

No response

Code Sample

No response

Setup

• Mermaid version: problem shows even on develop: Mermaidv11.0.0-alpha.7+d6ccd93 https://develop.git.mermaid.live/
• Browser and Version: Chrome

Suggested Solutions

No response

Additional Context

mermaid is pretty fantastic! Thanks! We are starting to use it to generate web based simulations for StateSmith state machines.