Initial commit with translated description

2026-03-29 13:03:23 +08:00
commit 29e0b51edd
6 changed files with 1649 additions and 0 deletions
--- a/references/format-selection-guide.md
+++ b/references/format-selection-guide.md
@@ -0,0 +1,166 @@
+# Format Selection Guide
+
+Choose the right diagram format based on your needs.
+
+## Quick Decision Matrix
+
+| Factor | Draw.io | Mermaid | Excalidraw |
+|--------|---------|---------|------------|
+| **Learning curve** | Low | Low | Low |
+| **Quick generation** | Medium | **High** | Medium |
+| **Manual editing** | **Excellent** (GUI) | Code-based | Good (GUI) |
+| **Version control** | XML (verbose) | **Markdown** (clean) | JSON |
+| **Code documentation** | Medium | **Excellent** | Poor |
+| **Complex nesting** | **Excellent** | Poor | Good |
+| **Custom styling** | **Excellent** | Limited | Good |
+| **Hand-drawn style** | No | No | **Yes** |
+| **Export options** | PDF, PNG, SVG, etc. | PNG, SVG | PNG, SVG, JSON |
+
+## When to Use Draw.io
+
+### Ideal For:
+- **Network topology diagrams** with nested environments/datacenters/zones
+- **Complex architecture diagrams** with many layers
+- **Diagrams requiring fine-grained control** over positioning and styling
+- **Professional technical diagrams** for documentation
+- **Diagrams that need manual refinement** after generation
+
+### Examples:
+- Enterprise network topology (environments → datacenters → zones → devices)
+- Microservices architecture with many components
+- System diagrams with custom icons and layouts
+- Production infrastructure maps
+
+### Strengths:
+- Best-in-class nested container support (swimlanes)
+- Powerful GUI editor for fine-tuning
+- Export to multiple formats (PDF, PNG, SVG)
+- Large library of pre-built shapes and icons
+- Supports multiple pages in one file
+
+### Weaknesses:
+- XML format is verbose (larger files)
+- Not ideal for quick iterations
+- Manual positioning can be time-consuming
+
+---
+
+## When to Use Mermaid
+
+### Ideal For:
+- **Documentation embedded in code** (Markdown files)
+- **Quick flowcharts and sequence diagrams**
+- **Version-controlled diagrams** (clean git diffs)
+- **Technical documentation** (README, API docs)
+- **Simple to moderately complex diagrams**
+
+### Examples:
+- User authentication flow
+- API sequence diagram
+- Class diagram for a module
+- ER diagram for a database
+- Git workflow visualization
+
+### Strengths:
+- Text-based, easy to version control
+- Can be embedded in Markdown
+- Renders in GitHub, GitLab, many markdown editors
+- Compact syntax
+- Good support for UML diagrams (class, sequence, state, activity)
+
+### Weaknesses:
+- Limited styling options
+- Poor support for complex nesting
+- Layout is auto-generated (less control)
+- No GUI editor (must edit code)
+
+---
+
+## When to Use Excalidraw
+
+### Ideal For:
+- **Hand-drawn / informal diagrams**
+- **Brainstorming sessions** and mindmaps
+- **Creative diagrams** with custom freeform elements
+- **Informal presentations** that feel more human
+
+### Examples:
+- Whiteboard-style architecture sketches
+- Meeting notes with diagrams
+- Brainstorming mindmaps
+- Informal process flows
+- Wireframes (basic)
+
+### Strengths:
+- Unique hand-drawn aesthetic
+- Freeform drawing capability
+- Excellent for creative/brainstorming scenarios
+- Can embed in web pages (ExcalidrawEmbed)
+- Good sharing and collaboration features
+
+### Weaknesses:
+- Not ideal for precise technical diagrams
+- JSON format is verbose and hard to edit manually
+- Limited support for complex relationships
+- Less standard in technical documentation
+
+---
+
+## Decision Tree
+
+```
+Start
+  │
+  ├─ Need hand-drawn style?
+  │   └─ Yes → Excalidraw
+  │   └─ No → Continue
+  │
+  ├─ Complex nesting (4+ levels)?
+  │   └─ Yes → Draw.io
+  │   └─ No → Continue
+  │
+  ├─ Need fine-grained positioning/styling?
+  │   └─ Yes → Draw.io
+  │   └─ No → Continue
+  │
+  ├─ Embedding in documentation/GitHub?
+  │   └─ Yes → Mermaid
+  │   └─ No → Continue
+  │
+  ├─ Quick iteration needed?
+  │   └─ Yes → Mermaid
+  │   └─ No → Draw.io
+```
+
+## Format Comparison by Diagram Type
+
+| Diagram Type | Recommended | Alternative |
+|--------------|--------------|-------------|
+| Simple Flowchart | **Mermaid** | Draw.io (if styling needed) |
+| Complex Flowchart (10+ nodes) | **Draw.io** | Mermaid (if auto-layout works) |
+| Sequence Diagram | **Mermaid** | Draw.io |
+| Class Diagram | **Mermaid** | Draw.io |
+| ER Diagram | **Mermaid** | Draw.io |
+| Mindmap | **Mermaid** | Excalidraw (for hand-drawn) |
+| Network Topology | **Draw.io** (required) | - |
+| System Architecture | **Draw.io** | Mermaid (for high-level) |
+| Whiteboard Sketch | **Excalidraw** | Draw.io (formal) |
+| Brainstorming | **Excalidraw** | Mermaid (structured) |
+
+## Migration Considerations
+
+### Draw.io → Mermaid
+- Remove nested containers (Mermaid doesn't support)
+- Simplify styling
+- Convert XML to Mermaid syntax
+- Use auto-layout (may need manual adjustment)
+
+### Mermaid → Draw.io
+- Import or recreate manually
+- Gain manual control over layout
+- Add nested containers if needed
+
+### Any Format → Excalidraw
+- Recreate manually in Excalidraw editor
+- Hand-drawn aesthetic adds informal feel
+- Good for brainstorming iterations
--- a/references/json-schema-guide.md
+++ b/references/json-schema-guide.md
@@ -0,0 +1,481 @@
+# JSON Schema Guide
+
+Complete schema for diagram specification passed to `mcp-diagram-generator` MCP server.
+
+## Root Schema
+
+```json
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "required": ["format", "elements"],
+  "properties": {
+    "format": {
+      "type": "string",
+      "enum": ["drawio", "mermaid", "excalidraw"],
+      "description": "Target diagram format"
+    },
+    "title": {
+      "type": "string",
+      "description": "Diagram title (used as page name in drawio, or header in other formats)"
+    },
+    "elements": {
+      "type": "array",
+      "items": {"$ref": "#/definitions/element"},
+      "description": "All diagram elements (containers, nodes, edges)"
+    }
+  },
+  "definitions": {
+    "element": {
+      "oneOf": [
+        {"$ref": "#/definitions/container"},
+        {"$ref": "#/definitions/node"},
+        {"$ref": "#/definitions/edge"}
+      ]
+    },
+    "container": {
+      "type": "object",
+      "required": ["id", "type", "name"],
+      "properties": {
+        "id": {"type": "string", "pattern": "^[a-zA-Z0-9_-]+$"},
+        "type": {"const": "container"},
+        "name": {"type": "string"},
+        "level": {
+          "type": "string",
+          "enum": ["environment", "datacenter", "zone", "other"],
+          "description": "Hierarchy level (for network topology)"
+        },
+        "style": {"$ref": "#/definitions/style"},
+        "geometry": {"$ref": "#/definitions/geometry"},
+        "children": {
+          "type": "array",
+          "items": {"$ref": "#/definitions/element"}
+        }
+      }
+    },
+    "node": {
+      "type": "object",
+      "required": ["id", "type", "name"],
+      "properties": {
+        "id": {"type": "string", "pattern": "^[a-zA-Z0-9_-]+$"},
+        "type": {"const": "node"},
+        "name": {"type": "string"},
+        "deviceType": {
+          "type": "string",
+          "enum": ["router", "switch", "firewall", "server", "pc", "database", "cloud", "other"],
+          "description": "Device type (for network topology styling)"
+        },
+        "shape": {
+          "type": "string",
+          "enum": ["rect", "ellipse", "diamond", "parallelogram", "rounded", "cylinder", "cloud", "other"],
+          "description": "Node shape (for flowcharts)"
+        },
+        "style": {"$ref": "#/definitions/style"},
+        "geometry": {"$ref": "#/definitions/geometry"}
+      }
+    },
+    "edge": {
+      "type": "object",
+      "required": ["type", "source", "target"],
+      "properties": {
+        "id": {"type": "string", "pattern": "^[a-zA-Z0-9_-]+$"},
+        "type": {"const": "edge"},
+        "source": {"type": "string", "description": "Source node ID"},
+        "target": {"type": "string", "description": "Target node ID"},
+        "label": {"type": "string", "description": "Edge label"},
+        "style": {"$ref": "#/definitions/edgeStyle"}
+      }
+    },
+    "style": {
+      "type": "object",
+      "properties": {
+        "fillColor": {"type": "string", "pattern": "^#[0-9A-Fa-f]{6}$"},
+        "strokeColor": {"type": "string", "pattern": "^#[0-9A-Fa-f]{6}$"},
+        "strokeWidth": {"type": "number", "minimum": 0},
+        "fontColor": {"type": "string", "pattern": "^#[0-9A-Fa-f]{6}$"},
+        "fontSize": {"type": "number", "minimum": 6},
+        "fontStyle": {"type": "string", "enum": ["normal", "bold", "italic"]},
+        "borderRadius": {"type": "number", "minimum": 0},
+        "dashPattern": {"type": "string", "description": "e.g., '5,5' for dashed line"}
+      }
+    },
+    "edgeStyle": {
+      "type": "object",
+      "properties": {
+        "strokeColor": {"type": "string", "pattern": "^#[0-9A-Fa-f]{6}$"},
+        "strokeWidth": {"type": "number", "minimum": 0},
+        "endArrow": {"type": "string", "enum": ["none", "arrow", "circle", "diamond"]},
+        "startArrow": {"type": "string", "enum": ["none", "arrow", "circle", "diamond"]},
+        "dashPattern": {"type": "string", "description": "e.g., '5,5' for dashed line"},
+        "lineStyle": {"type": "string", "enum": ["straight", "orthogonal", "curved"]}
+      }
+    },
+    "geometry": {
+      "type": "object",
+      "required": ["x", "y"],
+      "properties": {
+        "x": {"type": "number"},
+        "y": {"type": "number"},
+        "width": {"type": "number", "minimum": 10},
+        "height": {"type": "number", "minimum": 10}
+      }
+    }
+  }
+}
+```
+
+## Common Element Types
+
+### Container (for nested structures)
+
+Used for environments, datacenters, zones, or any grouping.
+
+```json
+{
+  "id": "env-1",
+  "type": "container",
+  "name": "省中心管理端",
+  "level": "environment",
+  "style": {
+    "fillColor": "#e1d5e7",
+    "strokeColor": "#9673a6",
+    "fontSize": 14,
+    "fontStyle": "bold"
+  },
+  "geometry": {
+    "x": 220,
+    "y": 750,
+    "width": 520,
+    "height": 450
+  },
+  "children": [...]
+}
+```
+
+### Node (individual elements)
+
+Used for devices, components, steps, etc.
+
+```json
+{
+  "id": "device-1",
+  "type": "node",
+  "name": "路由器1",
+  "deviceType": "router",
+  "style": {
+    "fillColor": "none",
+    "strokeColor": "#607D8B",
+    "strokeWidth": 2,
+    "fontColor": "#455A64",
+    "fontSize": 12,
+    "fontStyle": "bold"
+  },
+  "geometry": {
+    "x": 8,
+    "y": 25,
+    "width": 55,
+    "height": 25
+  }
+}
+```
+
+### Edge (connections)
+
+Used to connect nodes.
+
+```json
+{
+  "id": "edge-1",
+  "type": "edge",
+  "source": "device-1",
+  "target": "device-2",
+  "label": "专线连接",
+  "style": {
+    "strokeColor": "#FF3333",
+    "strokeWidth": 2,
+    "endArrow": "arrow",
+    "lineStyle": "straight"
+  }
+}
+```
+
+## Network Topology Example
+
+```json
+{
+  "format": "drawio",
+  "title": "新架构",
+  "elements": [
+    {
+      "id": "env-1",
+      "type": "container",
+      "name": "省中心管理端",
+      "level": "environment",
+      "style": {
+        "fillColor": "#e1d5e7",
+        "strokeColor": "#9673a6",
+        "fontSize": 14,
+        "fontStyle": "bold"
+      },
+      "geometry": {"x": 220, "y": 750, "width": 520, "height": 450},
+      "children": [
+        {
+          "id": "dc-1",
+          "type": "container",
+          "name": "省中心机房",
+          "level": "datacenter",
+          "style": {
+            "fillColor": "#d5e8d4",
+            "strokeColor": "#82b366",
+            "fontSize": 12,
+            "fontStyle": "bold"
+          },
+          "geometry": {"x": 15, "y": 30, "width": 485, "height": 400},
+          "children": [
+            {
+              "id": "zone-1",
+              "type": "container",
+              "name": "上联区",
+              "level": "zone",
+              "style": {
+                "fillColor": "#fff2cc",
+                "strokeColor": "#d6b656",
+                "fontSize": 10,
+                "fontStyle": "bold"
+              },
+              "geometry": {"x": 93.5, "y": 40, "width": 145, "height": 70},
+              "children": [
+                {
+                  "id": "router-1",
+                  "type": "node",
+                  "name": "路由器1",
+                  "deviceType": "router",
+                  "style": {
+                    "fillColor": "none",
+                    "strokeColor": "#607D8B",
+                    "strokeWidth": 2
+                  },
+                  "geometry": {"x": 8, "y": 25, "width": 55, "height": 25}
+                },
+                {
+                  "id": "router-2",
+                  "type": "node",
+                  "name": "路由器2",
+                  "deviceType": "router",
+                  "style": {
+                    "fillColor": "none",
+                    "strokeColor": "#607D8B",
+                    "strokeWidth": 2
+                  },
+                  "geometry": {"x": 68, "y": 25, "width": 55, "height": 25}
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "edge-1",
+      "type": "edge",
+      "source": "router-1",
+      "target": "router-2",
+      "style": {
+        "strokeColor": "#333333",
+        "endArrow": "none"
+      }
+    }
+  ]
+}
+```
+
+## Flowchart Example (Mermaid)
+
+```json
+{
+  "format": "mermaid",
+  "title": "用户登录流程",
+  "elements": [
+    {
+      "id": "start",
+      "type": "node",
+      "name": "开始",
+      "shape": "rounded",
+      "geometry": {"x": 200, "y": 0}
+    },
+    {
+      "id": "input",
+      "type": "node",
+      "name": "输入用户名密码",
+      "shape": "parallelogram",
+      "geometry": {"x": 200, "y": 100}
+    },
+    {
+      "id": "validate",
+      "type": "node",
+      "name": "验证",
+      "shape": "diamond",
+      "geometry": {"x": 200, "y": 200}
+    },
+    {
+      "id": "success",
+      "type": "node",
+      "name": "登录成功",
+      "shape": "rounded",
+      "geometry": {"x": 100, "y": 350}
+    },
+    {
+      "id": "error",
+      "type": "node",
+      "name": "显示错误",
+      "shape": "rect",
+      "geometry": {"x": 300, "y": 350}
+    },
+    {
+      "id": "edge-1",
+      "type": "edge",
+      "source": "start",
+      "target": "input"
+    },
+    {
+      "id": "edge-2",
+      "type": "edge",
+      "source": "input",
+      "target": "validate"
+    },
+    {
+      "id": "edge-3",
+      "type": "edge",
+      "source": "validate",
+      "target": "success",
+      "label": "成功"
+    },
+    {
+      "id": "edge-4",
+      "type": "edge",
+      "source": "validate",
+      "target": "error",
+      "label": "失败"
+    }
+  ]
+}
+```
+
+## Sequence Diagram Example (Mermaid)
+
+```json
+{
+  "format": "mermaid",
+  "title": "API调用流程",
+  "elements": [
+    {
+      "id": "user",
+      "type": "node",
+      "name": "用户"
+    },
+    {
+      "id": "frontend",
+      "type": "node",
+      "name": "前端"
+    },
+    {
+      "id": "api",
+      "type": "node",
+      "name": "API服务"
+    },
+    {
+      "id": "db",
+      "type": "node",
+      "name": "数据库"
+    },
+    {
+      "id": "edge-1",
+      "type": "edge",
+      "source": "user",
+      "target": "frontend",
+      "label": "点击登录"
+    },
+    {
+      "id": "edge-2",
+      "type": "edge",
+      "source": "frontend",
+      "target": "api",
+      "label": "POST /login"
+    },
+    {
+      "id": "edge-3",
+      "type": "edge",
+      "source": "api",
+      "target": "db",
+      "label": "查询用户"
+    },
+    {
+      "id": "edge-4",
+      "type": "edge",
+      "source": "db",
+      "target": "api",
+      "label": "返回数据",
+      "style": {
+        "lineStyle": "dashed",
+        "endArrow": "none"
+      }
+    }
+  ]
+}
+```
+
+## Style Presets
+
+### Network Topology Levels
+
+| Level | fillColor | strokeColor | fontSize |
+|-------|-----------|-------------|----------|
+| environment | `#e1d5e7` | `#9673a6` | 14 |
+| datacenter | `#d5e8d4` | `#82b366` | 12 |
+| zone | `#fff2cc` | `#d6b656` | 10 |
+
+### Device Types
+
+| deviceType | strokeColor |
+|------------|-------------|
+| router | `#607D8B` |
+| switch | `#4CAF50` |
+| firewall | `#F44336` |
+| server | `#2196F3` |
+| pc | `#607D8B` |
+| database | `#9C27B0` |
+| cloud | `#9E9E9E` |
+
+### Flowchart Shapes
+
+| shape | Usage |
+|-------|-------|
+| `rect` | Process step |
+| `rounded` | Start/end |
+| `parallelogram` | Input/output |
+| `diamond` | Decision |
+| `cylinder` | Database |
+| `cloud` | External system |
+
+## Best Practices
+
+### ID Generation
+- Use descriptive prefixes: `env-`, `dc-`, `zone-`, `device-`, `edge-`
+- Keep IDs short but unique: `env-1`, `router-2`
+- Avoid spaces or special characters (except `_`, `-`)
+
+### Geometry for Network Topology
+- Container coordinates are relative to their parent
+- Device coordinates are relative to their containing zone
+- Standard device size: `55` x `25`
+- Leave padding: at least `10` units between elements
+
+### Edge Routing
+- For drawio: source/target can reference any node ID
+- Edges can cross container boundaries
+- Use `lineStyle: "orthogonal"` for clean routing in complex diagrams
+
+### Performance
+- Limit total elements to ~100 for good performance
+- Use containers to group related elements
+- For very large diagrams, split into multiple pages
--- a/references/network-topology-examples.md
+++ b/references/network-topology-examples.md
@@ -0,0 +1,524 @@
+# Network Topology Examples
+
+Common patterns for network topology diagrams in Draw.io format.
+
+## Basic 3-Level Topology
+
+Simple structure: Environment → Datacenter → Zone → Device
+
+```json
+{
+  "format": "drawio",
+  "title": "基本网络拓扑",
+  "elements": [
+    {
+      "id": "env-1",
+      "type": "container",
+      "name": "生产环境",
+      "level": "environment",
+      "style": {
+        "fillColor": "#e1d5e7",
+        "strokeColor": "#9673a6",
+        "fontSize": 14,
+        "fontStyle": "bold"
+      },
+      "geometry": {"x": 100, "y": 100, "width": 400, "height": 300},
+      "children": [
+        {
+          "id": "dc-1",
+          "type": "container",
+          "name": "主数据中心",
+          "level": "datacenter",
+          "style": {
+            "fillColor": "#d5e8d4",
+            "strokeColor": "#82b366",
+            "fontSize": 12,
+            "fontStyle": "bold"
+          },
+          "geometry": {"x": 20, "y": 30, "width": 360, "height": 250},
+          "children": [
+            {
+              "id": "zone-1",
+              "type": "container",
+              "name": "DMZ区",
+              "level": "zone",
+              "style": {
+                "fillColor": "#fff2cc",
+                "strokeColor": "#d6b656",
+                "fontSize": 10,
+                "fontStyle": "bold"
+              },
+              "geometry": {"x": 30, "y": 30, "width": 140, "height": 100},
+              "children": [
+                {
+                  "id": "fw-1",
+                  "type": "node",
+                  "name": "防火墙1",
+                  "deviceType": "firewall",
+                  "style": {"strokeColor": "#F44336"},
+                  "geometry": {"x": 10, "y": 35, "width": 55, "height": 25}
+                },
+                {
+                  "id": "fw-2",
+                  "type": "node",
+                  "name": "防火墙2",
+                  "deviceType": "firewall",
+                  "style": {"strokeColor": "#F44336"},
+                  "geometry": {"x": 75, "y": 35, "width": 55, "height": 25}
+                }
+              ]
+            },
+            {
+              "id": "zone-2",
+              "type": "container",
+              "name": "应用区",
+              "level": "zone",
+              "style": {
+                "fillColor": "#fff2cc",
+                "strokeColor": "#d6b656",
+                "fontSize": 10,
+                "fontStyle": "bold"
+              },
+              "geometry": {"x": 190, "y": 30, "width": 140, "height": 100},
+              "children": [
+                {
+                  "id": "app-1",
+                  "type": "node",
+                  "name": "应用服务器1",
+                  "deviceType": "server",
+                  "style": {"strokeColor": "#2196F3"},
+                  "geometry": {"x": 10, "y": 35, "width": 55, "height": 25}
+                },
+                {
+                  "id": "app-2",
+                  "type": "node",
+                  "name": "应用服务器2",
+                  "deviceType": "server",
+                  "style": {"strokeColor": "#2196F3"},
+                  "geometry": {"x": 75, "y": 35, "width": 55, "height": 25}
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "edge-1",
+      "type": "edge",
+      "source": "fw-1",
+      "target": "app-1",
+      "style": {"strokeColor": "#333333", "endArrow": "none"}
+    },
+    {
+      "id": "edge-2",
+      "type": "edge",
+      "source": "fw-2",
+      "target": "app-2",
+      "style": {"strokeColor": "#333333", "endArrow": "none"}
+    }
+  ]
+}
+```
+
+## Multi-Environment Topology
+
+Multiple environments with cross-environment connections.
+
+```json
+{
+  "format": "drawio",
+  "title": "多环境网络拓扑",
+  "elements": [
+    {
+      "id": "env-prod",
+      "type": "container",
+      "name": "生产环境",
+      "level": "environment",
+      "style": {
+        "fillColor": "#e1d5e7",
+        "strokeColor": "#9673a6",
+        "fontSize": 14
+      },
+      "geometry": {"x": 50, "y": 50, "width": 350, "height": 300},
+      "children": [
+        {
+          "id": "dc-prod",
+          "type": "container",
+          "name": "生产数据中心",
+          "level": "datacenter",
+          "style": {"fillColor": "#d5e8d4", "strokeColor": "#82b366"},
+          "geometry": {"x": 20, "y": 30, "width": 310, "height": 250},
+          "children": [
+            {
+              "id": "zone-prod-app",
+              "type": "container",
+              "name": "应用区",
+              "level": "zone",
+              "geometry": {"x": 20, "y": 20, "width": 120, "height": 80},
+              "children": [
+                {
+                  "id": "prod-app-1",
+                  "type": "node",
+                  "name": "应用服务器",
+                  "deviceType": "server",
+                  "style": {"strokeColor": "#2196F3"},
+                  "geometry": {"x": 10, "y": 25, "width": 55, "height": 25}
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "env-dr",
+      "type": "container",
+      "name": "灾备环境",
+      "level": "environment",
+      "style": {
+        "fillColor": "#e1d5e7",
+        "strokeColor": "#9673a6",
+        "fontSize": 14
+      },
+      "geometry": {"x": 450, "y": 50, "width": 350, "height": 300},
+      "children": [
+        {
+          "id": "dc-dr",
+          "type": "container",
+          "name": "灾备数据中心",
+          "level": "datacenter",
+          "style": {"fillColor": "#d5e8d4", "strokeColor": "#82b366"},
+          "geometry": {"x": 20, "y": 30, "width": 310, "height": 250},
+          "children": [
+            {
+              "id": "zone-dr-app",
+              "type": "container",
+              "name": "应用区",
+              "level": "zone",
+              "geometry": {"x": 20, "y": 20, "width": 120, "height": 80},
+              "children": [
+                {
+                  "id": "dr-app-1",
+                  "type": "node",
+                  "name": "应用服务器",
+                  "deviceType": "server",
+                  "style": {"strokeColor": "#2196F3"},
+                  "geometry": {"x": 10, "y": 25, "width": 55, "height": 25}
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "edge-dr",
+      "type": "edge",
+      "source": "prod-app-1",
+      "target": "dr-app-1",
+      "label": "数据同步",
+      "style": {
+        "strokeColor": "#FF3333",
+        "strokeWidth": 2,
+        "dashPattern": "5,5"
+      }
+    }
+  ]
+}
+```
+
+## 4-Level Nested Topology
+
+Full hierarchy as shown in the 贵州.drawio example.
+
+```json
+{
+  "format": "drawio",
+  "title": "4层嵌套网络拓扑",
+  "elements": [
+    {
+      "id": "env-1",
+      "type": "container",
+      "name": "省中心管理端",
+      "level": "environment",
+      "style": {
+        "fillColor": "#e1d5e7",
+        "strokeColor": "#9673a6",
+        "fontSize": 14
+      },
+      "geometry": {"x": 220, "y": 750, "width": 520, "height": 450},
+      "children": [
+        {
+          "id": "dc-1",
+          "type": "container",
+          "name": "省中心机房",
+          "level": "datacenter",
+          "style": {
+            "fillColor": "#d5e8d4",
+            "strokeColor": "#82b366",
+            "fontSize": 12
+          },
+          "geometry": {"x": 15, "y": 30, "width": 485, "height": 400},
+          "children": [
+            {
+              "id": "zone-1",
+              "type": "container",
+              "name": "上联区",
+              "level": "zone",
+              "style": {
+                "fillColor": "#fff2cc",
+                "strokeColor": "#d6b656",
+                "fontSize": 10
+              },
+              "geometry": {"x": 93.5, "y": 40, "width": 145, "height": 70},
+              "children": [
+                {
+                  "id": "router-1",
+                  "type": "node",
+                  "name": "路由器1",
+                  "deviceType": "router",
+                  "style": {"strokeColor": "#607D8B"},
+                  "geometry": {"x": 8, "y": 25, "width": 55, "height": 25}
+                },
+                {
+                  "id": "router-2",
+                  "type": "node",
+                  "name": "路由器2",
+                  "deviceType": "router",
+                  "style": {"strokeColor": "#607D8B"},
+                  "geometry": {"x": 68, "y": 25, "width": 55, "height": 25}
+                }
+              ]
+            },
+            {
+              "id": "zone-2",
+              "type": "container",
+              "name": "汇聚区",
+              "level": "zone",
+              "style": {
+                "fillColor": "#fff2cc",
+                "strokeColor": "#d6b656",
+                "fontSize": 10
+              },
+              "geometry": {"x": 93.5, "y": 165, "width": 145, "height": 70},
+              "children": [
+                {
+                  "id": "switch-1",
+                  "type": "node",
+                  "name": "汇聚交换机1",
+                  "deviceType": "switch",
+                  "style": {"strokeColor": "#4CAF50"},
+                  "geometry": {"x": 8, "y": 25, "width": 55, "height": 25}
+                },
+                {
+                  "id": "switch-2",
+                  "type": "node",
+                  "name": "汇聚交换机2",
+                  "deviceType": "switch",
+                  "style": {"strokeColor": "#4CAF50"},
+                  "geometry": {"x": 68, "y": 25, "width": 55, "height": 25}
+                }
+              ]
+            },
+            {
+              "id": "zone-3",
+              "type": "container",
+              "name": "终端区",
+              "level": "zone",
+              "style": {
+                "fillColor": "#fff2cc",
+                "strokeColor": "#d6b656",
+                "fontSize": 10
+              },
+              "geometry": {"x": 315, "y": 90, "width": 145, "height": 150},
+              "children": [
+                {
+                  "id": "pc-1",
+                  "type": "node",
+                  "name": "管理端PC1",
+                  "deviceType": "pc",
+                  "style": {"strokeColor": "#607D8B"},
+                  "geometry": {"x": 8, "y": 110, "width": 55, "height": 25}
+                },
+                {
+                  "id": "pc-2",
+                  "type": "node",
+                  "name": "管理端PC2",
+                  "deviceType": "pc",
+                  "style": {"strokeColor": "#607D8B"},
+                  "geometry": {"x": 68, "y": 110, "width": 55, "height": 25}
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "env-2",
+      "type": "container",
+      "name": "生产网",
+      "level": "environment",
+      "style": {
+        "fillColor": "#e1d5e7",
+        "strokeColor": "#9673a6",
+        "fontSize": 14
+      },
+      "geometry": {"x": 470, "y": 110, "width": 218, "height": 170},
+      "children": [
+        {
+          "id": "dc-2",
+          "type": "container",
+          "name": "西五环",
+          "level": "datacenter",
+          "style": {
+            "fillColor": "#d5e8d4",
+            "strokeColor": "#82b366",
+            "fontSize": 12
+          },
+          "geometry": {"x": 15, "y": 30, "width": 173, "height": 115},
+          "children": [
+            {
+              "id": "zone-4",
+              "type": "container",
+              "name": "内联接入区",
+              "level": "zone",
+              "style": {
+                "fillColor": "#fff2cc",
+                "strokeColor": "#d6b656",
+                "fontSize": 10
+              },
+              "geometry": {"x": 8, "y": 25, "width": 145, "height": 70},
+              "children": [
+                {
+                  "id": "router-3",
+                  "type": "node",
+                  "name": "路由器1",
+                  "deviceType": "router",
+                  "style": {"strokeColor": "#607D8B"},
+                  "geometry": {"x": 8, "y": 25, "width": 55, "height": 25}
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "edge-1",
+      "type": "edge",
+      "source": "router-1",
+      "target": "switch-1",
+      "style": {"endArrow": "none"}
+    },
+    {
+      "id": "edge-2",
+      "type": "edge",
+      "source": "router-1",
+      "target": "switch-2",
+      "style": {"endArrow": "none"}
+    },
+    {
+      "id": "edge-3",
+      "type": "edge",
+      "source": "router-2",
+      "target": "switch-1",
+      "style": {"endArrow": "none"}
+    },
+    {
+      "id": "edge-4",
+      "type": "edge",
+      "source": "router-2",
+      "target": "switch-2",
+      "style": {"endArrow": "none"}
+    },
+    {
+      "id": "edge-5",
+      "type": "edge",
+      "source": "switch-1",
+      "target": "switch-2",
+      "style": {"endArrow": "none"}
+    },
+    {
+      "id": "edge-6",
+      "type": "edge",
+      "source": "router-1",
+      "target": "router-3",
+      "label": "长途专线",
+      "style": {"strokeColor": "#FF3333"}
+    }
+  ]
+}
+```
+
+## Common Zone Types
+
+| Zone Name | Typical Devices | Use Case |
+|-----------|-----------------|----------|
+| 上联区 | Routers | External network connections |
+| 汇聚区 | Core Switches | Traffic aggregation |
+| 终端区 | Switches, PCs | End-user devices |
+| 彩银区 | Firewalls, Routers | Financial network integration |
+| 内联接入区 | Routers | Internal network connections |
+| 外联接入区 | Routers | External partner connections |
+| DMZ区 | Firewalls, Public Servers | Public-facing services |
+| 应用区 | Application Servers | Application deployment |
+| 数据区 | Database Servers | Data storage |
+| 管理区 | Management Servers | Administrative access |
+
+## Connection Patterns
+
+### Full Mesh (All-to-All)
+```json
+{"type": "edge", "source": "r1", "target": "r2"},
+{"type": "edge", "source": "r1", "target": "r3"},
+{"type": "edge", "source": "r2", "target": "r3"}
+```
+
+### Redundant Pair (Active/Active)
+```json
+{"type": "edge", "source": "fw-1", "target": "sw-1"},
+{"type": "edge", "source": "fw-1", "target": "sw-2"},
+{"type": "edge", "source": "fw-2", "target": "sw-1"},
+{"type": "edge", "source": "fw-2", "target": "sw-2"}
+```
+
+### Hierarchy (Upstream → Downstream)
+```json
+{"type": "edge", "source": "router", "target": "firewall"},
+{"type": "edge", "source": "firewall", "target": "switch"},
+{"type": "edge", "source": "switch", "target": "server"}
+```
+
+### Cross-Environment (Production → DR)
+```json
+{
+  "type": "edge",
+  "source": "prod-db",
+  "target": "dr-db",
+  "label": "数据同步",
+  "style": {
+    "strokeColor": "#FF3333",
+    "dashPattern": "5,5"
+  }
+}
+```
+
+## Layout Guidelines
+
+### Container Spacing
+- Environment to Environment: minimum 100px
+- Datacenter to Datacenter: minimum 50px
+- Zone to Zone: minimum 30px
+
+### Device Placement
+- Standard device size: 55 x 25
+- Horizontal spacing: 10-15px
+- Vertical spacing: 10-15px
+- Alignment: Top-left corner within zone
+
+### Edge Routing
+- Use `lineStyle: "orthogonal"` for clean connections
+- Avoid crossing over other devices when possible
+- Use different stroke colors for different connection types (e.g., red for cross-site links)