drawiolisted

# Draw.io 图表生成技能 生成和编辑 Draw.io 格式的图表。支持流程图、架构图、网络拓扑图、UML 图等多种图表类型。 ## 快速开始 ### 生成基本流程图 生成 Draw.io XML 格式的图表，包含以下核心元素： 1. **文件结构**：使用 `<mxfile>` 作为根元素 2. **图表模型**：使用 `<mxGraphModel>` 定义画布 3. **图形元素**：使用 `<mxCell>` 创建节点和连接 ### 基本模板 ```xml <mxfile host="app.diagrams.net"> <diagram id="diagram-id" name="图表名称"> <mxGraphModel dx="1422" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169"> <root> <mxCell id="0" /> <mxCell id="1" parent="0" /> <!-- 在此添加图表元素 --> </root> </mxGraphModel> </diagram> </mxfile> ``` ## 创建图表元素 ### 创建节点（Vertex） ```xml <mxCell id="node-id" value="节点文本" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"> <mxGeometry x="100" y="100" width="120" height="60" as="geometry" /> </mxCell> ``` ### 创建连接线（Edge） ```xml <mxCell id="edge-id" value="标签文本" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="source-id" target="target-id"> <mxGeometry relative="1" as="geometry" /> </mxCell> ``` ## 图表类型 ### 流程图 使用标准流程图元素： - **开始/结束**：圆角矩形，绿色填充 - **处理**：矩形，蓝色填充 - **判断**：菱形，黄色填充 - **输入/输出**：平行四边形，红色填充 参考：[diagram_types.md](references/diagram_types.md#流程图flowchart) ### 架构图 表示系统组件和关系： - 使用容器表示系统边界 - 标注组件名称和类型 - 使用箭头表示数据流或调