drawio-architecturelisted
Install: claude install-skill quant-chiggz/drawio-architecture-skill
# Draw.io 架构图绘制技能
## 技能概述
使用 draw.io MCP 工具创建专业的架构图、流程图和系统设计图。支持实时预览、可编辑格式和多格式导出。
## 何时使用此技能
在以下情况下使用此技能：
- **架构图**: 项目架构、系统架构、应用架构
- **流程图**: 数据流程、业务流程、工作流程
- **UML 图**: 类图、时序图、状态图、组件图
- **网络拓扑**: 网络架构、服务拓扑、部署架构
- **数据模型**: ER 图、数据库设计、数据关系
- **时序图**: 请求流程、调用链、交互时序
- **状态机**: 状态转换、生命周期、决策流程
用户可能的表达方式：
- "画一个架构图"
- "绘制系统设计图"
- "创建数据流程图"
- "生成 UML 类图"
- "画一个网络拓扑图"
## 工作流程
### 步骤 1: 启动 draw.io 会话
```python
mcp__drawio__start_session()
```
**返回结果**:
- Session ID
- Browser URL (例如: `http://localhost:6002?mcp=...`)
### 步骤 2: 创建图表
使用 `mcp__drawio__create_new_diagram()` 创建新图表：
```python
mcp__drawio__create_new_diagram(xml="""
<mxGraphModel>
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- 添加标题 -->
<mxCell id="title" value="系统架构图" style="..." vertex="1" parent="1">
<mxGeometry x="300" y="20" width="200" height="40" as="geometry"/>
</mxCell>
<!-- 添加节点 -->
<mxCell id="node1" value="组件 A" style="rounded=1;fillColor=#E3F2FD;..." vertex="1" parent="1">
<mxGeometry x="50" y="100" width="120" height="60" as="geometry"/>
</mxCell>
<!-- 添加边 -->
<mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;..." edge="1" parent="1" source="node1" target="node2">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
""")
```
### 步骤 3: 导出文件
#### 导出为 draw.io 格式（推荐，可编辑）
```python
mcp__drawio__export_diagram(
format="drawio",
path="docs/diagram_name.drawio"
)
```
#### 导出为图片（可选）
```pyt