Automatically generate and export professional-grade architectural, database, and process diagrams directly from your AI agent.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install drawio
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 drawio 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 Diagram Generation?
The Draw.io skill empowers AI coding agents to create visually stunning and technically accurate diagrams including ERDs, UML class diagrams, sequence diagrams, and system architectures. By leveraging the power of the draw.io CLI, this skill automates the tedious process of XML construction and manual layout, ensuring that every visualization adheres to professional standards and strict structural rules. Using Openclaw Skills like this one allows developers to move from conceptual architecture to finalized documentation in seconds.
This skill is designed for precision, featuring automatic type detection and smart layout logic. It handles the complexities of coordinate calculation, element spacing, and relationship mapping, resulting in clean, readable PNG, SVG, or PDF exports. Whether you are documenting a legacy database or planning a new microservices architecture, this skill provides a robust bridge between natural language descriptions and professional visual assets.
Draw.io Diagram Generation Use Cases
- Generating Entity-Relationship Diagrams (ERD) for database modeling and schema design.
- Creating UML class diagrams to visualize object-oriented structures and inheritance.
- Visualizing complex logic and process flows through automated flowcharts.
- Mapping out system interactions and actor calls using sequence diagrams.
- Drafting high-level infrastructure and software architecture overviews.
How Draw.io Diagram Generation Works
- The agent detects the requested diagram type (ERD, Class, Sequence, Flow, or Architecture) based on user input keywords.
- The skill plans all necessary entities, attributes, and relationships before generating any code.
- A dedicated diagrams directory is created to manage assets.
- The agent generates a strictly validated .drawio XML file with unique IDs and precise coordinate calculations.
- The draw.io CLI is invoked to export the XML into a high-resolution PNG image.
- The generated image is presented to the user immediately for review.
- The user is prompted to choose additional export formats such as SVG, PDF, or the raw editable .drawio file.
Draw.io Diagram Generation Setup
Ensure you have the draw.io desktop application installed on your system. For Linux or headless environments, xvfb is required for rendering.
# Check if the binary is accessible
drawio --version
# Create the diagrams directory
mkdir -p ./diagrams
Draw.io Diagram Generation Data Schema & Taxonomy
The skill manages data through a structured file system within the local project. It organizes both the source XML and the generated visual assets.
| File Extension | Description | Usage |
|---|---|---|
| .drawio | Source XML | Editable file containing the diagram structure and metadata. |
| .png | Raster Image | High-resolution (scale 2 or 3) preview of the diagram. |
| .svg | Vector Image | Scalable vector graphics for high-quality documentation. |
| Document | Portable document format for sharing and printing. |
Draw.io Diagram Generation Advanced Features
- Automated height calculation formulas for dynamic table and class entity scaling.
- Support for headless rendering using xvfb-run in CI/CD or Linux environments.
- Configurable high-resolution exports (up to 3x scale) and transparent background options.
- Strict XML validation ensures compatibility with the official Draw.io desktop and web applications.
- Intelligent relationship mapping that connects arrows to specific row cells rather than generic containers.
SKILL.md
Loading
Related Openclaw Skills
Daily Tang Poem
A comprehensive AI agent skill for daily Tang poetry learning, featuring interactive recitation verification and Ebbinghaus-based review cycles.
Book of the Day
A daily book oracle skill that delivers uplifting book recommendations and poetic fortunes to inspire your day.
SOTA Tracker
An automated database tracking the latest state-of-the-art AI models across LLM, image, video, and audio categories with daily updates.
privatedeepsearch-melt
A privacy-obsessed deep research assistant that performs multi-round web searches and synthesizes cited reports using local SearXNG instances.
zh-knowledge-manager
A powerful AI-enhanced system for converting unstructured agent logs into structured, searchable Chinese knowledge bases.
TikTok Scraping with yt-dlp
A comprehensive command-line framework for automated TikTok video downloading, profile crawling, and metadata extraction.
Featured*
