An automated agent skill designed to generate, export, and visually inspect draw.io diagrams for technical documentation.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install testskill
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install testskill using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Draw.io Diagrammer Skill?
The Draw.io Diagrammer Skill enables AI agents to programmatically create and refine structured diagrams, including process maps, entity-relationship diagrams, and system architectures. By utilizing the draw.io command-line interface, the skill streamlines the conversion of structured XML layout data into high-resolution visual formats, reducing manual drafting efforts.
As part of the wider ecosystem of Openclaw Skills, this skill integrates a strict visual quality assurance step. Rather than relying solely on code generation, the system renders and analyzes the output image to correct alignment errors, text overflows, or overlapping connectors, ensuring that the final output meets professional documentation standards.
Draw.io Diagrammer Skill Use Cases
- Creating flowcharts, process maps, and automated workflow diagrams from text descriptions.
- Designing entity relationship diagrams (ERD) and relational database schemas.
- Structuring system architectures, component diagrams, and network layouts.
- Generating sequence, class, and standard UML diagrams for software design sessions.
- Visualizing complex algorithms or organizational structures programmatically.
How Draw.io Diagrammer Skill Works
- Diagram Type Detection: The skill analyzes user input to determine the most effective diagram category (such as ERD, sequence diagram, or flowchart) before compiling the underlying XML.
- Layout and Spacing Application: Generates the draw.io XML with pre-configured spacing constraints, avoiding overlapping nodes and misaligned arrows.
- Command-Line Export: Invokes the local draw.io executable to render the XML file into a high-resolution PNG image at a 2x scale.
- Visual Review Pass: Inspects the exported image for aesthetic bugs, such as truncated text, colliding arrows, or crowded nodes.
- Iterative Refinement: Modifies the source XML and re-runs the export process if any visual anomalies are detected, repeating until the rendering passes quality checks.
Draw.io Diagrammer Skill Setup
To use this skill, ensure you have the desktop version of draw.io installed on your system. For macOS environments, the CLI tool is typically located inside the application bundle.
CLI Configuration
Verify that the draw.io executable is accessible. You can trigger exports directly using the following command structure:
/Applications/draw.io.app/Contents/MacOS/draw.io --export --format png --output out.png --scale 2 --border 30 file.drawio
Integration
Configure your agent environment to point to the local draw.io installation path and grant the necessary file system permissions to write and export files within your workspace.
Draw.io Diagrammer Skill Data Schema & Taxonomy
The draw.io Diagrammer Skill manages two primary file artifacts during execution:
| File Extension | Content Type | Purpose |
|---|---|---|
.drawio |
XML Schema | Holds the structural layout, node metadata, connections, and stylistic elements of the diagram. |
.png |
Raster Image | The exported, high-resolution rendering (2x scale, 30px border) used for final delivery and visual verification. |
Metadata Variables
- Scale: Set to
2by default to prevent pixelation in documentation systems. - Border: Configured to
30pixels to ensure appropriate margins around the outermost nodes.
Draw.io Diagrammer Skill Advanced Features
- Iterative QA Loop: Programmatically inspects exported diagrams, detecting zero-gap issues or collision errors before declaring the task complete.
- Universal Node Spacing: Automatically calculates uniform gaps between shapes to maintain aesthetic consistency across various diagram types.
- Multi-Format Pipeline: Support for generating structural XML that remains fully editable in both the draw.io desktop application and web app.
- Modular Workflow Integration: Easily pairs with other Openclaw Skills to document newly scaffolded code architectures automatically.
SKILL.md
Loading
Related Openclaw Skills
Pincushion
Pincushion bridges the gap between stakeholder UI feedback and autonomous AI agents by translating visual browser pins into precise, context-rich agent work packets.
Draw.io Diagrammer Skill
An automation skill designed to generate draw.io architecture diagrams, flowcharts, and technical schemas with an integrated visual QA pass.
LegionSpace Version Checker
A cross-platform version checker that collects the latest LegionSpace app version from seven app stores and saves a consolidated report.
blooming-elf (绽放精灵)
An AI-powered gardening companion that automates watering reminders, maintains structured plant archives, and provides real-time health diagnostics.
Software Engineering Discipline
A rigorous technical framework that calibrates architectural trade-offs and enforces strict code verification boundaries for AI coding agents.
draw.io Diagrammer Skill
An advanced AI-agent skill for programmatic generation, styling, and visual validation of draw.io diagrams.
Featured*
