drawio-logical-diagrams

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Draw.io Logical Diagrams Creation

Draw.io 逻辑图表创建

Overview

概述

Create professional logical diagrams in draw.io's native XML format. This skill enables generation of production-ready

.drawio

files for logical flow diagrams, system architecture visualizations, and abstract process representations using generic shapes and symbols.

使用draw.io原生XML格式创建专业的逻辑图表。此技能支持生成可用于生产环境的

.drawio

文件，用于逻辑流程图、系统架构可视化以及使用通用形状和符号的抽象流程表示。

When to Use

适用场景

Use this skill when:

Creating logical flow diagrams showing data flow between system components
Designing logical architecture diagrams (abstract system structure)
Building BPMN process diagrams for business processes
Drawing UML diagrams (class, sequence, activity, state)
Creating data flow diagrams (DFD) for system analysis
Making decision flowcharts with branching logic
Visualizing system interactions and sequences
Documenting logical system design without cloud specifics

Do NOT use for:

AWS/Azure/GCP architecture diagrams (use
```
aws-drawio-architecture-diagrams
```
)
Infrastructure-specific diagrams

在以下场景使用此技能：

创建展示系统组件间数据流转的逻辑流程图
设计逻辑架构图（抽象系统结构）
为业务流程构建BPMN流程图
绘制UML图（类图、序列图、活动图、状态图）
为系统分析创建数据流图（DFD）
制作带有分支逻辑的决策流程图
可视化系统交互和序列
记录不涉及云细节的逻辑系统设计

请勿用于：

AWS/Azure/GCP架构图（请使用
```
aws-drawio-architecture-diagrams
```
技能）
特定基础设施的图表

Instructions

使用说明

Creating a Logical Diagram

创建逻辑图表

Analyze the request: Understand the system/process to diagram
Choose diagram type: Flowchart, architecture, BPMN, UML, DFD, etc.
Identify elements: Determine actors, processes, data stores, connectors
Draft XML structure: Create the mxGraphModel with proper root cells
Add shapes: Create mxCell elements with appropriate styles
Add connectors: Link elements with edge elements
Validate XML: Ensure all tags are closed and IDs are unique
Output: Write the .drawio file for the user

分析需求：理解需绘制的系统/流程
选择图表类型：流程图、架构图、BPMN、UML、DFD等
识别元素：确定参与者、流程、数据存储、连接器
草拟XML结构：创建带有正确根单元格的mxGraphModel
添加形状：创建带有合适样式的mxCell元素
添加连接器：使用边缘元素连接各个元素
验证XML：确保所有标签闭合且ID唯一
输出：为用户生成.drawio文件

Key XML Components

核心XML组件

```
mxfile
```
: Root element with host and version
```
diagram
```
: Contains the diagram definition
```
mxGraphModel
```
: Canvas settings (grid, page size)
```
root
```
: Container for all cells (must include id="0" and id="1")
```
mxCell
```
: Individual shapes (vertices) or connectors (edges)

```
mxfile
```
：包含主机和版本信息的根元素
```
diagram
```
：包含图表定义
```
mxGraphModel
```
：画布设置（网格、页面尺寸）
```
root
```
：所有单元格的容器（必须包含id="0"和id="1"）
```
mxCell
```
：单个形状（顶点）或连接器（边缘）

Draw.io XML Structure

Draw.io XML结构

Every

.drawio

file follows this XML structure:

xml

<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="logical-flow-1" name="Logical Flow">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1"
      tooltips="1" connect="1" arrows="1" fold="1" page="1"
      pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- Shapes and connectors here -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Key rules:

IDs "0" and "1" are reserved for root cells
Use sequential integer IDs starting from "2"
Use landscape orientation for architecture diagrams
All coordinates must be positive and aligned to grid (multiples of 10)

每个

.drawio

文件遵循以下XML结构：

xml

<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="logical-flow-1" name="Logical Flow">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1"
      tooltips="1" connect="1" arrows="1" fold="1" page="1"
      pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- Shapes and connectors here -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

核心规则：

ID "0"和"1"为根单元格保留
使用从"2"开始的连续整数ID
架构图使用横向布局
所有坐标必须为正数且对齐网格（10的倍数）

Generic Shapes and Styles

通用形状与样式

Basic Shape Types

基础形状类型

Shape	Style
Rectangle	`rounded=0;whiteSpace=wrap;html=1;`
Rounded Rectangle	`rounded=1;whiteSpace=wrap;html=1;`
Ellipse/Circle	`ellipse;whiteSpace=wrap;html=1;`
Diamond	`rhombus;whiteSpace=wrap;html=1;`
Cylinder	`shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;`
Hexagon	`shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;`
Parallelogram	`shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;`

形状	样式
矩形	`rounded=0;whiteSpace=wrap;html=1;`
圆角矩形	`rounded=1;whiteSpace=wrap;html=1;`
椭圆/圆形	`ellipse;whiteSpace=wrap;html=1;`
菱形	`rhombus;whiteSpace=wrap;html=1;`
圆柱体	`shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;`
六边形	`shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;`
平行四边形	`shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;`

Standard Color Palette

标准调色板

Element Type	Fill Color	Border Color	Usage
Process	`#dae8fc` (light blue)	`#6c8ebf`	Operations/actions
Decision	`#fff2cc` (light yellow)	`#d6b656`	Conditional branches
Start/End	`#d5e8d4` (light green)	`#82b366`	Terminal states
Data/Store	`#e1f5fe` (light cyan)	`#0277bd`	Databases/files
Entity	`#f3e5f5` (light purple)	`#7b1fa2`	External systems
Error/Stop	`#f8cecc` (light red)	`#b85450`	Error states
Actor/User	`#ffe0b2` (light orange)	`#f57c00`	Users/actors
Container	`#f5f5f5` (light gray)	`#666666`	Grouping areas

元素类型	填充色	边框色	用途
流程	`#dae8fc` （浅蓝色）	`#6c8ebf`	操作/动作
决策	`#fff2cc` （浅黄色）	`#d6b656`	条件分支
开始/结束	`#d5e8d4` （浅绿色）	`#82b366`	终端状态
数据/存储	`#e1f5fe` （浅青色）	`#0277bd`	数据库/文件
实体	`#f3e5f5` （浅紫色）	`#7b1fa2`	外部系统
错误/终止	`#f8cecc` （浅红色）	`#b85450`	错误状态
参与者/用户	`#ffe0b2` （浅橙色）	`#f57c00`	用户/参与者
容器	`#f5f5f5` （浅灰色）	`#666666`	分组区域

Connector Styles

连接器样式

Standard flow:

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;

Dashed (alternative/optional):

edgeStyle=orthogonalEdgeStyle;dashed=1;dashPattern=5 5;strokeColor=#666666;

Arrow head styles:

```
endArrow=classic;endFill=1
```
- Filled triangle
```
endArrow=open;endFill=0
```
- Open arrow
```
endArrow=blockThin;endFill=1
```
- Block arrow

标准流：

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;

虚线（备选/可选）：

edgeStyle=orthogonalEdgeStyle;dashed=1;dashPattern=5 5;strokeColor=#666666;

箭头样式：

```
endArrow=classic;endFill=1
```
- 填充三角形
```
endArrow=open;endFill=0
```
- 空心箭头
```
endArrow=blockThin;endFill=1
```
- 块状箭头

Diagram Types

图表类型

1. Logical Flow Diagram

1. 逻辑流程图

Shows the logical flow of data or processes through system components:

┌─────────┐     ┌─────────┐     ┌─────────┐
│  User   │────▶│ Service │────▶│  Data   │
└─────────┘     └─────────┘     └─────────┘

Key elements:

Actors/Users (orange)
Services/Processes (blue)
Data Stores (cyan)
External Systems (purple)
Data flows (solid arrows)

展示数据或流程在系统组件间的逻辑流转：

┌─────────┐     ┌─────────┐     ┌─────────┐
│  用户   │────▶│ 服务    │────▶│ 数据    │
└─────────┘     └─────────┘     └─────────┘

核心元素：

参与者/用户（橙色）
服务/流程（蓝色）
数据存储（青色）
外部系统（紫色）
数据流（实线箭头）

2. Logical Architecture Diagram

2. 逻辑架构图

Abstract representation of system components:

┌─────────────────────────────────────────┐
│            Presentation Layer            │
│  ┌─────────────┐  ┌─────────────┐       │
│  │  Web UI     │  │  Mobile    │       │
│  └─────────────┘  └─────────────┘       │
└─────────────────────────────────────────┘
                    │
┌─────────────────────────────────────────┐
│            Application Layer             │
│  ┌─────────────┐  ┌─────────────┐       │
│  │   API       │  │  Business   │       │
│  │   Gateway   │  │   Logic     │       │
│  └─────────────┘  └─────────────┘       │
└─────────────────────────────────────────┘
                    │
┌─────────────────────────────────────────┐
│              Data Layer                  │
│  ┌─────────────┐  ┌─────────────┐       │
│  │  Database   │  │    Cache    │       │
│  └─────────────┘  └─────────────┘       │
└─────────────────────────────────────────┘

系统组件的抽象表示：

┌─────────────────────────────────────────┐
│            表示层                       │
│  ┌─────────────┐  ┌─────────────┐       │
│  │  Web界面    │  │ 移动端应用  │       │
│  └─────────────┘  └─────────────┘       │
└─────────────────────────────────────────┘
                    │
┌─────────────────────────────────────────┐
│            应用层                       │
│  ┌─────────────┐  ┌─────────────┐       │
│  │  API网关    │  │ 业务逻辑    │       │
│  └─────────────┘  └─────────────┘       │
└─────────────────────────────────────────┘
                    │
┌─────────────────────────────────────────┐
│            数据层                       │
│  ┌─────────────┐  ┌─────────────┐       │
│  │ 数据库      │  │ 缓存        │       │
│  └─────────────┘  └─────────────┘       │
└─────────────────────────────────────────┘

3. BPMN Process Diagram

3. BPMN流程图

Business process modeling:

Symbol	Meaning
Circle	Start/End Event
Rounded Rectangle	Activity/Task
Diamond	Gateway/Decision
Arrow	Sequence Flow

业务流程建模：

符号	含义
圆形	开始/结束事件
圆角矩形	活动/任务
菱形	网关/决策
箭头	序列流

4. UML Sequence Diagram

4. UML序列图

Interaction between components:

┌─────────┐     ┌─────────┐     ┌─────────┐
│  Actor  │     │Service A│     │Service B│
└────┬────┘     └────┬────┘     └────┬────┘
     │              │              │
     │─────────────▶│              │
     │              │─────────────▶│
     │              │◀─────────────│
     │◀─────────────│              │

组件间的交互：

┌─────────┐     ┌─────────┐     ┌─────────┐
│  参与者  │     │服务A    │     │服务B    │
└────┬────┘     └────┬────┘     └────┬────┘
     │              │              │
     │─────────────▶│              │
     │              │─────────────▶│
     │              │◀─────────────│
     │◀─────────────│              │

5. Data Flow Diagram (DFD)

5. 数据流图（DFD）

System data movement:

External Entity (square) - Sources/destinations
Process (circle/rounded) - Transformations
Data Store (open rectangle) - Storage
Data Flow (arrow) - Data movement

系统数据流转：

外部实体（正方形）- 数据源/目的地
流程（圆形/圆角）- 数据转换
数据存储（空心矩形）- 存储
数据流（箭头）- 数据流转

Shape Examples

形状示例

Simple Process Box

简单流程框

xml

<mxCell id="2" value="Process Name"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
  vertex="1" parent="1">
  <mxGeometry x="200" y="100" width="120" height="60" as="geometry" />
</mxCell>

xml

<mxCell id="2" value="流程名称"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
  vertex="1" parent="1">
  <mxGeometry x="200" y="100" width="120" height="60" as="geometry" />
</mxCell>

Decision Diamond

决策菱形

xml

<mxCell id="3" value="Decision?"
  style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
  vertex="1" parent="1">
  <mxGeometry x="280" y="200" width="80" height="80" as="geometry" />
</mxCell>

xml

<mxCell id="3" value="决策？"
  style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
  vertex="1" parent="1">
  <mxGeometry x="280" y="200" width="80" height="80" as="geometry" />
</mxCell>

Start/End Oval

开始/结束椭圆

xml

<mxCell id="4" value="Start"
  style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
  vertex="1" parent="1">
  <mxGeometry x="200" y="300" width="80" height="40" as="geometry" />
</mxCell>

xml

<mxCell id="4" value="开始"
  style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
  vertex="1" parent="1">
  <mxGeometry x="200" y="300" width="80" height="40" as="geometry" />
</mxCell>

Data Store (Cylinder)

数据存储（圆柱体）

xml

<mxCell id="5" value="Database"
  style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;"
  vertex="1" parent="1">
  <mxGeometry x="400" y="100" width="60" height="80" as="geometry" />
</mxCell>

xml

<mxCell id="5" value="数据库"
  style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;"
  vertex="1" parent="1">
  <mxGeometry x="400" y="100" width="60" height="80" as="geometry" />
</mxCell>

Connector/Arrow

连接器/箭头

xml

<mxCell id="10"
  style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;"
  edge="1" parent="1" source="2" target="3">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

xml

<mxCell id="10"
  style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;"
  edge="1" parent="1" source="2" target="3">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

Label on Connector

连接器标签

xml

<mxCell id="11" value="Data"
  style="text;html=1;align=center;verticalAlign=middle;fontSize=11;fontColor=#333333;labelBackgroundColor=#ffffff;"
  vertex="1" parent="1">
  <mxGeometry x="250" y="160" width="40" height="20" as="geometry" />
</mxCell>

xml

<mxCell id="11" value="数据"
  style="text;html=1;align=center;verticalAlign=middle;fontSize=11;fontColor=#333333;labelBackgroundColor=#ffffff;"
  vertex="1" parent="1">
  <mxGeometry x="250" y="160" width="40" height="20" as="geometry" />
</mxCell>

Layout Best Practices

布局最佳实践

Flow direction: Left-to-right or top-to-bottom consistently
Spacing: 40-60px between elements, 20px inside containers
Grid alignment: All coordinates in multiples of 10
Label placement: Above horizontal arrows, right of vertical arrows
Container grouping: Use rounded rectangles for logical groupings
Balance: Keep diagrams centered, avoid extreme whitespace

流向：保持从左到右或从上到下的一致方向
间距：元素间保留40-60px间距，容器内保留20px间距
网格对齐：所有坐标为10的倍数
标签位置：水平箭头上方，垂直箭头右侧
容器分组：使用圆角矩形进行逻辑分组
平衡：保持图表居中，避免过多空白

Reference Files

参考文件

For detailed templates and shape references, see:

shape-styles.md - Complete shape and style reference
diagram-templates.md - Ready-to-use templates

如需详细模板和形状参考，请查看：

shape-styles.md - 完整的形状和样式参考
diagram-templates.md - 可直接使用的模板

Examples

示例

Example 1: Simple Order Processing Flow

示例1：简单订单处理流程

User Request: "Create a logical flow diagram showing order processing: customer submits order, system validates, if valid then processes payment and ships, if invalid notifies customer."

Generated XML:

xml

<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="order-flow-1" name="Order Processing">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- Start -->
        <mxCell id="2" value="Start"
          style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="80" y="50" width="80" height="40" as="geometry" />
        </mxCell>
        <!-- Submit Order -->
        <mxCell id="3" value="Submit Order"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="60" y="130" width="120" height="60" as="geometry" />
        </mxCell>
        <!-- Validate -->
        <mxCell id="4" value="Validate&#xa;Order?"
          style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="80" y="230" width="80" height="80" as="geometry" />
        </mxCell>
        <!-- Invalid: Notify -->
        <mxCell id="5" value="Notify&#xa;Customer"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="220" y="240" width="100" height="50" as="geometry" />
        </mxCell>
        <!-- Valid: Process Payment -->
        <mxCell id="6" value="Process&#xa;Payment"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="60" y="350" width="120" height="60" as="geometry" />
        </mxCell>
        <!-- Ship -->
        <mxCell id="7" value="Ship Order"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="60" y="450" width="120" height="60" as="geometry" />
        </mxCell>
        <!-- End -->
        <mxCell id="8" value="End"
          style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="80" y="550" width="80" height="40" as="geometry" />
        </mxCell>
        <!-- Connectors -->
        <mxCell id="10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="3">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="3" target="4">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="12" value="No" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="5">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="13" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#82b366;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="6">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="6" target="7">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="7" target="8">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;" edge="1" parent="1" source="5" target="8">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

用户需求： "创建一个逻辑流程图，展示订单处理流程：客户提交订单，系统验证，验证通过则处理支付并发货，验证不通过则通知客户。"

生成的XML：

xml

<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="order-flow-1" name="Order Processing">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- Start -->
        <mxCell id="2" value="Start"
          style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="80" y="50" width="80" height="40" as="geometry" />
        </mxCell>
        <!-- Submit Order -->
        <mxCell id="3" value="Submit Order"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="60" y="130" width="120" height="60" as="geometry" />
        </mxCell>
        <!-- Validate -->
        <mxCell id="4" value="Validate&#xa;Order?"
          style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="80" y="230" width="80" height="80" as="geometry" />
        </mxCell>
        <!-- Invalid: Notify -->
        <mxCell id="5" value="Notify&#xa;Customer"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="220" y="240" width="100" height="50" as="geometry" />
        </mxCell>
        <!-- Valid: Process Payment -->
        <mxCell id="6" value="Process&#xa;Payment"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="60" y="350" width="120" height="60" as="geometry" />
        </mxCell>
        <!-- Ship -->
        <mxCell id="7" value="Ship Order"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="60" y="450" width="120" height="60" as="geometry" />
        </mxCell>
        <!-- End -->
        <mxCell id="8" value="End"
          style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="80" y="550" width="80" height="40" as="geometry" />
        </mxCell>
        <!-- Connectors -->
        <mxCell id="10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="3">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="3" target="4">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="12" value="No" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="5">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="13" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#82b366;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="6">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="6" target="7">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="7" target="8">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;" edge="1" parent="1" source="5" target="8">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Example 2: Three-Tier Logical Architecture

示例2：三层逻辑架构

User Request: "Create a logical architecture diagram for a web application with presentation, business logic, and data tiers."

Generated XML:

xml

<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="three-tier-1" name="Three-Tier Architecture">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- User -->
        <mxCell id="2" value="User"
          style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe0b2;strokeColor=#f57c00;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="40" y="340" width="60" height="40" as="geometry" />
        </mxCell>
        <!-- Presentation Layer -->
        <mxCell id="3" value="Presentation Layer"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;"
          vertex="1" parent="1">
          <mxGeometry x="160" y="40" width="300" height="180" as="geometry" />
        </mxCell>
        <mxCell id="4" value="Web&#xa;Browser"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="3">
          <mxGeometry x="20" y="30" width="80" height="50" as="geometry" />
        </mxCell>
        <mxCell id="5" value="Mobile&#xa;App"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="3">
          <mxGeometry x="120" y="30" width="80" height="50" as="geometry" />
        </mxCell>
        <mxCell id="6" value="API&#xa;Client"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="3">
          <mxGeometry x="200" y="30" width="80" height="50" as="geometry" />
        </mxCell>
        <!-- Application Layer -->
        <mxCell id="7" value="Application Layer"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;"
          vertex="1" parent="1">
          <mxGeometry x="160" y="260" width="300" height="180" as="geometry" />
        </mxCell>
        <mxCell id="8" value="API&#xa;Gateway"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
          vertex="1" parent="7">
          <mxGeometry x="20" y="30" width="80" height="50" as="geometry" />
        </mxCell>
        <mxCell id="9" value="Business&#xa;Logic"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="7">
          <mxGeometry x="110" y="30" width="80" height="50" as="geometry" />
        </mxCell>
        <mxCell id="10" value="Auth&#xa;Service"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
          vertex="1" parent="7">
          <mxGeometry x="200" y="30" width="80" height="50" as="geometry" />
        </mxCell>
        <!-- Data Layer -->
        <mxCell id="11" value="Data Layer"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;"
          vertex="1" parent="1">
          <mxGeometry x="160" y="480" width="300" height="180" as="geometry" />
        </mxCell>
        <mxCell id="12" value="Primary&#xa;Database"
          style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;"
          vertex="1" parent="11">
          <mxGeometry x="20" y="30" width="60" height="80" as="geometry" />
        </mxCell>
        <mxCell id="13" value="Read&#xa;Replica"
          style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;"
          vertex="1" parent="11">
          <mxGeometry x="100" y="30" width="60" height="80" as="geometry" />
        </mxCell>
        <mxCell id="14" value="Cache&#xa;(Redis)"
          style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#fff3e0;strokeColor=#e65100;fontSize=12;"
          vertex="1" parent="11">
          <mxGeometry x="180" y="30" width="60" height="80" as="geometry" />
        </mxCell>
        <!-- Connectors -->
        <mxCell id="20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="4">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="4" target="8">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="8" target="9">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="9" target="12">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="24" value="query" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=open;endFill=0;strokeColor=#666666;strokeWidth=1;fontSize=10;dashed=1;" edge="1" parent="1" source="9" target="14">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="9" target="13">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

用户需求： "为包含表示层、业务逻辑层和数据层的Web应用创建逻辑架构图。"

生成的XML：

xml

<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="three-tier-1" name="Three-Tier Architecture">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- User -->
        <mxCell id="2" value="User"
          style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe0b2;strokeColor=#f57c00;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="40" y="340" width="60" height="40" as="geometry" />
        </mxCell>
        <!-- Presentation Layer -->
        <mxCell id="3" value="Presentation Layer"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;"
          vertex="1" parent="1">
          <mxGeometry x="160" y="40" width="300" height="180" as="geometry" />
        </mxCell>
        <mxCell id="4" value="Web&#xa;Browser"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="3">
          <mxGeometry x="20" y="30" width="80" height="50" as="geometry" />
        </mxCell>
        <mxCell id="5" value="Mobile&#xa;App"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="3">
          <mxGeometry x="120" y="30" width="80" height="50" as="geometry" />
        </mxCell>
        <mxCell id="6" value="API&#xa;Client"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="3">
          <mxGeometry x="200" y="30" width="80" height="50" as="geometry" />
        </mxCell>
        <!-- Application Layer -->
        <mxCell id="7" value="Application Layer"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;"
          vertex="1" parent="1">
          <mxGeometry x="160" y="260" width="300" height="180" as="geometry" />
        </mxCell>
        <mxCell id="8" value="API&#xa;Gateway"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
          vertex="1" parent="7">
          <mxGeometry x="20" y="30" width="80" height="50" as="geometry" />
        </mxCell>
        <mxCell id="9" value="Business&#xa;Logic"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="7">
          <mxGeometry x="110" y="30" width="80" height="50" as="geometry" />
        </mxCell>
        <mxCell id="10" value="Auth&#xa;Service"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
          vertex="1" parent="7">
          <mxGeometry x="200" y="30" width="80" height="50" as="geometry" />
        </mxCell>
        <!-- Data Layer -->
        <mxCell id="11" value="Data Layer"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;"
          vertex="1" parent="1">
          <mxGeometry x="160" y="480" width="300" height="180" as="geometry" />
        </mxCell>
        <mxCell id="12" value="Primary&#xa;Database"
          style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;"
          vertex="1" parent="11">
          <mxGeometry x="20" y="30" width="60" height="80" as="geometry" />
        </mxCell>
        <mxCell id="13" value="Read&#xa;Replica"
          style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;"
          vertex="1" parent="11">
          <mxGeometry x="100" y="30" width="60" height="80" as="geometry" />
        </mxCell>
        <mxCell id="14" value="Cache&#xa;(Redis)"
          style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#fff3e0;strokeColor=#e65100;fontSize=12;"
          vertex="1" parent="11">
          <mxGeometry x="180" y="30" width="60" height="80" as="geometry" />
        </mxCell>
        <!-- Connectors -->
        <mxCell id="20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="4">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="4" target="8">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="8" target="9">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="9" target="12">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="24" value="query" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=open;endFill=0;strokeColor=#666666;strokeWidth=1;fontSize=10;dashed=1;" edge="1" parent="1" source="9" target="14">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="9" target="13">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Example 3: Microservice Communication Flow

示例3：微服务通信流程

User Request: "Create a logical diagram showing microservice architecture with API gateway, multiple services, and message queue for async communication."

Reference: See diagram-templates.md for complete microservice template.

用户需求： "创建一个逻辑图表，展示包含API网关、多个服务以及用于异步通信的消息队列的微服务架构。"

参考： 完整的微服务模板请查看diagram-templates.md。

Constraints and Warnings

约束与警告

Critical Constraints

关键约束

XML validity: Always close tags properly and escape special characters
Unique IDs: All cell IDs must be unique (except parent "0" and "1")
Valid references: Source/target must reference existing cell IDs
Positive coordinates: All x, y values must be >= 0

XML有效性：始终正确闭合标签并转义特殊字符
唯一ID：所有单元格ID必须唯一（父ID "0"和"1"除外）
有效引用：源/目标必须引用已存在的单元格ID
正坐标：所有x、y值必须≥0

Warnings

警告

XML files must be well-formed or will fail to open in draw.io
Invalid parent references cause elements to disappear
Negative coordinates place elements outside visible canvas

XML文件必须格式良好，否则无法在draw.io中打开
无效的父引用会导致元素消失
负坐标会将元素放置在可见画布之外

Best Practices

最佳实践

Visual Guidelines

视觉指南

Use consistent colors per element type
Keep arrows straight with minimal bends
Place labels at least 20px from arrow lines
Group related elements in containers
Use 12-14px font for labels, 10-11px for annotations

为每种元素类型使用一致的颜色
保持箭头笔直，尽量减少弯曲
标签与箭头线的距离至少为20px
将相关元素分组到容器中
标签使用12-14px字体，注释使用10-11px字体

Accessibility

可访问性

Use high contrast colors
Don't rely solely on color to convey meaning
Include text labels for all shapes
Add annotations for complex flows

使用高对比度颜色
不要仅依赖颜色传达含义
为所有形状添加文本标签
为复杂流程添加注释