All Diagram Examples

This page showcases all the different types of PlantUML diagrams you can create with the astro-plantuml integration. Each diagram is rendered automatically from markdown code blocks.

Sequence Diagram

Here’s a simple sequence diagram showing a user authentication flow:

Class Diagram

A typical e-commerce system class structure:

Activity Diagram

The order processing workflow:

Error generating PlantUML diagram: Request failed with status code 520

@startuml
start
:Customer places order;

if (Payment authorized?) then (yes)
  :Process payment;
  :Update inventory;
  
  fork
    :Send confirmation email;
  fork again
    :Generate invoice;
  fork again
    :Notify warehouse;
  end fork
  
  :Order completed;
else (no)
  :Cancel order;
  :Send failure notification;
endif

stop
@enduml

State Diagram

Order lifecycle states:

Component Diagram

System architecture overview:

Error generating PlantUML diagram: Request failed with status code 520

@startuml
!theme cerulean

package "Frontend" {
  [React App]
  [Mobile App]
}

package "API Gateway" {
  [REST API]
  [GraphQL]
}

package "Microservices" {
  [Auth Service]
  [Order Service]
  [Product Service]
  [Payment Service]
}

package "Data Layer" {
  database "PostgreSQL" as db
  database "Redis Cache" as cache
  queue "Message Queue" as mq
}

[React App] --> [REST API]
[Mobile App] --> [GraphQL]

[REST API] --> [Auth Service]
[REST API] --> [Order Service]
[GraphQL] --> [Product Service]
[GraphQL] --> [Payment Service]

[Auth Service] --> db
[Order Service] --> db
[Order Service] --> cache
[Product Service] --> db
[Payment Service] --> mq
@enduml

Mind Map

Project features overview:

Gantt Chart

Development timeline: