drawio-architecture-skill

概述

drawio-architecture-skill为Claude Code中创建专业的架构图、流程图和系统设计图提供了专门的接口。它利用draw.io MCP服务器生成多种格式的图表，包括.drawio源文件、PNG、SVG和PDF。该技能包含预定义的配色方案、多种节点形状，并支持UML图、网络拓扑和部署架构等专业图表类型。

试试问 AI

装完之后，这里有 5 个你可以让 AI 做的事：

• create_architecture_diagram

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

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

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

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

  Creates network topology diagrams showing system connections and infrastructure

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

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

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

可对比工具

安装

# 克隆仓库
git clone https://github.com/moon09300731/drawio-architecture-skill.git
cd drawio-architecture-skill

# 复制到Claude技能目录
cp -r drawio-architecture ~/.claude/skills/

# 验证安装
ls -la ~/.claude/skills/drawio-architecture/

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

# 使用npx安装
npx @modelcontextprotocol/server-drawio

# 或全局安装
npm install -g @modelcontextprotocol/server-drawio

FAQ

图表可以导出哪些格式？

图表可以导出多种格式：.drawio（源文件）、PNG（图片）、SVG（矢量）和PDF（文档）。推荐使用.drawio格式进行编辑。

如何在Claude Code中使用此技能？

只需在Claude Code中使用自然语言描述，如'绘制项目架构图，展示数据准备、模型训练和推理服务的流程'。

drawio-architecture-skill 对比