uml
PlantUML構文を使用してUML(統一モデリング言語)図を作成し、ソフトウェアモデリングプロセスを簡素化します。クラス図、シーケンス図、アクティビティ図など、多様な図タイプに対応し、簡潔なテキスト記述から自動レイアウトを生成します。また、豊富なmxgraphアイコンライブラリも統合されており、開発者がシステム設計とアーキテクチャを効率的に視覚化するのに役立ちます。
npx skills add markdown-viewer/skills --skill umlBefore / After 効果比較
1 组以前は、クラス図やシーケンス図のような複雑なUML図を作成する際、GUIツールで要素を手動でドラッグ&ドロップし、配置に多くの時間を費やしていました。設計変更があった場合、図の更新は面倒でエラーが発生しやすく、ドキュメントとコードの乖離を招き、迅速なイテレーション対応が困難でした。
PlantUMLのテキストベース構文を使用すると、簡潔な記述から図が自動生成され、レイアウトされます。設計の反復時も、テキストの修正は手動でのグラフィック調整よりもはるかに迅速で、図が実際のシステムと同期し、モデリングの効率と正確性が大幅に向上し、バージョン管理も容易になります。
UML Diagram Generator
Quick Start: Choose diagram type → Write PlantUML text → Define elements and relationships → Wrap in ```plantuml fence.
⚠️ IMPORTANT: Always use
```plantumlor```pumlcode fence. NEVER use```text— it will NOT render as a diagram.
Critical Rules
- Every diagram starts with
@startumland ends with@enduml - Use standard PlantUML keywords:
class,interface,abstract,enum,actor,participant,component,node,database,package - Relationships use arrow syntax:
-->,<|--,*--,o--,..>,..|> - Use
skinparamfor global styling and colors - Use
#coloron individual elements for specific colors - Notes use
note left of,note right of,note over, or standalonenote "text" as N
UML Diagram Types
| Type | Purpose | Key Syntax | Example |
|---|---|---|---|
| Class | Class structure and relationships | class, interface, <|-- | class-diagram.md |
| Sequence | Message interactions over time | participant, ->, --> | sequence-diagram.md |
| Activity | Workflow and process flow | start, :action;, if/else | activity-diagram.md |
| Swimlane Activity | Multi-role activity with swimlanes | |Lane|, :action; | swimlane-activity-diagram.md |
| State Machine | Object lifecycle states | state, [*] --> | state-machine-diagram.md |
| Component | System component organization | component, [name], interface | component-diagram.md |
| Use Case | User-system interactions | actor, usecase, (name) | use-case-diagram.md |
| Deployment | Physical deployment architecture | node, artifact, database | deployment-diagram.md |
| Object | Runtime object snapshot | object "name" as id | object-diagram.md |
| Package | Module organization | package "name" | package-diagram.md |
| Communication | Object collaboration | Numbered messages with sequence syntax | communication-diagram.md |
| Composite Structure | Internal class structure | component with nested port | composite-structure-diagram.md |
| Interaction Overview | Activity + sequence combination | group, ref over | interaction-overview-diagram.md |
| Profile | UML extension mechanisms | <<stereotype>> labels | 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.
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)
レビューを書く
レビューなし
統計データ
ユーザー評価
この Skill を評価