Agent skill
drawio
Generate draw.io diagrams programmatically using Python. Creates flowcharts, architecture diagrams, tree structures, network diagrams, and more. Use when the user requests a .drawio file, diagram, flowchart, or visual documentation.
Install this agent skill to your Project
npx add-skill https://github.com/fpl9000/ai-skills/tree/main/drawio
Metadata
Additional technical details for this skill
- author
- example
- version
- 1.1
- dependency management
- uv (PEP 723 inline script metadata)
SKILL.md
Draw.io Diagram Generation
Overview
This skill generates .drawio files using the drawpyo Python library. Draw.io diagrams are XML-based and can be opened in:
- draw.io desktop app
- diagrams.net (web)
- VS Code draw.io extension
Quick Start
All scripts include inline dependency metadata (PEP 723). Use uv run to execute them — dependencies are handled automatically in an isolated environment:
# No installation needed — uv handles dependencies automatically
uv run scripts/create_flowchart.py steps.json /mnt/user-data/outputs/flow.drawio
For custom code, you can also use uv run with inline dependencies:
#!/usr/bin/env python3
# /// script
# requires-python = ">=3.10"
# dependencies = ["drawpyo>=0.2.0"]
# ///
import drawpyo
# Create a file and page
file = drawpyo.File()
file.file_path = "/home/claude"
file.file_name = "diagram.drawio"
page = drawpyo.Page(file=file)
# Add a shape
box = drawpyo.diagram.Object(page=page, value="Hello World")
box.position = (100, 100)
# Save
file.write()
Then run with: uv run my_script.py
Decision Tree
What type of diagram?
├── Tree/Hierarchy (org chart, decision tree, file structure)
│ └── Use TreeDiagram class (auto-layout) — see references/REFERENCE.md
│
├── Flowchart (sequential steps with decisions)
│ └── Use helper script: scripts/create_flowchart.py
│ └── Or write custom code with Object + Edge classes
│
├── Architecture/Network (boxes with connections)
│ └── Write custom code using Object + Edge classes
│ └── See references/REFERENCE.md
│
├── From structured data (CSV, JSON, dict)
│ └── Use helper script: scripts/from_data.py
│
└── Complex/Custom
└── Write custom drawpyo code — see references/REFERENCE.md
Key Concepts
Objects (Shapes)
# Basic rectangle
obj = drawpyo.diagram.Object(page=page, value="Label")
obj.position = (x, y) # Coordinates in pixels
obj.width = 120 # Default: 120
obj.height = 60 # Default: 60
# From draw.io shape library
obj = drawpyo.diagram.object_from_library(
page=page,
library="general", # or "flowchart", "basic", etc.
obj_name="process", # shape name from library
value="Process Step"
)
Edges (Connections)
edge = drawpyo.diagram.Edge(
page=page,
source=obj1,
target=obj2,
label="connects to"
)
Styling
# Apply a style string (same format as draw.io)
obj.apply_style_string(
"rounded=1;whiteSpace=wrap;html=1;"
"fillColor=#dae8fc;strokeColor=#6c8ebf;"
)
Helper Scripts
Run with uv run — dependencies are handled automatically:
| Script | Purpose | Usage |
|---|---|---|
scripts/create_flowchart.py |
Create flowcharts from step definitions | uv run scripts/create_flowchart.py input.json output.drawio |
scripts/create_tree.py |
Create tree diagrams with auto-layout | uv run scripts/create_tree.py input.json output.drawio |
scripts/from_data.py |
Create diagrams from JSON/dict data | uv run scripts/from_data.py input.json output.drawio |
Common Shape Libraries
Use with object_from_library(library=..., obj_name=...):
- general:
rectangle,ellipse,process,diamond,parallelogram,hexagon,triangle,cylinder,cloud,document,note,actor - flowchart:
terminator,process,decision,data,document,predefined_process,stored_data,internal_storage,manual_input,manual_operation - basic:
rectangle,ellipse,rhombus,triangle,pentagon,hexagon,octagon
Output
Always save generated .drawio files to /mnt/user-data/outputs/ and use the present_files tool to share with the user.
Next Steps
- references/REFERENCE.md: Complete API documentation, styling options, all shape libraries
- references/examples.md: Example code for common diagram types
- scripts/: Ready-to-use helper scripts
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
bluesky
Read from and post to Bluesky social network using the AT Protocol. Use this skill when the user wants to interact with Bluesky including posting text/images/links, replying to posts, reading their timeline, searching posts, viewing profiles, following/unfollowing users, checking notifications, or viewing reply threads. All scripts use PEP 723 inline metadata for dependencies and run via `uv run`. Requires BLUESKY_HANDLE and BLUESKY_PASSWORD environment variables.
ai-messaging
Communicate with the local stateful agent system via the GitHub relay. Use this skill when the user wants to interact with their local machine remotely — reading memory files, running shell commands, or delegating tasks to the local Claude Desktop agent. Triggers include phrases like: "on my local machine", "check my local files", "run this on my home computer", "ask my local Claude", "read my memory files", "what's in my core memory", "what's on my home machine", "run this locally". Requires the github skill for relay transport scripts.
github
Access GitHub repositories via the GitHub REST API. Use this skill when the user wants to interact with GitHub including reading files, creating/updating files, listing repos, managing branches, viewing commits, working with issues, or managing pull requests. All scripts use PEP 723 inline metadata for dependencies and run via `uv run`. Requires GITHUB_TOKEN environment variable (a Personal Access Token with appropriate scopes).
load-skill
Load, activate, and optionally install an AI skill from a .skill file. Use this skill when the user wants to load, activate, or use a skill file. The user can invoke this skill with slash command `/load-skill [ --install | -i ] SKILLFILE`, where SKILLFILE is the path to a .skill file.
transcript-saver
Save and export the current Claude Code session as a shareable HTML transcript. Use this skill when the user asks to save, export, archive, or publish their current Claude Code conversation or session. Triggers on phrases like "save this transcript", "export this session", "create a transcript", "archive this conversation", "publish to gist", or "share this session". Wraps Simon Willison's claude-code-transcripts tool for in-session use.
edit-article
Edit and improve articles by restructuring sections, improving clarity, and tightening prose. Use when user wants to edit, revise, or improve an article draft.
Didn't find tool you were looking for?