Diagram

<div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        Diagram <code>mermaid</code>
    </h1>
    <hr>
    <h3 class="celestial-blue">Flow Chart</h3>
    <div style="padding: var(--size-4);">
        <pre class="mermaid">
flowchart LR
  A[Start] -..-> B{Is it?}
  B -- Yes --> C[OK]
  C --> D[Rethink <i class="ti ti-brand-cpp"></i>]
  D ==> B
  B -..- No ====> E[End <i class="ti ti-brand-rust"></i>]
  F@{ shape: braces, label: "Comment" }
  G@{ shape: doc, label: "Document" }
  class B rgtest
    </pre>
    </div>
    <hr>
    <h3 class="celestial-blue">State Diagram</h3>
    <div style="padding: var(--size-4);">
        <pre class="mermaid malachite">
---
title: Simple sample
---
stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
    </pre>
    </div>
    <hr>
    <h3 class="celestial-blue">Class Diagram</h3>
    <div style="padding: var(--size-4);">
        <pre class="mermaid selective-yellow">
---
title: Animal example
---
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    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()
    }
    </pre>
    </div>
    <hr>
    <h3 class="celestial-blue">Mindmap</h3>
    <div style="padding: var(--size-4);">
        <pre class="mermaid celestial-blue">
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(ti ti-arrow-up)
      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
    </pre>
    </div>
    <hr>
    <h3 class="celestial-blue">Timeline</h3>
    <div style="padding: var(--size-4);">
        <pre class="mermaid mexican-pink">
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
    2010 : Matrix
    2022 : Mastodon
    </pre>
    </div>
    <hr>
    <h3 class="celestial-blue">Pie chart</h3>
    <div style="padding: var(--size-4);">
        <pre class="mermaid chartreuse">
pie title Pets adopted by volunteers
    "Rust" : 386
    "Java" : 85
    "Python" : 15
    "C++" : 10
    "JavaScript" : 3
    </pre>
    </div>
    <hr>
    <h3 class="celestial-blue">Gitgraph</h3>
    <div style="padding: var(--size-4);">
        <pre class="mermaid">
---
title: Example Git diagram
---
  gitGraph
       commit id: "1"
       commit id: "2"
       branch nice_feature
       checkout nice_feature
       commit id: "3"
       checkout main
       commit id: "4"
       checkout nice_feature
       branch very_nice_feature
       checkout very_nice_feature
       commit id: "5"
       checkout main
       commit id: "6"
       checkout nice_feature
       commit id: "7"
       checkout main
       merge nice_feature id: "customID" tag: "customTag" type: REVERSE
       checkout very_nice_feature
       commit id: "8"
       checkout main
       commit id: "9"
    </pre>
    </div>
    <hr>
    <h3 class="celestial-blue">Sankey</h3>
    <div style="padding: var(--size-4);">
        <pre class="mermaid">
---
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
    </pre>
    </div>
</div>