drawio Graphic Generator

Core Workflow

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

The detailed process is as follows:

Receive User Description
- Users may describe the required graph type (flowchart, card, chart, architecture diagram, 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.
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 to avoid overloading a single graphic.
Design Graph Layout and Elements Based on Analysis Results
- Determine the overall structure and hierarchical relationship of the graph
- Design the style of each element (color, shape, size, etc.)
- Determine the connection method between elements (lines, arrows, etc.)
Generate drawio Graphic Code
- Construct graphics using drawio's mxGraph XML format
- Apply standardized styles (color, border, shadow, etc.)
- Select and apply filter and shadow effects according to the style
Validate the Generated Graph, verify through element number calculation or open the graphic in drawio program to ensure it meets user requirements and expected visual effects
- Basic Structure Validation (avoid element overlap and layout disorder):
  - Check if the graph structure and elements are correct
  - Ensure all node coordinates are calculated accurately without overlap
  - Verify that connection line start/end points accurately point to node edges
  - Check that there is sufficient spacing between text and graphic borders to avoid text overflow
- Display Integrity Guarantee (avoid incomplete display):
  - Calculate canvas size to ensure complete content display
  - Ensure all nodes, text, connections, arrows are within the canvas range
  - Reserve sufficient margins on all sides to avoid content cropping
- Arrow and Connection Validation (avoid arrow chaos):
  - Check that arrow styles are consistent
  - Verify that arrow pointing is accurate without offset or misalignment
  - Check that the order of polyline path nodes is correct without cross chaos
  - Verify that dashed lines are only used for asynchronous processes, and error branches use solid lines
- Style and Color Validation:
  - Ensure colors and styles conform to 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 truncated
Output the Final drawio File for User Use and Modification
- Save the drawio XML to the specified path with a filename ending in
```
.drawio
```
- The generated drawio file can be directly opened, viewed and edited in drawio

Core Principle: The generated drawio graphics should be concise and beautiful, conform to modern design specifications, and maintain consistency with the svg-generator style.

Visual Style Specifications

Color Scheme

Purpose	Color Code
Primary Color (Blue)	#3498db
Secondary Color (Green)	#2ecc71
Accent Color (Orange)	#e67e22
Warning Color (Red)	#e74c3c
Purple	#9b59b6
Cyan	#1abc9c
Background Color	#f8f9fa
Card Background	#ffffff
Text Color	#333333 or #666666
Border Color	#e0e0e0
Arrow Color	#999999 or #3498db (Gray/Blue)

Layer Colors

Layer Type	Border Color	Fill Color
Client Layer	#3498db	#E3F2FD
Network Layer	#e67e22	#FFF3E0
Service Layer	#2ecc71	#E8F5E9
Data Layer	#e74c3c	#FCE4EC
Infrastructure Layer	#95a5a6	#ECEFF1

Graphic Specifications

Item	Default Value
Canvas Size	800×600
Radius of Fillet	8px (Cards)
Shadow	Soft shadow effect
Border Width	2px
Font	PingFang SC, Microsoft YaHei, sans-serif
Line Thickness	2px

drawio XML Format Specifications

Basic Structure

drawio uses mxGraph XML format, the basic structure is as follows:

xml

<mxfile host="app.diagrams.net">
  <diagram name="Page-1">
    <mxGraphModel dx="1420" 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. Rounded Rectangle Card

xml

<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. Diamond Decision Node

xml

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

3. Circular Node

xml

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

4. Arrow Connection Line

xml

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

5. Dashed Connection (Asynchronous/Optional Process)

xml

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

6. Red Arrow (Error Branch)

xml

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

Style Attribute Description

Attribute	Description	Common Values
rounded	Fillet	0=none, 1=enabled
whiteSpace	Text Wrapping	wrap
html	HTML Rendering	1
fillColor	Fill Color	#ffffff, #E3F2FD, etc.
strokeColor	Border Color	#3498db, #e74c3c, etc.
strokeWidth	Border Width	2
fontColor	Text Color	#333333, #666666
fontSize	Font Size	12, 14, 16, etc.
fontStyle	Font Style	0=normal, 1=bold
dashed	Dashed Line	0=solid, 1=dashed
shadow	Shadow	0=none, 1=enabled
edgeStyle	Connection Line Style	orthogonalEdgeStyle=orthogonal, elbowEdgeStyle=elbow

Layered Architecture Diagram Container

xml

<!-- Container Background -->
<mxCell id="layer1" value="" style="rounded=1;whiteSpace=wrap;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;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

Users may provide:

Graphic Type: Flowchart, card, chart, icon, relationship diagram, architecture diagram
Layout Description: Horizontal, vertical, grid, circular, layered
Content: Text, emoji, color preferences
Style: Minimalist, professional, cute

Step 2: Select Template or Create New

Common Templates:

Horizontal Flowchart - Steps arranged from left to right
Vertical Flowchart - Steps arranged from top to bottom
Loop Flowchart - Closed loop connected end to end
Card Grid - Multiple cards arranged side by side
Comparison Chart - Left-right comparison layout
Timeline - Vertical or horizontal timeline
Pie Chart/Bar Chart - Data visualization
Architecture Diagram - System, deployment, application architecture diagram, which should be displayed in layers
Swimlane Diagram - Multi-role/multi-department flowchart
Mind Map - Centrally divergent hierarchical structure

Step 3: Generate drawio XML Code

Generate a complete drawio file according to requirements:

xml

<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" />
        
        <!-- Title -->
        <mxCell id="title" value="Graphic Title" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;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>

Step 4: Save File

Save the generated drawio file to the user-specified location with a filename ending in

.drawio

Arrow Specifications

Arrow Styles

Style	Attribute Value
Gray Arrow (Recommended)	strokeColor=#999999
Blue Arrow	strokeColor=#3498db
Red Arrow	strokeColor=#e74c3c
Purple Arrow	strokeColor=#9b59b6

Line Styles

Style	Application Scenario	Attribute
Solid Line	Main process, correct branch, error branch	dashed=0
Dashed Line	Asynchronous/callback/optional process	dashed=1

Important Principle:

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

Arrow Endpoint Styles

xml

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

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

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

Flowchart Specifications

Canvas Size Calculation Rule

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

Node Arrangement

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

Connection Line Types

Straight Line Connection

xml

<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 Turning)

xml

<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)

xml

<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

xml

<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 Annotation

Add annotations next to connection lines:

xml

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

Dashed Box for Optional Areas

xml

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

Convergence Point

xml

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

Architecture Diagram Specifications

Layered Structure

Architecture diagrams should adopt layered design, from top to bottom:

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

Layer Label Style

xml

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

Layered Container Style

xml

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

Architecture Diagram Component Templates

Service Node

xml

<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

xml

<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

xml

<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

Arrows are optional in layered architecture diagrams:

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

xml

<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

After generating drawio, please check:

Arrow styles are consistent (strokeWidth=2, endArrow=classic)
Arrow colors use gray #999999, blue #3498db or red #e74c3c
Node fillets are consistent (rounded=1)
Text is legible with appropriate font size
Graphics can be displayed completely without elements exceeding the canvas range
Colors conform to color scheme specifications
Branch processes are distinguished by different colors (error branches use red)
Dashed lines are only used for asynchronous processes
Connection line start/end points accurately point to node edges

Output Description

The generated drawio file can directly:

Be opened and viewed in drawio
Be saved as a .drawio file
Be exported as PNG, SVG, PDF and other formats
Be embedded in documents for use

Trigger Conditions

Triggered when the user mentions the following:

drawio, drawing
Flowchart, relationship diagram, structure diagram
Architecture diagram, system diagram
Generate a graph, turn text into a graph

drawio-diagram

NPX Install

Tags

SKILL.md Content (Chinese)