{"id":"20253391-3b74-421b-8263-76d082b17d83","entityType":"agent","slug":"clawhub-zhiningo-drawio-flowchart","name":"drawio-flowchart","canonicalUrl":"https://www.xpersona.co/agent/clawhub-zhiningo-drawio-flowchart","canonicalPath":"/agent/clawhub-zhiningo-drawio-flowchart","generatedAt":"2026-10-11T22:49:27.641Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T18:54:13.983Z","emptyReason":null},"description":"Generate clean, well-structured draw.io (.drawio) XML flowcharts with proper swimlane containers, text hierarchy, color coding, and orthogonal arrows for wor... Skill: drawio-flowchart Owner: zhiningo Summary: Generate clean, well-structured draw.io (.drawio) XML flowcharts with proper swimlane containers, text hierarchy, color coding, and orthogonal arrows for wor... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-04-22T13:05:03.729Z | user Initial release of drawio-flowchart: Production-quality, standards-driven .drawio flowchart generator. - Generates structured, visual","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s17bbfawp1s412d1vtjr1yymr585ba4p:drawio-flowchart","sourceUrl":"https://clawhub.ai/zhiningo/drawio-flowchart","homepage":"https://clawhub.ai/zhiningo/skills/drawio-flowchart","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/zhiningo/drawio-flowchart","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/zhiningo/skills/drawio-flowchart","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Generate clean, well-structured draw.io (.drawio) XML flowcharts with proper swimlane containers, text hierarchy, color coding, and orthogonal arrows for wor..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T18:54:13.983Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T18:54:13.983Z","emptyReason":null},"stars":null,"forks":null,"downloads":1007,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"1.0.0","tractionLabel":"1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T18:54:13.923Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T18:54:13.983Z","lastCrawledAt":"2026-10-11T18:54:13.923Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T18:54:13.923Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.0","createdAt":"2026-04-22T13:05:03.729Z","changelog":"Initial release of drawio-flowchart: Production-quality, standards-driven .drawio flowchart generator. - Generates structured, visually clean flowchart XML files for diagrams.net (draw.io), following a comprehensive set of design and formatting rules. - Enforces swimlane stage organization, strict hierarchy, text sizing, color palette, and arrow routing for professional results. - Output includes fully packaged .drawio XML with guidance on opening: via app.diagrams.net browser, desktop app, or VS Code extension. - Includes a detailed validation checklist to ensure flowcharts meet usability and compatibility standards.","fileCount":5,"zipByteSize":8945}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17bbfawp1s412d1vtjr1yymr585ba4p:drawio-flowchart","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhiningo-drawio-flowchart/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhiningo-drawio-flowchart/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhiningo-drawio-flowchart/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zhiningo-drawio-flowchart/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zhiningo-drawio-flowchart/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zhiningo-drawio-flowchart/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-11T22:49:27.640Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhiningo-drawio-flowchart/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhiningo-drawio-flowchart/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhiningo-drawio-flowchart/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhiningo-drawio-flowchart/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T18:54:13.983Z","emptyReason":null},"readme":"Skill: drawio-flowchart\n\nOwner: zhiningo\n\nSummary: Generate clean, well-structured draw.io (.drawio) XML flowcharts with proper swimlane containers, text hierarchy, color coding, and orthogonal arrows for wor...\n\nTags: latest:1.0.0\n\nVersion history:\n\nv1.0.0 | 2026-04-22T13:05:03.729Z | user\n\nInitial release of drawio-flowchart: Production-quality, standards-driven .drawio flowchart generator.\n\n- Generates structured, visually clean flowchart XML files for diagrams.net (draw.io), following a comprehensive set of design and formatting rules.\n- Enforces swimlane stage organization, strict hierarchy, text sizing, color palette, and arrow routing for professional results.\n- Output includes fully packaged .drawio XML with guidance on opening: via app.diagrams.net browser, desktop app, or VS Code extension.\n- Includes a detailed validation checklist to ensure flowcharts meet usability and compatibility standards.\n\nArchive index:\n\nArchive v1.0.0: 5 files, 8945 bytes\n\nFiles: README.md (3403b), references/template.md (6138b), skill-card.md (2046b), SKILL.md (7713b), _meta.json (135b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: drawio-flowchart\ndescription: Generate draw.io (.drawio) flowchart XML files. Use when the user asks for a flowchart, process diagram, workflow diagram, or any visual diagram in draw.io / diagrams.net format. Produces well-structured, visually clean .drawio files with proper alignment, hierarchy, and readable text. NOT for: Mermaid diagrams, ASCII art, or image-based diagrams.\n---\n\n# draw.io Flowchart Generator\n\nGenerate production-ready `.drawio` XML files that render cleanly in app.diagrams.net.\n\n## Quick Start\n\n1. Understand the user's process/workflow\n2. Plan the hierarchy: stages → sub-stages → nodes\n3. Generate the XML following the mandatory rules below\n4. Save the `.drawio` file and tell the user how to open it (see [Output Delivery](#output-delivery))\n\n## Mandatory Rules\n\nThese are non-negotiable. Every flowchart MUST follow all of them.\n\n### Canvas Sizing (Critical)\n\n**diagrams.net auto-scales to fit the canvas.** A canvas too large = tiny text on screen.\n\n| Content complexity | pageWidth | pageHeight |\n|---|---|---|\n| Simple (≤3 stages, few nodes) | 600 | 1200 |\n| Medium (4-5 stages) | 800 | 2800 |\n| Complex (6+ stages, nested) | 800 | 3800 |\n\n- **Never exceed pageWidth=800.** Wider canvases get scaled down, making text unreadable.\n- Set `dx` and `dy` to match or slightly exceed page dimensions.\n\n### Container Structure\n\nUse `swimlane` containers for every stage/group — never bare `mxgraph.basic.rect`:\n\n```xml\n\n \n\n```\n\nKey properties:\n- `startSize=32` — header height for title\n- `rounded=0` — sharp corners (never rounded containers)\n- `collapsible=0` — prevent collapse UI\n- `connectable=\"0\"` — on the cell tag, not in style\n\n### Text Hierarchy\n\nThree tiers of text size — no exceptions:\n\n| Level | fontSize | fontStyle | Example |\n|---|---|---|---|\n| Stage title (swimlane) | 14-16 | 1 (bold) | ① Skill 上传 |\n| Node title (inside box) | 13 with `` tag | bold via HTML | **格式验证 ✅** |\n| Node body text | 12 | normal | SKILL.md & YAML 合法 |\n\nUse inline HTML for mixed sizes within a single cell:\n```xml\nvalue=\"<b style="font-size:13px">Title</b><br><br>Body text line 1<br>Body text line 2\"\n```\n\n### Alignment\n\n- **All text: `align=center`** — no exceptions for node content\n- **Stage titles** use swimlane's built-in left-aligned bold header (this is fine)\n- **Nodes within a container**: distribute evenly across the container width\n - 2 nodes: left half + right half\n - 3 nodes: thirds\n\n### Arrows\n\n**Arrows must be clean and orthogonal. No diagonal lines, no crossing, no spaghetti.**\n\n#### Between stages (main flow)\n```xml\n\n```\n- strokeWidth=3, blue (#2563EB), bold label\n\n#### Within a container (internal flow)\n```xml\n\n```\n- strokeWidth=2, color matches container theme\n\n#### Fan-out pattern (one source → multiple targets)\nUse explicit entry points to prevent crossing:\n```xml\n\nstyle=\"...entryX=0.25;entryY=0;exitX=0.5;exitY=1;\"\n\nstyle=\"...entryX=0.5;entryY=0;exitX=0.5;exitY=1;\"\n\nstyle=\"...entryX=0.75;entryY=0;exitX=0.5;exitY=1;\"\n```\n\n#### Return/loop arrows\nUse dashed lines routed via explicit waypoints on the left margin:\n```xml\nstyle=\"edgeStyle=orthogonalEdgeStyle;dashed=1;strokeColor=#d97706;strokeWidth=2;\"\n```\nWith `` routing along x=5 to avoid crossing content.\n\n### Color Palette\n\nUse this consistent 5-stage palette. If fewer stages, use a subset:\n\n| Stage | fillColor | strokeColor | fontColor |\n|---|---|---|---|\n| 1 (intro/input) | #EBF5FF | #2563EB | #1e40af |\n| 2 (validation) | #F0FDF4 | #16a34a | #047857 |\n| 3 (evaluation) | #FAF5FF | #7c3aed | #6d28d9 |\n| 4 (approval) | #F0FDF4 | #059669 | #047857 |\n| 5 (management) | #FFF7ED | #ea580c | #c2410c |\n\nSub-containers (dashed): use lighter fills (#FEFCE8, #FFF7ED, #FEF2F2) with `dashed=1`.\n\nNode fills: always `#FFFFFF` with border color matching the parent stage.\n\nSpecial nodes:\n- Warning/fail: fillColor=#f8cecc, strokeColor=#b85450\n- Pending/future: fillColor=#fff2cc, strokeColor=#d6b656\n- Decision (rhombus): fillColor=#fff2cc, strokeColor=#d6b656\n\n### Spacing Rules\n\n- Container left margin: x=20, right margin: leave 20px\n- Container width: `pageWidth - 40` (e.g., 720 for 800-wide canvas)\n- Vertical gap between stages: 30-40px (including arrow space)\n- Nodes inside container: 10-20px padding from container edges\n- Vertical gap between node bottom and container bottom: ≥15px\n\n### \"或\" (Or) Pattern\n\nWhen two parallel options exist (e.g., manual vs automatic):\n```xml\n\n```\nPlace centered between the two option boxes, vertically aligned to their midpoint.\n\n### Status/Note Bars\n\nFor status flow annotations or notes at the bottom of a container:\n```xml\nstyle=\"rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#999;\n fontSize=11;align=center;fontStyle=2;\"\n```\nHeight: 22-28px, italic, gray — visually subordinate to main content.\n\n## XML Structure Template\n\nSee [references/template.md](references/template.md) for the complete XML skeleton.\n\n## Output Delivery\n\n**交付本地 `.drawio` 文件**，告诉用户打开方式。\n\n### 步骤\n\n1. 生成完整的 `.drawio` XML，**必须包含 `` 外层包裹**：\n\n```xml\n\n \n \n \n ...\n \n \n \n\n```\n\n2. 将文件保存到 workspace 或用户指定路径，文件名以 `.drawio` 结尾\n3. 告诉用户文件路径和打开方式：\n\n**打开方式（告知用户，选其一即可）：**\n- **方式一**：浏览器打开 https://app.diagrams.net → 点「Open Existing Diagram」→ 选择本地文件\n- **方式二**：直接将 `.drawio` 文件拖拽到已打开的 app.diagrams.net 页面中\n- **方式三**：如果安装了 diagrams.net 桌面版（或 VS Code draw.io 插件），直接双击文件打开\n\n## Validation Checklist\n\nBefore writing the file, verify:\n\n- [ ] `pageWidth` ≤ 800\n- [ ] All containers use `swimlane` style with `rounded=0;collapsible=0`\n- [ ] All node text has `align=center`\n- [ ] Stage titles use fontSize 14-16 with fontStyle=1\n- [ ] Node titles use `` tags at fontSize 13\n- [ ] Inter-stage arrows: strokeWidth=3, strokeColor=#2563EB\n- [ ] Intra-container arrows: strokeWidth=2, matching container color\n- [ ] Fan-out arrows use explicit entryX/exitX anchors\n- [ ] No XML comments (``) in the output — they cause load errors\n- [ ] All `edge` cells have `edge=\"1\"` attribute and valid source/target\n- [ ] Container cells have `connectable=\"0\"` on the tag (not in style)\n- [ ] Nodes inside a container have `parent=\"containerId\"`\n- [ ] No overlapping geometry — manually check x/y/width/height\n- [ ] Return arrows route via left margin with explicit waypoints\n\nFile v1.0.0:README.md\n\n# drawio-flowchart\n\n一个 [AgentSkill](https://agentskills.io)，教 AI Agent 生成**高质量的 draw.io 流程图**——布局整齐、层次分明、风格统一。\n\n> 🧩 兼容 [OpenClaw](https://github.com/openclaw/openclaw)、[Claude](https://claude.ai) 及所有 AgentSkills 兼容平台。\n\n## 效果对比\n\n没有这个 Skill 时，AI 生成的流程图通常：\n- ❌ 节点散落，没有分组容器\n- ❌ 文字左对齐，字号大小不分层\n- ❌ 箭头细灰，主次流程不区分\n- ❌ 画布过宽导致自动缩放，文字看不清\n- ❌ 回退箭头斜穿画面\n\n有了这个 Skill：\n- ✅ Swimlane 容器按阶段分组\n- ✅ 文字居中，三级字号层次（16/13/12px）\n- ✅ 阶段配色 + 粗蓝主流程箭头\n- ✅ 画布 ≤ 800px，不缩放，字体清晰可读\n- ✅ 正交箭头走线，回退箭头走左侧边距\n\n| Before（无 Skill） | After（有 Skill） |\n|--------|-------|\n|  |  |\n\n## 安装\n\n### OpenClaw（推荐）\n\n```bash\n# 通过 ClawHub 安装\nclawhub install drawio-flowchart\n\n# 或直接 clone 到 workspace\ngit clone https://github.com/YOUR_USERNAME/drawio-flowchart.git ~/.openclaw/workspace/skills/drawio-flowchart\n```\n\n### 其他 AgentSkills 兼容工具\n\n将整个 skill 文件夹复制到你的 Agent skill 目录即可。Agent 会读取 `SKILL.md` 获取所有指令。\n\n## 目录结构\n\n```\ndrawio-flowchart/\n├── SKILL.md ← 核心文件（全部设计规范）\n├── references/\n│ └── template.md ← XML 骨架模板 + 常用模式\n├── assets/\n│ ├── before.png ← 对比图：无 Skill\n│ ├── after.png ← 对比图：有 Skill\n│ ├── demo-flow-before.drawio ← 对比用 drawio 源文件\n│ └── demo-flow-after.drawio ← 对比用 drawio 源文件\n├── README.md ← 本文件\n├── LICENSE ← MIT 开源协议\n└── .gitignore\n```\n\n## 核心设计规则\n\n完整规范在 `SKILL.md` 中，以下是关键规则：\n\n| 规则 | 为什么 |\n|------|--------|\n| `pageWidth ≤ 800` | 防止 diagrams.net 自动缩放导致文字极小 |\n| Swimlane 容器 | 提供阶段分组 + 内置标题栏 |\n| 三级文字：16 → 13 → 12px | 清晰的视觉层次 |\n| 全部 `align=center` | 整洁、专业的视觉效果 |\n| 阶段间箭头：3px 蓝色粗线 | 区分主流程和内部连接 |\n| 五色调色板 | 统一的阶段辨识度 |\n| 仅正交箭头 | 杜绝斜线和交叉 |\n| `` 外层包裹 | 兼容桌面版和网页版 |\n\n## 输出方式\n\nSkill 会指导 Agent：\n1. 生成完整的 `.drawio` XML 文件并保存到本地\n2. 告诉用户打开方式：\n - **网页版**：打开 https://app.diagrams.net → 选择「Open Existing Diagram」\n - **拖拽**：将文件拖入已打开的 diagrams.net 页面\n - **桌面版**：安装了 diagrams.net 桌面版或 VS Code draw.io 插件，直接双击打开\n\n## 使用示例\n\n> \"画一个产品需求上线流程图：需求收集 → 设计 → 开发 → 测试 → 灰度 → 全量上线\"\n\nAgent 会按照所有设计规范生成一个结构清晰的 `.drawio` 文件。\n\n## 贡献\n\n欢迎提 PR！如果你发现布局边界情况或想增加更多模式（如并行泳道、时间线图），欢迎贡献。\n\n## 开源协议\n\nMIT\n\nFile v1.0.0:_meta.json\n\n{\n \"ownerId\": \"kn7b5cmpw0bw3s496z8nkhf7js85amh3\",\n \"slug\": \"drawio-flowchart\",\n \"version\": \"1.0.0\",\n \"publishedAt\": 1776863103729\n}\n\nFile v1.0.0:references/template.md\n\n# XML Template\n\nComplete skeleton for a medium-complexity (4-5 stage) flowchart.\nCopy and adapt — replace `TODO` placeholders with real content.\n\n```xml\n\n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n\n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n\n \n\n \n \n \n\n```\n\n## Patterns\n\n### Sub-container (dashed, within a stage)\n\n```xml\n\n \n\n\n```\n\n### Decision diamond\n\n```xml\n\n \n\n```\n\n### Return/loop arrow via left margin\n\n```xml\n\n \n \n \n \n \n \n\n```\nReplace SOURCE_Y and TARGET_Y with the vertical center of source/target.\n\n### Parallel options with \"或\"\n\n```xml\n\n\n\n\n \n\n\n\n```\n\nFile v1.0.0:skill-card.md\n\n## Description:\n\nGenerate draw.io (.drawio) flowchart XML files for flowcharts, process diagrams, workflow diagrams, and visual diagrams in diagrams.net format.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[zhiningo](https://clawhub.ai/user/zhiningo)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and other agent users use this skill when they need an agent to create clean, structured draw.io flowchart files with swimlane containers, text hierarchy, color coding, and orthogonal arrow routing.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill writes local .drawio files, so an unintended filename or path could place output in the wrong location.\n\nMitigation: Review the requested output path before saving and keep generated files in the workspace or an explicit user-selected path.\n\nRisk: Some artifact examples use Chinese labels and instructions, which may not match every user's expected language.\n\nMitigation: Use the user's requested language for diagram labels and response text, or ask for a preferred language when it is unclear.\n\n## Reference(s):\n\n- [XML Template](references/template.md)\n- [diagrams.net](https://app.diagrams.net)\n- [ClawHub skill page](https://clawhub.ai/zhiningo/skills/drawio-flowchart)\n- [AgentSkills](https://agentskills.io)\n- [OpenClaw](https://github.com/openclaw/openclaw)\n\n## Skill Output:\n\n**Output Type(s):** [Markdown, Code, Files, Guidance]\n\n**Output Format:** [Markdown guidance with draw.io XML saved as a .drawio file]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Produces local .drawio XML files and opening instructions for diagrams.net-compatible tools.]\n\n## Skill Version(s):\n\n1.0.0 (source: server release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.","readmeExcerpt":"Skill: drawio-flowchart Owner: zhiningo Summary: Generate clean, well-structured draw.io (.drawio) XML flowcharts with proper swimlane containers, text hierarchy, color coding, and orthogonal arrows for wor... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-04-22T13:05:03.729Z | user Initial release of drawio-flowchart: Production-quality, standards-driven .drawio flowchart generator. - Generates structured, visual","codeSnippets":[],"executableExamples":[{"language":"xml","snippet":"\n \n"},{"language":"xml","snippet":"value=\"<b style="font-size:13px">Title</b><br><br>Body text line 1<br>Body text line 2\""},{"language":"xml","snippet":""},{"language":"xml","snippet":""},{"language":"xml","snippet":"\nstyle=\"...entryX=0.25;entryY=0;exitX=0.5;exitY=1;\"\n\nstyle=\"...entryX=0.5;entryY=0;exitX=0.5;exitY=1;\"\n\nstyle=\"...entryX=0.75;entryY=0;exitX=0.5;exitY=1;\""},{"language":"xml","snippet":"style=\"edgeStyle=orthogonalEdgeStyle;dashed=1;strokeColor=#d97706;strokeWidth=2;\""}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: drawio-flowchart\ndescription: Generate draw.io (.drawio) flowchart XML files. Use when the user asks for a flowchart, process diagram, workflow diagram, or any visual diagram in draw.io / diagrams.net format. Produces well-structured, visually clean .drawio files with proper alignment, hierarchy, and readable text. NOT for: Mermaid diagrams, ASCII art, or image-based diagrams.\n---\n\n# draw.io Flowchart Generator\n\nGenerate production-ready `.drawio` XML files that render cleanly in app.diagrams.net.\n\n## Quick Start\n\n1. Understand the user's process/workflow\n2. Plan the hierarchy: stages → sub-stages → nodes\n3. Generate the XML following the mandatory rules below\n4. Save the `.drawio` file and tell the user how to open it (see [Output Delivery](#output-delivery))\n\n## Mandatory Rules\n\nThese are non-negotiable. Every flowchart MUST follow all of them.\n\n### Canvas Sizing (Critical)\n\n**diagrams.net auto-scales to fit the canvas.** A canvas too large = tiny text on screen.\n\n| Content complexity | pageWidth | pageHeight |\n|---|---|---|\n| Simple (≤3 stages, few nodes) | 600 | 1200 |\n| Medium (4-5 stages) | 800 | 2800 |\n| Complex (6+ stages, nested) | 800 | 3800 |\n\n- **Never exceed pageWidth=800.** Wider canvases get scaled down, making text unreadable.\n- Set `dx` and `dy` to match or slightly exceed page dimensions.\n\n### Container Structure\n\nUse `swimlane` containers for every stage/group — never bare `mxgraph.basic.rect`:\n\n```xml\n\n \n\n```\n\nKey properties:\n- `startSize=32` — header height for title\n- `rounded=0` — sharp corners (never rounded containers)\n- `collapsible=0` — prevent collapse UI\n- `connectable=\"0\"` — on the cell tag, not in style\n\n### Text Hierarchy\n\nThree tiers of text size — no exceptions:\n\n| Level | fontSize | fontStyle | Example |\n|---|---|---|---|\n| Stage title (swimlane) | 14-16 | 1 (bold) | ① Skill 上传 |\n| Node title (inside box) | 13 with `` tag | bold via HTML | **格式验证 ✅** |\n| Node body text | 12 | normal | SKILL.md & YAML 合法 |\n\nUse inline HTML for mixed sizes within a single cell:\n```xml\nvalue=\"<b style="font-size:13px">Title</b><br><br>Body text line 1<br>Body text line 2\"\n```\n\n### Alignment\n\n- **All text: `align=center`** — no exceptions for node content\n- **Stage titles** use swimlane's built-in left-aligned bold header (this is fine)\n- **Nodes within a container**: distribute evenly across the container width\n - 2 nodes: left half + right half\n - 3 nodes: thirds\n\n### Arrows\n\n**Arrows must be clean and orthogonal. No diagonal lines, no crossing, no spaghetti.**\n\n#### Between stages (main flow)\n```xml\n 🧩 兼容 [OpenClaw](https://github.com/openclaw/openclaw)、[Claude](https://claude.ai) 及所有 AgentSkills 兼容平台。\n\n## 效果对比\n\n没有这个 Skill 时，AI 生成的流程图通常：\n- ❌ 节点散落，没有分组容器\n- ❌ 文字左对齐，字号大小不分层\n- ❌ 箭头细灰，主次流程不区分\n- ❌ 画布过宽导致自动缩放，文字看不清\n- ❌ 回退箭头斜穿画面\n\n有了这个 Skill：\n- ✅ Swimlane 容器按阶段分组\n- ✅ 文字居中，三级字号层次（16/13/12px）\n- ✅ 阶段配色 + 粗蓝主流程箭头\n- ✅ 画布 ≤ 800px，不缩放，字体清晰可读\n- ✅ 正交箭头走线，回退箭头走左侧边距\n\n| Before（无 Skill） | After（有 Skill） |\n|--------|-------|\n|  |  |\n\n## 安装\n\n### OpenClaw（推荐）\n\n```bash\n# 通过 ClawHub 安装\nclawhub install drawio-flowchart\n\n# 或直接 clone 到 workspace\ngit clone https://github.com/YOUR_USERNAME/drawio-flowchart.git ~/.openclaw/workspace/skills/drawio-flowchart\n```\n\n### 其他 AgentSkills 兼容工具\n\n将整个 skill 文件夹复制到你的 Agent skill 目录即可。Agent 会读取 `SKILL.md` 获取所有指令。\n\n## 目录结构\n\n```\ndrawio-flowchart/\n├── SKILL.md ← 核心文件（全部设计规范）\n├── references/\n│ └── template.md ← XML 骨架模板 + 常用模式\n├── assets/\n│ ├── before.png ← 对比图：无 Skill\n│ ├── after.png ← 对比图：有 Skill\n│ ├── demo-flow-before.drawio ← 对比用 drawio 源文件\n│ └── demo-flow-after.drawio ← 对比用 drawio 源文件\n├── README.md ← 本文件\n├── LICENSE ← MIT 开源协议\n└── .gitignore\n```\n\n## 核心设计规则\n\n完整规范在 `SKILL.md` 中，以下是关键规则：\n\n| 规则 | 为什么 |\n|------|--------|\n| `pageWidth ≤ 800` | 防止 diagrams.net 自动缩放导致文字极小 |\n| Swimlane 容器 | 提供阶段分组 + 内置标题栏 |\n| 三级文字：16 → 13 → 12px | 清晰的视觉层次 |\n| 全部 `align=center` | 整洁、专业的视觉效果 |\n| 阶段间箭头：3px 蓝色粗线 | 区分主流程和内部连接 |\n| 五色调色板 | 统一的阶段辨识度 |\n| 仅正交箭头 | 杜绝斜线和交叉 |\n| `` 外层包裹 | 兼容桌面版和网页版 |\n\n## 输出方式\n\nSkill 会指导 Agent：\n1. 生成完整的 `.drawio` XML 文件并保存到本地\n2. 告诉用户打开方式：\n - **网页版**：打开 https://app.diagrams.net → 选择「Open Existing Diagram」\n - **拖拽**：将文件拖入已打开的 diagrams.net 页面\n - **桌面版**：安装了 diagrams.net 桌面版或 VS Code draw.io 插件，直接双击打开\n\n## 使用示例\n\n> \"画一个产品需求上线流程图：需求收集 → 设计 → 开发 → 测试 → 灰度 → 全量上线\"\n\nAgent 会按照所有设计规范生成一个结构清晰的 `.drawio` 文件。\n\n## 贡献\n\n欢迎提 PR！如果你发现布局边界情况或想增加更多模式（如并行泳道、时间线图），欢迎贡献。\n\n## 开源协议\n\nMIT"},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn7b5cmpw0bw3s496z8nkhf7js85amh3\",\n \"slug\": \"drawio-flowchart\",\n \"version\": \"1.0.0\",\n \"publishedAt\": 1776863103729\n}"},{"path":"references/template.md","content":"# XML Template\n\nComplete skeleton for a medium-complexity (4-5 stage) flowchart.\nCopy and adapt — replace `TODO` placeholders with real content.\n\n```xml\n\n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n\n