Every diagram below visualizes a different aspect of the same fictional Online Bookstore system.
Order processing flow with color-coded components.
flowchart TD
classDef controller fill:#ffe1e1,stroke:#c0392b
classDef service fill:#e1f5ff,stroke:#1a5490
classDef database fill:#fff4e1,stroke:#c97a00
classDef external fill:#e1f5e1,stroke:#2d5016
Customer([Customer])
OrderCtrl[OrderController]:::controller
subgraph Core Services
CartSvc[CartService]:::service
PaymentSvc[PaymentService]:::service
InventorySvc[InventoryService]:::service
end
subgraph Data Stores
OrderDB[(Orders DB)]:::database
CatalogDB[(Catalog DB)]:::database
end
Stripe([Stripe API]):::external
Email([Email Service]):::external
Customer -->|1 place order| OrderCtrl
OrderCtrl -->|2 validate cart| CartSvc
CartSvc -->|3 check stock| InventorySvc
InventorySvc -->|4 query| CatalogDB
CatalogDB -->|5 availability| InventorySvc
InventorySvc -->|6 confirmed| CartSvc
CartSvc -->|7 charge| PaymentSvc
PaymentSvc -->|8 process| Stripe
Stripe -->|9 success| PaymentSvc
PaymentSvc -->|10 save order| OrderDB
OrderDB -->|11 order created| OrderCtrl
OrderCtrl -->|12 send confirmation| Email
OrderCtrl -->|13 order receipt| Customer
The checkout interaction between services.
sequenceDiagram
participant C as Customer
participant W as Web App
participant Cart as Cart Service
participant Inv as Inventory
participant Pay as Payment
participant DB as Orders DB
C->>W: Checkout
W->>Cart: Get cart items
Cart-->>W: 3 books, $45.97
W->>Inv: Reserve items
Inv-->>W: Reserved
W->>Pay: Charge $45.97
Pay-->>W: Payment confirmed
W->>DB: Create order
DB-->>W: Order #1042
W-->>C: Order confirmed #1042
Lifecycle of an order.
stateDiagram-v2
[*] --> Draft
Draft --> Pending: Customer submits
Pending --> Paid: Payment succeeds
Pending --> Cancelled: Payment fails
Paid --> Shipped: Warehouse dispatches
Shipped --> Delivered: Carrier confirms
Delivered --> Returned: Customer returns
Delivered --> [*]
Returned --> Refunded: Refund processed
Refunded --> [*]
Cancelled --> [*]
Customer experience buying a book.
journey
title Buying a Book Online
section Browsing
Search for a book: 5: Customer
Read reviews: 4: Customer
Compare prices: 3: Customer
section Purchasing
Add to cart: 5: Customer
Enter shipping info: 3: Customer
Enter payment: 2: Customer
Confirm order: 4: Customer
section Fulfillment
Receive tracking email: 5: Customer
Wait for delivery: 2: Customer
Receive package: 5: Customer
section Post-Purchase
Rate the book: 4: Customer
Browse recommendations: 4: Customer
Domain model for the bookstore.
classDiagram
class Customer {
+String name
+String email
+placeOrder()
+viewHistory()
}
class Order {
+int id
+Date createdAt
+String status
+calculateTotal()
+cancel()
}
class OrderItem {
+int quantity
+float price
+subtotal()
}
class Book {
+String title
+String author
+String isbn
+float price
+int stock
}
class Category {
+String name
+String description
}
Customer "1" --> "*" Order : places
Order "1" --> "*" OrderItem : contains
OrderItem "*" --> "1" Book : references
Book "*" --> "*" Category : belongs to
Database schema.
erDiagram
CUSTOMER ||--|{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
ORDER_ITEM }|--|| BOOK : references
BOOK }|--|{ CATEGORY : "belongs to"
BOOK ||--o{ REVIEW : has
CUSTOMER ||--o{ REVIEW : writes
ORDER ||--o| PAYMENT : "paid via"
ORDER ||--o| SHIPMENT : "shipped via"
Bookstore feature rollout timeline.
gantt
title Bookstore Feature Roadmap 2024
dateFormat YYYY-MM-DD
section Catalog
Search improvements :a1, 2024-01-15, 30d
Category filters :a2, after a1, 14d
Author pages :a3, after a2, 21d
section Checkout
Guest checkout :b1, 2024-02-01, 21d
Saved payment methods :b2, after b1, 14d
section Fulfillment
Real-time tracking :c1, 2024-03-01, 28d
Returns portal :c2, after c1, 21d
section Analytics
Sales dashboard :d1, 2024-04-01, 30d
Revenue by book category.
pie title Revenue by Category (Q4 2024)
"Fiction" : 35
"Non-Fiction" : 25
"Science & Tech" : 20
"Children's" : 12
"Textbooks" : 8
Release branching strategy for the bookstore app.
gitGraph
commit id: "v1.0 launch"
branch feature/search
commit id: "add search index"
commit id: "search UI"
checkout main
branch feature/checkout
commit id: "guest checkout"
commit id: "payment methods"
checkout main
merge feature/search id: "merge search"
merge feature/checkout id: "merge checkout"
commit id: "v1.1 release"
branch hotfix/payment
commit id: "fix timeout"
checkout main
merge hotfix/payment id: "v1.1.1"
Bookstore system overview.
mindmap
root((Online Bookstore))
Catalog
Books
Categories
Authors
Search
Customers
Accounts
Wishlists
Reviews
Orders
Cart
Checkout
Payment
Shipping
Operations
Inventory
Analytics
Promotions
History of the bookstore.
timeline
title Online Bookstore Milestones
2020 : Founded
: First 100 books listed
2021 : Launched mobile app
: 10,000 customers
2022 : Added e-books
: International shipping
2023 : 100,000 customers
: Audiobook support
2024 : AI recommendations
: Same-day delivery in 5 cities
Feature prioritization matrix.
quadrantChart
title Feature Priority Matrix
x-axis Low Effort --> High Effort
y-axis Low Impact --> High Impact
quadrant-1 Do First
quadrant-2 Plan Carefully
quadrant-3 Quick Wins
quadrant-4 Reconsider
Search autocomplete: [0.3, 0.85]
AI recommendations: [0.8, 0.9]
Dark mode: [0.2, 0.3]
Social sharing: [0.4, 0.2]
Guest checkout: [0.25, 0.75]
Loyalty program: [0.7, 0.6]
Gift cards: [0.5, 0.7]
System context for the bookstore.
C4Context
title Online Bookstore - System Context
Person(customer, "Customer", "Browses and buys books")
Person(admin, "Admin", "Manages catalog and orders")
System(bookstore, "Online Bookstore", "Web application for selling books")
System_Ext(stripe, "Stripe", "Payment processing")
System_Ext(warehouse, "Warehouse System", "Inventory and shipping")
System_Ext(email, "Email Provider", "Transactional emails")
Rel(customer, bookstore, "Browses, searches, orders")
Rel(admin, bookstore, "Manages catalog")
Rel(bookstore, stripe, "Processes payments")
Rel(bookstore, warehouse, "Ships orders")
Rel(bookstore, email, "Sends notifications")
Monthly book sales over a year.
xychart-beta
title "Monthly Book Sales (2024)"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
y-axis "Books Sold" 0 --> 5000
bar [1200, 1400, 1800, 2100, 1900, 2400, 2200, 3100, 2800, 3500, 4200, 4800]
line [1200, 1400, 1800, 2100, 1900, 2400, 2200, 3100, 2800, 3500, 4200, 4800]
Traffic flow from source to conversion.
sankey-beta
Homepage,Search,5000
Homepage,Browse Categories,3000
Homepage,Deals Page,2000
Search,Product Page,4000
Search,Exit,1000
Browse Categories,Product Page,2500
Browse Categories,Exit,500
Deals Page,Product Page,1800
Deals Page,Exit,200
Product Page,Add to Cart,5000
Product Page,Exit,3300
Add to Cart,Checkout,3500
Add to Cart,Exit,1500
Checkout,Order Placed,3000
Checkout,Exit,500
High-level system architecture.
block-beta
columns 3
Frontend["Web Frontend"]:3
space
API["API Gateway"]:1
space
CartSvc["Cart Service"] PaymentSvc["Payment Service"] CatalogSvc["Catalog Service"]
space
DB[("PostgreSQL")]:1
space
Frontend --> API
API --> CartSvc
API --> PaymentSvc
API --> CatalogSvc
CartSvc --> DB
PaymentSvc --> DB
CatalogSvc --> DB
Current sprint board.
kanban
Backlog
b1["Wishlist sharing"]
b2["Bulk discounts"]
In Progress
ip1["Search autocomplete"]
ip2["Guest checkout"]
Review
r1["Email templates"]
Done
d1["Author pages"]
d2["Category filters"]
d3["Order tracking"]
API response packet structure.
packet-beta
0-7: "Version (1)"
8-15: "Status Code"
16-31: "Content Length"
32-63: "Request ID"
64-95: "Timestamp"
96-127: "JSON Payload (order data...)"
Revenue breakdown by department.
treemap-beta
"Revenue"
"Physical Books"
"Fiction": 35000
"Non-Fiction": 25000
"Children's": 12000
"Digital"
"E-books": 18000
"Audiobooks": 15000
"Accessories"
"Bookmarks": 3000
"Reading Lights": 5000