skilld
All skills
github avatar

/draw-io-diagram-generator

@3b2c4fb official
by githubgithub/awesome-copilot40k stars
5,040

Use when creating, editing, or generating draw.io diagram files (.drawio, .drawio.svg, .drawio.png). Covers mxGraph XML authoring, shape libraries, style strings, flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, layout strategy, the hediet.vscode-drawio VS Code extension, and the full agent workflow from request to a ready-to-open file.

Ask your Agent

Use this Skill: https://skilld.dev/gh/github/awesome-copilot/draw-io-diagram-generator

This session only. Nothing lands on disk.

scriptsREADME.md

≈833 tokens on demand. Your agent reads this file only when SKILL.md points to it.

draw-io Scripts

Utility scripts for working with .drawio diagram files in the cxp-bu-order-ms project.

Requirements

  • Python 3.8+
  • No external dependencies (uses standard library only: xml.etree.ElementTree, argparse, json, sys, pathlib)

Scripts

validate-drawio.py

Validates the XML structure of a .drawio file against required constraints.

Usage

python scripts/validate-drawio.py <path-to-diagram.drawio>

Examples

# Validate a single file
python scripts/validate-drawio.py docs/architecture.drawio

# Validate all drawio files in a directory
for f in docs/**/*.drawio; do python scripts/validate-drawio.py "$f"; done

Checks performed

Check Description
Root cells Verifies id="0" and id="1" cells are present in every diagram page
Unique IDs All mxCell id values are unique within a diagram
Edge connectivity Every edge has valid source and target attributes pointing to existing cells
Geometry Every vertex cell has an mxGeometry child element
Parent chain Every cell's parent attribute references an existing cell id
XML well-formedness File is valid XML

Exit codes

  • 0 — Validation passed
  • 1 — One or more validation errors found (errors printed to stdout)

add-shape.py

Adds a new shape (vertex cell) to an existing .drawio diagram file.

Usage

python scripts/add-shape.py <diagram.drawio> <label> <x> <y> [options]

Arguments

Argument Required Description
diagram Yes Path to the .drawio file
label Yes Text label for the new shape
x Yes X coordinate (pixels from top-left)
y Yes Y coordinate (pixels from top-left)

Options

Option Default Description
--width 120 Shape width in pixels
--height 60 Shape height in pixels
--style "rounded=1;whiteSpace=wrap;html=1;" draw.io style string
--diagram-index 0 Index of the diagram page (0-based)
--dry-run false Print the new cell XML without modifying the file

Examples

# Add a basic rounded box
python scripts/add-shape.py docs/flowchart.drawio "New Step" 400 300

# Add a custom styled shape
python scripts/add-shape.py docs/flowchart.drawio "Decision" 400 400 \
  --width 160 --height 80 \
  --style "rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;"

# Preview without writing
python scripts/add-shape.py docs/architecture.drawio "Service X" 600 200 --dry-run

Output

Prints the new cell id on success:

Added shape id="auto_abc123" to page 0 of docs/flowchart.drawio

Common Workflows

Validate before committing

# Validate all diagrams
find . -name "*.drawio" -not -path "*/node_modules/*" | \
  xargs -I{} python scripts/validate-drawio.py {}

Quickly add a placeholder node

python scripts/add-shape.py docs/architecture.drawio "TODO: Service" 800 400 \
  --style "rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;"

Check a template is valid

python scripts/validate-drawio.py .github/skills/draw-io-diagram-generator/templates/flowchart.drawio

Source: SKILL.md on GitHub

Third-party checks

No alerts16d4 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill provides templates and Python utility scripts for creating and validating draw.io diagrams. It uses standard library components for XML processing and file operations, with no detected malicious patterns or external risks.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • ZeroLeaks5mo

    1 finding · Score: 86/100

Provenance

Signed by skilld at 3b2c4fb. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub yesterday.

Activeupdated 6 months ago

Topics

  • draw-io
  • mxgraph
  • xml
  • flowchart
  • architecture
  • uml
  • sequence-diagram
  • er-diagram
  • vscode

README badge

README badge for github/awesome-copilot/draw-io-diagram-generator

What it does

Generates draw.io diagram files (.drawio) with correct mxGraph XML structure that open immediately in VS Code or the draw.io web app. Covers flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, and includes templates plus style and shape library reference.

Generated from the current SKILL.md.

Frequently asked

What file formats does this skill generate?
The skill generates `.drawio` files that open immediately in the hediet.vscode-drawio VS Code extension. Files can also be opened in the draw.io web app or desktop app.
What diagram types are supported?
Flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, BPMN workflows, and mind maps. Templates are provided for the first five types.
Do I need to install anything to use this skill?
The hediet.vscode-drawio VS Code extension is required if you want to view diagrams in VS Code. Python 3.8+ is optional but recommended for diagram validation.
Can the skill edit existing draw.io files?
Yes. The skill can modify existing `.drawio` files by understanding the mxGraph XML structure and updating or inserting cells while preserving the file's validity.

Generated from the current SKILL.md. These answers refresh after source changes.