SkillsAdd

markdown-viewer/skills

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.

All-time #3669 Trending #7230 Hot #474 First seen Feb 6, 2026
8-week activity · all time api

Installation

$ npx skills add markdown-viewer/skills --skill uml
View on skills.sh ↗ GitHub repository ↗

Also in this package

Other skills from markdown-viewer/skills · top by installs.

npx skills add markdown-viewer/skills
architecture 3.7K infographic 3.5K graphviz 3.3K canvas 3.3K bpmn 3.3K network 3.2K data-analytics 3.2K archimate 3.1K mindmap 3.1K vega 3.1K

Browse all from markdown-viewer/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Also listed on

Alternate registries and mirrors of this skill.

Repository health

Stars 3.3K
License GPL-3.0
Default branch main
Open issues 2
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

More metadata
author
UML diagrams are powered by Markdown Viewer — the best multi-platform Markdown extension (Chrome/Edge/Firefox/VS Code) with diagrams, formulas, and one-click Word export. Learn more at https://docu.md

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 4,744 B
  • docs SUMMARY.md 221 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 3,800 installs

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

Type Purpose Key Syntax Example
Class Class structure and relationships class, interface, `<\ --` [class-diagram.md](examples/class-diagram.md)
Sequence Message interactions over time participant, ->, --> [sequence-diagram.md](examples/sequence-diagram.md)
Activity Workflow and process flow start, :action;, if/else [activity-diagram.md](examples/activity-diagram.md)
Swimlane Activity Multi-role activity with swimlanes `\ Lane\ , :action;` [swimlane-activity-diagram.md](examples/swimlane-activity-diagram.md)
State Machine Object lifecycle states state, [*] --> [state-machine-diagram.md](examples/state-machine-diagram.md)
Component System component organization component, [name], interface [component-diagram.md](examples/component-diagram.md)
Use Case User-system interactions actor, usecase, (name) [use-case-diagram.md](examples/use-case-diagram.md)
Deployment Physical deployment architecture node, artifact, database [deployment-diagram.md](examples/deployment-diagram.md)
Object Runtime object snapshot object "name" as id [object-diagram.md](examples/object-diagram.md)
Package Module organization package "name" [package-diagram.md](examples/package-diagram.md)
Communication Object collaboration Numbered messages with sequence syntax [communication-diagram.md](examples/communication-diagram.md)
Composite Structure Internal class structure component with nested port [composite-structure-diagram.md](examples/composite-structure-diagram.md)
Interaction Overview Activity + sequence combination group, ref over [interaction-overview-diagram.md](examples/interaction-overview-diagram.md)
Profile UML extension mechanisms <<stereotype>> labels [profile-diagram.md](examples/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](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