Mermaid cheatsheet

block-beta.md

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

block-beta
columns 4
  rect1["Rectangle ❤"]
  rounded1("Rounded edges")
  sub1[["Subroutine"]]
  db1[("Database")]
  circle1(("Circle"))
  circle2((("Circle")))
  flag1>"Flag"]
  choice1{"Choice"}
  hex1{{"Hexagon"}}
  para1[/"Parallel"/]
  para2[\"Parallel"\]
  trap1[/"Trapezoid"\]
  trap2[\"Trapezoid"/]
  para1[/"Parallel"/]
  para2[\"Parallel"\]
  blockArrowId<["right arrow"]>(right)
  blockArrowId2<["left arrow"]>(left)
  blockArrowId3<["up arrow"]>(up)
  blockArrowId4<["down\narrow"]>(down)
  blockArrowId5<["left-right"]>(x)
  blockArrowId6<["up-down"]>(y)
  blockArrowId7<["x down"]>(x, down)

Loading

flowchart.md

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

flowchart TD
subgraph "Shapes1"
  rect1[Rectangle ❤]
  rounded1(Rounded edges)
  sub1[[Subroutine]]
end

Loading

flowchart TD
subgraph "Shapes2"
  db1[(Database)]
  circle1((Circle))
  circle2(((Circle)))
end

Loading

flowchart TD
subgraph "Shapes3"
  flag1>Flag]
  choice1{Choice}
  hex1{{Hexagon}}
end

Loading

flowchart TD
subgraph "Shapes4"
  para1[/Parallel/]
  para2[\Parallel\]
  trap1[/Trapezoid\]
  trap2[\Trapezoid/]
  para1[/Parallel/]
  para2[\Parallel\]
end

Loading

flowchart TD
subgraph "Arrows"
    A1 --> B1
    C1 --- D1
    E1 -.-> F1
    G1 ==> H1
    I1 ~~~ J1
    K1 --o L1
    M1 --x N1
end

Loading

flowchart TD
subgraph "Arrows"
    A2 -->|text| B2
    C2 ---|text| D2
    E2 -.->|text| F2
    G2 ==>|text| H2
    I2 ~~~|invis| J2
    K2 --o|text| L2
    M2 --x|text| N2
end

Loading

flowchart TD
subgraph "Arrows"
    A3 -- text --> B3
    C3 -- text --- D3
    E3 -. text .-> F3
    G3 == text ==> H3
    %% this is invalid: I3 ~~ text ~~~ J3
    I3 ~~~ J3
    K3 -- text --o L3
    M3 -- text --x N3
end

Loading