drawio-diagram
Original：🇨🇳 Chinese
Translated
Generate drawio format graphic files based on natural language descriptions. Supports common graphics such as flowcharts, cards, charts, icons, and architecture diagrams. The output is a .drawio file that can be directly opened and edited in drawio. Triggered when the user mentions drawio, drawing, flowchart, architecture diagram, or structure diagram.
12installs
Added on
NPX Install
npx skill4agent add bewatermyfriend7/skill-project drawio-diagramTags
Translated version includes tags in frontmatterSKILL.md Content (Chinese)
View Translation Comparison →drawio Graphic Generator
Core Workflow
User Description → Parse Requirements → Design Graphics → Generate drawio XML → Validate Output → Save FileThe 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
- Basic Structure Validation (avoid element overlap and layout disorder):
- 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
- Save the drawio XML to the specified path with a filename ending in
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 .
.drawioArrow 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) + MarginNode 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