U

uml

by @markdown-viewerv
4.3(437)

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.

umlplantumldiagramssoftware-modelingarchitectureGitHub
Installation
npx skills add markdown-viewer/skills --skill uml
compare_arrows

Before / After Comparison

1
Before

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.

After

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.

SKILL.md

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

User Reviews (0)

Write a Review

Effect
Usability
Docs
Compatibility

No reviews yet

Statistics

Installs2.1K
Rating4.3 / 5.0
Version
Updated2026年5月21日
Comparisons1

User Rating

4.3(437)
5
65%
4
25%
3
6%
2
3%
1
1%

Rate this Skill

0.0

Compatible Platforms

🤖claude-code

Timeline

Created2026年4月12日
Last Updated2026年5月21日