Mermaid examples

Intro

Mermaid is a easy way to create easy graphics like flowcharts

For example

flowchart TD
  start([Start]) -->
  declare1(Declare variables a, b and c) -->
  assign1[/Assign a, b and c/] -->
  condition1{Is a>b?} -- False -->
  condition1_false{Is c>b?} -- False -->
  printb[/Print b/] -->
  stop([Stop])
  condition1_false -- True -->
  printc[/Print c/] --> stop
  condition1 -- True --> condition1_true{Is a>c?}
  condition1_true -- False --> printc
  condition1_true -- True --> printa[/Print a/] --> stop

  classDef blue fill:#00f,color:#fff
  classDef blueline stroke:#00f
  style start fill:#0f0,color:#fff
  style stop fill:#f00,color:#fff
  class declare1,assign1,printb,printc,printa blue
  class condition1,condition1_false,condition1_true blueline

Creates the following graph

[mermaid] flowchart TD start([Start]) –> declare1(Declare variables a, b and c) –> assign1[/Assign a, b and c/] –> condition1{Is a>b?} – False –> condition1_false{Is c>b?} – False –> printb[/Print b/] –> stop([Stop]) condition1_false – True –> printc[/Print c/] –> stop condition1 – True –> condition1_true{Is a>c?} condition1_true – False –> printc condition1_true – True –> printa[/Print a/] –> stop

classDef blue fill:#00f,color:#fff classDef blueline stroke:#00f style start fill:#0f0,color:#fff style stop fill:#f00,color:#fff class declare1,assign1,printb,printc,printa blue class condition1,condition1_false,condition1_true blueline [/mermaid]

Run it from command line

mmdc -i mermaid_flowchart.mmd -o /tmp/proef3.png

More infro

1 Mermaid flowchart doc 2 Mermaid Cheat Sheet

Mermaid Live Editor

You can also use a web live editor to create youre graphs, use it with docker like this

docker run --rm --publish 8000:80 ghcr.io/mermaid-js/mermaid-live-editor

En go in your webbrowser to http://localhost:8000

![[Pasted image 20250309231653.png]]

Similar

• kroki.io Kroki provides a unified API with support
• nomnoml.com a tool for drawing UML diagrams based on a simple syntax. src

Later,

Richard