What makes drawio-flowchart notable?

1K downloads. Trust evidence available

How should drawio-flowchart be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

drawio-flowchart

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

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.0k

Updated

Oct 11, 2026

Version

1.0.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 1K downloadsadoption · observed Oct 11, 2026
Latest release: 1.0.0release · observed Apr 22, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s17bbfawp1s412d1vtjr1yymr585ba4p:drawio-flowchart

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: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-zhiningo-drawio-flowchart/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

18,945 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: drawio-flowchart
description: 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.
---

# draw.io Flowchart Generator

Generate production-ready `.drawio` XML files that render cleanly in app.diagrams.net.

## Quick Start

1. Understand the user's process/workflow
2. Plan the hierarchy: stages → sub-stages → nodes
3. Generate the XML following the mandatory rules below
4. Save the `.drawio` file and tell the user how to open it (see [Output Delivery](#output-delivery))

## Mandatory Rules

These are non-negotiable. Every flowchart MUST follow all of them.

### Canvas Sizing (Critical)

**diagrams.net auto-scales to fit the canvas.** A canvas too large = tiny text on screen.

| Content complexity | pageWidth | pageHeight |
|---|---|---|
| Simple (≤3 stages, few nodes) | 600 | 1200 |
| Medium (4-5 stages) | 800 | 2800 |
| Complex (6+ stages, nested) | 800 | 3800 |

- **Never exceed pageWidth=800.** Wider canvases get scaled down, making text unreadable.
- Set `dx` and `dy` to match or slightly exceed page dimensions.

### Container Structure

Use `swimlane` containers for every stage/group — never bare `mxgraph.basic.rect`:

```xml
<mxCell id="g1" parent="1" connectable="0"
  style="swimlane;startSize=32;fillColor=#EBF5FF;strokeColor=#2563EB;
         strokeWidth=2;fontSize=16;fontStyle=1;fontColor=#1e40af;
         rounded=0;collapsible=0;"
  value="① Stage Name" vertex="1">
  <mxGeometry x="20" y="60" width="720" height="200" as="geometry" />
</mxCell>
```

Key properties:
- `startSize=32` — header height for title
- `rounded=0` — sharp corners (never rounded containers)
- `collapsible=0` — prevent collapse UI
- `connectable="0"` — on the cell tag, not in style

### Text Hierarchy

Three tiers of text size — no exceptions:

| Level | fontSize | fontStyle | Example |
|---|---|---|---|
| Stage title (swimlane) | 14-16 | 1 (bold) | ① Skill 上传 |
| Node title (inside box) | 13 with `<b>` tag | bold via HTML | **格式验证 ✅** |
| Node body text | 12 | normal | SKILL.md & YAML 合法 |

Use inline HTML for mixed sizes within a single cell:
```xml
value="&lt;b style=&quot;font-size:13px&quot;&gt;Title&lt;/b&gt;&lt;br&gt;&lt;br&gt;Body text line 1&lt;br&gt;Body text line 2"
```

### Alignment

- **All text: `align=center`** — no exceptions for node content
- **Stage titles** use swimlane's built-in left-aligned bold header (this is fine)
- **Nodes within a container**: distribute evenly across the container width
  - 2 nodes: left half + right half
  - 3 nodes: thirds

### Arrows

**Arrows must be clean and orthogonal. No diagonal lines, no crossing, no spaghetti.**

#### Between stages (main flow)
```xml
<mxCell id="ea_1to2" parent="1" source="g1" target="g2" ed

README.md

# drawio-flowchart

一个 [AgentSkill](https://agentskills.io)，教 AI Agent 生成**高质量的 draw.io 流程图**——布局整齐、层次分明、风格统一。

> 🧩 兼容 [OpenClaw](https://github.com/openclaw/openclaw)、[Claude](https://claude.ai) 及所有 AgentSkills 兼容平台。

## 效果对比

没有这个 Skill 时，AI 生成的流程图通常：
- ❌ 节点散落，没有分组容器
- ❌ 文字左对齐，字号大小不分层
- ❌ 箭头细灰，主次流程不区分
- ❌ 画布过宽导致自动缩放，文字看不清
- ❌ 回退箭头斜穿画面

有了这个 Skill：
- ✅ Swimlane 容器按阶段分组
- ✅ 文字居中，三级字号层次（16/13/12px）
- ✅ 阶段配色 + 粗蓝主流程箭头
- ✅ 画布 ≤ 800px，不缩放，字体清晰可读
- ✅ 正交箭头走线，回退箭头走左侧边距

| Before（无 Skill） | After（有 Skill） |
|--------|-------|
| ![before](assets/before.png) | ![after](assets/after.png) |

## 安装

### OpenClaw（推荐）

```bash
# 通过 ClawHub 安装
clawhub install drawio-flowchart

# 或直接 clone 到 workspace
git clone https://github.com/YOUR_USERNAME/drawio-flowchart.git ~/.openclaw/workspace/skills/drawio-flowchart
```

### 其他 AgentSkills 兼容工具

将整个 skill 文件夹复制到你的 Agent skill 目录即可。Agent 会读取 `SKILL.md` 获取所有指令。

## 目录结构

```
drawio-flowchart/
├── SKILL.md                  ← 核心文件（全部设计规范）
├── references/
│   └── template.md           ← XML 骨架模板 + 常用模式
├── assets/
│   ├── before.png            ← 对比图：无 Skill
│   ├── after.png             ← 对比图：有 Skill
│   ├── demo-flow-before.drawio  ← 对比用 drawio 源文件
│   └── demo-flow-after.drawio   ← 对比用 drawio 源文件
├── README.md                 ← 本文件
├── LICENSE                   ← MIT 开源协议
└── .gitignore
```

## 核心设计规则

完整规范在 `SKILL.md` 中，以下是关键规则：

| 规则 | 为什么 |
|------|--------|
| `pageWidth ≤ 800` | 防止 diagrams.net 自动缩放导致文字极小 |
| Swimlane 容器 | 提供阶段分组 + 内置标题栏 |
| 三级文字：16 → 13 → 12px | 清晰的视觉层次 |
| 全部 `align=center` | 整洁、专业的视觉效果 |
| 阶段间箭头：3px 蓝色粗线 | 区分主流程和内部连接 |
| 五色调色板 | 统一的阶段辨识度 |
| 仅正交箭头 | 杜绝斜线和交叉 |
| `<mxfile>` 外层包裹 | 兼容桌面版和网页版 |

## 输出方式

Skill 会指导 Agent：
1. 生成完整的 `.drawio` XML 文件并保存到本地
2. 告诉用户打开方式：
   - **网页版**：打开 https://app.diagrams.net → 选择「Open Existing Diagram」
   - **拖拽**：将文件拖入已打开的 diagrams.net 页面
   - **桌面版**：安装了 diagrams.net 桌面版或 VS Code draw.io 插件，直接双击打开

## 使用示例

> "画一个产品需求上线流程图：需求收集 → 设计 → 开发 → 测试 → 灰度 → 全量上线"

Agent 会按照所有设计规范生成一个结构清晰的 `.drawio` 文件。

## 贡献

欢迎提 PR！如果你发现布局边界情况或想增加更多模式（如并行泳道、时间线图），欢迎贡献。

## 开源协议

MIT

_meta.json

{
  "ownerId": "kn7b5cmpw0bw3s496z8nkhf7js85amh3",
  "slug": "drawio-flowchart",
  "version": "1.0.0",
  "publishedAt": 1776863103729
}

references/template.md

# XML Template

Complete skeleton for a medium-complexity (4-5 stage) flowchart.
Copy and adapt — replace `TODO` placeholders with real content.

```xml
<mxfile host="app.diagrams.net" agent="OpenClaw">
  <diagram id="TODO-id" name="TODO-diagram-name">
    <mxGraphModel dx="900" dy="600" grid="1" gridSize="10" guides="1"
      tooltips="1" connect="1" arrows="1" fold="1" page="1"
      pageScale="1" pageWidth="800" pageHeight="2800" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- ===== Title ===== -->
        <mxCell id="title" parent="1"
          style="text;html=1;align=center;verticalAlign=middle;
                 fontSize=24;fontStyle=1;fontColor=#111111;"
          value="TODO: 流程图标题" vertex="1">
          <mxGeometry x="100" y="10" width="560" height="40"
            as="geometry" />
        </mxCell>

        <!-- ===== Stage 1 Container ===== -->
        <mxCell id="g1" parent="1" connectable="0"
          style="swimlane;startSize=32;fillColor=#EBF5FF;
                 strokeColor=#2563EB;strokeWidth=2;fontSize=16;
                 fontStyle=1;fontColor=#1e40af;rounded=0;
                 collapsible=0;"
          value="① TODO: Stage Name" vertex="1">
          <mxGeometry x="20" y="60" width="720" height="180"
            as="geometry" />
        </mxCell>

        <!-- Nodes inside Stage 1 (parent=g1) -->
        <mxCell id="n1" parent="g1"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;
                 strokeColor=#6c8ebf;fontSize=12;align=center;"
          value="&lt;b style=&quot;font-size:13px&quot;&gt;TODO: Node Title&lt;/b&gt;&lt;br&gt;&lt;br&gt;TODO: description"
          vertex="1">
          <mxGeometry x="20" y="40" width="210" height="90"
            as="geometry" />
        </mxCell>

        <mxCell id="n2" parent="g1"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;
                 strokeColor=#6c8ebf;fontSize=12;align=center;"
          value="&lt;b style=&quot;font-size:13px&quot;&gt;TODO: Node Title&lt;/b&gt;&lt;br&gt;&lt;br&gt;TODO: description"
          vertex="1">
          <mxGeometry x="255" y="40" width="210" height="90"
            as="geometry" />
        </mxCell>

        <mxCell id="n3" parent="g1"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;
                 strokeColor=#6c8ebf;fontSize=12;align=center;"
          value="&lt;b style=&quot;font-size:13px&quot;&gt;TODO: Node Title&lt;/b&gt;&lt;br&gt;&lt;br&gt;TODO: description"
          vertex="1">
          <mxGeometry x="490" y="40" width="210" height="90"
            as="geometry" />
        </mxCell>

        <!-- Internal arrows (parent=g1) -->
        <mxCell id="e_n1n2" parent="g1" source="n1" target="n2"
          edge="1"
          style="edgeStyle=orthogonalEdgeStyle;strokeWidth=2;
                 strokeColor=#6c8ebf;">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>

        <mxCell id="e_n2n

skill-card.md

## Description:

Generate draw.io (.drawio) flowchart XML files for flowcharts, process diagrams, workflow diagrams, and visual diagrams in diagrams.net format.

This skill is ready for commercial/non-commercial use.

## Publisher:

[zhiningo](https://clawhub.ai/user/zhiningo)

### License/Terms of Use:

MIT-0

## Use Case:

Developers 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.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: The skill writes local .drawio files, so an unintended filename or path could place output in the wrong location.

Mitigation: Review the requested output path before saving and keep generated files in the workspace or an explicit user-selected path.

Risk: Some artifact examples use Chinese labels and instructions, which may not match every user's expected language.

Mitigation: Use the user's requested language for diagram labels and response text, or ask for a preferred language when it is unclear.

## Reference(s):

- [XML Template](references/template.md)
- [diagrams.net](https://app.diagrams.net)
- [ClawHub skill page](https://clawhub.ai/zhiningo/skills/drawio-flowchart)
- [AgentSkills](https://agentskills.io)
- [OpenClaw](https://github.com/openclaw/openclaw)

## Skill Output:

**Output Type(s):** [Markdown, Code, Files, Guidance]

**Output Format:** [Markdown guidance with draw.io XML saved as a .drawio file]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [Produces local .drawio XML files and opening instructions for diagrams.net-compatible tools.]

## Skill Version(s):

1.0.0 (source: server release evidence)

## Ethical Considerations:

Users 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.

Github ReposUpdated 2d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW

Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular