Header image for the post titled Mermaid: The Cheatsheet

Mermaid.js is one of the coolest and nerdiest projects I’ve seen in a while. I mean, you write code to generate diagrams!

And we all know that diagrams make everything better. Here, let me show you with a diagram!

journey
      Without Diagrams: 0
      With Diagrams: 7

Start with a diagram type

I typically only need:

  • flowchart
  • classDiagram
  • gantt
  • pie
  • quadrantChart
  • mindmap
  • timeline

Then give a direction

  • LR: Left to right
  • TD/TB: Top-down

Flowchart example

  • You can first declare element by ID and Label and then call on them just by ID later.
flowchart TD

ThumbsUp["Quotes to include unicode👍"]
SlightlyRounded("It's nealry inperceptive!")
Rounded([Not all labels are made with quotes])
JustIDnoLabel
Square[[So many brackets]]
Cylinder[(Wow, even 3D shapes!)]
Circle((Classic!))
Diamond{$$$}
style Diamond fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef pinky fill:#f9f,stroke:#333,stroke-width:4px
class Square,Cylinder pinky
Circle:::pinky

subgraph collection
  Square & JustIDnoLabel
end

SlightlyRounded --> ThumbsUp
SlightlyRounded -.-> Rounded
Rounded & Circle --> JustIDnoLabel
JustIDnoLabel --> Square
ThumbsUp --- Square
ThumbsUp --> SlightlyRounded
Rounded -- What kind of connection is this? --> Cylinder
Rounded ==> Circle
Rounded --> Diamond --> Circle
Diamond <--> Cylinder

flowchart TD

ThumbsUp["Quotes to include unicode👍"]
SlightlyRounded("It's nealry inperceptive!")
Rounded([Not all labels are made with quotes])
JustIDnoLabel
Square[[So many brackets]]
Cylinder[(Wow, even 3D shapes!)]
Circle((Classic!))
Diamond{$$$}
style Diamond fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef pinky fill:#f9f,stroke:#333,stroke-width:4px
class Square,Cylinder pinky
Circle:::pinky

subgraph collection
  Square & JustIDnoLabel
end

SlightlyRounded --> ThumbsUp
SlightlyRounded -.-> Rounded
Rounded & Circle --> JustIDnoLabel
JustIDnoLabel --> Square
ThumbsUp --- Square
ThumbsUp --> SlightlyRounded
Rounded -- What kind of connection is this? --> Cylinder
Rounded ==> Circle
Rounded --> Diamond --> Circle
Diamond <--> Cylinder