[SOLVED] Flow is not ending outside subgroup after rendering

Flow is not ending outside subgroup after rendering

from the slightly changed examples this mermaid flow shows that the end is rendered inside subgroup.

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think} --> z(END)
    C -->|One| D[Laptop] --> g1
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
    subgraph G
    g1(some) -- yes --> z
    end

how to change it to always have the end note beeing outside of subgroups ?

Solution

z(END) is being included in the subgraph G because you've included it there:

subgraph G
g1(some) -- yes --> z
%%                  ^ here
end

It isn't entirely clear what you're going for, but if you move the connection between g1 and z outside of the subraph, I think it will do what you want:

<body>
  <pre class="mermaid">
    flowchart TD
        A[Christmas] -->|Get money| B(Go shopping)
        B --> C{Let me think} --> z(END)
        C -->|One| D[Laptop] --> g1
        C -->|Two| E[iPhone]
        C -->|Three| F[fa:fa-car Car]
        subgraph G
            %% Just create g1 here
            g1(some)
        end

        %% And create the link outside of the subgraph
        g1 -- yes --> z
  </pre>

  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
</body>