mcpField
U
uml

uml

github.com/markdown-viewerDevelopment3.4k3.9k installsUpdated 3w ago
Repository

About uml

A skill for generating UML diagrams by guiding PlantUML syntax and code-fence formatting for rendering. It covers standard UML elements and relationships, with examples using mxgraph icons.

Key features

  1. 01Describe diagrams with PlantUML
  2. 02Use required diagram markers and code fences
  3. 03Define UML elements and relationships
  4. 04Style diagrams with skinparam and colors
  5. 05Add mxgraph icons

Use cases

  1. 01Draw class diagrams and component relationships
  2. 02Create architecture diagrams with AWS or Kubernetes icons

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/markdown-viewer/skills --skill uml

After installing, type/umlin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

examples/
activity-diagram.md
class-diagram.md
communication-diagram.md
component-diagram.md
composite-structure-diagram.md
deployment-diagram.md
interaction-overview-diagram.md
object-diagram.md
package-diagram.md
profile-diagram.md
sequence-diagram.md
state-machine-diagram.md
swimlane-activity-diagram.md
sysml-bdd.md
use-case-diagram.md
stencils/
alibaba_cloud.md
android.md
archimate.md
archimate3.md
arrows.md
atlassian.md
aws.md
aws2.md
aws3.md
aws3d.md
aws4.md
azure.md
basic.md
bootstrap.md
bpmn.md

Details

From the project README

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

Comments

Markdown supported