Mermaid on Github Gist Tests

00_intro.md

Intro

• https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams !!!!

• https://github.com/mermaid-js/mermaid

• https://mermaid.js.org/

• https://mermaid-js.github.io/mermaid-live-editor/

• https://www.freecodecamp.org/news/diagrams-as-code-with-mermaid-github-and-vs-code/

mermaid_00_test.md

Mermaid syntax support test

graph TD
    A[Director]
    B[Manager 1]
    C[Manager 2]
    D[Employee 1.1]
    E[Employee 1.2]
    F[Employee 2.1]

    A --> B
    A --> C
    B --> D
    B --> E
    C --> F

mermaid_01.md

mermaid flowchart

graph TD;
    A[Start] --> B{Is it working?};
    B -->|Yes| C[Finish];
    B -->|No| D{Have you tried turning it off and on again?};
    D -->|Yes| E{Did you google the error message?};
    D -->|No| B;
    E -->|Yes| F[Call IT support];
    E -->|No| B;
    F --> B;

mermaid_02.md

mermaid sequenceDiagram

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: Not too bad, thanks!
    Note right of Bob: Bob thinks a while.
    Bob-->>Alice: I am good, thanks!

mermaid_03.md

Mermaid Gantt

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

mermaid_04.md

mermaid classDiagram

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

mermaid_05.md

mermaid stateDiagram

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

mermaid_06.md

mermaid erDiagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ LINE-ITEM : is listed in

mermaid_07.md

mermaid User Journey Diagrams

graph TD
    A[User] --> B[Homepage]
    B --> C[Search for product]
    C --> D[View product details]
    D --> E[Add to cart]
    E --> F[Proceed to checkout]
    F --> G[Enter shipping details]
    G --> H[Make payment]
    H --> I[Receive confirmation]

mermaid_08.md

mermaid Component Diagram

graph TD
    A[Component A]
    B[Component B]
    C[Component C]
    D[Component D]
    E[Component E]
    F[Component F]
    G[Component G]

    A --> B
    A --> C
    B --> D
    B --> E
    C --> F
    C --> G

mermaid_09.md

mermaid pie charts

pie title Pie Chart
    "Option 1" : 35
    "Option 2" : 30
    "Option 3" : 25
    "Option 4" : 10

mermaid_10.md

mermaid Git Graph

graph TB
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
    F[Parallel1]
    G[Parallel2]
    H[Parallel3]
    H -->|merged| I[End]

    subgraph "Main Branch"
    A --> F
    B --> G
    end

    subgraph "Feature Branch"
    D --> H
    E --> H
    end

    classDef green fill:#9f6,stroke:#333,stroke-width:2px;
    classDef orange fill:#f96,stroke:#333,stroke-width:2px;
    class A,B green
    class C,D,E orange

    click A "Tooltip for a hard edge"
    click B "Tooltip for a round edge"
    click C "Tooltip for a decision"
    click D "Tooltip for result one"
    click E "Tooltip for result two"

mermaid_11.md

mermaid Requirement Diagrams

graph TD;
    A[Functional Requirements] --> B[Performance Requirements]
    A --> C[Security Requirements]
    A --> D[Usability Requirements]
    B --> E[Load Time]
    B --> F[Data Processing Time]
    C --> G[Data Encryption]
    C --> H[User Authentication]
    D --> I[User Friendly Interface]
    E --> J[Server Response Time]
    E --> K[Page Load Time]
    F --> L[Batch Processing Time]
    F --> M[Real Time Processing Time]
    G --> N[Encryption Algorithm]
    G --> O[Data Integrity Check]
    H --> P[Password Strength Check]
    H --> Q[Two Factor Authentication]
    I --> R[Easy Navigation]
    I --> S[Clear Instructions]

mermaid_block_diagrams.md

Mermaid block diagrams

mermaid - Block Diagrams Documentation

https://mermaid.js.org/syntax/block.html

block-beta
columns 1
  db(("DB"))
  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px

another

block-beta
  columns 3
  a:3
  block:group1:2
    columns 2
    h i j k
  end
  g
  block:group2:3
    %% columns auto (default)
    l m n o p q r
  end

mermaid_markdown_mindmap_test.md

Mermaid MindMap Test

https://mermaid.js.org/syntax/mindmap.html

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

mermaid_sankey.md

Mermaid Sankey

Sankey diagram

https://mermaid.js.org/syntax/sankey.html

---
config:
  sankey:
    showValues: false
---
sankey-beta

Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,Ngas,40.719
Gas reserves,Ngas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
Ngas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366

basic

sankey-beta

%% source,target,value
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14

mermaid_timeline.md

mermaid timeline

https://mermaid.js.org/syntax/timeline.html

timeline
    title History of Social Media Platform
    2002 : Foo
    2004 : Bar
         : Zoo
    2005 : Xar
    2006 : Yup

mermaid_zenuml.md

Mermaid ZenUML

https://mermaid.js.org/syntax/zenuml.html

zenuml
    title Reply message
    Client->A.method() {
      B.method() {
        if(condition) {
          return x1
          // return early
          @return
          A->Client: x11
        }
      }
      return x2
    }

xx_stl_3d_diagram.md

STL 3D syntax support

https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams

solid cube_corner
  facet normal 0.0 -1.0 0.0
    outer loop
      vertex 0.0 0.0 0.0
      vertex 1.0 0.0 0.0
      vertex 0.0 0.0 1.0
    endloop
  endfacet
  facet normal 0.0 0.0 -1.0
    outer loop
      vertex 0.0 0.0 0.0
      vertex 0.0 1.0 0.0
      vertex 1.0 0.0 0.0
    endloop
  endfacet
  facet normal -1.0 0.0 0.0
    outer loop
      vertex 0.0 0.0 0.0
      vertex 0.0 0.0 1.0
      vertex 0.0 1.0 0.0
    endloop
  endfacet
  facet normal 0.577 0.577 0.577
    outer loop
      vertex 1.0 0.0 0.0
      vertex 0.0 1.0 0.0
      vertex 0.0 0.0 1.0
    endloop
  endfacet
endsolid

yy_GeoJSON_TopoJSON.md

GeoJSON

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": 1,
      "properties": {
        "ID": 0
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
              [-90,35],
              [-90,30],
              [-85,30],
              [-85,35],
              [-90,35]
          ]
        ]
      }
    }
  ]
}

TopoJSON

{
  "type": "Topology",
  "transform": {
    "scale": [0.0005000500050005, 0.00010001000100010001],
    "translate": [100, 0]
  },
  "objects": {
    "example": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "Point",
          "properties": {"prop0": "value0"},
          "coordinates": [4000, 5000]
        },
        {
          "type": "LineString",
          "properties": {"prop0": "value0", "prop1": 0},
          "arcs": [0]
        },
        {
          "type": "Polygon",
          "properties": {"prop0": "value0",
            "prop1": {"this": "that"}
          },
          "arcs": [[1]]
        }
      ]
    }
  },
  "arcs": [[[4000, 0], [1999, 9999], [2000, -9999], [2000, 9999]],[[0, 0], [0, 9999], [2000, 0], [0, -9999], [-2000, 0]]]
}