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
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
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
Description
mermaid.js can't show parent to child transitions (called local transitions by UML).
Here's an example of where the
Movingstate wants to have a transition to its child stateA. 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.
Interestingly, if I change the transition to
Stoppedso that it originates from stateB, we can see an edge hidden behindA.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:
Screenshots
No response
Code Sample
No response
Setup
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.