Partial overlap of flowchart subgraph

[QazCetelic]

Proposal

Mermaid-JS should allow flowchart subgraphs to overlap to display complex groupings.
I propose that the end keyword is able to take the identifier of a subgraph as parameter to close. It should remain the current functionality when no argument is given. Placing the identifier after end could cause issues with the parser confusing it with new declarations, therefore I suggest the following Regex as syntax: end:\s?ID.

+

• Allows creating charts that are currently impossible to represent

-

• Could degrade performance of layout generation
• Slightly increases complexity of syntax

Syntax example

flowchart TD
    subgraph one
    a
    subgraph two
    b
    end: one
    c
    subgraph three
    d
    end: two
    e
    %% Notice that this does not specify the subgraph
    end
    
    a --> b --> c --> d --> e

Layout example

[MVittiS]

I agree with the feature request, but disagree on syntax.

Mermaid's declarative syntax already allows you to specify nodes independently from subgraphs, so the following expression already works:

graph TB
    A[Node A] --> B[Node B]
    C[Node C] --> D[Node D]
    
    subgraph Subgraph 1
        A
        D
    end

    subgraph Subgraph 2
        B
        C
    end    

What I would like to see is just support for the same node to span two different subgraphs using the same notation, so @QazCetelic 's example would instead be expressed as:

graph TB
    A[A] --> B[B]
    B[B] --> C[C]
    C[C] --> D[D]
    D[D] --> E[E]
    
    subgraph 1
        A
        B
    end

    subgraph 2
        B
        C
        D
    end

    subgraph 3
        D
        E
    end

[ediw8311xht]

This would be awesome to add.

[NewZsh]

I also have the same feature request. But by now, I recommend to color the nodes with the same color in a subgraph to meet this feature