Grouping Mermaid nodes in Subgraphs

edit ✏️

Mermaid provides some really great ways to group or fence in parts of your graphs through the use of subgraphs.

Here we can model some sort of data ingest with some raw iot device and our warehouse in different groups.

graph TD;

    subgraph raw_iot
        a
    end

    subgraph warehouse
        A --> B
        B --> C
    end
graph TD; subgraph raw_iot a end subgraph warehouse A --> B B --> C end

connecting subgroups

If we want to connect them, we can make a connection between a and A outside of the subgraphs.

graph TD;

    subgraph raw_iot
        a
    end

    a --> A

    subgraph warehouse
        A --> B
        B --> C
    end
graph TD; subgraph raw_iot a end a --> A subgraph warehouse A --> B B --> C end

separation of concerns

It's also possible to specify subgraphs separate from where you define your nodes. which allows for some different levels of grouping that would not be possible if you were to define all your nodes inside of a subgraph.

graph TD;
    a --> A
    A --> B
    B --> C

    subgraph one
        A
        C
    end
graph TD; a --> A A --> B B --> C subgraph warehouse A C end