drawio-architecture-skill

Overview

The drawio-architecture-skill provides a specialized interface for creating professional architecture diagrams, flowcharts, and system diagrams in Claude Code. It leverages the draw.io MCP server to generate diagrams in multiple formats including .drawio source files, PNG, SVG, and PDF. The skill includes predefined color schemes, various node shapes, and supports specialized diagram types like UML diagrams, network topology, and deployment architectures.

Try asking AI

After installing, here are 5 things you can ask your AI assistant:

• create_architecture_diagram

  Creates architecture diagrams including project architecture, system design, and data flow diagrams

  Try:画一个项目架构图，展示数据准备、模型训练、推理服务的流程Try:创建一个微服务架构图，包含API网关、用户服务、订单服务、支付服务和数据库
• create_uml_diagram

  Creates UML diagrams including class diagrams, sequence diagrams, and state diagrams

  Try:绘制一个UML类图，展示用户、订单、产品三个类及其关系Try:画一个时序图，展示用户登录的完整流程
• create_network_diagram

  Creates network topology diagrams showing system connections and infrastructure

  Try:绘制网络拓扑图，展示各个服务器和组件之间的连接关系Try:创建部署架构图，展示应用程序在云环境中的部署情况
• export_diagram

  Exports diagrams to various formats including .drawio, .png, .svg, and .pdf

  Try:将架构图导出为PNG格式Try:把流程图保存为PDF文档

Comparable tools

Installation

# Clone repository
git clone https://github.com/moon09300731/drawio-architecture-skill.git
cd drawio-architecture-skill

# Copy to Claude skills directory
cp -r drawio-architecture ~/.claude/skills/

# Verify installation
ls -la ~/.claude/skills/drawio-architecture/

curl -fsSL https://raw.githubusercontent.com/moon09300731/drawio-architecture-skill/main/install.sh | bash

# Install with npx
npx @modelcontextprotocol/server-drawio

# Or globally install
npm install -g @modelcontextprotocol/server-drawio

FAQ

What formats can diagrams be exported in?

Diagrams can be exported in multiple formats: .drawio (source file), PNG (image), SVG (vector), and PDF (document). The .drawio format is recommended for editing.

How do I use the skill in Claude Code?

Simply use natural language descriptions in Claude Code, such as 'draw a project architecture diagram showing the flow of data preparation, model training, and inference services'.

Compare drawio-architecture-skill with