PlantUML Examples and Templates

[kyle-ip]

Flow Diagram

@startuml
start
:title Online Shopping Order Process;

:Customer places order;
split
  :Validate order details;
split again
  :Check customer account status;
end split
-> [Order is Valid];

:Process payment;
if (Payment successful?) then (yes)
  :Update order status;
else (no)
  :Cancel order;
  stop
endif

if (Is item in stock?) then (yes)
  :Allocate stock;
else (no)
  :Backorder item;
endif

:Prepare for shipping;
:Dispatch order;
:Send order confirmation;

if (Order delivered?) then (yes)
  :Update order status;
  :Request customer feedback;
else (no)
  fork
    :Initiate follow-up;
  fork again
    :Investigate with courier;
  end fork
endif

stop
@enduml

State Diagram

@startuml
[*] --> NewOrder
NewOrder : enter / initialize order
NewOrder --> Processing : order confirmed
Processing : do / process order
Processing --> Shipped : order shipped
Processing --> Cancelled : order cancelled
Shipped --> Delivered : order delivered
Delivered --> [*]
Cancelled --> [*]
Shipped --> Returned : order returned
Returned --> Processing : return processed
@enduml

Use Case Diagram

@startuml
left to right direction
actor Customer as "Web Browser User"
actor Admin as "Administrator"
actor Backend as "Backend Services"
rectangle "E-commerce Website" {
  usecase "View Product Page" as UC1
  usecase "Get Product Details" as UC2
  usecase "Get User Reviews" as UC3
  usecase "Check Stock Status" as UC4
  usecase "Add Product Review" as UC5
  usecase "Manage Products" as UC6
  usecase "Manage Inventory" as UC7
}

Customer --> UC1
UC1 <.. UC2 : <<extend>>
UC1 <.. UC3 : <<extend>>
UC1 <.. UC4 : <<extend>>
Customer --> UC5
UC5 --> Backend
Admin --> UC6
Admin --> UC7
UC6 --> Backend
UC7 --> Backend
UC2 --> Backend
UC3 --> Backend
UC4 --> Backend
@enduml

Component Diagram

@startuml
package "Frontend Application" {
  [Web Browser]
}

package "Backend Services" {
  [Product Service]
  [Review Service]
  [Inventory Service]
}

package "Databases" {
  [Product Database]
  [Review Database]
  [Inventory Database]
}

[Web Browser] ..> [Product Service] : requests >
[Web Browser] ..> [Review Service] : requests >
[Web Browser] ..> [Inventory Service] : requests >
[Product Service] ..> [Product Database] : queries >
[Review Service] ..> [Review Database] : queries >
[Inventory Service] ..> [Inventory Database] : queries >
@enduml

Activity Diagram

@startuml
start
:Request product page;

if (Valid Product ID?) then (yes)
  :Query product details;
  :Display product details;
else (no)
  :Display error message;
endif

:Request user reviews;
:Display reviews;

if (Product in stock?) then (yes)
  :Display stock available;
else (no)
  :Display out of stock;
endif

stop
@enduml

Class Diagram

@startuml
class Product {
    +String productId
    +String name
    +String description
    +getProductDetails()
}

class Review {
    +String reviewId
    +String author
    +String content
    +getReviews()
}

class Stock {
    +String productId
    +int quantity
    +getStockStatus()
}

class ProductService {
    +Product product
    +getProductDetails()
}

class ReviewService {
    +Review review
    +getReviews()
}

class InventoryService {
    +Stock stock
    +getStockStatus()
}

ProductService "1" -- "1" Product : uses >
ReviewService "1" -- "*" Review : uses >
InventoryService "1" -- "1" Stock : uses >
@enduml

Object Diagram

@startuml
object User {
  name = "Alice"
}

object ProductPage {
  title = "Product 123"
}

object ProductDetails {
  productId = 123
  name = "Widget"
  price = "$20"
}

object Reviews {
  count = 5
  averageRating = 4.2
}

object Review1 {
  author = "Bob"
  rating = 5
  comment = "Great product!"
}

object Review2 {
  author = "Charlie"
  rating = 3
  comment = "Good, but pricey"
}

ProductPage -down-> ProductDetails : displays >
ProductPage -down-> Reviews : displays >
Reviews -down-> Review1 : includes >
Reviews -down-> Review2 : includes >
User --> ProductPage : views >
@enduml

Sequence Diagram

@startuml
!define FrontendColor LightBlue
!define ServiceColor LightGreen
!define DBColor LightCoral

actor "Web Browser" as User
participant "Frontend Application" as Frontend #FrontendColor
participant "Product Service" as ProductService #ServiceColor
participant "Review Service" as ReviewService #ServiceColor
participant "Inventory Service" as InventoryService #ServiceColor
database "Product Database" as ProductDB #DBColor
database "Review Database" as ReviewDB #DBColor
database "Inventory Database" as InventoryDB #DBColor

User -> Frontend: Request product page
activate Frontend

group Product Details
  Frontend -> ProductService: GET /api/product/details?productId=123
  activate ProductService

  alt Valid Product ID
    ProductService -> ProductDB: Query product details
    activate ProductDB
    ProductDB --> ProductService: Return details
    deactivate ProductDB
  else Invalid Product ID
    ProductService --> Frontend: Error response
    deactivate ProductService
  end

  ProductService --> Frontend: Product details
  deactivate ProductService
end

group User Reviews
  Frontend -> ReviewService: GET /api/product/reviews?productId=123
  activate ReviewService

  opt Check Cache
    ReviewService -> ReviewService: Check cached reviews
  end

  loop For Each Review
    ReviewService -> ReviewDB: Query review
    activate ReviewDB
    ReviewDB --> ReviewService: Return review
    deactivate ReviewDB
  end

  ReviewService --> Frontend: Reviews data
  deactivate ReviewService
end

group Stock Status
  Frontend -> InventoryService: GET /api/product/stock?productId=123
  activate InventoryService

  alt In Stock
    InventoryService -> InventoryDB: Check stock status
    activate InventoryDB
    InventoryDB --> InventoryService: Stock available
    deactivate InventoryDB
  else Out of Stock
    InventoryService --> Frontend: Stock unavailable
    deactivate InventoryService
  end

  InventoryService --> Frontend: Stock data
  deactivate InventoryService
end

Frontend --> User: Display product page with details, reviews, and stock
deactivate Frontend
@enduml