Subgraphs
In this section, you will learn how to structure your flowchart by separating subsets of shapes into a group visualized by a surrounding rectangle. In Mermaid, this grouping is called subgraphs, and although this is well outside the flowchart paradigm, it is very useful. If you are following a standardized flowchart modeling paradigm, you can use it as an alternative to the subroutine shape if you have space available. A more common use of subgraphs would be when you are using flowcharts to render something that is not really a flowchart but something else, such as the fictitious system overview shown in the following example:
Now that you have a fair idea of what subgraphs are, we will start looking at the syntax. When you add a subgraph, you start with the subgraph
keyword, followed by the subgraph's ID. From now until the subgraph ends, any new...