uml
Create UML (Unified Modeling Language) diagrams using PlantUML syntax, simplifying software modeling. It supports various diagram types like Class, Sequence, and Activity diagrams, auto-layouts from concise text descriptions, and integrates a rich mxgraph icon library, helping developers efficiently visualize system designs and architectures.
npx skills add markdown-viewer/skills --skill umlBefore / After Comparison
1 组Previously, creating complex UML diagrams like class or sequence diagrams involved significant time manually dragging and aligning elements in GUI tools. Design changes made updates cumbersome and error-prone, leading to documentation drift from the actual code and slow response to iteration needs.
With PlantUML's text-based syntax, diagrams are automatically generated and laid out from concise descriptions. Modifying text for design iterations is far quicker than manual graphic adjustments, ensuring diagrams stay synchronized with the system, greatly improving modeling efficiency and accuracy, and facilitating version control.
UML Diagram Generator
Quick Start: Choose diagram type → Write PlantUML text → Define elements and relationships → Wrap in ```plantuml fence.
⚠️ IMPORTANT: Always use
```plantumlor```pumlcode fence. NEVER use```text— it will NOT render as a diagram.
Critical Rules
- Every diagram starts with
@startumland ends with@enduml - Use standard PlantUML keywords:
class,interface,abstract,enum,actor,participant,component,node,database,package - Relationships use arrow syntax:
-->,<|--,*--,o--,..>,..|> - Use
skinparamfor global styling and colors - Use
#coloron individual elements for specific colors - Notes use
note left of,note right of,note over, or standalonenote "text" as N
UML Diagram Types
| Type | Purpose | Key Syntax | Example |
|---|---|---|---|
| Class | Class structure and relationships | class, interface, <|-- | class-diagram.md |
| Sequence | Message interactions over time | participant, ->, --> | sequence-diagram.md |
| Activity | Workflow and process flow | start, :action;, if/else | activity-diagram.md |
| Swimlane Activity | Multi-role activity with swimlanes | |Lane|, :action; | swimlane-activity-diagram.md |
| State Machine | Object lifecycle states | state, [*] --> | state-machine-diagram.md |
| Component | System component organization | component, [name], interface | component-diagram.md |
| Use Case | User-system interactions | actor, usecase, (name) | use-case-diagram.md |
| Deployment | Physical deployment architecture | node, artifact, database | deployment-diagram.md |
| Object | Runtime object snapshot | object "name" as id | object-diagram.md |
| Package | Module organization | package "name" | package-diagram.md |
| Communication | Object collaboration | Numbered messages with sequence syntax | communication-diagram.md |
| Composite Structure | Internal class structure | component with nested port | composite-structure-diagram.md |
| Interaction Overview | Activity + sequence combination | group, ref over | interaction-overview-diagram.md |
| Profile | UML extension mechanisms | <<stereotype>> labels | profile-diagram.md |
Mxgraph Stencil Icons
draw-uml supports 9500+ mxgraph stencil icons (AWS, Azure, Cisco, Kubernetes, etc.) via the mxgraph.* syntax. Default colors are applied automatically — you do NOT need to specify fillColor or strokeColor.
Full stencil reference: See stencils/README.md.
Syntax
mxgraph.<namespace>.<icon> "Label" as <alias>
mxgraph.<namespace>.<icon> "Label" as <alias> #color
mxgraph.<namespace>.<icon> <alias>
mxgraph.<namespace>.<icon>— the stencil shape key (e.g.mxgraph.aws4.lambda,mxgraph.kubernetes.pod)"Label"— display text (quoted if contains spaces, unquoted for single word)as <alias>— identifier for use in relationships#color— optional override color (e.g.#FF6600,#LightBlue)
Examples
@startuml
' Simple icon declaration
mxgraph.aws4.lambda "Lambda\nFunction" as fn
mxgraph.aws4.api_gateway "API GW" as gw
mxgraph.aws4.dynamodb "DynamoDB" as db
gw --> fn
fn --> db
@enduml
@startuml
' Kubernetes architecture with icons
mxgraph.kubernetes.ing "Ingress" as ing
mxgraph.kubernetes.svc "Service" as svc
mxgraph.kubernetes.pod "Pod" as pod
mxgraph.kubernetes.deploy "Deployment" as deploy
ing --> svc
svc --> pod
deploy --> pod
@enduml
@startuml
' Mixing standard UML with stencil icons
node "Cloud" {
mxgraph.aws4.ec2 "EC2" as ec2
mxgraph.aws4.rds "RDS" as rds
}
database "Legacy DB" as legacy
ec2 --> rds
rds --> legacy
@enduml
User Reviews (0)
Write a Review
No reviews yet
Statistics
User Rating
Rate this Skill