drawio by bahayonghang/drawio-skills
npx skills add https://github.com/bahayonghang/drawio-skills --skill drawio使用 Draw.io XML 和 Design System 2.0 创建、编辑和导出架构图、流程图和技术图表。
解析用户的图表请求。
设计咨询 — 当请求缺少明确的视觉规范(未说明主题、布局或复杂度)时,使用 AskUserQuestion 在一次调用中 收集最多 4 个维度的设计意图:
Q1 — 目标受众与用例(单选):
academic-colortech-bluedarktech-blueQ2 — 视觉风格(单选,并附带显示颜色样本的 markdown 预览):
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
tech-blue — 专业的蓝色,适合架构图academic-color — 多彩的学术风格,适合论文/研究dark — 深色演示风格,适合幻灯片nature — 自然的绿色,适合生命周期/流程academic — 灰度打印,适合 IEEE 投稿Q3 — 布局方向(单选):
Q4 — 预期复杂度(单选):
跳过任何问题,如果用户已在请求中明确指定了答案。将答案存储在
designIntent对象中,以预配置 YAMLmeta部分。参考$SKILL_DIR/references/docs/design-system/color-guide.md了解主题选择依据。
阅读 $SKILL_DIR/references/docs/design-system/README.md 以了解可用的主题、语义形状和连接器类型。
阅读 $SKILL_DIR/references/docs/design-system/specification.md 以了解本技能的标准 YAML 规范格式。
如有疑问,可参考 $SKILL_DIR/references/examples/ 中的模式示例以了解语法。
严格按照规范生成图表 YAML。
⚠️ 关键 - 布局与美观:内置的脚本布局引擎极其基础,仅以直线形式输出节点。不要仅仅依赖
layout: horizontal|vertical。你必须为每个节点显式计算思维网格坐标,并在 YAML 中分配position: { x: ..., y: ... }字段。使用几何约束(例如,从中心开始的dx = 160,dy = 120),并考虑分支/循环的路径路由,以实现视觉上惊艳且无重叠的设计。
使用 CLI 工具验证并将 YAML 编译为 .drawio XML 或 .svg:
node $SKILL_DIR/scripts/cli.js input.yaml output.drawionode $SKILL_DIR/scripts/cli.js input.yaml --validate清理:图表生成完成后,删除中间的 .yaml 文件以保持工作区整洁。
向用户解释如何使用 MCP 工具(例如,drawio:start_session)进行实时预览(工具用法参考 $SKILL_DIR/references/docs/mcp-tools.md)。
$SKILL_DIR/references/$SKILL_DIR/assets/每周安装量
738
代码仓库
GitHub 星标数
48
首次出现
2026年1月20日
安全审计
安装于
opencode660
codex618
gemini-cli590
github-copilot571
amp520
kimi-cli518
Create, edit, and export architecture, flowchart, and technical diagrams using Draw.io XML and Design System 2.0.
Parse the user's diagram request.
Design Consultation — When the request lacks explicit visual specifications (no theme, layout, or complexity stated), use AskUserQuestion to collect design intent across up to 4 dimensions in a single call :
Q1 — Target Audience & Use Case (single-select):
academic-colortech-bluedarktech-blueQ2 — Visual Style (single-select, with markdown previews showing color swatches):
tech-blue — Professional blue, ideal for architecture diagramsacademic-color — Colorful academic style, ideal for papers/researchdark — Dark presentation style, ideal for slidesnature — Natural green, ideal for lifecycle/process flowsacademic — Grayscale print, ideal for IEEE submissionsQ3 — Layout Direction (single-select):
Q4 — Expected Complexity (single-select):
Skip any question where the user has already specified the answer in their request. Store answers in a
designIntentobject to pre-configure the YAMLmetasection. Refer to$SKILL_DIR/references/docs/design-system/color-guide.mdfor theme selection rationale.
Read $SKILL_DIR/references/docs/design-system/README.md to understand the available themes, semantic shapes, and connector types.
Read $SKILL_DIR/references/docs/design-system/specification.md to understand the standard YAML specification format for this skill.
For reference, review pattern examples in $SKILL_DIR/references/examples/ if unsure about the syntax.
Generate the diagram YAML strictly following the specification.
⚠️ CRITICAL - Layout & Aesthetics: The built-in script layout engine is extremely basic and only outputs nodes in a straight line. Do NOT rely on
layout: horizontal|verticalalone. You MUST explicitly calculate mental grid coordinates for each node and assignposition: { x: ..., y: ... }fields in the YAML. Use geometric constraints (e.g.dx = 160,dy = 120from the center) and consider routing paths for branches/loops to achieve a visually stunning, non-overlapping design.
Validate and compile the YAML into .drawio XML or .svg using the CLI tool:
node $SKILL_DIR/scripts/cli.js input.yaml output.drawionode $SKILL_DIR/scripts/cli.js input.yaml --validateClean up : Delete the intermediate .yaml file after the diagram generation is complete to keep the workspace clean.
Explain to the user how to use MCP tools (e.g., drawio:start_session) if they want real-time preview (refer to $SKILL_DIR/references/docs/mcp-tools.md for tool usage).
$SKILL_DIR/references/$SKILL_DIR/assets/Weekly Installs
738
Repository
GitHub Stars
48
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
opencode660
codex618
gemini-cli590
github-copilot571
amp520
kimi-cli518
99,500 周安装