Diagrams

Both the people site and the docs site are configured with mermaid.js. mermaid.js allows us to create simple and beautiful diagrams directly inside a markdown file.

To get started, create a md file. Inside the file, add a code block and set the language as mermaid.

Add a block in the following fashion.

```mermaid
flowchart LR
  id
```

The following code gets rendered by docusaurus as seen below.

Some additional examples

```mermaid
flowchart TD
  Start --> Stop
```

```mermaid
flowchart LR
  Start --> Stop
```

Possible FlowChart orientations are:

• TB - Top to bottom
• TD - Top-down/ same as top to bottom
• BT - Bottom to top
• RL - Right to left
• LR - Left to right

There are a lot of shapes, arrows and other features which are provided by mermaid.js which can be found → here

GQC Notes

1. General diagram rules
   1. The chart should not start on a process block. You have to feed something into a process.
   2. Process blocks should not connect to other process blocks there is always an output from a process block that can feed into the next process but they should not be linked together.
2. The order of commands does make a difference. For instance if you have a TB flowchart and want something at the top of the chart you should put it near the top of your instructions.
   1. Look at Subgraph 2 Inputs for a smaller example below.
3. Keep naming simple for larger diagrams you will have things like stop("stop") you may be using this block a lot I like using A1 for the first shape and keep incrementing after that. That way I do not have to copy long names so from the example above it would be A1("Stop)
4. Do things in sections. Separate your mermaid code into sections I use A's for the first section B's for the second...
   1. Also for the more complex graphs it will keep you from getting spaghetti
   2. Later if you want to pull out just one section to talk about that section you can.
   3. You will also be able to take several smaller diagrams and put it together easier later.
5. After the first instance you where you write mermaid diagram A1('start') you can refer to the same shape as A1 from then on out.
   1. It should also be noted that the last instance where you set the text in the shape is going to be the one that prints so if you have a typo and have typed out the text again and again then you will want to check for the issue from the bottom up.
6. Styling is available if you want to change colors of objects in the Diagram

A good Example to look at is below

```mermaid
flowchart TB
  subgraph S1["Subgraph 1"]
      direction LR
      A1(["Input Files"]) --> A2["Process 1"]
      A2 --> A3(["Output 1"])

  end
    A3 --> A6["Process 2"]
    A6 --> A7(["Output 2"])
    A7 --> A4[Process 3]
    A4 --> A5(["Output 3"])
  subgraph S2["Subgraph 2"]
    C1(["Input 2"]) --> C8["Process 4"]
    C2(["Input 3"]) --> C8
    C3(["Input 1"]) --> C8
    C8 --> C9(["Output 4"])
    C9 --> C10["Process 5"]
    C10 --> C11[("Database 2")]
  end
   subgraph S4["Subgraph 4"]
    D1(["Input 4"]) --> D2["Process 6"]
    D2 --> D3[("Database 1")]
    D3 --> D4["Process 7"]
    D4 --> D5(["Output  5"])
  end
  subgraph S3["Subgraph 3"]
      B1(["Output  5"])
      B2(["Output 6"])
      B3(["Input 5"])
      B4(["Input 6"])
  end
  B1 --> B5["Process 8"]
  B2 --> B7["Process 9"]
  B3 --> B7
  B4 --> B5
  B7 --> B8(["Output 7"])
  B8 --> B5
  B5 --> B6(["Output 1"])
  A1 -.- S3
  A2 -.- B7
  B6 -.- A3
  C11 -.- B2
  D5 -.- B1
  style A2 fill:LightBlue
  style A4 fill:LightBlue
  style A6 fill:LightBlue
  style D2 fill:LightBlue
  style B5 fill:LightBlue
  style D4 fill:LightGreen
  style C8 fill:LightGreen
  style C10 fill:LightGreen
  style B7 fill:LightGreen
  style S3 fill:Orange
```