Name: drawio-generator
Author: 要啥自行车

According to AlphaMoat, as of 2026-09, drawio-generator has 2,572 downloads and 2 stars — ranked #4,039 of 5,078 AI skills overall, and #392 of 512 in Design & Media.

Installs

173

Downloads

2.6K

Stars

Overall Rank

#4,039

Top 80% overall · Top 77% in Design & Media

Platform	Installs	Downloads	Stars	Comments
ClawHub ↗	53	1.9K	1	-
SkillHub ↗	173	2.6K	2	—

Platforms count differently and update at different times.

What this skill does

The documentation supports flowcharts, UML, ERDs, architecture, and network diagrams from Mermaid, XML, or CSV and creates a browser-openable link. Diagram text may enter command or browser workflows, so review untrusted inputs and generated links; do not execute embedded instructions. The documented shell examples can execute untrusted diagram text. Review and change the invocation to stdin, a temporary file, or a shell-free argument array before use. XML must be well formed and escape special characters.

Profile published 2026-10-27

What you can do with it

Convert Mermaid or CSV structure into a draft diagram
Organize system architecture or process relationships
Create an editable diagram link for review

When to use it

When converting structured descriptions into a diagram
Before sharing links or running generation, after checking content and destination

Example prompts

Generated from the skill’s documentation as examples; not results of actual runs.

Convert these entities and relationships into ERD diagram code and show it for review before running a generation command.

Monthly Trend

Downloads2.6K

Stars2

The counting method changed in 2026-09: skills with the same name are now counted separately by author, and the full catalog is covered. Dashed lines show months before the change; they are not compared with later months, and no growth is computed across the change.

Month	Downloads	MoM	Stars
2026-09	2.6K	—	2
2026-08	1.9K	+8.6%	2
2026-07	1.7K	+17.9%	2
2026-06	1.5K	+10.9%	2
2026-05	1.3K	—	2
2026-03	844	—	1

SKILL.md (original)

The author’s original file, shown as plain text without edits or review by AlphaMoat. Links are not clickable; check commands before running them. Fetched 2026-10-23.

3.5 KB · ClawHub v1.0.0

---
name: drawio-generator
description: Generate draw.io diagrams from Mermaid, XML, or CSV code. Use this skill when the user requests any visual diagram including flowcharts, UML diagrams, ERD, architecture diagrams, mind maps, timelines, org charts, network topology, wireframes, BPMN, or any other visual representation. The skill creates a markdown link that opens the diagram in draw.io.
---

# Draw.io Diagram Generator

Generate interactive draw.io diagrams that users can open and edit in their browser.

## Supported Diagram Types

Show all (105 lines)


Draw.io supports virtually any diagram type:
- **Standard**: Flowcharts, org charts, mind maps, timelines, Venn diagrams
- **Software**: UML (class, sequence, activity, use case), ERD, architecture diagrams
- **Cloud/Infrastructure**: AWS, Azure, GCP, Kubernetes, network topology
- **Engineering**: Electrical circuits, digital logic, P&ID, floor plans
- **Business**: BPMN, value streams, customer journeys, SWOT
- **UI/UX**: Wireframes, mockups, sitemaps
- **And more**: Infographics, data flows, decision trees, etc.

## Format Selection Guide

| Format | Best For |
|--------|----------|
| **Mermaid** | Flowcharts, sequences, ERD, Gantt, state diagrams, class diagrams |
| **CSV** | Hierarchical data (org charts), bulk import from spreadsheets |
| **XML** | Complex layouts, precise positioning, custom styling, icons, shapes |

## How to Use

### Step 1: Determine the best format for the diagram

- Use **Mermaid** for most standard diagrams (flowcharts, sequence diagrams, ERD)
- Use **CSV** for hierarchical data like org charts
- Use **XML** when you need precise control over positioning or custom shapes

### Step 2: Generate the diagram code

Write the diagram code in the chosen format (see examples below).

### Step 3: Execute the Python script

Run the script `scripts/generate_drawio_url.py` (relative to this SKILL.md file) to create the markdown link.

## Format Templates 


### Mermaid
```
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
```

### XML (draw.io native)
```xml
<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="Box" style="rounded=1;fillColor=#d5e8d4;" vertex="1" parent="1">
      <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>
```

### CSV (hierarchical data)
```
# label: %name%
# style: rounded=1;whiteSpace=wrap;html=1;
# connect: {"from":"manager","to":"name","invert":true}
# layout: auto
name,manager
CEO,
CTO,CEO
CFO,CEO
```


## CRITICAL: XML Well-Formedness

When generating draw.io XML, the output **must** be well-formed XML:
- **NEVER use double hyphens (`--`) inside XML comments.** Use single hyphens or rephrase (e.g., `<!-- Order 1 to OrderItem -->` not `<!-- Order 1 --- OrderItem -->`)
- Escape special characters in attribute values (`&amp;`, `&lt;`, `&gt;`, `&quot;`)

## Script Usage

The script `generate_drawio_url.py` is located in the `scripts/` subdirectory relative to this SKILL.md file. Execute it with command-line arguments:

```bash
python scripts/generate_drawio_url.py -t mermaid -c "graph TD\n    A --> B"
python scripts/generate_drawio_url.py --type xml --code "<mxGraphModel>...</mxGraphModel>"
python scripts/generate_drawio_url.py -t csv -c "name,manager\nCEO,\nCTO,CEO"
```

**Arguments:**
- `-t, --type`: Diagram type (required), choices: `mermaid`, `xml`, `csv`
- `-c, --code`: Diagram code content (required)

The script outputs a markdown link: `[点击查看图表](<URL>)`

Present the markdown link directly to the user.