graph Flowcharts
Define orientation (TD=Top Down, LR=Left Right) and shapes.
graph TD
A[Square Rect] --> B(Rounded Rect)
B --> C{Decision}
C -->|Label| D[Result]
C -.Dotted.-> E[(Database)]
E ==Thick==> F((Circle))
subgraph Group Name
D
F
end
- Shapes:
[] Box, () Rounded, {} Diamond, [()] DB, (()) Circle.
- Links:
--> Arrow, --- Line, -.-> Dotted, ==> Thick.
sequenceDiagram Sequence Diagrams
Model actor interactions, activations, notes, and logic loops.
sequenceDiagram
autonumber
actor U as User
participant S as Server
U->>+S: HTTP GET Request
Note right of S: Processing...
alt is Authorized
S-->>U: 200 OK
else is Unauthorized
S--xU: 403 Forbidden
end
deactivate S
- Arrows:
->> Solid, -->> Dotted, -x Async/Failed.
- Logic: Use
alt / else / end for conditionals, loop for loops.
erDiagram Entity Relationship
Show databases, attributes, and cardinality (1:1, 1:N, M:N).
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER {
string id PK
string name
}
ORDER {
int orderNumber PK
string deliveryAddress
}
- Zero or One:
|o--o|
- Exactly One:
||--||
- Zero or More:
}o--o{
- One or More:
}|--|{
gantt Gantt Charts
Track project schedules, dependencies, and milestones.
gantt
title Project Alpha
dateFormat YYYY-MM-DD
section Planning
Design phase :done, des1, 2024-01-01, 3d
Requirements :active, req1, after des1, 2d
section Development
Database Setup : db1, after req1, 5d
API Endpoints :crit, api1, after db1, 4d
Beta Release :milestone, m1, after api1, 0d
- Tags:
done, active, crit (critical), milestone.
- Time: Use
3d (days), 2w (weeks), or explicit dates.
classDiagram Class Diagrams
Map object-oriented software architecture and inheritance.
classDiagram
class Animal {
+String name
-int age
+makeSound() void
}
class Dog {
+bark()
}
Animal <|-- Dog : Inheritance
Animal *-- Tail : Composition
Animal o-- Toy : Aggregation
stateDiagram-v2 State Diagrams
Describe state machines and transitions.
stateDiagram-v2
[*] --> Idle
Idle --> Moving : start
state Moving {
[*] --> Accelerating
Accelerating --> Cruising
}
Moving --> Idle : stop
Idle --> [*]
pie Pie Charts
Create simple proportion visualizations.
pie title Pets in Office
"Dogs" : 45
"Cats" : 30
"Fish" : 15
"Birds" : 10
style Styling Nodes
Apply custom CSS styles to specific shapes in flowcharts.
graph TD
A[Standard Node]
B[Custom Colored Node]
style B fill:#bbf,stroke:#333,stroke-width:4px,color:#000
classDef myClass fill:#f96,stroke:#333,stroke-dasharray: 5 5;
class A myClass;
