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!