Include uml-bundle.js in your page. Any <pre><code class="language-uml-*"> block is auto-rendered on load.
<script src="path/to/uml-bundle.js"></script><pre><codeclass="language-uml-class">
@startuml
class Foo
@enduml
</code></pre>
Available class names:
Class
Diagram type
language-uml-class
Class diagram
language-uml-sequence
Sequence diagram
language-uml-state
State machine
language-uml-component
Component diagram
language-uml-deployment
Deployment diagram
language-uml-usecase
Use case diagram
language-uml-activity
Activity diagram
The @startuml / @enduml markers are optional but recommended for clarity.
Global Directives
These directives work in any diagram type.
Layout Direction
layout horizontal ← left-to-right (alias: layout LR, layout left-to-right)
layout vertical ← top-to-bottom (alias: layout TB, layout top-to-bottom)
layout landscape ← alias for horizontal
layout portrait ← alias for vertical
layout compact ← minimise whitespace
layout square ← prefer square aspect ratio
layout auto ← auto-select (default)
layout none ← disable layout engine
layout shadows on ← enable drop shadows
layout shadows off ← disable drop shadows
Example — explicit landscape layout:
@startuml
layout landscape
class A
class B
class C
A --> B
B --> C
@enduml
Class Diagrams
Element Declarations
class ClassName
abstract class AbstractName
interface InterfaceName
enum EnumName
class Name <<StereotypeName>>
Example:
@startuml
class Vehicle
abstract class Transport
interface Driveable
enum FuelType {
PETROL
DIESEL
ELECTRIC
}
class Car <<singleton>>
@enduml
---
### Relationships
All relationship arrows and their meanings:
```
A --|> B Generalization (solid line, hollow triangle — A extends B)
A ..|> B Realization (dashed line, hollow triangle — A implements B)
A *-- B Composition (filled diamond on A side)
A o-- B Aggregation (hollow diamond on A side)
A --> B Navigable assoc. (open arrowhead toward B)
A <--> B Bidirectional (open arrowheads both ends)
A -- B Association (plain line, no arrowhead)
A --x B Non-navigable (X marker at B)
A x--x B Non-nav both ends (X markers both ends)
A ..> B Dependency (dashed, open arrowhead)
```
Navigability variants for composition/aggregation:
```
A *--> B Composition + navigable
A *<--> B Composition + bidirectional
A *--x B Composition + non-navigable target
A o--> B Aggregation + navigable
A o<--> B Aggregation + bidirectional
A o--x B Aggregation + non-navigable target
```
**Example:**
```
@startuml
layout portrait
class Client
interface Service
abstract class BaseService
class ConcreteService
class Logger
class Request
Client --> Service : uses
ConcreteService ..|> Service
ConcreteService --|> BaseService
BaseService *-- Logger : owns
Client o-- Request : holds
ConcreteService ..> Request : depends on
@enduml
```
---
### Multiplicities & Labels
```
A "multiplicity" -- "multiplicity" B : label
A "1" -- "0..*" B : label
A "1" *-- "1..*" B
```
**Example:**
```
@startuml
class University {
+ name: String
}
class Department {
+ name: String
}
class Professor {
+ name: String
}
class Student {
+ id: int
}
University "1" *-- "1..*" Department : contains
Department "1" -- "0..*" Professor : employs
Professor "1" -- "0..*" Student : advises
@enduml
```
---
### Enumerations
```
enum EnumName {
VALUE_ONE
VALUE_TWO
VALUE_THREE
}
```
Semicolon-separated single-line form is also accepted:
```
enum Size { SMALL; MEDIUM; LARGE }
```
**Example:**
```
@startuml
enum Color {
RED
GREEN
BLUE
}
enum Size { SMALL; MEDIUM; LARGE }
class Product {
- name: String
- color: Color
- size: Size
}
Product --> Color
Product --> Size
@enduml
```
---
## Sequence Diagrams
### Participants
```
participant id: Label ← box with label
participant id as Label ← alternate form
actor id: Label ← stick figure (human actor)
```
Participants used in messages but never declared are created automatically.
**Example:**
```
@startuml
actor user: User
participant browser: WebBrowser
participant server: AppServer
participant db: Database
user -> browser: enter credentials
browser -> server: POST /login
server -> db: findUser(name)
db --> server: userRecord
server --> browser: 200 OK + token
browser --> user: show dashboard
@enduml
```
---
### Message Arrow Types
```
A -> B Synchronous call (solid line, filled arrowhead)
A --> B Response / return (dashed line, open arrowhead)
A ->> B Asynchronous (solid line, open arrowhead)
A ->o B Lost message (arrow ends at filled circle)
o-> A Found message (starts from filled circle)
A -> A Self-call (loop-back arrow)
```
**Example:**
```
@startuml
participant client: Client
participant server: Server
participant pool: ThreadPool
client -> server: request()
server -> server: validate()
server ->> pool: submitTask()
pool --> server: taskQueued
server -->o : timeout
o-> client: networkEvent
server --> client: response
@enduml
```
---
### Activation & Lifeline Control
```
activate ParticipantId ← start activation bar
deactivate ParticipantId ← end activation bar
create ParticipantId ← show creation message
destroy ParticipantId ← terminate lifeline with X
```
When `activate` / `deactivate` are omitted, activation bars are inferred automatically from message nesting.
**Example:**
```
@startuml
participant client: Client
participant server: Server
participant db: Database
client -> server: connect()
activate server
server -> db: open()
activate db
db --> server: connection
deactivate db
server --> client: sessionId
deactivate server
client -> server: disconnect()
destroy server
@enduml
```
---
### Combined Fragments
All combined fragment keywords:
```
alt [condition] ← alternatives (like if/else if/else)
...
else [condition]
...
end
loop [condition] ← iteration
...
end
opt [condition] ← optional (zero or one execution)
...
end
par [label] ← parallel (multiple else branches run in parallel)
...
else [label]
...
end
break [condition] ← break out of surrounding loop
...
end
critical [label] ← atomic region
...
end
ref [label] ← interaction reference
...
end
neg [label] ← forbidden / invalid trace
...
end
```
**Example — alt/loop/opt:**
```
@startuml
participant c: Client
participant s: Server
participant cache: Cache
participant db: Database
c -> s: fetchAll()
loop [for each record]
s -> cache: lookup(id)
alt [cache hit]
cache --> s: cachedData
else [cache miss]
s -> db: query(id)
db --> s: record
end
end
opt [user has notifications enabled]
s -> s: sendNotification()
end
s --> c: results
@enduml
```
---
## Use Case Diagrams
### Actors & Use Cases
```
actor ActorName
actor "Actor Label" as alias
usecase "Use Case Name" as UC_ID
usecase "Name" ← auto-generates ID from name
```
### System Boundary
```
rectangle "System Name" {
UC1
UC2
alias
}
```
### Relationships
```
Actor -- UseCase ← association (no arrow)
Actor --> UseCase ← directed association
UseCase ..> UseCase : <> ← include (mandatory sub-flow)
UseCase ..> UseCase : <> ← extend (optional extension)
Actor --|> Actor ← actor generalization
```
**Example:**
```
@startuml
actor User
actor Admin
usecase "Log In" as UC1
usecase "Register Account" as UC2
usecase "Reset Password" as UC3
usecase "Manage Users" as UC4
usecase "Confirm Email" as UC5
rectangle "Auth System" {
UC1
UC2
UC3
UC4
UC5
}
User -- UC1
User -- UC2
User -- UC3
User -- UC5
Admin -- UC1
Admin -- UC4
UC3 ..> UC1 : <>
UC2 ..> UC5 : <>
@enduml
```
---
## Notes & Annotations
Notes are supported in all diagram types.
### Single-Line Note
```
note left of Target : text
note right of Target : text
note top of Target : text
note bottom of Target : text
```
For class diagrams, notes can target specific members:
```
note right of ClassName.memberName : text
```
### Multi-Line Note
```
note right of Target
Line one
Line two
end note
```
### Sequence Diagram Notes
```
note left of ParticipantId : text
note right of ParticipantId : text
note over ParticipantId
Multi-line text
end note
```
**Example — notes in class diagram:**
```
@startuml
class BankAccount {
+ owner: String
+ balance: Number
+ deposit(amount: Number)
+ withdraw(amount: Number)
}
note bottom of BankAccount: {owner->notEmpty() and balance >= 0}
note right of BankAccount.withdraw: Throws `InsufficientFundsException`
@enduml
```
---
**Example — notes in sequence diagram:**
```
@startuml
participant c: Client
participant s: Server
participant db: Database
c -> s: authenticate()
note right of s: Validates JWT token
s -> db: findUser(token)
note left of db: Lookup by indexed token field
db --> s: userRecord
note over s
At this point the server has
verified the user identity.
end note
s --> c: authResult
@enduml
```
---
**Example — Java code in note:**
```
@startuml
class OrderService {
+ placeOrder(order: Order): boolean
}
note right of OrderService
```java
public boolean placeOrder(Order order) {
if (order == null)
throw new IllegalArgumentException();
return repository.save(order);
}
```
end note
@enduml
```
---
**Example — mixed inline formatting:**
```
@startuml
class Order {
+ id: int
+ status: String
+ total: double
}
class Customer {
+ name: String
}
Customer "1" -- "*" Order : places
note right of Order
Status transitions via `updateStatus()`:
CREATED -> PAID -> SHIPPED
Total must satisfy $total >= 0$
end note
@enduml
```
Cookie & Privacy Notice: This page stores your UI preferences
(dark mode, show highlights, and read aloud) in browser cookies.
If you have activated Bookmarks,
your saved pages are also stored in a cookie.
If you have enabled performance tracking on the SE Gym page,
per-question statistics are also stored in localStorage.
No personal information is collected, transmitted, or stored on any external server.
All data resides solely on your device and is fully under your control.
This site does not sell, share, or disclose any user data to third parties.