XML Graphic Generator (drawio Format)

Core Workflow

User Description → Parse Requirements → Design Graphics → Generate drawio XML → Validate Output → Save File

1. Receive User Description
   • Users may describe the required graph type (flowchart, card, chart, etc.), layout (horizontal, vertical, grid, etc.), content (text, emoji), and style (minimalist, professional, cute, etc.).
   • Parse user input and extract key information to guide subsequent graphic design and generation.
2. Parse User Requirements
   • Determine the graph type, structure, elements, layout, and color scheme needed. If unclear, ask the user for confirmation.
   • Evaluate the number of elements, group them reasonably, and avoid overloading a single graphic with too much content.
3. Design Graphic Layout and Elements Based on Analysis Results
   • Define the overall structure and hierarchical relationships of the graph
   • Design the style of each element (color, shape, size, etc.)
   • Determine the connection method between elements (lines, arrows, etc.)
4. Generate drawio XML Code
   • Build graphics using drawio's mxGraph XML format
   • Embed CSS styles into SVG
   • Apply filters and shadow effects according to the selected style
5. Validate the Generated Graph to Ensure It Meets User Requirements and Expected Visual Effects
   • Background Mode Confirmation:
     • Confirm the background mode selected by the user (light/dark)
     • Use light background by default if not specified
     • Use light-colored text and borders in dark mode
   • Basic Structure Validation (Avoid element overlap and layout distortion):
     • Check if the graph structure and elements are correct
     • Ensure all node coordinates are calculated accurately with no overlap
     • Verify that connection line start/end points precisely point to node edges
     • Check that the spacing between text and graphic borders is ≥8px to avoid text overflow
   • Layout Specification Validation (Avoid excessive blank space and overcrowding):
     • Canvas size should be compact and reasonable, with utilization rate ideally 60%-80%
     • Node spacing should be reasonable, neither too large nor too small
     • Branch paths should be clear with no path crossings
     • Polyline turning points should not overlap with nodes
   • Display Integrity Assurance (Avoid incomplete display):
     • Calculate canvas size:

       Canvas Height = Title Height + Total Content Height + Node Spacing × (Number of Nodes - 1) + Legend Area Height (if any) + Margins

     • Ensure all nodes, text, connections, and arrows are within the canvas range
     • Reserve ≥30-40px margins on all sides to avoid content cropping
   • Arrow and Connection Validation (Avoid arrow chaos):
     • Ensure consistent arrow styles
     • Verify accurate arrow pointing with no offset or misalignment
     • Check that polyline path node order is correct with no crossing chaos
     • Verify that dashed lines are only used for asynchronous processes, and error branches use solid lines
   • Robustness Design Check:
     • Avoid nested coordinates; use explicit numerical values for all coordinates
     • Ensure accurate center coordinates for diamond decision nodes, with branches starting from the bottom center
     • Verify that convergence points are directly below branch nodes to avoid path crossings
     • Legends should be placed at the bottom of the graphic, avoiding overlap with the main process, with a dedicated legend area reserved
   • Style and Color Validation:
     • Ensure colors and styles comply with the selected style
     • Verify the correctness and compatibility of drawio XML code
     • Check if the graph layout and element connections are reasonable, lines are clear and accurate, graphics are legible, colors meet expectations, and typesetting is neat
     • Check if arrows in the graph are clear, connections are normal, and sizes are appropriate
     • Check if the image can be displayed completely without elements being cropped
   • Complex Flowchart Validation:
     • Use different colors to distinguish branch processes (red for error branches, gray/blue for main lines)
     • Use diamond shapes for conditional decision nodes
     • Use dashed connections for asynchronous processes (only for asynchronous scenarios)
     • Clearly mark convergence points
     • Use dashed boxes to indicate optional areas
6. Output the Final drawio XML File for User Use and Modification
   • Save the drawio XML to the specified path, with the filename ending in

     .drawio

   • Provide the drawio XML code string for users to copy and use

Visual Style Specifications

Background Mode

1. Light Background Mode (Default)

#f8f9fa

#ffffff

#333333

#666666

#999999

#e0e0e0

#999999

#666

2. Dark Background Mode

#1a1a2e

#16213e

#ffffff

#aaaaaa

#888888

#333333

#666666

#555555

#3498db

#2ecc71

#e67e22

#e74c3c

#9b59b6

#1abc9c

#f39c12

#00cec9

• Use light-colored text to ensure contrast
• Appropriately thicken node borders (2-3px) to enhance visibility
• Recommended to use rounded-corner cards to improve visual hierarchy

Color Scheme

#3498db

#2ecc71

#e67e22

#e74c3c

#f8f9fa

#333333

#666666

#e0e0e0

#999999

#3498db

Graphic Specifications

Layout Specifications (Important)

1. Shape Splicing Specification (Avoid不协调圆弧)

<!-- Recommended: Use a single rounded rectangle, distinguish title by different color or position -->
<mxCell id="node1" value="Node Name" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#3498db;strokeWidth=2;fontColor=#333333;fontSize=14;fontStyle=1;shadow=1;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="140" height="60" as="geometry" />
</mxCell>

• Avoid using double-layer shape overlay (a rounded rectangle + a rectangular title bar)
• If you need to distinguish the title area, use color filling instead of overlaying shapes
• Distinguish title text by using bold or different colors, do not create a separate title block
• Directly use

  fontStyle=1

  in drawio to bold text, or use different

  fontColor

  to distinguish titles

2. Line Layout Specification (Avoid Chaos and Overlap)

• Horizontal node spacing: ≥ 40px
• Vertical node spacing: ≥ 30px
• Branch node spacing: Vertical distance before branch point ≥ 50px

• Distance between connection line endpoints and node borders: ≥ 5px
• Polyline turning points: Use integer coordinates
• Avoid three or more paths passing through the same coordinate point
• Prioritize straight lines, followed by polylines, and use curves cautiously
• Use

  edgeStyle=orthogonalEdgeStyle

  to ensure polyline orthogonality

• Deflection angle for double branches: 30-45°
• Reasonable branch expansion angle to avoid crossings
• Convergence points are located directly below all branch nodes

• Connection lines do not pass through other nodes
• Spacing between text and graphic borders ≥ 8px
• Maintain ≥ 30px spacing between legend and main process

drawio XML Format Specifications

Basic Structure

<mxfile host="app.diagrams.net">
  <diagram name="Page-1">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="800" pageHeight="600" math="0" shadow="1">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- Graphic Elements -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Common Element Formats

1. Light Mode Rounded Rectangle Card

<mxCell id="node1" value="Node Name" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#3498db;strokeWidth=2;fontColor=#333333;fontSize=14;fontStyle=1;shadow=1;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="140" height="60" as="geometry" />
</mxCell>

2. Dark Mode Rounded Rectangle Card

<mxCell id="node1" value="Node Name" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#16213e;strokeColor=#3498db;strokeWidth=2;fontColor=#aaaaaa;fontSize=14;fontStyle=1;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="140" height="60" as="geometry" />
</mxCell>

3. Diamond Decision Node

<mxCell id="node2" value="Decision?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#e67e22;strokeWidth=2;fontColor=#333333;fontSize=12;" vertex="1" parent="1">
  <mxGeometry x="200" y="200" width="80" height="80" as="geometry" />
</mxCell>

4. Circular Node

<mxCell id="node3" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#3498db;strokeWidth=2;fontColor=#333333;fontSize=12;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="60" height="60" as="geometry" />
</mxCell>

5. Arrow Connection Line

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

6. Dashed Connection (Asynchronous/Optional Process)

<mxCell id="edge2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#9b59b6;strokeWidth=2;dashed=1;endArrow=classic;endFill=1;" edge="1" parent="1" source="node2" target="node3">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

7. Red Arrow (Error Branch)

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

8. Dashed Box (Optional Area)

<mxCell id="optional" value="Optional Process" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8f9fa;strokeColor=#999999;strokeWidth=1;dashed=1;fontColor=#999999;fontSize=10;" vertex="1" parent="1">
  <mxGeometry x="50" y="200" width="200" height="120" as="geometry" />
</mxCell>

9. Convergence Point

<mxCell id="join" value="" style="ellipse;whiteSpace=wrap;html=1;fillColor=#666666;strokeColor=#666666;strokeWidth=0;" vertex="1" parent="1">
  <mxGeometry x="300" y="400" width="12" height="12" as="geometry" />
</mxCell>

Style Attribute Description

Layered Architecture Diagram Container

<!-- Container Background -->
<mxCell id="layer1" value="" style="rounded=1;whiteSpace=wrap=1;html=1;fillColor=#E3F2FD;strokeColor=#3498db;strokeWidth=1;" vertex="1" parent="1">
  <mxGeometry x="100" y="80" width="900" height="80" as="geometry" />
</mxCell>

<!-- Layer Label -->
<mxCell id="label1" value="① Access Layer" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap=1;rounded=0;fontColor=#3498db;fontSize=14;fontStyle=1;" vertex="1" parent="1">
  <mxGeometry x="110" y="85" width="100" height="20" as="geometry" />
</mxCell>

Execution Steps

Step 1: Parse User Requirements

• Graph Type: Flowchart, card, chart, icon, relationship diagram, architecture diagram
• Layout Description: Horizontal, vertical, grid, circular
• Content: Text, emoji, color preferences
• Style: Minimalist, professional, cute
• Background Mode: Light/Dark (Important: Must be confirmed; light background by default if not specified)

Background Mode Confirmation

1. Ask the user: "Do you need a light or dark background for the graph?"
2. If not specified by the user, default to light background
3. Application Scenario Reference:
   • Light Background: Documents, PPTs, web page displays
   • Dark Background: Code screenshots, IDE matching graphs, dark-themed design drafts

Step 2: Select Template or Create New

1. Horizontal Flowchart - Steps arranged from left to right
2. Vertical Flowchart - Steps arranged from top to bottom
3. Loop Flowchart - Closed loop with connected start and end
4. Card Grid - Multiple cards arranged side by side
5. Comparison Chart - Left-right comparison layout
6. Timeline - Vertical or horizontal timeline
7. Pie/Bar Chart - Data visualization
8. Architecture Diagram - System, deployment, application architecture diagrams, which should be displayed in layers
9. Table Comparison - Data table visualization

Step 3: Generate drawio XML Code

Light Background Template

<mxfile host="app.diagrams.net">
  <diagram name="Page-1">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="800" pageHeight="600" math="0" shadow="1">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        
        <!-- Background -->
        <mxCell id="bg" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f8f9fa;strokeColor=#e0e0e0;" vertex="1" parent="1">
          <mxGeometry x="0" y="0" width="800" height="600" as="geometry" />
        </mxCell>
        
        <!-- Title -->
        <mxCell id="title" value="Graphic Title" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap=1;rounded=0;fontSize=20;fontStyle=1;fontColor=#333333;" vertex="1" parent="1">
          <mxGeometry x="300" y="20" width="200" height="30" as="geometry" />
        </mxCell>
        
        <!-- Graphic Content -->
        ...
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Dark Background Template

<mxfile host="app.diagrams.net">
  <diagram name="Page-1">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="800" pageHeight="600" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        
        <!-- Dark Background -->
        <mxCell id="bg" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#1a1a2e;strokeColor=#333333;" vertex="1" parent="1">
          <mxGeometry x="0" y="0" width="800" height="600" as="geometry" />
        </mxCell>
        
        <!-- Title -->
        <mxCell id="title" value="Graphic Title" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap=1;rounded=0;fontSize=20;fontStyle=1;fontColor=#ffffff;" vertex="1" parent="1">
          <mxGeometry x="300" y="20" width="200" height="30" as="geometry" />
        </mxCell>
        
        <!-- Graphic Content -->
        <!-- Card Example -->
        <mxCell id="node1" value="Node Content" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#16213e;strokeColor=#3498db;strokeWidth=2;fontColor=#aaaaaa;fontSize=12;" vertex="1" parent="1">
          <mxGeometry x="100" y="80" width="140" height="60" as="geometry" />
        </mxCell>
        
        ...
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

#1a1a2e

#16213e

#ffffff

#aaaaaa

#888888

#333333

#666

#3498db

#2ecc71

#e74c3c

Step 4: Save File

.drawio

Arrow Specifications

Arrow Styles

Line Styles

• Error branches must use solid lines, distinguished by color (red), not dashed lines
• Dashed lines are only used to represent asynchronous, callback, scheduled task, and other non-synchronous scenarios

Arrow Endpoint Styles

<!-- Classic Arrow -->
endArrow=classic;endFill=1;

<!-- Hollow Arrow -->
endArrow=classicEmpty;endFill=0;

<!-- Diamond Endpoint -->
endArrow=diamond;endFill=1;

Flowchart Specifications

Canvas Size Calculation Rules

Canvas Height = Title Height + Total Content Height + Node Spacing × (Number of Nodes - 1) + Margins
Canvas Width = Margins + Maximum Node Width × Number of Columns + Column Spacing × (Number of Columns - 1) + Margins

Node Arrangement

• Horizontal Process: Nodes arranged horizontally with spacing 40-60px
• Vertical Process: Nodes arranged vertically with spacing 30-50px

Connection Line Types

Straight Connection

<mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;strokeColor=#999999;strokeWidth=2;endArrow=classic;" edge="1" parent="1" source="node1" target="node2">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

Polyline Connection (Path Direction Change)

<mxCell id="edge2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;strokeColor=#999999;strokeWidth=2;endArrow=classic;" edge="1" parent="1" source="node2" target="node3">
  <mxGeometry relative="1" as="geometry">
    <Array as="points">
      <Object x="250" y="180" />
    </Array>
  </mxGeometry>
</mxCell>

Curve Connection (Loop/Backward)

<mxCell id="edge3" style="edgeStyle=elbowEdgeStyle;rounded=1;html=1;strokeColor=#9b59b6;strokeWidth=2;dashed=1;endArrow=classic;" edge="1" parent="1" source="node3" target="node1">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

Branching and Convergence

Diamond Decision Node

<mxCell id="decision" value="Decision Condition" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#e67e22;strokeWidth=2;fontColor=#333333;fontSize=12;" vertex="1" parent="1">
  <mxGeometry x="200" y="150" width="80" height="80" as="geometry" />
</mxCell>

Branch Connection Line Labeling

<mxCell id="label1" value="Yes" style="text;html=1;strokeColor=none;fillColor=none;align=center;fontColor=#666666;fontSize=10;" vertex="1" parent="1">
  <mxGeometry x="220" y="230" width="30" height="20" as="geometry" />
</mxCell>

Architecture Diagram Specifications

Layered Structure

1. Access Layer (Client, CDN, Load Balancer, Gateway)
2. Service Layer (Business Service, Authentication Service, Message Queue)
3. Data Layer (Redis, MySQL, MongoDB)
4. Infrastructure Layer (Docker, K8s, Monitoring)

Architecture Diagram Component Templates

Service Node

<mxCell id="service1" value="Service Name" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E8F5E9;strokeColor=#2ecc71;strokeWidth=2;fontColor=#333333;fontSize=12;shadow=1;" vertex="1" parent="1">
  <mxGeometry x="150" y="100" width="100" height="40" as="geometry" />
</mxCell>

Database Node

<mxCell id="db1" value="Database" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=5;fillColor=#FCE4EC;strokeColor=#e74c3c;strokeWidth=2;fontColor=#333333;fontSize=12;" vertex="1" parent="1">
  <mxGeometry x="300" y="350" width="60" height="50" as="geometry" />
</mxCell>

Queue Node

<mxCell id="queue1" value="Message Queue" style="shape=hexagon;whiteSpace=wrap;html=1;fillColor=#F3E5F5;strokeColor=#9b59b6;strokeWidth=2;fontColor=#333333;fontSize=12;perimeter=hexagonPerimeter;" vertex="1" parent="1">
  <mxGeometry x="400" y="200" width="100" height="40" as="geometry" />
</mxCell>

Arrow Usage Rules

1. Arrowless Architecture Diagram: When focusing on displaying system hierarchical structure and component layering, arrows can be omitted.
2. Arrowed Architecture Diagram: When it is necessary to represent data flow, call relationships, or processing order, arrows can be added. Arrows should use uniform gray (#999999).

<mxCell id="arrow1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;strokeColor=#999999;strokeWidth=2;endArrow=classic;endFill=1;" edge="1" parent="1" source="layer1" target="layer2">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

Validation Checklist

1. Background Mode Confirmation

• Have asked the user whether they need a light or dark background
• Background color and content color form good contrast
• Use light-colored text (#ffffff, #aaaaaa, #888888) in dark mode

2. Basic Structure Validation

• Consistent node rounded corners (rounded=1)
• Moderate border width (strokeWidth=2)
• Text is clear and legible with sufficient contrast against background
• Consistent arrow styles
• Shape Splicing Validation: Avoid rounded corner inconsistency caused by double-layer overlay; use single-layer structure
• Connection Line Validation: Ensure connection line endpoints precisely point to node edges with no offset

3. Layout Specification Validation

• Appropriate canvas size with no excessive blank space (utilization rate 60%-80%)
• Reasonable node spacing with no overcrowding or excessive spacing
• Clear branch paths with no path crossings
• Polyline turning points do not overlap with nodes
• Anti-Line Chaos Validation:
  • Avoid three or more paths passing through the same coordinate point
  • Connection lines do not pass through other nodes
  • Reasonable branch angles (30-45°) to avoid crossings
• Legends are located at the bottom with no overlap with the main process

4. Graphic Complete Display Validation

• The graphic can be displayed completely with no elements exceeding the canvas range
• All nodes are within the canvas range
• Appropriate distance between connection line endpoints and node borders
• Sufficient spacing between text and graphic borders

5. Color and Style Validation

• Colors comply with color scheme specifications
• Error branches use red solid lines (not dashed lines)
• Asynchronous processes use dashed lines (purple or gray)
• Appropriate border width (light mode: 2px, dark mode: 2-3px)

Output Description

1. Be opened, viewed, and edited in drawio
2. Be saved as a .drawio file
3. Be exported as PNG, SVG, PDF, and other formats
4. Be embedded into documents for use

Trigger Conditions

• XML, drawio, drawing
• Flowchart, relationship diagram, structure diagram, architecture diagram
• Generate a graph, turn text into a graph
• drawio editing

Corresponding Relationship with svg-generator

.svg

.drawio