What Types of Diagrams Can You Create with PlantUML? (Complete Guide)

Hero banner showcasing various PlantUML diagram types including UML, C4 architecture, ERD, and Gantt charts with live editor features.

In modern software engineering and systems architecture, traditional drag-and-drop diagramming tools often fall short. They can be slow to update, difficult to maintain in version control systems like Git, and prone to inconsistent styling. This is where Diagram-as-Code (DaC) comes in, and PlantUML stands as one of the most versatile and widely adopted text-based diagramming languages in the developer ecosystem.By defining visuals using plain text, developers can keep architectural documentation right alongside their source code. But what types of diagrams can you actually build with it? Whether you need standard Unified Modeling Language (UML) structural maps, high-level enterprise architecture views, or project management timelines, PlantUML covers virtually every technical communication need.In this guide, we will explore the comprehensive array of diagram types supported by PlantUML and demonstrate how using an intuitive PlantUML Editor like VPasCode elevates your rendering and editing experience.

2. Standard Unified Modeling Language (UML) Diagrams

At its core, PlantUML was built to simplify the creation of official UML diagrams. It separates into two main categories: structural and behavioral diagrams.

Structure Diagrams

Class & Object Diagrams

Model object-oriented structures, class hierarchies, interfaces, attributes, and relationships (inheritance, aggregation, composition) directly from code definitions.

Main UI showing the creating of a Class Diagram using a text to diagram editor - VPasCode

@startuml
  
title Hotel Management System

' Define interfaces
interface IReservable {
    + makeReservation(customer: Customer, dates: DateRange): boolean
    + cancelReservation(reservationId: String): boolean
    + checkAvailability(date: Date): boolean
}

interface IPayable {
    + processPayment(amount: double): boolean
    + issueRefund(reservationId: String): boolean
    + getPaymentStatus(): String
}

' Define abstract class
abstract class Person {
    - id: String
    - name: String
    - email: String
    - phone: String
    + getId(): String
    + getName(): String
    + getContactInfo(): String
    + updateContactInfo(info: String): void
}

' Define concrete classes
class Customer {
    - loyaltyPoints: int
    - totalStays: int
    - preferences: List
    + earnLoyaltyPoints(stayCost: double): void
    + redeemLoyaltyPoints(points: int): boolean
    + getLoyaltyTier(): String
    + addPreference(preference: String): void
}

class Room {
    - roomNumber: String
    - roomType: RoomType
    - capacity: int
    - pricePerNight: double
    - amenities: List
    - isAvailable: boolean
    + bookRoom(customer: Customer, dates: DateRange): boolean
    + releaseRoom(): void
    + getPrice(customer: Customer): double
    + addAmenity(amenity: String): void
    + getRoomStatus(): String
}

class Reservation {
    - reservationId: String
    - checkInDate: Date
    - checkOutDate: Date
    - totalPrice: double
    - status: ReservationStatus
    - specialRequests: String
    + calculateTotalPrice(): double
    + confirmReservation(): void
    + checkIn(): void
    + checkOut(): boolean
    + updateDates(newCheckIn: Date, newCheckOut: Date): boolean
    + getDuration(): int
}

' Enumeration
enum RoomType {
    STANDARD
    DELUXE
    SUITE
    PRESIDENTIAL
}

' Enumeration
enum ReservationStatus {
    PENDING
    CONFIRMED
    CHECKED_IN
    CHECKED_OUT
    CANCELLED
}

' Relationships
' Interface implementation (dashed line with triangle)
IReservable <|.. Reservation : implements
IPayable <|.. Reservation : implements

' Abstract inheritance (solid line with triangle)
Person <|-- Customer : extends ' Composition (solid diamond) - Room is part of Reservation Reservation *-- "1..*" Room : contains >

' Association (simple solid line) with multiplicity
Customer "1" -- "0..*" Reservation : makes >

' Dependency (dashed arrow) - Customer depends on RoomType
Customer ..> RoomType : has loyalty tier based on >

' Association with custom label
Reservation "1" --o "1" Customer : booked by >

' Realization of interface by abstract class (optional additional connector)
IReservable <|.. Room : implements

@enduml

Component & Deployment Diagrams

Map software components, physical nodes, artifacts, and deployment environments to visualize software distribution across hardware or cloud infrastructure.

@startuml
title Web Application Component Diagram

package "Client Layer" {
    [Web Browser] as Browser
    [Mobile App] as Mobile
}

package "Application Server" {
    [API Gateway] as Gateway
    [User Service] as UserService
    [Order Service] as OrderService
    [Payment Service] as PaymentService
}

package "Database Layer" {
    database "User Database" as UserDB
    database "Order Database" as OrderDB
}

package "Third-Party Services" {
    [Stripe API] as Stripe
}

' Connections
Browser --> Gateway : HTTP / REST
Mobile --> Gateway : HTTP / REST

Gateway --> UserService : Internal REST
Gateway --> OrderService : Internal REST

UserService --> UserDB : Read / Write
OrderService --> OrderDB : Read / Write
OrderService --> PaymentService : Process Payment

PaymentService --> Stripe : HTTPS / API
@enduml

Component diagram created using a text to diagram editor - VPasCode, illustrating a 3-tier web application architecture with API gateways, microservices, databases, and Stripe integration.

@startuml
title Deployment Diagram - 3-Tier Web Application

skinparam componentStyle rectangle

node "Client Desktop" as clientNode {
  node "Web Browser" as browser {
    artifact "Web App Frontend (HTML/JS)" as frontend
  }
}

node "Application Server" as appServerNode {
  node "Servlet Container (Tomcat)" as tomcat {
    artifact "Backend API (WAR file)" as appApi
  }
}

node "Database Server" as databaseNode {
  database "PostgreSQL" as postgres {
    artifact "Application Database Schema" as dbSchema
  }
}

clientNode -- appServerNode : HTTPS (Port 443)
appServerNode -- databaseNode : JDBC (Port 5432)

@enduml

Deployment diagram created using a text to diagram editor - VPasCode, illustrating a multi-region cloud architecture with load balancers, Kubernetes cluster nodes, on-premise firewalls, and database servers.

Behavioral & Interaction Diagrams

Sequence Diagrams

The most popular PlantUML diagram type. Trace step-by-step interactions, synchronous/asynchronous API calls, and message flows between actors and systems over time.

@startuml
title User Authentication Flow

actor "User" as user
participant "Web App" as app
participant "Auth API" as auth
database "User DB" as db

user -> app : Enter Credentials
activate app

app -> auth : POST /api/v1/login
activate auth

auth -> db : Query user by email
activate db
db --> auth : Return user record & hash
deactivate db

alt Valid Credentials
    auth -> auth : Verify password & generate JWT
    auth --> app : 200 OK (Token & Profile)
    app --> user : Redirect to Dashboard
else Invalid Credentials
    auth --> app : 401 Unauthorized (Error)
    app --> user : Display "Invalid Credentials"
end

deactivate auth
deactivate app
@enduml

Sequence diagram created using a text to diagram editor - VPasCode, showing a synchronous user authentication flow between a user, web app, auth API, and database with error handling.

Use Case Diagrams

Define system boundaries, actors, user goals, and functional scope.

@startuml
title Online Shopping System - Use Case Diagram

left to right direction

actor Customer
actor "Registered Customer" as RegCustomer
actor "Payment Gateway" as PaymentSystem

Customer <|-- RegCustomer rectangle "E-Commerce System" { usecase "Browse Products" as UC_Browse usecase "Search Items" as UC_Search usecase "Manage Cart" as UC_Cart usecase "Checkout Order" as UC_Checkout usecase "Apply Discount Coupon" as UC_Coupon usecase "Process Payment" as UC_Payment usecase "View Order History" as UC_History } Customer --> UC_Browse
Customer --> UC_Search
Customer --> UC_Cart
Customer --> UC_Checkout

RegCustomer --> UC_History

UC_Checkout .> UC_Payment : <>
UC_Checkout <.. UC_Coupon : <>

UC_Payment -- PaymentSystem
@enduml

Use case diagram created using a text to diagram editor - VPasCode, mapping guest and registered customer interactions to system functions like browsing, checkout, and payment processing.

Activity & State Diagrams

Flowchart complex business logic, algorithmic flows, state machine transitions, and concurrency.

@startuml
title Order Fulfillment Process

|Customer|
start
:Place Order;
:Submit Payment Details;

|Order System|
if (Payment Valid?) then (yes)
  :Reserve Inventory;
  
  ' Concurrency split
  fork
    |Warehouse|
    :Pick Items from Shelf;
    :Pack Items into Box;
  fork again
    |Billing|
    :Generate Invoice PDF;
    :Charge Payment Method;
  end fork

  |Shipping|
  :Attach Shipping Label;
  :Hand Over to Courier;
  
  |Customer|
  :Receive Package;
  stop
else (no)
  |Order System|
  :Send Payment Failure Notice;
  |Customer|
  :Update Payment Method;
  stop
endif
@enduml

Activity diagram created using a text to diagram editor - VPasCode, displaying an order fulfillment workflow with swimlanes, decision gates, and parallel fork execution steps.

@startuml
title E-Commerce Order Lifecycle

[*] --> Pending : Order Placed

state Pending {
  [*] --> AwaitingPayment
  AwaitingPayment --> PaymentFailed : Payment Error
  PaymentFailed --> AwaitingPayment : Retry Payment
}

Pending --> Processing : Payment Authorized
Pending --> Cancelled : User Cancels Order

state Processing {
  [*] --> Packing
  Packing --> ReadyForShipment : Quality Check Passed
}

Processing --> Shipped : Carrier Handover
Shipped --> Delivered : Delivery Confirmed
Shipped --> Returned : Delivery Failed / Refused

Delivered --> [*]
Cancelled --> [*]
Returned --> [*]
@enduml

State diagram created using a text to diagram editor - VPasCode, illustrating an e-commerce order lifecycle from pending payment and processing to shipped, cancelled, and delivered states.

Timing Diagrams

Detail precise state transitions and object interactions over discrete time frames—ideal for embedded systems or real-time hardware design.

@startuml
title SPI Data Transfer Timing Diagram

robust "Clock (SCLK)" as CLK
binary "Chip Select (CS)" as CS
binary "Master Out (MOSI)" as MOSI
concise "Data Bus (MISO)" as MISO

@0
CS is High
CLK is Low
MOSI is Low
MISO is "Idle"

@1
CS is Low
MISO is "Header"

@2
CLK is High
MOSI is High

@3
CLK is Low

@4
CLK is High
MOSI is Low
MISO is "Payload"

@5
CLK is Low

@6
CS is High
CLK is Low
MOSI is Low
MISO is "Idle"

@enduml

Digital timing diagram created using a text to diagram editor - VPasCode, illustrating SPI communication waveforms across clock, chip select, MOSI, and MISO data lines over discrete time.

3. High-Level Architecture & Domain-Specific Diagrams

Beyond traditional UML, PlantUML excels at representing multi-layered software systems and data architectures using specialized extension libraries.

C4 Model Diagrams

Express software architecture at varying levels of abstraction—Context, Container, Component, and Code—making system design understandable for both technical and non-technical stakeholders.

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

TITLE System Context Diagram for Internet Banking System

Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Ext(email_system, "E-mail System", "The internal Microsoft Exchange e-mail system.")

Rel(customer, banking_system, "Views account balances, and makes payments using")
Rel(banking_system, mainframe, "Gets account information from, and makes payments using")
Rel(banking_system, email_system, "Sends e-mail using")
Rel_Back(email_system, customer, "Sends e-mails to")
@enduml

C4 Context diagram created using a text to diagram editor - VPasCode, mapping high-level system boundaries and external integrations between banking customers, core systems, and email servers.

ArchiMate Diagrams

Support enterprise architecture modeling across business, application, and technology layers to map organizational strategy to operational systems.

@startuml
!include <archimate/Archimate>

title ArchiMate Sample - Online Bill Payment

Grouping(business, "Business Layer"){
  Business_Process(payBillProcess, "Pay Bill Process")
  Business_Object(bankAccount, "Customer Bank Account")
  Business_Service(paymentService, "Bill Payment Business Service")
}

Grouping(application, "Application Layer"){
  Application_Component(bankingApp, "Mobile Banking Application")
  Application_Function(paymentProcessing, "Process Payment Logic")
  Application_DataObject(transactionRecord, "Transaction Data Payload")
}

Grouping(technology, "Technology Layer"){
  Technology_Artifact(jwtToken, "Encrypted Session Token")
  Technology_Service(apiGateway, "API Gateway Service")
  Technology_Service(dbService, "Core Database Service")
}

Rel_Flow_Right(payBillProcess, bankAccount, "")
Rel_Serving_Up(paymentService, payBillProcess, "")
Rel_Specialization_Up(paymentProcessing, paymentService, "")
Rel_Flow_Right(transactionRecord, paymentProcessing, "")
Rel_Assignment_Left(bankingApp, paymentProcessing, "")
Rel_Realization_Up(jwtToken, transactionRecord, "")
Rel_Serving_Up(apiGateway, paymentProcessing, "")
Rel_Serving_Up(dbService, apiGateway, "")
@enduml

ArchiMate enterprise architecture diagram created using a text to diagram editor - VPasCode, mapping online bill payment across business processes, mobile banking application functions, and API gateway technology layers.

Entity-Relationship Diagrams (ERD)

Generate clean database schema visualizations, including standard crow’s foot notation and Chen ERD models.

@startuml
title E-Commerce Database Schema (Crow's Foot)

' Hide circle icons for entities
hide circle
skinparam linetype ortho

entity "User" as user {
  * user_id : INT <>
  --
  * email : VARCHAR(255)
  * password_hash : VARCHAR(255)
  * created_at : TIMESTAMP
}

entity "CustomerProfile" as profile {
  * profile_id : INT <>
  --
  * user_id : INT <>
  * first_name : VARCHAR(100)
  * last_name : VARCHAR(100)
    phone : VARCHAR(20)
}

entity "Order" as order {
  * order_id : INT <>
  --
  * user_id : INT <>
  * order_date : TIMESTAMP
  * total_amount : DECIMAL(10,2)
  * status : VARCHAR(50)
}

entity "OrderItem" as item {
  * order_item_id : INT <>
  --
  * order_id : INT <>
  * product_id : INT <>
  * quantity : INT
  * unit_price : DECIMAL(10,2)
}

entity "Product" as product {
  * product_id : INT <>
  --
  * sku : VARCHAR(50)
  * name : VARCHAR(150)
    description : TEXT
  * price : DECIMAL(10,2)
}

' Relationships
user ||--o| profile : "has"
user ||--o{ order : "places"
order ||--|{ item : "contains"
product ||--o{ item : "appears in"

@enduml

Entity-relationship diagram with Crow's foot notation created using a text to diagram editor - VPasCode, detailing an e-commerce database schema, field keys, and table cardinalities.

Network & Infrastructure Maps

Render network topologies, server nodes, cloud connections, and firewalls effortlessly.

@startnwdiag
title Enterprise Network Topology

nwdiag {
  network External_Internet {
    address = "0.0.0.0/0"
    user_client [address = "203.0.113.15", description = "Remote User"];
    edge_firewall [address = "192.168.1.1", description = "Perimeter FW"];
  }

  network DMZ_Zone {
    address = "192.168.1.0/24"
    edge_firewall;
    load_balancer [address = "192.168.1.10", description = "Nginx Load Balancer"];
    mail_server [address = "192.168.1.25", description = "SMTP Server"];
    internal_firewall [address = "192.168.1.254", description = "Internal FW"];
  }

  network Private_LAN {
    address = "10.0.1.0/24"
    internal_firewall;
    app_server_01 [address = "10.0.1.50", description = "API Node 1"];
    app_server_02 [address = "10.0.1.51", description = "API Node 2"];
    db_master [address = "10.0.1.100", description = "PostgreSQL Primary"];
  }

  network Management_Subnet {
    address = "10.0.99.0/24"
    internal_firewall;
    admin_bastion [address = "10.0.99.5", description = "SSH Bastion Host"];
    monitoring_node [address = "10.0.99.20", description = "Prometheus Host"];
  }
}
@endnwdiag

Network topology map created using a text to diagram editor - VPasCode, illustrating public ingress firewalls, microservices subnets, and isolated database clusters.

 

4. Planning, Management & Brainstorming Visuals

PlantUML isn’t restricted to software design—it is also a powerful tool for project management and team brainstorming.

Gantt Charts

Plan project schedules, task dependencies, milestones, and resource allocation using clean text markup.

gantt
    title Software Product Release Schedule
    dateFormat  YYYY-MM-DD
    axisFormat  %b %d

    section Planning & Design
    Requirements Gathering   :a1, 2026-09-01, 10d
    Architecture Design      :a2, after a1, 10d

    section Development
    Backend API Development  :b1, after a2, 15d
    Frontend UI Development  :b2, after a2, 15d

    section Testing & Release
    Integration Testing      :c1, after b1 b2, 8d
    Security Audit           :c2, after c1, 5d
    Production Release       :milestone, m1, after c2, 0d

Mermaid Gantt chart timeline created using a text to diagram editor - VPasCode, mapping a software release schedule across requirements, architecture design, development, and testing phases.

Work Breakdown Structure (WBS)

Deconstruct complex projects into hierarchical deliverables and manageable task chunks.

@startwbs
title Website Redesign WBS

* Website Redesign Project
** 1. Discovery & Strategy
*** 1.1 Stakeholder Interviews
*** 1.2 Competitor Audit
*** 1.3 Scope & Strategy Sign-off
** 2. UX/UI Design
*** 2.1 Wireframing
**** 2.1.1 Desktop Layouts
**** 2.1.2 Mobile Layouts
*** 2.2 Design System
**** 2.2.1 Component Library
**** 2.2.2 Typography & Style Guide
** 3. Technical Development
*** 3.1 Frontend
**** 3.1.1 Page Templates
**** 3.1.2 API Integrations
*** 3.2 CMS & Backend
**** 3.2.1 Custom Post Types
**** 3.2.2 Database Migration
** 4. QA & Launch
*** 4.1 Cross-Browser Testing
*** 4.2 Content Migration
*** 4.3 DNS Cutover & Go-Live
@endwbs

Work breakdown structure diagram created using a text to diagram editor - VPasCode, showing a project hierarchy breaking a website redesign into strategy, UX design, development, and QA deliverables.

Mind Maps

Capture structured ideas, feature taxonomies, and technical exploration notes rapidly during team sessions.

@startmindmap
title E-Commerce Platform Feature Map

* E-Commerce Platform
** User Account Management
*** Social Auth (Google, Apple)
*** Multi-Factor Authentication
*** Order History & Tracking
** Product Catalog & Search
*** Faceted Search & Filters
*** Inventory Sync
*** Product Reviews & Ratings
** Checkout & Payments
*** Payment Gateways (Stripe, PayPal)
*** Coupon & Promo Engine
*** One-Click Guest Checkout
** Customer Support
*** Live Chat Assistant
*** Automated Return Portal
@endmindmap

Mind map diagram created using a text to diagram editor - VPasCode, organizing product feature taxonomies across accounts, catalog search, checkout payments, and customer support.

5. Writing and Rendering PlantUML Fast: The VPasCode Advantage

While PlantUML is immensely capable, setting up local Java environments, Graphviz dependencies, and command-line tools can create friction. Using a dedicated, web-based PlantUML Tool eliminates these hurdles completely.

Visual Paradigm VPasCode is a unified diagram-as-code platform engineered specifically to streamline text-to-diagram workflows.

Key Benefits of VPasCode:

  • Zero-Setup Online Platform: Access a robust editor instantly at vpascode.com without installing local compilers or plugins. Discover more in the VPasCode Overview.
  • Automatic Format Detection & Real-Time Preview: Paste your script, and VPasCode automatically detects whether it’s PlantUML, Mermaid, or Graphviz, rendering live updates instantly as you type.
  • AI-Powered Code Error Fixing: If you hit a syntax bug, simply click “Fix by AI”. VPasCode repairs the code and provides a side-by-side diff with clear explanations so you can master PlantUML syntax faster.
  • Native AI Diagram Translation: Translate diagram labels and notes into multiple languages directly inside the editor—ideal for global development teams.
  • Flexible Export & Documentation Integration: Export high-resolution PNGs or scalable SVG vector images for free. You can also push diagrams directly to Visual Paradigm OpenDocs using their diagram-as-code feature guide.

6. Quick Start Example: Rendering a Sequence Diagram in VPasCode

To see how easy it is to use a free UML editor like VPasCode, consider this basic PlantUML sequence diagram script:

@startuml
autonumber
actor User
participant "VPasCode Editor" as Editor
participant "AI Engine" as AI

User -> Editor: Paste PlantUML Code
Editor -> Editor: Auto-detect Format & Live Render
alt Syntax Error Detected
    User -> Editor: Click "Fix by AI"
    Editor -> AI: Send Broken Code
    AI --> Editor: Return Corrected Code & Diff
end
Editor --> User: Display Clean Vector Diagram (SVG/PNG)
@enduml

An example of rendering a Sequence Diagram using a text to diagram editor - VPasCode

Simply copy the code above, open VPasCode, and paste it into the editor to view instant live rendering and experiment with automated AI enhancements.

7. Conclusion & Next Steps

PlantUML empowers teams to maintain clear, versionable, and consistent visual documentation across UML, architecture, database schemas, and project management charts. Paired with a modern PlantUML Tool like VPasCode, technical writing becomes faster, error-free, and seamlessly collaborative.

Ready to streamline your diagramming process? Start editing and rendering PlantUML diagrams for free today at vpascode.com.

References

上部へスクロール