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図を作成する際、GUIツールで要素を手動でドラッグ&ドロップし、配置に多くの時間を費やしていました。設計変更があった場合、図の更新は面倒でエラーが発生しやすく、ドキュメントとコードの乖離を招き、迅速なイテレーション対応が困難でした。

使用後

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日