I’m making a transition from outside a composite group to a state inside a composite group. This works as expected if I declare the transition before I declare the composite group, but it fails with a syntax error if I move the transition after the group.

Run the code snippet below to see the two renders.

Because ON is supposed to be inside the group, it makes more sense to me to declare the group with ON inside it first, and then declare the transition. It seems confusing and backwards to define ON first outside of the group (implicitly via the transition) and then declare it inside the group, but mermaid seems to want me to do that.

Am I thinking about this the wrong way?

mermaid.initialize({ startOnLoad: true });

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>

<div style="display: flex;">
<pre class="mermaid">
stateDiagram
state LightSm {
OFF --> ON  %% RIGHT
state ON_GROUP {
    ON: ON
}
%% OFF --> ON %% WRONG
}
</pre>

<pre class="mermaid">
stateDiagram
state LightSm {
%% OFF --> ON  %% RIGHT
state ON_GROUP {
    ON: ON
}
OFF --> ON %% WRONG
}
</pre>
</div>