> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aihubmix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Mermaid Diagrams

> Display diagrams using Mermaid

<RequestExample>
  ````md Mermaid Flowchart Example theme={null}
  ```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
  ```
  ````
</RequestExample>

[Mermaid](https://mermaid.js.org/) lets you create visual diagrams using text and code.

```mermaid theme={null}
  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
```

You can create the following using Mermaid diagrams:

* Flowchart
* Sequence diagram
* Class diagram
* State diagram
* Entity relationship diagram
* User journey
* and more

For a complete list of diagrams supported by Mermaid, check out their [website](https://mermaid.js.org/).

## Syntax for Mermaid diagrams

To create a flowchart, you can write the Mermaid flowchart inside a Mermaid code block.

````md theme={null}
```mermaid
// Your mermaid code block here
```
````