Diagrams Demo¶
This page demonstrates various Mermaid diagram types rendered live using SuperFences.
Flowcharts¶
Basic Flowchart¶
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
Flowchart with Subgraphs¶
Sequence Diagrams¶
User Authentication Flow¶
sequenceDiagram
autonumber
participant U as User
participant C as Client
participant S as Server
participant D as Database
U->>C: Enter credentials
C->>S: POST /login
S->>D: Validate user
D-->>S: User valid
S->>S: Generate token
S-->>C: Return token
C-->>U: Login successful
Note over U,D: Authentication complete
API Request Flow¶
sequenceDiagram
participant Client
participant API
participant Cache
participant Database
Client->>API: GET /users/123
API->>Cache: Check cache
alt Cache hit
Cache-->>API: Return cached data
else Cache miss
API->>Database: Query user
Database-->>API: User data
API->>Cache: Store in cache
end
API-->>Client: Return user data
State Diagrams¶
Order Processing State Machine¶
stateDiagram-v2
[*] --> Pending
Pending --> Processing: Payment received
Processing --> Shipped: Items packed
Processing --> Cancelled: Out of stock
Shipped --> Delivered: Package received
Shipped --> Returned: Customer return
Delivered --> [*]
Cancelled --> [*]
Returned --> Processing: Restock
User Account States¶
stateDiagram-v2
[*] --> Active
Active --> Suspended: Violation
Active --> Inactive: No activity
Suspended --> Active: Appeal approved
Suspended --> Banned: Multiple violations
Inactive --> Active: User login
Inactive --> Deleted: 2 years inactive
Banned --> [*]
Deleted --> [*]
Class Diagrams¶
Software Architecture¶
classDiagram
class User {
+String id
+String email
+String password
+login()
+logout()
+updateProfile()
}
class Post {
+String id
+String title
+String content
+Date created
+publish()
+edit()
+delete()
}
class Comment {
+String id
+String content
+Date created
+edit()
+delete()
}
User "1" --> "*" Post : creates
User "1" --> "*" Comment : writes
Post "1" --> "*" Comment : has
Design Patterns¶
classDiagram
class Subject {
<<interface>>
+attach(Observer)
+detach(Observer)
+notify()
}
class ConcreteSubject {
-state
+getState()
+setState()
}
class Observer {
<<interface>>
+update()
}
class ConcreteObserver {
-observerState
+update()
}
Subject <|.. ConcreteSubject
Observer <|.. ConcreteObserver
Subject o-- Observer
ConcreteObserver --> ConcreteSubject
Entity Relationship Diagrams¶
Database Schema¶
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
PRODUCT ||--o{ LINE-ITEM : "ordered in"
CUSTOMER {
int id PK
string name
string email UK
string phone
date created
}
ORDER {
int id PK
int customer_id FK
date order_date
string status
decimal total
}
LINE-ITEM {
int id PK
int order_id FK
int product_id FK
int quantity
decimal price
}
PRODUCT {
int id PK
string name
string description
decimal price
int stock
}
Gantt Charts¶
Project Timeline¶
gantt
title MkDocs Documentation Project
dateFormat YYYY-MM-DD
section Planning
Requirements gathering :done, des1, 2024-01-01, 7d
Design documentation :done, des2, after des1, 5d
section Development
Setup environment :done, dev1, after des2, 3d
Core features :active, dev2, after dev1, 14d
Advanced features : dev3, after dev2, 10d
section Testing
Unit tests : test1, after dev2, 5d
Integration tests : test2, after test1, 5d
section Deployment
Production release : deploy1, after test2, 2d
Git Graphs¶
Branch Strategy¶
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
branch feature/auth
checkout feature/auth
commit
commit
checkout develop
merge feature/auth
commit
checkout main
merge develop
commit
Pie Charts¶
Technology Stack Distribution¶
pie title Technology Usage in Project
"Python" : 45
"JavaScript" : 25
"CSS" : 15
"HTML" : 10
"YAML" : 5
Journey Diagrams¶
User Experience Journey¶
journey
title My Documentation Journey
section Getting Started
Visit site: 5: Me
Read intro: 4: Me
Install MkDocs: 3: Me
section Learning
Follow tutorial: 5: Me
Try examples: 4: Me
Make mistakes: 2: Me
section Mastery
Build own docs: 5: Me
Add custom features: 4: Me
Share with others: 5: Me
Mind Maps¶
Documentation Structure¶
mindmap
root((MkDocs))
Features
Navigation
Search
Themes
Plugins
Content
Markdown
Extensions
PyMdown
Mermaid
Media
Images
Videos
Deployment
GitHub Pages
GitLab Pages
Custom Hosting
Community
Forums
Discord
Contributors
Tips for Using Diagrams¶
- Keep it Simple: Don't overcomplicate diagrams
- Use Colors Wisely: Let the theme handle colors
- Add Context: Always explain what the diagram shows
- Test Responsiveness: Check on mobile devices
- Consider Accessibility: Add descriptions for screen readers
Common Issues and Solutions¶
Diagram Too Wide¶
If a diagram is too wide for mobile:
Complex Relationships¶
Break complex diagrams into smaller ones: