A powerful integration for creating, editing, and exporting professional draw.io diagrams directly through a configured MCP server.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install drawio-skill
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-skill 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 Skill?
The Draw.io Skill is a specialized extension designed to bridge the gap between AI coding agents and visual documentation. It allows developers to programmatically generate and manipulate diagrams.net (formerly draw.io) files, including complex system architectures, flowcharts, and machine learning model topologies. By wrapping a configured drawio MCP server, it provides a structured interface for high-fidelity visual communication.
This skill is particularly adept at handling technical nuances, such as animated connectors for data flow visualization and multi-language support for Simplified Chinese labels. It ensures that diagrams remain editable by exporting standard .drawio files while providing high-quality .svg artifacts for sharing and embedding in documentation.
Draw.io Skill Use Cases
- Generating cloud architecture diagrams and deployment topologies.
- Creating animated flowcharts to visualize real-time data or control flows.
- Documenting ML model architectures like Transformers, CNNs, and LSTMs with consistent color semantics.
- Rapidly updating existing business process diagrams without losing manual layout adjustments.
- Producing technical documentation with localized labels in Simplified Chinese.
How Draw.io Skill Works
- Initialize the environment by calling
start_sessionto establish a connection with the live draw.io instance. - Create or fetch diagrams by providing full
mxGraphModelXML or usingget_diagramto inspect current cell IDs. - Perform precise edits using
edit_diagrambased on the inspected structure to prevent overlapping or broken logic. - Apply advanced styling such as animated connectors using specific CSS-like edge attributes.
- Export the final product to the local workspace as an editable .drawio file or a shareable .svg artifact.
Draw.io Skill Setup
To utilize this skill, ensure the drawio MCP server is configured in your environment. Use Openclaw Skills to interface with the server:
# Verify MCP server connectivity
openclaw mcp status
# If tools are missing, restart your session or IDE
# Ensure drawio is listed in your mcp_config.json
Draw.io Skill Data Schema & Taxonomy
The skill manages diagram data through the standard draw.io XML schema. Key organization includes:
| Feature | Specification |
|---|---|
| Source Format | .drawio (XML-based mxGraphModel) |
| Export Format | .svg (Preserves animations and vector quality) |
| Naming | Kebab-case basenames (e.g., payment-architecture.drawio) |
| Localization | -zh suffix for Simplified Chinese diagrams |
| Styling | Edge styling via flowAnimation, dashPattern, and endArrow attributes |
Draw.io Skill Advanced Features
- Animated Connectors: Supports flowing dashed lines for dynamic process visualization via SVG exports.
- Intelligent ML Block Recognition: Specialized logic for rendering Transformer blocks, attention paths, and residual connections.
- Session Persistence: Capability to read existing sessions to preserve user-made manual changes during automated edits.
- Smart Layout Routing: Automatic application of explicit edge routing and waypoints to prevent overlapping lines in complex topologies.
SKILL.md
Loading
Related Openclaw Skills
FDA Guideline Search
A specialized regulatory research tool for searching and caching FDA industry guidelines by therapeutic area and document type.
ASIN Video Marketing Pipeline
A fully automated end-to-end pipeline that transforms Amazon ASINs into professional marketing videos using n8n, Topview AI, and Apify.
Feishu Voice Chat
A comprehensive voice interaction skill that adds high-accuracy speech recognition and natural speech synthesis to AI agents within the Feishu ecosystem.
laolei-llm-midi
A professional AI music assistant that transforms natural language descriptions into multi-track, standard MIDI files for production and performance.
Log Analyzer
A specialized diagnostic tool designed to parse raw log files and synthesize them into actionable markdown triage reports.
SEO Content Brief Generator
An AI-powered agent that transforms a single keyword into a comprehensive, writer-ready SEO content brief with competitive intelligence.
Featured*
