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>
    
    <mxCell id="5" value="Deliverable 3" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#60a917;strokeColor=#2D7600;fontColor=#ffffff;fontStyle=1;" vertex="1" parent="1">
      <mxGeometry x="440" y="160" width="160" height="60" as="geometry"/>
    </mxCell>
    
    <!-- Connectors -->
    <mxCell id="6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="2" target="3">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    
    <mxCell id="7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="2" target="4">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    
    <mxCell id="8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="2" target="5">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    
  </root>
</mxGraphModel>

</diagram> </mxfile>

RACI Matrix Example

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

    <!-- Matrix Container -->
    <mxCell id="2" value="RACI Matrix" style="swimlane;html=1;startSize=40;fillColor=#f5f5f5;strokeColor=#666666;fontStyle=1;fontSize=14;" vertex="1" parent="1">
      <mxGeometry x="40" y="40" width="720" height="400" as="geometry"/>
    </mxCell>
    
    <!-- Header Row -->
    <mxCell id="3" value="Activities / Tasks" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;fontStyle=1;" vertex="1" parent="2">
      <mxGeometry x="10" y="50" width="180" height="40" as="geometry"/>
    </mxCell>
    
    <mxCell id="4" value="Role A" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;fontStyle=1;" vertex="1" parent="2">
      <mxGeometry x="200" y="50" width="120" height="40" as="geometry"/>
    </mxCell>
    
    <mxCell id="5" value="Role B" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;fontStyle=1;" vertex="1" parent="2">
      <mxGeometry x="330" y="50" width="120" height="40" as="geometry"/>
    </mxCell>
    
    <!-- Task Rows with RACI Assignments -->
    <mxCell id="6" value="Task 1: Define Requirements" style="rounded=0;whiteSpace=wrap;html=1;align=left;spacingLeft=10;" vertex="1" parent="2">
      <mxGeometry x="10" y="100" width="180" height="50" as="geometry"/>
    </mxCell>
    
    <mxCell id="7" value="R" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontStyle=1;fontSize=16;" vertex="1" parent="2">
      <mxGeometry x="200" y="100" width="120" height="50" as="geometry"/>
    </mxCell>
    
    <mxCell id="8" value="A" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;fontSize=16;" vertex="1" parent="2">
      <mxGeometry x="330" y="100" width="120" height="50" as="geometry"/>
    </mxCell>
    
  </root>
</mxGraphModel>

</diagram> </mxfile>

Stakeholder Power-Interest Grid Example

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

    <!-- Grid Background -->
    <!-- High Power, High Interest -->
    <mxCell id="2" value="Manage Closely<br">><b">>(Key Players)</b">>" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;verticalAlign=top;fontSize=12;fontStyle=0;" vertex="1" parent="1">
      <mxGeometry x="400" y="80" width="320" height="280" as="geometry"/>
    </mxCell>
    
    <!-- High Power, Low Interest -->
    <mxCell id="3" value="Keep Satisfied<br">><b">>(Keep Informed)</b">>" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;verticalAlign=top;fontSize=12;fontStyle=0;" vertex="1" parent="1">
      <mxGeometry x="400" y="360" width="320" height="280" as="geometry"/>
    </mxCell>
    
    <!-- Low Power, High Interest -->
    <mxCell id="4" value="Keep Informed<br">><b">>(Show Consideration)</b">>" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;verticalAlign=top;fontSize=12;fontStyle=0;" vertex="1" parent="1">
      <mxGeometry x="80" y="80" width="320" height="280" as="geometry"/>
    </mxCell>
    
    <!-- Low Power, Low Interest -->
    <mxCell id="5" value="Monitor<br">><b">>(Minimal Effort)</b">>" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;verticalAlign=top;fontSize=12;fontStyle=0;" vertex="1" parent="1">
      <mxGeometry x="80" y="360" width="320" height="280" as="geometry"/>
    </mxCell>
    
    <!-- Axis Labels -->
    <mxCell id="6" value="Interest" style="text;html=1;align=center;verticalAlign=middle;fontSize=14;fontStyle=1;rotation=90;" vertex="1" parent="1">
      <mxGeometry x="20" y="320" width="100" height="40" as="geometry"/>
    </mxCell>
    
    <mxCell id="7" value="Power / Influence" style="text;html=1;align=center;verticalAlign=middle;fontSize=14;fontStyle=1;" vertex="1" parent="1">
      <mxGeometry x="350" y="660" width="200" height="40" as="geometry"/>
    </mxCell>
    
    <!-- Sample Stakeholders -->
    <mxCell id="8" value="CEO" style="ellipse;whiteSpace=wrap;html=1;fillColor=#1ba1e2;strokeColor=#006EAF;fontColor=#ffffff;fontStyle=1;" vertex="1" parent="1">
      <mxGeometry x="520" y="150" width="80" height="60" as="geometry"/>
    </mxCell>
    
  </root>
</mxGraphModel>

</diagram> </mxfile>

Color Schemes

Professional Blue Theme (Default)

• Primary: fillColor=#dae8fc;strokeColor=#6c8ebf;

• Secondary: fillColor=#b1ddf0;strokeColor=#10739e;

• Accent: fillColor=#f8cecc;strokeColor=#b85450;

Green/Natural Theme

• Primary: fillColor=#d5e8d4;strokeColor=#82b366;

• Secondary: fillColor=#fff2cc;strokeColor=#d6b656;

• Accent: fillColor=#e1d5e7;strokeColor=#9673a6;

Corporate/Neutral Theme

• Primary: fillColor=#f5f5f5;strokeColor=#666666;

• Secondary: fillColor=#e1d5e7;strokeColor=#9673a6;

• Highlight: fillColor=#ffe6cc;strokeColor=#d79b00;

PMP Risk Matrix Colors

• Critical: fillColor=#8B0000;strokeColor=#600000;fontColor=#ffffff; (Dark Red)

• High: fillColor=#FF0000;strokeColor=#CC0000;fontColor=#ffffff; (Red)

• Medium: fillColor=#FFA500;strokeColor=#CC8400;fontColor=#000000; (Orange)

• Low: fillColor=#FFFF00;strokeColor=#CCCC00;fontColor=#000000; (Yellow)

• Very Low: fillColor=#90EE90;strokeColor=#66AA66;fontColor=#000000; (Light Green)

Connector Styles

Basic Connector

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;

Straight Connector

rounded=0;html=1;jettySize=auto;orthogonalLoop=1;

Curved Connector

curved=1;rounded=1;html=1;jettySize=auto;orthogonalLoop=1;

With Arrow

edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;endFill=1;

Dashed Line (for dependencies)

edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;dashed=1;dashPattern=5 5;

Thick Line (for critical path)

edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;strokeWidth=3;strokeColor=#b85450;

Best Practices

1. Layout Guidelines

• Grid alignment: Use x/y coordinates in multiples of 10 for clean alignment

• Standard spacing: 20-30px between shapes, 40-50px between rows

• Shape sizes:

• Small: 80x40

• Medium: 120x60

• Large: 160x80

• Extra Large (Project boxes): 200x80

• Swimlane heights: 120-150px for single row, add 100px per additional row

• WBS spacing: 40px vertical, 20px horizontal between levels

2. Naming Conventions

• Use sequential IDs: "2", "3", "4"...

• Keep shape labels concise (1-5 words)

• Use Title Case for important labels

• Use sentence case for descriptions

• Add ID numbers to WBS packages (e.g., "1.2.3 Task Name")

3. Visual Hierarchy

• Start shapes: Use green/light colors

• End shapes: Use red/dark colors

• Decision points: Use orange/yellow

• Regular processes: Use blue/neutral

• Important processes: Use bolder colors or thicker borders

• Critical path: Use red with thick borders (strokeWidth=3)

4. PMP/PMBOK Specific

• WBS Levels: Use progressively lighter shades for deeper levels

• RACI Matrix: Consistently use R=Green, A=Blue, C=Yellow, I=Purple

• Risk Matrix: Follow standard risk color coding (Green to Red)

• Critical Path: Always highlight in red with strokeWidth=3

• Milestones: Use diamond shapes with distinct colors

5. Readability

• Keep diagrams under 20-25 shapes when possible

• Group related processes in the same swimlane

• Use consistent shape sizes within the same category

• Label all connectors for complex flows

• Add whitespace between dense sections

• Include legends for symbols/colors in complex diagrams

PMBOK Process Groups & Knowledge Areas Quick Reference

5 Process Groups

• Initiating: Green colors (#d5e8d4 )

• Planning: Blue colors (#dae8fc )

• Executing: Orange colors (#ffe6cc )

• Monitoring & Controlling: Yellow colors (#fff2cc )

• Closing: Purple colors (#e1d5e7 )

10 Knowledge Areas

• Integration Management: Gray (#f5f5f5 )

• Scope Management: Blue (#dae8fc )

• Schedule Management: Green (#d5e8d4 )

• Cost Management: Orange (#ffe6cc )

• Quality Management: Red (#f8cecc )

• Resource Management: Purple (#e1d5e7 )

• Communications Management: Teal (#b1ddf0 )

• Risk Management: Yellow (#fff2cc )

• Procurement Management: Pink (#f8cecc )

• Stakeholder Management: Light Purple (#e1d5e7 )

Professional Diagram Templates

Template 1: Cross-Functional Flowchart (Swimlane)

Use Case: Business process across departments Structure: Horizontal swimlanes, one per department Key Features: Clear handoffs, decision points, subprocess indicators

Template 2: Work Breakdown Structure (WBS)

Use Case: Project scope decomposition Structure: Hierarchical tree, 3-4 levels deep Key Features: Numbered packages (1.1, 1.2, etc.), deliverable-oriented

Template 3: Project Network Diagram (PERT/CPM)

Use Case: Activity sequencing and critical path analysis Structure: Activity nodes with duration, early/late start/finish Key Features: Critical path highlighted, float calculations

Template 4: RACI Matrix

Use Case: Role and responsibility assignment Structure: Grid with tasks (rows) and roles (columns) Key Features: R, A, C, I assignments with color coding

Template 5: Risk Register Heat Map

Use Case: Visual risk assessment Structure: 5x5 grid (Probability vs Impact) Key Features: Color-coded zones, risk items plotted on grid

Template 6: Stakeholder Power-Interest Grid

Use Case: Stakeholder analysis and engagement strategy Structure: 2x2 or 3x3 grid Key Features: Quadrant labels, stakeholder names plotted

Template 7: Organizational Breakdown Structure (OBS)

Use Case: Project team hierarchy Structure: Hierarchical tree similar to org chart Key Features: Names, roles, reporting relationships

Template 8: Resource Histogram

Use Case: Resource allocation over time Structure: Bar chart with time on X-axis, resources on Y-axis Key Features: Color-coded resource types, over-allocation indicators

Error Prevention

Common Issues

• Overlapping shapes: Ensure x/y coordinates don't overlap

• Missing parents: Swimlane children must reference parent ID

• Invalid IDs: Don't reuse IDs, keep them sequential

• Malformed style strings: Always end with semicolon

• Incorrect connector references: source and target must match existing shape IDs

• WBS numbering: Ensure hierarchical numbering is consistent (1.0, 1.1, 1.1.1)

Validation Checklist

• All IDs are unique

• Root cells (0, 1) exist

• All connectors have valid source/target

• Swimlane children have correct parent references

• Coordinates are positive numbers

• Style strings are properly formatted

• XML is well-formed (properly nested tags)

• WBS packages have proper hierarchical numbering

• RACI matrix has all cells filled (no blanks)

• Risk matrix uses standard color coding

Custom Library Integration

When creating diagrams that benefit from specific icon libraries, include instructions like:

How to Open with Custom Libraries

To access additional icons and shapes for this diagram, open it with:

https://app.diagrams.net/?clibs=Uhttps://jgraph.github.io/drawio-libs/libs/templates.xml;Uhttps://jgraph.github.io/drawio-libs/libs/un-ocha-icons.xml

Or manually in draw.io:

1. Open the diagram in app.diagrams.net
2. File → Open Library from → URL
3. Enter: https://jgraph.github.io/drawio-libs/libs/[library-name].xml

Output Format

Always output the complete .drawio file with:

• Proper XML declaration (optional but recommended)

• Complete mxfile structure

• All necessary root cells

• Properly formatted and indented for readability

• Save with .drawio or .xml extension

• Include usage instructions if custom libraries are beneficial

Tips for Excellence

• Ask clarifying questions if the process/project isn't clear

• Suggest improvements to workflows if you spot issues

• Use appropriate shapes for different process types and PM artifacts

• Maintain consistency in sizing, spacing, and color schemes

• Consider the audience - executives need less detail than implementers

• Test the flow logic - ensure all paths lead somewhere

• Add legends if using multiple shape types or colors

• Include PMBOK process group identifiers when relevant

• Reference custom libraries that would enhance the diagram

• Provide opening instructions if special libraries are needed

Professional Templates Library

The following template patterns can be adapted for various use cases:

• Agile/Scrum Diagrams: Sprint planning, retrospectives, burndown charts

• DevOps Pipelines: CI/CD flows with stages, gates, and tools

• Business Model Canvas: 9-box strategic planning tool

• Value Stream Mapping: Lean process analysis with cycle times

• SIPOC Diagrams: Supplier-Input-Process-Output-Customer

• Fishbone/Ishikawa: Root cause analysis

• Affinity Diagrams: Idea clustering and organization

• Decision Trees: Multi-level decision analysis

• Use Case Diagrams: UML user-system interactions

• Data Flow Diagrams: Information flow analysis

Resources

• Official draw.io documentation: https://www.drawio.com/doc/

• Example diagrams: https://www.drawio.com/example-diagrams

• Custom libraries repository: https://github.com/jgraph/drawio-libs

• Template library: Available in draw.io via Arrange > Insert > Template

• Shape libraries: Enable via "More Shapes" in draw.io

• PMBOK Guide (6th & 7th Edition): PMI official documentation

• Project Management Institute: https://www.pmi.org/

Limitations

• Complex custom shapes may require manual adjustment

• Some advanced features (layers, pages) may need manual setup

• 3D shapes and advanced styling might not be fully represented

• Custom library icons require internet connection to load

• Very large WBS structures may need to be split across pages

• Always recommend testing the generated file in draw.io

Remember: The goal is to create diagrams that are immediately usable, professional-looking, accurately represent the user's process or system, and follow PMP/PMBOK best practices when applicable!