MermaidJS Cheatsheet

Last modified: March 9, 2023

FlowChart

direction - top to down
graph TD
  a-->b
direction - left to right
graph LR
Shape: round rect
id(Label)
Shape: circle
id((Start))
Shape: cylinder/database
id[(Database)]
Shape: rhombus
id{is successful}
Shape: double circle
id(((End)))
Edges: with arrow head
flowchart LR
  A-->B
Edges: without arrow
flowchart LR
  A --- B
Edges: with text
flowchart LR
  A---|This is the text|B

Sequence Diagram

line types
sequenceDiagram
  a->b: solid no arrow
  a-->b: dashed no arrow
  a-->>b: dashed with arrow
  b-->>a: reverse

Class Diagrams

define class
classDiagram
class Person{
    String name
}