```mermaid flowchart LR subgraph subgraph1 direction TB top1[top] --> bottom1[bottom] end subgraph subgraph2 direction TB top2[top] --> bottom2[bottom] end %% ^ These subgraphs are identical, except for the links to them: %% Link *to* subgraph1: subgraph1 direction is maintained outside --> subgraph1 %% Link *within* subgraph2: %% subgraph2 inherits the direction of the top-level graph (LR) outside ---> top2```
```mermaid flowchart LR subgraph subgraph1 direction TB top1[top] --> bottom1[bottom] end subgraph subgraph2 direction TB top2[top] --> bottom2[bottom] end %% ^ These subgraphs are identical, except for the links to them: %% Link *to* subgraph1: subgraph1 direction is maintained outside --> subgraph1 %% Link *within* subgraph2: %% subgraph2 inherits the direction of the top-level graph (LR) outside ---> top2```
Mermaid lets you create visual diagrams using text and code.
For a complete list of diagrams supported by Mermaid, check out their website.
```mermaid flowchart LR subgraph subgraph1 direction TB top1[top] --> bottom1[bottom] end subgraph subgraph2 direction TB top2[top] --> bottom2[bottom] end %% ^ These subgraphs are identical, except for the links to them: %% Link *to* subgraph1: subgraph1 direction is maintained outside --> subgraph1 %% Link *within* subgraph2: %% subgraph2 inherits the direction of the top-level graph (LR) outside ---> top2```