uml

Create UML diagrams using PlantUML syntax. Best for software modeling — Class, Sequence, Activity, State Machine, Component, Use Case, and Deployment diagrams with concise text-based notation and auto-layout.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "uml" with this command: npx skills add markdown-viewer/skills/markdown-viewer-skills-uml

UML Diagram Generator

Quick Start: Choose diagram type → Write PlantUML text → Define elements and relationships → Wrap in ```plantuml fence.

⚠️ IMPORTANT: Always use ```plantuml or ```puml code fence. NEVER use ```text — it will NOT render as a diagram.

Critical Rules

  • Every diagram starts with @startuml and ends with @enduml
  • Use standard PlantUML keywords: class, interface, abstract, enum, actor, participant, component, node, database, package
  • Relationships use arrow syntax: -->, <|--, *--, o--, ..>, ..|>
  • Use skinparam for global styling and colors
  • Use #color on individual elements for specific colors
  • Notes use note left of, note right of, note over, or standalone note "text" as N

UML Diagram Types

TypePurposeKey SyntaxExample
ClassClass structure and relationshipsclass, interface, <|--class-diagram.md
SequenceMessage interactions over timeparticipant, ->, -->sequence-diagram.md
ActivityWorkflow and process flowstart, :action;, if/elseactivity-diagram.md
Swimlane ActivityMulti-role activity with swimlanes|Lane|, :action;swimlane-activity-diagram.md
State MachineObject lifecycle statesstate, [*] -->state-machine-diagram.md
ComponentSystem component organizationcomponent, [name], interfacecomponent-diagram.md
Use CaseUser-system interactionsactor, usecase, (name)use-case-diagram.md
DeploymentPhysical deployment architecturenode, artifact, databasedeployment-diagram.md
ObjectRuntime object snapshotobject "name" as idobject-diagram.md
PackageModule organizationpackage "name"package-diagram.md
CommunicationObject collaborationNumbered messages with sequence syntaxcommunication-diagram.md
Composite StructureInternal class structurecomponent with nested portcomposite-structure-diagram.md
Interaction OverviewActivity + sequence combinationgroup, ref overinteraction-overview-diagram.md
ProfileUML extension mechanisms<<stereotype>> labelsprofile-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

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

architecture

No summary provided by upstream source.

Repository SourceNeeds Review
General

infographic

No summary provided by upstream source.

Repository SourceNeeds Review
General

canvas

No summary provided by upstream source.

Repository SourceNeeds Review
General

graphviz

No summary provided by upstream source.

Repository SourceNeeds Review