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): ```xml <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):** ```xml <mxGraphModel> <root> <mxCell id="0"/> <mxCell id="1" parent="0"/> <!-- shapes here --> </root> </mxGraphModel> ``` **For standalone files, use full mxfile wrapper:** ```xml <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:** ```xml <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:** ```xml <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 ```xml <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>