$ ~/registry/skill/openclaw-diagram-maker

SKILL

diagram-maker

Name: diagram-maker
Author: openclaw

快速生成概念、架构、流程与白板图，支持 SVG、HTML 或 Excalidraw 格式

星标

★ 390,422

来源

GitHub

更新于

2026-09-25

// 安全评估低风险

仅提示词，不执行代码
开源可审计
社区验证· 377.5k

总评

该技能材料显示其本质是一个用于生成图表文件的提示型技能，不要求密钥、未声明任何远程端点，整体风险较低。结合开源 GitHub 来源与极高社区采用度，未见明确高风险红旗，但仍应注意其输出可能指向本地文件路径这一常规使用场景。

凭证密钥低风险

材料与客观检查项均表明无需 API key、token 或环境变量；未见凭证收集、存储、上传或滥用描述，凭证风险低。

网络外发低风险

未声明任何远程端点，README 还明确要求 SVG/HTML 不使用外部字体、JS、图片或远程资源；未见将用户数据外发到第三方服务的迹象。

代码执行低风险

系统检查项标注为 prompt-only，说明其主要是生成图表内容/文件的说明性技能；材料虽提到“打开/解析验证”，但未显示其具备独立执行本机代码、启动进程或调用高权限系统能力。

数据访问低风险

材料仅描述在请求路径或默认路径生成 `.html`/`.excalidraw` 文件，这是图表生成技能的常规输出行为；未见声明可遍历、读取或批量写入广泛本地数据，也未见过度授权请求。

来源供应链低风险

来源为 GitHub 开源仓库，且社区采用度极高（约 37.7 万 star），这些都是显著的正面可信信号；虽然许可证未声明、维护状态未知，存在一定可治理性信息缺口，但不足以构成高风险红旗。

安全建议

优先在受限工作区内使用，仅允许写入明确指定的输出目录。
若落地使用，补查仓库许可证、最近提交与 issue 处理情况。
对生成的 HTML/SVG 做一次人工检查，确认未夹带意外脚本或外链资源。
如需企业使用，可将允许输出的文件类型和路径纳入策略控制。

审计模型: gpt-5.4 · 2026-06-16

// 安装

复制安装指令，让 AI 自动完成配置 · 推荐新手

请帮我安装 askskill 上的 "diagram-maker" 技能：
1. 下载 https://raw.githubusercontent.com/openclaw/openclaw/main/skills/diagram-maker/SKILL.md
2. 保存为 ~/.claude/skills/diagram-maker/SKILL.md
3. 装好后重载技能，告诉我可以用了

// 下载

下载 SKILL.md机读安装清单 ↗

// 用法示例

系统架构图

输入

请为一个电商平台生成 SVG 架构图，包含前端、API 网关、用户服务、订单服务、支付服务、数据库与缓存，并用箭头标出主要调用关系。

预期产出

一张结构清晰的系统架构图，可直接用于文档或方案说明。

业务流程图

输入

请用 Excalidraw 风格绘制客户投诉处理流程图，包含提交投诉、分配负责人、调查问题、反馈结果和关闭工单，并标出判断分支。

预期产出

一张便于团队讨论的流程图，清楚展示步骤与分支条件。

概念关系图

输入

请用 HTML 生成一个机器学习基础概念图，展示监督学习、无监督学习、分类、回归、聚类与常见算法之间的关系。

预期产出

一个可视化概念关系图，帮助学习或演示核心知识结构。

// 文档

Diagram Maker

Create diagrams as artifacts, not prose. Choose one output mode:

clean-svg: educational concepts, physical systems, processes, lifecycle, simple data flow.
architecture-svg: software/cloud/infra topology, services, databases, queues, trust zones.
excalidraw: editable hand-drawn whiteboard, flowchart, sequence, architecture sketch.

Routing

User wants editable/collaborative: choose Excalidraw.
User wants polished standalone browser output: choose SVG/HTML.
Software architecture with infra components: choose architecture SVG.
Science, product, process, concept map, physical object: choose clean SVG.
Unsure: ask one short question only if output format matters; otherwise choose clean SVG.

Workflow

Extract nodes, groups, labels, and directed relationships.
Pick layout first: left-to-right, top-down, hub-spoke, swimlanes, layered stack, sequence.
Keep labels short. Prefer 5-9 main elements over dense diagrams.
Generate the file at the requested path, or ./diagram.html / ./diagram.excalidraw.
Verify syntax by opening/parsing when feasible.

SVG/HTML rules

Single standalone .html file with inline CSS and inline SVG.
No external fonts, JS, images, gradients, glows, decorative blobs, or remote assets.
Use semantic colors, not rainbow sequences: neutral, input, process, storage, external, risk.
Draw connectors before nodes so arrows sit behind boxes.
Every connector path has fill="none" and a marker arrow when directed.
Leave 24px text padding inside boxes; do not let text touch borders.
Legend only when symbols/colors are not obvious.

SVG template

Use references/svg-template.md as the wrapper and replace .

Excalidraw rules

Save .excalidraw JSON with type, version, source, elements, and appState.
Use bound text for shape labels. Do not use a nonstandard label property.
Keep bound text immediately after its container in the elements array.
Minimum labeled shape: 120x60. Minimum body text: 16px.
Use roughness 1, fontFamily: 1, and simple fills.

For exact Excalidraw element snippets, read references/excalidraw-patterns.md.

生成可动效展示的流程图与架构图，便于直观说明系统与数据流。

csthink装→

$ loading_

请帮我安装 askskill 上的 "diagram-maker" 技能： 1. 下载 https://raw.githubusercontent.com/openclaw/openclaw/main/skills/diagram-maker/SKILL.md 2. 保存为 ~/.claude/skills/diagram-maker/SKILL.md 3. 装好后重载技能，告诉我可以用了

// 用法示例

系统架构图

输入

请为一个电商平台生成 SVG 架构图，包含前端、API 网关、用户服务、订单服务、支付服务、数据库与缓存，并用箭头标出主要调用关系。

预期产出

一张结构清晰的系统架构图，可直接用于文档或方案说明。

业务流程图

输入

请用 Excalidraw 风格绘制客户投诉处理流程图，包含提交投诉、分配负责人、调查问题、反馈结果和关闭工单，并标出判断分支。

预期产出

一张便于团队讨论的流程图，清楚展示步骤与分支条件。

概念关系图

输入

请用 HTML 生成一个机器学习基础概念图，展示监督学习、无监督学习、分类、回归、聚类与常见算法之间的关系。

预期产出

一个可视化概念关系图，帮助学习或演示核心知识结构。

// 文档

Diagram Maker

Create diagrams as artifacts, not prose. Choose one output mode:

clean-svg: educational concepts, physical systems, processes, lifecycle, simple data flow.
architecture-svg: software/cloud/infra topology, services, databases, queues, trust zones.
excalidraw: editable hand-drawn whiteboard, flowchart, sequence, architecture sketch.

Routing

User wants editable/collaborative: choose Excalidraw.
User wants polished standalone browser output: choose SVG/HTML.
Software architecture with infra components: choose architecture SVG.
Science, product, process, concept map, physical object: choose clean SVG.
Unsure: ask one short question only if output format matters; otherwise choose clean SVG.

Workflow

Extract nodes, groups, labels, and directed relationships.
Pick layout first: left-to-right, top-down, hub-spoke, swimlanes, layered stack, sequence.
Keep labels short. Prefer 5-9 main elements over dense diagrams.
Generate the file at the requested path, or ./diagram.html / ./diagram.excalidraw.
Verify syntax by opening/parsing when feasible.

SVG/HTML rules

Single standalone .html file with inline CSS and inline SVG.
No external fonts, JS, images, gradients, glows, decorative blobs, or remote assets.
Use semantic colors, not rainbow sequences: neutral, input, process, storage, external, risk.
Draw connectors before nodes so arrows sit behind boxes.
Every connector path has fill="none" and a marker arrow when directed.
Leave 24px text padding inside boxes; do not let text touch borders.
Legend only when symbols/colors are not obvious.

SVG template

Use references/svg-template.md as the wrapper and replace .

Excalidraw rules

Save .excalidraw JSON with type, version, source, elements, and appState.
Use bound text for shape labels. Do not use a nonstandard label property.
Keep bound text immediately after its container in the elements array.
Minimum labeled shape: 120x60. Minimum body text: 16px.
Use roughness 1, fontFamily: 1, and simple fills.

For exact Excalidraw element snippets, read references/excalidraw-patterns.md.