drawio-diagrams-enhanced

name	drawio-diagrams-enhanced
description	This skill should be used when the user asks to "create a diagram", "draw a flowchart", "make a swimlane diagram", "create WBS", "generate RACI matrix", "build network diagram", "create org chart", or mentions draw.io, diagrams.net, BPMN, UML, Gantt, PERT, or project management diagrams. Integrates with next-ai-draw-io MCP server for real-time diagram creation and editing.
metadata	{"author":"https://github.com/WingsZeng/dotfiles/tree/master/dot_config/goose/skills/drawio-diagrams-enhanced"}

Enhanced Draw.io Diagram Creation with MCP Integration

Create professional diagrams using the next-ai-draw-io MCP server. Generate mxGraphModel XML for real-time browser preview and editing.

MCP Workflow

1. Start Session

Call start_session tool first to open browser with real-time preview.

2. Create New Diagram

Use create_new_diagram tool with mxGraphModel XML (not full mxfile wrapper):

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- shapes here -->
  </root>
</mxGraphModel>

Critical constraints:

• Keep elements within x=0-800, y=0-600
• Start from x=40, y=40 with tight spacing
• Use unique IDs starting from "2"
• Set parent="1" for top-level shapes
• Specify exitX/exitY/entryX/entryY for edges to avoid overlaps

3. Edit Existing Diagram

For modifications, call get_diagram first to see current structure, then use edit_diagram with operations array.

4. Get Current State

Use get_diagram to retrieve current XML including user's manual edits.

Core Capabilities

1. Standard Diagram Types

• Flowcharts: Basic flowcharts, decision trees, process flows
• Cross-Functional Flowcharts (CFF): Swimlane diagrams showing processes across departments/roles
• BPMN Diagrams: Business Process Model and Notation diagrams
• UML Diagrams: Class diagrams, sequence diagrams, use case diagrams
• Network Diagrams: Infrastructure, cloud architecture, system design
• Org Charts: Organizational hierarchies and team structures
• Mind Maps: Conceptual mapping and brainstorming
• Entity Relationship Diagrams: Database schemas

2. PMP/PMBOK Project Management Diagrams

• Work Breakdown Structure (WBS): Hierarchical decomposition of project deliverables
• Project Network Diagrams: PERT charts, CPM, activity dependencies
• Gantt Charts: Timeline-based project schedules
• RACI Matrices: Responsibility assignment matrices
• Risk Register Diagrams: Risk matrices, heat maps, probability-impact grids
• Stakeholder Maps: Power-interest grids, influence diagrams
• Resource Histograms: Resource allocation and capacity planning
• Communication Plans: Information flow diagrams
• Process Group Diagrams: Initiating, Planning, Executing, Monitoring & Controlling, Closing
• Knowledge Area Maps: Integration, Scope, Schedule, Cost, Quality, Resource, Communications, Risk, Procurement, Stakeholder Management

3. Visual Asset Libraries Available

Agents can reference and incorporate shapes from extensive custom libraries:

Icon & Symbol Libraries:

• Material Design Icons
• Font Awesome icons
• OSA (Open Security Architecture) Icons
• UN-OCHA Humanitarian Icons
• Flat Color Icons
• Chart & Infographic Icons
• Windows 10 Icons
• Gesture & Fingerprint Icons

Technology & Infrastructure:

• Kubernetes Icons
• Cloud Provider Icons (AWS, Azure, GCP, DigitalOcean)
• Network Device Libraries (Cisco, Arista, Fortinet, Commvault)
• DevOps & CI/CD Pipeline Shapes

Business & General Purpose:

• Wireframe Components
• Avatars & People Icons
• Form Elements
• Bioicons (Life Sciences)
• Genogram Symbols
• Templates & Building Blocks

How to Use Custom Libraries: When generating diagrams that would benefit from specific icons, Agents can note which libraries to enable:

To use this diagram optimally, open it with these custom libraries:
https://app.diagrams.net/?clibs=Uhttps://jgraph.github.io/drawio-libs/libs/templates.xml

XML Format for MCP

For MCP tools, output only mxGraphModel (not full mxfile):

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- shapes here -->
  </root>
</mxGraphModel>

For standalone files, use full mxfile wrapper:

<mxfile host="app.diagrams.net">
  <diagram id="diagram-1" name="Page-1">
    <mxGraphModel dx="1434" dy="759" grid="1" gridSize="10">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <!-- shapes here -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Core Concepts

1. Cells (mxCell)

Everything in draw.io is a cell - shapes, connectors, containers, and even the root elements.

Basic Shape Cell:

<mxCell id="2" value="Process Step" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>

Connector Cell:

<mxCell id="3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="2" target="4">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

2. ID Management

• Each cell must have a unique ID
• Use sequential integers: "2", "3", "4", etc.
• IDs "0" and "1" are reserved for the root cells
• When referencing shapes in connectors, use the same IDs

3. Geometry (mxGeometry)

• x, y: Position (top-left corner)
• width, height: Dimensions
• relative="1": For connectors (relative positioning)

4. Styling

Styles are semicolon-separated key-value pairs:

• Shape type: rounded=1, ellipse, rhombus
• Colors: fillColor=#dae8fc, strokeColor=#6c8ebf, fontColor=#000000
• Text: fontSize=12, fontStyle=1 (bold=1, italic=2, underline=4)
• Alignment: align=center, verticalAlign=middle
• Spacing: spacingLeft=10, spacingTop=5

PMP/PMBOK Specific Shapes & Styles

Work Breakdown Structure (WBS)

WBS uses hierarchical tree structure with boxes connected by lines.

WBS Package Box:

shape=rectangle;rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontStyle=1;fontSize=10;

WBS Levels:

• Level 0 (Project): Large box, 200x80, bold, dark green
• Level 1 (Deliverables): Medium box, 160x60, medium green
• Level 2 (Sub-deliverables): Small box, 140x50, light green
• Level 3 (Work Packages): Smallest box, 120x40, lightest green

Project Network Diagram (PERT/CPM)

Activity Node (AON - Activity on Node):

shape=rectangle;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontStyle=0;

Node Structure (divided into sections):

┌─────────────────┐
│  Early Start ES │ Duration
├─────────────────┤
│  Activity Name  │
├─────────────────┤
│  Late Start LS  │ Late Finish LF
└─────────────────┘

Critical Path Highlighting:

fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=3;

RACI Matrix

Matrix Container:

swimlane;html=1;startSize=40;fillColor=#f5f5f5;strokeColor=#666666;fontStyle=1;

RACI Cells:

• R (Responsible): fillColor=#d5e8d4;strokeColor=#82b366;
• A (Accountable): fillColor=#dae8fc;strokeColor=#6c8ebf;
• C (Consulted): fillColor=#fff2cc;strokeColor=#d6b656;
• I (Informed): fillColor=#e1d5e7;strokeColor=#9673a6;

Gantt Chart Elements

Timeline Bar:

rounded=0;whiteSpace=wrap;html=1;fillColor=#60a917;strokeColor=#2D7600;fontColor=#ffffff;

Milestone Diamond:

rhombus;whiteSpace=wrap;html=1;fillColor=#fa6800;strokeColor=#C73500;fontColor=#000000;

Dependency Arrow:

edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=block;endFill=1;strokeWidth=2;

Risk Matrix (Probability-Impact Grid)

Risk Matrix Structure:

5x5 grid with:
- X-axis: Impact (Very Low, Low, Medium, High, Very High)
- Y-axis: Probability (Very Low, Low, Medium, High, Very High)

Risk Level Colors:

• Low Risk: fillColor=#d5e8d4;strokeColor=#82b366; (Green)
• Medium Risk: fillColor=#fff2cc;strokeColor=#d6b656; (Yellow)
• High Risk: fillColor=#ffe6cc;strokeColor=#d79b00; (Orange)
• Critical Risk: fillColor=#f8cecc;strokeColor=#b85450; (Red)

Stakeholder Power-Interest Grid

Quadrant Structure:

┌─────────────────┬─────────────────┐
│   Manage        │    Partner      │
│   Closely       │    Closely      │
│ (High Power,    │ (High Power,    │
│  High Interest) │  High Interest) │
├─────────────────┼─────────────────┤
│   Keep          │    Keep         │
│   Satisfied     │    Informed     │
│ (High Power,    │ (Low Power,     │
│  Low Interest)  │  High Interest) │
└─────────────────┴─────────────────┘

Common Shape Styles

Flowchart Shapes

Process (Rectangle):

rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;

Decision (Diamond):

rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;

Start/End (Rounded Rectangle):

ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;

Document:

shape=document;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;

Data (Parallelogram):

shape=parallelogram;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;

Swimlane Shapes

Swimlane Container:

swimlane;html=1;startSize=20;fillColor=#f5f5f5;strokeColor=#666666;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=0;

Vertical Swimlane:

swimlane;html=1;startSize=20;fillColor=#f5f5f5;strokeColor=#666666;horizontal=0;fontStyle=1;

Creating PMP/PMBOK Diagrams

Work Breakdown Structure (WBS) Example

<mxfile host="app.diagrams.net">
  <diagram id="WBS-1" name="Project WBS">
    <mxGraphModel dx="1434" dy="759" grid="1" gridSize="10" guides="1">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        
        <!-- Level 0: Project -->
        <mxCell id="2" value="Project Name" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#1ba1e2;strokeColor=#006EAF;fontColor=#ffffff;fontStyle=1;fontSize=14;" vertex="1" parent="1">
          <mxGeometry x="280" y="40" width="200" height="80" as="geometry"/>
        </mxCell>
        
        <!-- Level 1: Major Deliverables -->
        <mxCell id="3" value="Deliverable 1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#60a917;strokeColor=#2D7600;fontColor=#ffffff;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="160" width="160" height="60" as="geometry"/>
        </mxCell>
        
        <mxCell id="4" value="Deliverable 2" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#60a917;strokeColor=#2D7600;fontColor=#ffffff;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="240" y="160" width="160" height="60" as="geometry"/>
        </mxCell>