--- 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 ``, ``, or ``. ```xml ``` ### 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 ``` ### 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 ``` ### HTML Template (iframe approach - RECOMMENDED) This approach uses diagrams.net viewer iframe and works reliably: ```html AI Generated Diagram

AI Draw.io

DIAGRAM_DESCRIPTION - Generated by Claude

DIAGRAM_TITLE

``` ### 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

GBSOSS

diagram-generator

skill-from-masters