Drawio Skill
Have your agent produce or edit draw.io-style diagrams for architecture, flows, and specs without switching to a separate drawing tool.
Overview
drawio-skill is an agent skill most often used in Build (also Validate, Ship) that helps solo builders create and refine draw.io-style diagrams for architecture and flows.
Install
npx skills add https://github.com/agents365-ai/365-skills --skill drawio-skillWhat is this skill?
- Agent-oriented draw.io / diagrams.net workflow for solo builders
- Supports system architecture and process flow communication
- Fits spec and README illustration alongside code
- Reusable visual assets for validate and ship handoffs
Adoption & trust: 1.3k installs on skills.sh; 8 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a shareable architecture or flow diagram but only have text in chat or a rough sketch.
Who is it for?
Indie builders documenting service boundaries, agent workflows, or integration maps during active development.
Skip if: Teams that already maintain a single Figma source of truth with strict design-system enforcement and no agent edits.
When should I use this skill?
When you need draw.io-compatible diagrams for architecture, flows, or integration maps during build or documentation work.
What do I get? / Deliverables
You get structured diagram output you can drop into docs, PRs, or onboarding without redrawing from scratch.
- Diagram file or embeddable draw.io XML
- Labeled nodes matching your spec
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Diagrams most often ship with technical documentation during the build phase, even when you sketch them earlier. Docs is the canonical shelf for architecture and flow artifacts that accompany implementation.
Where it fits
Map third-party APIs and data stores before committing to a stack.
Publish an architecture diagram next to setup instructions in the repo.
Attach an updated deployment diagram to release notes for ops handoff.
How it compares
Use for agent-driven diagram drafts instead of only pasting ASCII art into markdown.
Common Questions / FAQ
Who is drawio-skill for?
Solo and indie builders using AI coding agents who need quick architecture, sequence, or flow diagrams aligned with what they are shipping.
When should I use drawio-skill?
During validate when scoping integrations, in build when documenting architecture in docs, and at ship when attaching visuals to runbooks or PR descriptions.
Is drawio-skill safe to install?
Review the Security Audits panel on this Prism page and inspect the skill package in your repo before granting filesystem or network permissions.
SKILL.md
READMESKILL.md - Drawio Skill
{ "package": "@lobehub/icons-static-svg", "version": "1.91.0", "cdn": "https://unpkg.com/@lobehub/icons-static-svg@1.91.0/icons/", "icons": [ "ace", "ace-text", "adobe", "adobe-color", "adobe-text", "adobefirefly", "adobefirefly-color", "adobefirefly-text", "agentvoice", "agentvoice-color", "agentvoice-text", "agui", "agui-text", "ai2", "ai2-color", "ai2-text", "ai21", "ai21-brand", "ai21-brand-color", "ai21-text", "ai302", "ai302-color", "ai302-text", "ai360", "ai360-color", "ai360-text", "aihubmix", "aihubmix-color", "aihubmix-text", "aimass", "aimass-color", "aimass-text", "aionlabs", "aionlabs-color", "aionlabs-text", "airjelly", "airjelly-color", "airjelly-text", "aistudio", "aistudio-text", "akashchat", "akashchat-color", "akashchat-text", "alephalpha", "alephalpha-text", "alibaba", "alibaba-brand", "alibaba-brand-color", "alibaba-color", "alibaba-text", "alibaba-text-cn", "alibabacloud", "alibabacloud-color", "alibabacloud-text", "alibabacloud-text-cn", "amp", "amp-color", "amp-text", "antgroup", "antgroup-brand", "antgroup-brand-color", "antgroup-color", "antgroup-text", "antgroup-text-cn", "anthropic", "anthropic-text", "antigravity", "antigravity-color", "antigravity-text", "anyscale", "anyscale-color", "anyscale-text", "apertis", "apertis-color", "apertis-text", "apple", "apple-text", "arcee", "arcee-color", "arcee-text", "askverdict", "askverdict-color", "askverdict-text", "assemblyai", "assemblyai-color", "assemblyai-text", "atlascloud", "atlascloud-text", "automatic", "automatic-color", "automatic-text", "aws", "aws-brand", "aws-brand-color", "aws-color", "aws-text", "aya", "aya-color", "aya-text", "azure", "azure-color", "azure-text", "azureai", "azureai-color", "azureai-text", "baai", "baai-text", "baichuan", "baichuan-color", "baichuan-text", "baidu", "baidu-brand", "baidu-brand-color", "baidu-color", "baidu-text", "baidu-text-cn", "baiducloud", "baiducloud-color", "baiducloud-text", "bailian", "bailian-color", "bailian-text", "baseten", "baseten-text", "bedrock", "bedrock-color", "bedrock-text", "bfl", "bfl-text", "bilibili", "bilibili-color", "bilibili-text", "bilibiliindex", "bilibiliindex-text", "bing", "bing-color", "bing-text", "briaai", "briaai-color", "briaai-text", "burncloud", "burncloud-color", "burncloud-text", "bytedance", "bytedance-brand", "bytedance-brand-color", "bytedance-color", "bytedance-text", "bytedance-text-cn", "capcut", "capcut-text", "centml", "centml-brand", "centml-brand-color", "centml-color", "centml-text", "cerebras", "cerebras-brand", "cerebras-brand-color", "cerebras-color", "cerebras-text", "chatglm", "chatglm-color", "chatglm-text", "cherrystudio", "cherrystudio-color", "cherrystudio-text", "civitai", "civitai-color", "civitai-text", "civitai-text-color", "claude", "claude-color", "claude-text", "claudecode", "claudecode-color", "claudecode-text", "cline", "cline-text", "clipdrop", "clipdrop-text", "cloudflare", "cloudflare-color", "cloudflare-text", "codebuddy", "codebuddy-color", "codebuddy-text", "codeflicker", "codeflicker-color", "codeflicker-text", "codegeex", "codegeex-color", "codegeex-text", "codex", "codex-color", "codex-text", "cogvideo", "cogvideo-color", "cogvideo-text", "cogview", "cogview-color", "cogview-text", "cohere", "cohere-color", "cohere-text", "colab", "colab-color", "colab-text", "cometapi", "cometapi-color", "cometapi-text", "comfyui", "comfyui-color", "comfyui-text", "commanda", "commanda-color", "commanda-text", "copilot", "copilot-color", "copilot-text", "copilotkit", "copilotkit-color", "copilotkit-text", "coqui", "coqui-color", "coqui-text", "coze", "coze-text", "crewai", "crewai-brand", "crewai-brand-color", "crewai-color", "crewai-text", "crusoe", "crusoe-color", "crusoe-text", "cursor", "cursor-text", "cybercut", "cybercut-text", "dalle", "dalle-color", "dalle-text", "dbrx", "dbrx-brand", "dbrx-brand-color", "dbrx-color", "dbrx-text", "deepai", "deepai-text", "deepcogito", "deepcogito-color", "deepcogito-text", "deepinfra", "deepinfra-color"