Diagram Plantuml

diagram-plantuml

Generate PlantUML code blocks (```plantuml fences) for inline Markdown rendering. Covers 9 diagram domains via PlantUML syntax with 9500+ mxgraph stencil icons.

Quick Start

1. Classify the diagram domain from the user's request (see Routing table below)
2. Read the matching reference in references/<domain>.md for that domain's keywords, syntax, and conventions
3. Pick stencils (cloud/network/security only) from stencils/<provider>.md if the diagram needs product icons
4. Write PlantUML between @startuml and @enduml, wrapped in a ```plantuml code fence
5. Run the self-review checklist before delivering

Critical Rules (apply to ALL domains)

• Every diagram starts with @startuml and ends with @enduml
• Code fence: ALWAYS use ```plantuml or ```puml. NEVER use ```text — it will NOT render as a diagram.
• Direction: left to right direction for typical cloud/architecture diagrams (data flows left→right); top to bottom direction for hierarchical (class/family trees, mindmaps); default is top-to-bottom.
• Containers: package "Name" { ... }, rectangle "Name" { ... }, node "Name" { ... }, cloud "Name" { ... }, database "Name" { ... }, folder "Name" { ... }
• Arrows: --> (directed, solid), ..> (dashed, async/event), <|-- (inheritance), *-- (composition), o-- (aggregation), ..|> (realization), -- (undirected)
• Notes: note left of, note right of, note over, or note "text" as N
• Styling: skinparam backgroundColor #FFF, skinparam componentFontSize 12, or per-element #color (e.g. #LightBlue, #FF6600)
• Stencils (cloud/network/security): mxgraph.<namespace>.<icon> "Label" as <alias> — default colors are applied automatically; do NOT specify fillColor/strokeColor unless overriding

Diagram Domain Routing

When the user's request matches one of these, read the matching reference first:

Mxgraph Stencil Icons

9500+ icons are available via mxgraph.<namespace>.<icon> syntax. Default colors apply automatically.

Full stencil reference: see stencils/README.md for the icon lookup guide.

Common stencil namespaces

Stencil syntax

mxgraph.<namespace>.<icon> "Label" as <alias>
mxgraph.<namespace>.<icon> "Label" as <alias> #color
mxgraph.<namespace>.<icon> <alias>

Quick examples per domain

' UML class diagram
@startuml
class User {
  +id: Long
  +name: String
  +login(): boolean
}
class Order
User "1" -- "*" Order
@enduml

' AWS cloud architecture
@startuml
left to right direction
mxgraph.aws4.api_gateway "API GW" as gw
mxgraph.aws4.lambda "Lambda" as fn
mxgraph.aws4.dynamodb "DynamoDB" as db

gw --> fn
fn --> db
@enduml

' Mindmap
@startmindmap
* Project
** Frontend
*** React
*** Tailwind
** Backend
*** FastAPI
*** PostgreSQL
@endmindmap

More examples in examples/<domain>/.

依赖与降级

关键：PlantUML 代码块永远可生成 — 本 skill 只产出文本代码块，不需要任何运行时依赖。所有依赖只影响「能否渲染展示」，不影响「能否生成」。

在线渲染备选

如本地未装 PlantUML，把生成的 @startuml...@enduml 内容粘贴到：

• https://www.plantuml.com/plantuml — 官方在线渲染器
• https://plantuml.com/zh/plantuml — 中文版

或用 plantuml.com 的 URL 编码方式直接嵌入图片（参考 references/uml.md 末尾）。

输出自检清单

交付前的最终检查清单：

代码块结构

• 以 ```plantuml 或 ```puml 开头（不是 ```text）
• 以 ``` 结尾
• 内部以 @startuml 开头、@enduml 结尾（mindmap 用 @startmindmap/@endmindmap）
• 无嵌套代码块导致 fence 冲突

语法正确性

• 所有 class/interface/package/rectangle/node/cloud/database 等容器有匹配的 {}
• 箭头语法正确：-->、..>、<|--、*--、o--、..|>、--
• mxgraph 图标语法正确：mxgraph.<namespace>.<icon> "Label" as <alias>
• 颜色用 skinparam 全局或 #color 单个元素（如 #LightBlue、#FF6600）
• 注释用 note left of / note right of / note over / note "text" as N

内容质量

• alias 简短且不冲突（如 fn、db、gw，不用关键字 class、interface）
• label 文本清晰，必要时用 \n 换行
• 容器嵌套层次合理（不超过 3 层）
• 箭头方向与数据流方向一致
• 在线渲染（plantuml.com）或本地 plantuml.jar 预览中无报错

领域适配

• 选用了正确的图类型（class diagram 用 class，不是 component）
• cloud/network/security 图用了 mxgraph 图标（不是裸 rectangle）
• 容器边界（VPC/region/security group）用 rectangle "Name" { ... } 或 cloud "Name" { ... } 包裹

如以上任一项失败，参考对应 references/<domain>.md 里的详细规则和示例。

相关技能

本 skill 是 diagram 技能家族的一员，按输出格式分工，4 个 skill 互补但不重叠：

选用决策：

• 在 Markdown 里嵌入图、要源码可读、可 diff → 本 skill（diagram-plantuml）或 diagram-mermaid
• 要可交互的 HTML 成品、双主题切换、点按钮导出 → diagram-html
• 要命令行直接出 SVG/PNG 文件、CI/批处理 → diagram-image

与 diagram-mermaid 的关键区别：

• 本 skill 强在 UML 14 种图 + Cloud 7 大云厂商图标 + Network 设备图标 + Security 架构 + ArchiMate + BPMN + Data Analytics + IoT + Mindmap
• diagram-mermaid 强在零依赖、GitHub 原生支持、11 种基础图类型（flowchart/sequence/class/state/ER/Gantt/pie/mindmap/timeline/gitGraph/journey）
• 简单 flowchart/sequence/state/ER → 优先 diagram-mermaid（更轻量）
• 需要 AWS/Azure/GCP/Cisco 等专业图标或 BPMN/ArchiMate/IoT → 优先本 skill