Skill v1.0.1

currentAutomated scan100/100

jarrett-au/cc-config-starter/diagram-generator

1 files

──Details

PublishedMay 27, 2026 at 04:27 AM

Content Hashsha256:5ba89929da1b78d0...

Git SHA3c6816cee172

Bump Typepatch

Compare with v1.0.0

──Files

Files (1 file, 7.6 KB)

SKILL.md7.6 KBactive

SKILL.md · 235 lines · 7.6 KB

version: "1.0.1" 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

Understand Request: Analyze what diagram the user wants
Generate XML: Create valid draw.io XML following the format rules
Save HTML: Write an HTML file with embedded diagram
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

Never overlap: Multiple edges must not share identical paths
Bidirectional: Use opposite sides for two-way connections
Specify points: Always include exitX, exitY, entryX, entryY attributes
Route around: Edges should go around intermediate shapes
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

Generate the draw.io XML based on user request (full mxfile structure)
URL-encode the entire XML (use encodeURIComponent or equivalent)
Create HTML file with iframe src pointing to viewer.diagrams.net with encoded XML
Start a local HTTP server: python -m http.server 8765
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:

Generate XML for login flow (Start -> Enter Credentials -> Validate -> Success/Failure -> End)
Create HTML file with embedded diagram
Open browser and navigate to the HTML file
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

← v1.0.0 All versions