diagram-generator
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseDiagram Generator
图表生成器
ACTION REQUIRED(读完后立刻执行)
必须执行的操作(读完后立刻执行)
- :确认当前任务是否命中本 skill 的适用范围
NOW - :读取
NOW,校验工具可用性和实际路径../tool-index.md - :缺工具时调用 bootstrap,不要猜路径
NEXT - :进入"工作流"第一步并执行,不要停在确认状态
ACT
- :确认当前任务是否命中本 skill 的适用范围
NOW - :读取
NOW,校验工具可用性和实际路径../tool-index.md - :缺工具时调用 bootstrap,不要猜路径
NEXT - :进入"工作流"第一步并执行,不要停在确认状态
ACT
Purpose
目标
Create clear, editable diagrams from messy or structured inputs. Prefer text-based diagram source first so the result can be reviewed, versioned, and refined. Render to files only when the user asks for an image/PDF or when a downloadable artifact would materially help.
从杂乱或结构化输入创建清晰、可编辑的图表。优先选择基于文本的图表源码,以便结果可被审阅、版本控制和优化。仅当用户要求生成图片/PDF,或可下载的产物能切实提供帮助时,才渲染为文件。
Default workflow
默认工作流
- Identify the user's intent, audience, and source material.
- Choose the diagram family and language using the decision table below.
- Normalize entities, relationships, labels, states, branches, and time/order information before writing diagram code.
- Generate concise, readable diagram source.
- Validate the syntax mentally and, when creating files, run .
scripts/render_diagram.py - Return the diagram source plus a short note about assumptions. When files are generated, include links to the output files.
Do not over-ask for clarification. If the request is underspecified, make reasonable assumptions and label them briefly.
- 识别用户的意图、受众和源材料。
- 使用下方的决策表选择图表类型和语言。
- 在编写图表代码前,规范化实体、关系、标签、状态、分支以及时间/顺序信息。
- 生成简洁、易读的图表源码。
- 先在脑中验证语法,创建文件时运行 。
scripts/render_diagram.py - 返回图表源码及关于假设的简短说明。生成文件时,需包含输出文件的链接。
不要过度要求澄清。如果请求描述不明确,做出合理假设并简要标注。
Diagram language decision table
图表语言决策表
Use Mermaid unless another language is clearly better.
| User wants | Prefer | Why |
|---|---|---|
| process flow, decision tree, simple swimlane | Mermaid flowchart | readable and easy to paste into Markdown |
| sequence of system/user interactions | Mermaid sequenceDiagram or PlantUML sequence | Mermaid for docs; PlantUML for UML formality |
| lifecycle, state machine, transitions | Mermaid stateDiagram-v2 or PlantUML state | compact transition syntax |
| database schema, entities, relationships | Mermaid erDiagram | portable ER notation |
| class/interface/object model | Mermaid classDiagram or PlantUML class | Mermaid for docs; PlantUML for detailed UML |
| project schedule | Mermaid gantt | concise timeline syntax |
| hierarchy, ideas, notes | Mermaid mindmap | good default for idea maps |
| customer/product journey | Mermaid journey | built-in journey notation |
| git history | Mermaid gitGraph | built-in git notation |
| dependency graph, package graph, large network | Graphviz DOT | better layout engines for dense graphs |
| architecture with layers, clusters, boundaries | Mermaid flowchart with subgraphs, Graphviz clusters, or PlantUML C4-style | choose based on requested fidelity |
| weighted flow/sankey-like relationship | Mermaid sankey-beta when supported, otherwise SVG or Graphviz | Mermaid support may vary by renderer |
| custom visual where source languages fit poorly | SVG | precise control over layout and styling |
除非其他语言明显更合适,否则优先使用Mermaid。
| 用户需求 | 优先选择 | 原因 |
|---|---|---|
| 流程、决策树、简单泳道图 | Mermaid flowchart | 可读性强,易于粘贴到Markdown中 |
| 系统/用户交互时序 | Mermaid sequenceDiagram 或 PlantUML sequence | 文档场景用Mermaid;需UML规范性时用PlantUML |
| 生命周期、状态机、转换 | Mermaid stateDiagram-v2 或 PlantUML state | 转换语法简洁 |
| 数据库模式、实体、关系 | Mermaid erDiagram | 可移植的ER表示法 |
| 类/接口/对象模型 | Mermaid classDiagram 或 PlantUML class | 文档场景用Mermaid;需详细UML时用PlantUML |
| 项目进度 | Mermaid gantt | 简洁的时间轴语法 |
| 层级结构、想法、笔记 | Mermaid mindmap | 思维导图的优质默认选择 |
| 客户/产品旅程 | Mermaid journey | 内置旅程表示法 |
| Git历史 | Mermaid gitGraph | 内置Git表示法 |
| 依赖图、包图、大型网络 | Graphviz DOT | 针对密集图的布局引擎更出色 |
| 带分层、集群、边界的架构图 | 带子图的Mermaid flowchart、Graphviz集群或PlantUML C4风格 | 根据所需保真度选择 |
| 加权流/桑基式关系 | 支持时用Mermaid sankey-beta,否则用SVG或Graphviz | Mermaid的支持情况可能因渲染器而异 |
| 源语言难以表达的自定义可视化 | SVG | 可精确控制布局和样式 |
Output policy
输出策略
- Always provide editable source unless the user explicitly asks only for an image.
- Default to a single best diagram. Offer alternatives only when genuinely useful.
- Prefer stable, simple syntax over fancy features that may not render in older Mermaid/PlantUML versions.
- Use short labels. Split long text into notes outside the diagram when needed.
- Avoid ambiguous node IDs. Use ASCII IDs and human-readable labels.
- Preserve user terminology, but standardize capitalization within a diagram.
- For technical diagrams, include boundaries such as client, service, database, queue, external API, and operator/user when they are implied.
- For business-process diagrams, distinguish happy path, decision points, failures, retries, and manual steps when present.
- For diagrams created from uncertain text, include an section after the code.
Assumptions
- 除非用户明确要求仅提供图片,否则始终提供可编辑的源码。
- 默认生成单个最佳图表。仅当确实有用时才提供替代方案。
- 优先使用稳定、简单的语法,而非可能在旧版Mermaid/PlantUML中无法渲染的花哨功能。
- 使用简短标签。必要时将长文本拆分为图表外的注释。
- 避免模糊的节点ID。使用ASCII ID和易读的标签。
- 保留用户术语,但在单个图表内统一大小写。
- 对于技术图表,若隐含相关边界,需包含客户端、服务、数据库、队列、外部API和操作员/用户等元素。
- 对于业务流程图表,区分正常路径、决策点、故障、重试和手动步骤(若存在)。
- 对于基于不确定文本创建的图表,在代码后添加部分。
假设
Mermaid generation rules
Mermaid生成规则
Consult for compact templates.
references/diagram-patterns.mdGeneral Mermaid rules:
- Start with the correct diagram directive, for example ,
flowchart TD,sequenceDiagram,erDiagram,gantt, ormindmap.journey - For flowcharts, use unless the user asks for left-to-right; use
flowchart TDfor architecture and pipelines.flowchart LR - Use subgraphs for swimlanes or architecture layers. Name subgraphs with readable labels.
- Keep node IDs stable and ASCII-only, for example .
ingest_service[Ingest Service] - Quote labels that contain punctuation likely to confuse the parser.
- Use decision diamonds for branching: .
decision{Condition?} - Use consistent edge labels: ,
-- yes -->,-- no -->, or-. async .->only when meaningful.== critical ==> - In sequence diagrams, declare participants before messages. Use for humans and
actorfor systems.participant - Use ,
alt/else/end,opt/end, andloop/endblocks for conditional, optional, repeated, and parallel flows.par/and/end
参考获取简洁模板。
references/diagram-patterns.md通用Mermaid规则:
- 以正确的图表指令开头,例如、
flowchart TD、sequenceDiagram、erDiagram、gantt或mindmap。journey - 流程图默认使用,除非用户要求从左到右;架构图和流水线使用
flowchart TD。flowchart LR - 使用子图表示泳道或架构层。为子图命名易读的标签。
- 保持节点ID稳定且仅含ASCII字符,例如。
ingest_service[Ingest Service] - 对包含可能混淆解析器的标点符号的标签添加引号。
- 使用决策菱形表示分支:。
decision{Condition?} - 使用一致的边标签:仅在有意义时使用、
-- yes -->、-- no -->或-. async .->。== critical ==> - 时序图中,在消息前声明参与者。人类用,系统用
actor。participant - 使用、
alt/else/end、opt/end和loop/end块表示条件、可选、重复和并行流。par/and/end
Graphviz DOT generation rules
Graphviz DOT生成规则
Use Graphviz for large, dense, or layout-sensitive relationship diagrams.
- Prefer for directed relationships and
digraph Gfor undirected networks.graph G - Set layout-friendly graph attributes at the top: ,
rankdir=LR,nodesep, andranksepwhen helpful.splines=true - Use for boundaries and subsystems.
subgraph cluster_name - Use plain labels and restrained styling.
- Use edge labels only when they add meaning.
- For many nodes, group by domain with clusters and avoid crossing-heavy all-to-all edges.
大型、密集或对布局敏感的关系图使用Graphviz。
- 有向关系优先使用,无向网络优先使用
digraph G。graph G - 在顶部设置利于布局的图属性:、
rankdir=LR、nodesep,必要时设置ranksep。splines=true - 使用表示边界和子系统。
subgraph cluster_name - 使用简洁标签和克制的样式。
- 仅在能增加意义时使用边标签。
- 节点较多时,按领域用集群分组,避免交叉过多的全连接边。
PlantUML generation rules
PlantUML生成规则
Use PlantUML when the user asks for UML or needs formal UML notation.
- Wrap diagrams with and
@startuml.@enduml - Use ,
actor,participant,database,queue, orcollectionsstereotypes when useful.component - Use ,
package, orrectanglefor architecture boundaries.node - For class diagrams, include only important fields/methods unless the user asks for exhaustive detail.
- For activity diagrams, use clear start/end markers and explicit branch labels.
当用户要求UML或需要正式UML表示法时使用PlantUML。
- 用和
@startuml包裹图表。@enduml - 必要时使用、
actor、participant、database、queue或collections构造型。component - 用、
package或rectangle表示架构边界。node - 类图仅包含重要字段/方法,除非用户要求详尽细节。
- 活动图使用清晰的开始/结束标记和明确的分支标签。
SVG generation rules
SVG生成规则
Use SVG only when text diagram languages cannot express the requested visual reliably.
- Keep SVG simple, accessible, and editable.
- Include and meaningful text labels.
<title> - Prefer rectangles, lines, arrows, and groups over complex paths.
- Do not embed external fonts or remote images.
仅当文本图表语言无法可靠表达所需可视化效果时使用SVG。
- 保持SVG简洁、可访问且可编辑。
- 包含和有意义的文本标签。
<title> - 优先使用矩形、线条、箭头和组,而非复杂路径。
- 不嵌入外部字体或远程图片。
Rendering files
文件渲染
When the user asks for PNG/SVG/PDF, create a source file and run:
bash
python "<SKILL_ROOT>/diagram-generator/scripts/render_diagram.py" input.mmd --format svg --out output.svg
python "<SKILL_ROOT>/diagram-generator/scripts/render_diagram.py" input.dot --format png --out output.png
python "<SKILL_ROOT>/diagram-generator/scripts/render_diagram.py" input.puml --format svg --out output.svg是本包<SKILL_ROOT>目录的实际路径,AI 应自动检测。skills/
The renderer is intentionally dependency-tolerant. It tries common local tools and reports actionable installation hints if a renderer is unavailable. Do not claim an image was rendered unless the script completed successfully and the output file exists.
当用户要求PNG/SVG/PDF时,创建源码文件并运行:
bash
python "<SKILL_ROOT>/diagram-generator/scripts/render_diagram.py" input.mmd --format svg --out output.svg
python "<SKILL_ROOT>/diagram-generator/scripts/render_diagram.py" input.dot --format png --out output.png
python "<SKILL_ROOT>/diagram-generator/scripts/render_diagram.py" input.puml --format svg --out output.svg是本包<SKILL_ROOT>目录的实际路径,AI 应自动检测。skills/
渲染器特意设计为兼容多种依赖环境。它会尝试使用常见的本地工具,若渲染器不可用,会输出可行的安装提示。除非脚本成功完成且输出文件存在,否则不要声称已渲染图片。
Validation checklist
验证清单
Before finalizing:
- The diagram type matches the user's task.
- The source is syntactically plausible for the chosen language.
- Labels are short enough to fit.
- Edges and message order reflect the input accurately.
- Assumptions are called out when the input was incomplete.
- For generated files, the output exists and opens or has nonzero size.
最终确定前需检查:
- 图表类型是否匹配用户任务。
- 源码对所选语言而言语法是否合理。
- 标签是否短到能容纳。
- 边和消息顺序是否准确反映输入内容。
- 输入内容不完整时是否标注了假设。
- 若生成了文件,输出文件是否存在且可打开或大小非零。
Common response template
通用响应模板
Use this structure for most diagram answers:
markdown
下面是可编辑的 [language] 版本:
```[language]
[source]Assumptions:
- [only if needed]
Rendered file: [link] [only if generated]
For English user requests, respond in English. For Chinese user requests, respond in Chinese unless they ask otherwise.
---大多数图表回复使用以下结构:
markdown
下面是可编辑的 [language] 版本:
```[language]
[source]假设:
- [仅在需要时添加]
渲染文件:[链接] [仅在生成文件时添加]
英文用户请求用英文回复,中文用户请求用中文回复,除非用户另有要求。
---按需自举(On-Demand Bootstrap)
按需自举(On-Demand Bootstrap)
自动化能力边界
自动化能力边界
| 工具 | 可自动安装 | 安装方式 | 说明 |
|---|---|---|---|
| Mermaid CLI (mmdc) | ✓ | npm install -g @mermaid-js/mermaid-cli | 渲染 Mermaid 为 PNG/SVG |
| Graphviz (dot) | ✗ | 手动安装 | https://graphviz.org/download/ |
| PlantUML | ✗ | 需要 Java + plantuml.jar | https://plantuml.com/download |
| Python (render script) | ✓ | 已在 bootstrap 中 | |
| 工具 | 可自动安装 | 安装方式 | 说明 |
|---|---|---|---|
| Mermaid CLI (mmdc) | ✓ | npm install -g @mermaid-js/mermaid-cli | 渲染 Mermaid 为 PNG/SVG |
| Graphviz (dot) | ✗ | 手动安装 | https://graphviz.org/download/ |
| PlantUML | ✗ | 需要 Java + plantuml.jar | https://plantuml.com/download |
| Python (render script) | ✓ | 已在 bootstrap 中 | |
说明
说明
本 skill 主要输出文本格式的图表源码(Mermaid/DOT/PlantUML),不一定需要本地渲染工具。只有当用户明确要求生成 PNG/SVG/PDF 文件时才需要对应的渲染器。
如果渲染器不可用, 会输出安装提示而不是报错。
scripts/render_diagram.py本 skill 主要输出文本格式的图表源码(Mermaid/DOT/PlantUML),不一定需要本地渲染工具。只有当用户明确要求生成 PNG/SVG/PDF 文件时才需要对应的渲染器。
如果渲染器不可用, 会输出安装提示而不是报错。
scripts/render_diagram.py路由上下文
路由上下文
上游入口: (总控)、
触发条件: 用户说"画图"、"流程图"、"架构图"、"攻击路径图"、"时序图"、"Mermaid"、"Graphviz"、"PlantUML"
下游出口:
skills/SKILL.mdrouting.md- 生成的图表可嵌入 的报告中
docs-generator/ - 攻击路径图可配合 的渗透报告
pentest-tools/
同级关联模块: (报告中嵌入图表)
docs-generator/上游入口: (总控)、
触发条件: 用户说"画图"、"流程图"、"架构图"、"攻击路径图"、"时序图"、"Mermaid"、"Graphviz"、"PlantUML"
下游出口:
skills/SKILL.mdrouting.md- 生成的图表可嵌入 的报告中
docs-generator/ - 攻击路径图可配合 的渗透报告
pentest-tools/
同级关联模块: (报告中嵌入图表)
docs-generator/任务完成自检(声称完成前 MUST 通过)
任务完成自检(声称完成前必须通过)
- 我是否执行了工作流中的每一步(而不是只阅读)?
- 我是否基于 使用了真实工具路径?
tool-index - 我是否产出了可复现证据(命令/脚本/截图/报告)?
- 我是否完成并回写了 RULES 要求的 Checklist 项?
- 我是否执行了工作流中的每一步(而不是只阅读)?
- 我是否基于 使用了真实工具路径?
tool-index - 我是否产出了可复现证据(命令/脚本/截图/报告)?
- 我是否完成并回写了 RULES 要求的 Checklist 项?