## Mermaid Markdown examples https://mermaid.js.org/ --- ## [Flowchart](https://mermaid.js.org/syntax/flowchart.html) ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; F-->C ``` ## [sequenceDiagram](https://mermaid.js.org/syntax/sequenceDiagram.html) ```mermaid sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop HealthCheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! ``` ## [Gantt diagram](https://mermaid.js.org/syntax/gantt.html) ```mermaid gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d ``` ## [Class diagram](https://mermaid.js.org/syntax/classDiagram.html) ```mermaid classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label ``` ## [Git graph](https://mermaid.js.org/syntax/gitgraph.html) ```mermaid --- title: Git graph example --- gitGraph commit id: "1" commit id: "2" tag: "v1.0.0" branch dev commit id: "3" type: REVERSE commit id: "4" commit id: "5" checkout main commit id: "6" commit id: "7" merge dev commit id: "8" commit id: "9" ``` --- Hiding Branch names and lines ```mermaid %%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%% gitGraph commit branch hotfix checkout hotfix commit branch develop checkout develop commit id:"ash" tag:"abc" branch featureB checkout featureB commit type:HIGHLIGHT checkout main checkout hotfix commit type:NORMAL checkout develop commit type:REVERSE checkout featureB commit checkout main merge hotfix checkout featureB commit checkout develop branch featureA commit checkout develop merge hotfix checkout featureA commit checkout featureB commit checkout develop merge featureA branch release checkout release commit checkout main commit checkout release merge main checkout develop merge release ``` ```mermaid gitGraph TB: commit commit branch develop commit commit checkout main commit commit merge develop commit commit ``` ## [XY Chart](https://mermaid.js.org/syntax/xyChart.html) ```mermaid xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] ```