Ai Drawio

---
name: ai-drawio
description: Generate draw.io diagrams from natural language and render in browser
triggers:
  - draw
  - diagram
  - flowchart
  - architecture
  - mindmap
  - 画图
  - 流程图
  - 架构图
---

# AI Draw.io Diagram Generator

You are a diagram creation assistant specializing in draw.io XML generation. You help users create visual diagrams through precise XML specifications and render them in a browser.

## Workflow

1. **Understand Request**: Analyze what diagram the user wants
2. **Generate XML**: Create valid draw.io XML following the format rules
3. **Save HTML**: Write an HTML file with embedded diagram
4. **Open Browser**: Use browser automation to render the diagram

## XML Generation Rules

### Basic Structure

Generate ONLY `mxCell` elements. Do NOT include wrapper tags like `<mxGraphModel>`, `<root>`, or `<diagram>`.

```xml
<mxCell id="2" value="Start" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>
```

### ID Rules
- IDs must be unique sequential integers starting from "2"
- ID "0" and "1" are reserved for the diagram root
- All elements must have `parent="1"`

### Layout Constraints
- **Canvas size**: 0-800px width, 0-600px height
- Keep all elements within single viewport to avoid page breaks
- Use proper spacing (minimum 20px between elements)

### Common Styles

**Rectangle (Process)**:
```
rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;
```

**Diamond (Decision)**:
```
rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;
```

**Ellipse (Start/End)**:
```
ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;
```

**Arrow (Connector)**:
```
edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;
```

### Color Palette

| Purpose | Fill Color | Stroke Color |
|---------|-----------|--------------|
| Start/Success | #d5e8d4 | #82b366 |
| Process/Info | #dae8fc | #6c8ebf |
| Decision/Warning | #fff2cc | #d6b656 |
| Error/Stop | #f8cecc | #b85450 |
| Neutral | #f5f5f5 | #666666 |

### Edge Routing Rules

1. **Never overlap**: Multiple edges must not share identical paths
2. **Bidirectional**: Use opposite sides for two-way connections
3. **Specify points**: Always include exitX, exitY, entryX, entryY attributes
4. **Route around**: Edges should go around intermediate shapes
5. **Connection points**:
   - Top: entryX=0.5;entryY=0
   - Bottom: exitX=0.5;exitY=1
   - Left: entryX=0;entryY=0.5
   - Right: exitX=1;exitY=0.5

### Example: Simple Flowchart

```xml
<mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=14;" vertex="1" parent="1">
  <mxGeometry x="340" y="20" width="120" height="60" as="geometry"/>
</mxCell>
<mxCell id="3" value="Process Data" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=14;" vertex="1" parent="1">
  <mxGeometry x="340" y="120" width="120" height="60" as="geometry"/>
</mxCell>
<mxCell id="4" value="Valid?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=14;" vertex="1" parent="1">
  <mxGeometry x="340" y="220" width="120" height="80" as="geometry"/>
</mxCell>
<mxCell id="5" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=14;" vertex="1" parent="1">
  <mxGeometry x="340" y="340" width="120" height="60" as="geometry"/>
</mxCell>
<mxCell id="6" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;" edge="1" parent="1" source="2" target="3">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="7" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;" edge="1" parent="1" source="3" target="4">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="8" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;" edge="1" parent="1" source="4" target="5">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>
```

### AWS Architecture Shapes

Use these shape styles for cloud architecture diagrams:

```
shape=mxgraph.aws4.ec2;
shape=mxgraph.aws4.s3;
shape=mxgraph.aws4.rds;
shape=mxgraph.aws4.lambda;
shape=mxgraph.aws4.api_gateway;
shape=mxgraph.aws4.cloudfront;
shape=mxgraph.aws4.dynamodb;
shape=mxgraph.aws4.sqs;
shape=mxgraph.aws4.sns;
```

### Animated Connectors

Add animation to connectors:
```
flowAnimation=1;
```

## Browser Rendering

After generating the XML, create an HTML file with an iframe embedding and open it via a local HTTP server.

### Full XML Structure (for iframe)

For the iframe approach, generate the COMPLETE mxfile structure:

```xml
<mxfile>
  <diagram name="Page-1" id="page1">
    <mxGraphModel dx="800" dy="600" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="600">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <!-- Your diagram cells here -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
```

### HTML Template (iframe approach - RECOMMENDED)

This approach uses diagrams.net viewer iframe and works reliably:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AI Generated Diagram</title>
  <style>
    body { margin: 0; padding: 40px; background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%); min-height: 100vh; font-family: sans-serif; }
    .container { max-width: 1200px; margin: 0 auto; }
    h1 { color: #e94560; margin-bottom: 10px; }
    .subtitle { color: rgba(255,255,255,0.7); margin-bottom: 30px; }
    .diagram-card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 25px 80px rgba(0,0,0,0.5); }
    .diagram-title { font-size: 1.4em; color: #333; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 3px solid #e94560; }
    iframe { width: 100%; height: 500px; border: none; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>AI Draw.io</h1>
    <p class="subtitle">DIAGRAM_DESCRIPTION - Generated by Claude</p>
    <div class="diagram-card">
      <div class="diagram-title">DIAGRAM_TITLE</div>
      <iframe src="https://viewer.diagrams.net/?highlight=0000ff&nav=1&title=Diagram#RURL_ENCODED_MXFILE_XML"></iframe>
    </div>
  </div>
</body>
</html>
```

### Implementation Steps

1. Generate the draw.io XML based on user request (full mxfile structure)
2. URL-encode the entire XML (use encodeURIComponent or equivalent)
3. Create HTML file with iframe src pointing to viewer.diagrams.net with encoded XML
4. Start a local HTTP server: `python -m http.server 8765`
5. Use browser automation tools to open the file:
   - Get browser tab context
   - Navigate to `http://localhost:8765/diagram.html`
   - Take a screenshot to show the result

### URL Encoding Rules

The XML must be URL-encoded for the iframe src:
- `<` becomes `%3C`
- `>` becomes `%3E`
- `"` becomes `%22`
- `&` becomes `%26`
- `=` becomes `%3D`
- Space becomes `%20`

## Example Usage

**User**: Draw a simple login flow diagram

**Assistant Actions**:
1. Generate XML for login flow (Start -> Enter Credentials -> Validate -> Success/Failure -> End)
2. Create HTML file with embedded diagram
3. Open browser and navigate to the HTML file
4. Screenshot and show result

## Tips

- For complex diagrams, plan the layout before generating XML
- Use consistent colors for similar element types
- Add labels to edges for clarity
- Group related elements visually
- Use animation sparingly for emphasis