U

uml

by @markdown-viewerv
4.3(437)

使用PlantUML语法创建UML(统一建模语言)图,简化软件建模过程。支持类图、序列图、活动图等多种图类型,通过简洁的文本描述自动布局,并集成了丰富的mxgraph图标库,帮助开发者高效地可视化系统设计和架构。

umlplantumldiagramssoftware-modelingarchitectureGitHub
安装方式
npx skills add markdown-viewer/skills --skill uml
compare_arrows

Before / After 效果对比

1
使用前

过去,绘制复杂的UML图(如类图、序列图)需要耗费大量时间在图形界面工具中手动拖拽、对齐元素。一旦设计变更,更新图表更是繁琐且易出错,导致文档与代码脱节,难以快速响应迭代需求。

使用后

借助PlantUML文本语法,只需编写简洁的描述性文字,图表即可自动生成并布局。设计迭代时,修改文本比手动调整图形快得多,确保了图表与实际系统同步,显著提升了建模效率和准确性,并易于版本控制。

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

用户评价 (0)

发表评价

效果
易用性
文档
兼容性

暂无评价

统计数据

安装量2.1K
评分4.3 / 5.0
版本
更新日期2026年5月21日
对比案例1 组

用户评分

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

为此 Skill 评分

0.0

兼容平台

🤖claude-code

时间线

创建2026年4月12日
最后更新2026年5月21日