🎯 Live Demo
Click on any of the diagrams below to test the zoom functionality!
This page contains interactive Mermaid diagrams that demonstrate the mkdocs-mermaid-zoom plugin in action.
📋 Instructions
- Click on any diagram to open it in a lightbox
- Scroll to zoom in/out
- Drag to pan around large diagrams
- Press ESC or click outside to close
Simple Flowchart
This basic flowchart demonstrates the plugin's core functionality:
graph TD
A[Start] --> B{Is it working?};
B -- Yes --> C[Great!];
B -- No --> D[Check the console];
C --> E[End];
D --> E[End];
E-Commerce System Class Diagram
A more complex diagram perfect for testing zoom and pan features:
classDiagram
class User {
+login()
+logout()
+updateProfile()
+getOrderHistory()
}
class Customer {
+addPaymentMethod()
+removePaymentMethod()
+placeOrder()
}
class Admin {
+manageProducts()
+viewAllOrders()
+manageUsers()
+generateReports()
}
class Product {
+updateStock()
+updatePrice()
+setDiscount()
}
class Order {
+calculateTotal()
+updateStatus()
+cancelOrder()
+getOrderDetails()
}
class OrderItem {
+calculateSubtotal()
+updateQuantity()
}
class ShoppingCart {
+addItem()
+removeItem()
+clearCart()
+calculateTotal()
}
class Payment {
+processPayment()
+refund()
+getPaymentDetails()
}
User <|-- Customer
User <|-- Admin
Customer --> Order
Order --> OrderItem
Product --> OrderItem
Customer --> ShoppingCart
ShoppingCart --> OrderItem
Order --> Payment
User Authentication Sequence
Test the plugin with this detailed sequence diagram:
sequenceDiagram
participant U as User
participant F as Frontend
participant A as Auth Service
participant D as Database
participant C as Cache
U->>F: Enter credentials
F->>A: POST /login
A->>D: Validate user
D-->>A: User data
A->>C: Store session
C-->>A: Session ID
A-->>F: JWT Token + Session ID
F->>F: Store token in localStorage
F-->>U: Redirect to dashboard
Note over U,C: User is now authenticated
U->>F: Access protected resource
F->>A: GET /api/data (with JWT)
A->>C: Validate session
C-->>A: Session valid
A->>D: Fetch user data
D-->>A: Data
A-->>F: Protected data
F-->>U: Display content