1. Flowchart

A flowchart is the most basic diagram in Mermaid.

graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Step 1]
  B -->|No| D[Step 2]
  C --> E[End]
  D --> E[End]

Basic Syntax:

graph TD: Graph direction Top to Down (other options: LR, RL, BT).
-->: Defines a connection (arrow).
-->|Text|: Text on the edge.
[Text]: Rectangle shape.
{Text}: Diamond shape (used for decisions).

2. Sequence Diagram

Sequence diagrams represent processes as a series of messages exchanged between participants.

sequenceDiagram
  participant A as User
  participant B as Server
  A->>B: Login request
  B-->>A: Authentication successful
  A->>B: Request data
  B-->>A: Response data

Basic Syntax:

participant X as Name: Defines a participant.
->>: Solid line arrow from one participant to another (request).
-->>: Dashed line arrow (response).

3. Gantt Chart

Gantt charts are great for project planning and task management.

gantt
  title Project Timeline
  dateFormat  YYYY-MM-DD
  section Development
  Task 1 :done, t1, 2024-01-01, 3d
  Task 2 :active, t2, 2024-01-04, 5d
  Task 3 : t3, 2024-01-10, 7d

Basic Syntax:

gantt: Declares the chart type.
title: Adds a title to the chart.
dateFormat: Sets the date format.
section: Groups tasks under a heading.
Task X :status, id, start-date, duration.

Status options: done, active, or leave blank.

4. Class Diagram

Class diagrams represent the structure of a system.

classDiagram
  class Animal {
    +String name
    +int age
    +makeSound()
  }
  class Dog {
    +String breed
    +bark()
  }
  Animal <|-- Dog

Basic Syntax:

classDiagram: Declares the diagram type.
class X {}: Defines a class.
<|--: Inheritance arrow (Dog inherits from Animal).

5. Pie Chart

Create simple pie charts with percentages.

pie title Browser Market Share
  "Chrome" : 63.59
  "Firefox" : 4.69
  "Safari" : 19.17
  "Edge" : 3.71

Basic Syntax:

pie title: Adds a title.
"Label" : percentage: Defines slices.

6. State Diagram

State diagrams represent different states in a system.

stateDiagram
  [*] --> LoggedOut
  LoggedOut --> LoggedIn: Login
  LoggedIn --> LoggedOut: Logout
  LoggedIn --> Dashboard

Basic Syntax:

stateDiagram: Declares the diagram type.
[*]: Initial state.
-->: Transition between states.
:: Label transitions.

7. Entity Relationship Diagram

Used to represent relationships between entities.

erDiagram
  USER {
    int id
    string name
    string email
  }
  ORDER {
    int id
    date order_date
  }
  USER ||--o{ ORDER: places

Basic Syntax:

erDiagram: Declares the diagram type.
{}: Defines entity attributes.
Relationships:
- ||--o{: One-to-many relationship.

8. Mind Map

Useful for brainstorming and organizing ideas.

mindmap
  root
    Branch 1
      Sub-Branch 1.1
      Sub-Branch 1.2
    Branch 2
      Sub-Branch 2.1
      Sub-Branch 2.2

Basic Syntax:

mindmap: Declares the mind map type.
Indentation creates child nodes under the parent node.

9. Git Graph

Visualize Git branches and merges.

gitGraph
  commit
  branch feature
  commit
  checkout main
  merge feature

Basic Syntax:

gitGraph: Declares the diagram type.
branch X: Creates a new branch.
checkout X: Switches to branch.
merge X: Merges a branch.

General Tips:

Direction: TD (top to down), LR (left to right), BT (bottom to top), RL (right to left).
Text in Shapes: Use [Text] for rectangles, {Text} for diamonds, and (Text) for circles.

This cheat sheet covers the basics to get started with Mermaid diagrams in Obsidian. You can modify and extend these templates as needed for more complex diagrams!

Cheat sheets

Atuin Cheet sheet

Marmaid.js Cheatsheet

Subscribe