Search code examples
javascriptgraphchartsdiagrammermaid

Ignore duplicates between subgraphs (MermaidJS)

As you can see in the diagram, items that are included in subgraph 1 aren't included in subgraph 2. Is there any way to ignore duplicates between subgraphs and include them in both? I can't seem to find any information on this issue.

MermaidJS Subcharts

flowchart TB
A[Object] --> B[Watch]
subgraph Watch [1]
Glass
Hands
Strap
Battery
end
B --> Watch
A --> C[Phone]
subgraph Phone [2]
Glass
Microphone
Speaker
Battery
end
C --> Phone
Solution

  • Nodes are unique. So they can't be in two distinct subgraph. That's why "Glass" and "Battery" are only in first defined subgraph.

    To solve your issue you should probably use different nodes' names with same description.

    For example :

    flowchart TB
    subgraph Watch [1]
        Watch.Glass[Glass]
        Watch.Hands[Hands]
        Watch.Strap[Strap]
        Watch.Battery[Battery]
    end
    subgraph Phone [2]
        Phone.Glass[Glass]
        Phone.Microphone[Microphone]
        Phone.Speaker[Speaker]
        Phone.Battery[Battery]
    end
    A[Object] --> B[Watch]
    B --> Watch
    A --> C[Phone]
    C --> Phone