Draw.io Logical Diagrams Creation

Overview

Create professional logical diagrams in draw.io's native XML format for logical flow diagrams, system architecture visualizations, and abstract process representations using generic shapes and symbols.

When to Use

• Creating logical flow diagrams showing data flow between system components
• Designing logical architecture diagrams (abstract system structure)
• Building BPMN process diagrams for business processes
• Drawing UML diagrams (class, sequence, activity, state)
• Creating data flow diagrams (DFD) for system analysis
• Making decision flowcharts with branching logic
• Visualizing system interactions and sequences
• Documenting logical system design without cloud specifics

Do NOT use for: AWS/Azure/GCP architecture diagrams (use aws-drawio-architecture-diagrams).

Instructions

Creating a Logical Diagram

1. Analyze the request: Understand the system/process to diagram
2. Choose diagram type: Flowchart, architecture, BPMN, UML, DFD, etc.
3. Identify elements: Determine actors, processes, data stores, connectors
4. Draft XML structure: Create the mxGraphModel with proper root cells
5. Add shapes: Create mxCell elements with appropriate styles
6. Add connectors: Link elements with edge elements
7. Validate XML: Verify XML is well-formed and all IDs are unique (see validation checklist below)
8. Output: Write the .drawio file for the user

XML Validation Checklist

Before outputting the file, verify:

• All tags are properly closed (no unclosed <mxCell>, </mxGeometry>, etc.)
• All cell IDs are unique (0 and 1 are reserved root cells, use sequential integers starting from 2)
• All source and target attributes reference existing cell IDs
• All parent attributes reference existing cell IDs
• All coordinates (x, y, width, height) are positive numbers
• Special characters are escaped (< → <, > → >, & → &)
• Multi-line labels use 
 or <br> with html=1 in style

Key XML Components

Draw.io XML Structure

<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="logical-flow-1" name="Logical Flow">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1"
      tooltips="1" connect="1" arrows="1" fold="1" page="1"
      pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- Shapes and connectors here -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Key rules:

• IDs "0" and "1" are reserved for root cells
• Use sequential integer IDs starting from "2"
• Use landscape orientation for architecture diagrams
• All coordinates must be positive and aligned to grid (multiples of 10)

Generic Shapes and Styles

Basic Shape Types

Standard Color Palette

Connector Styles

Standard flow:

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;

Dashed (alternative/optional):

edgeStyle=orthogonalEdgeStyle;dashed=1;dashPattern=5 5;strokeColor=#666666;

Arrow head styles:

• endArrow=classic;endFill=1 - Filled triangle
• endArrow=open;endFill=0 - Open arrow
• endArrow=blockThin;endFill=1 - Block arrow

Diagram Types

Reference Files

For detailed shape examples and style references, see:

• shape-styles.md - Complete shape examples and style reference
• diagram-templates.md - Ready-to-use templates

Examples

Example 1: Order Processing Flow

Request: "Create a logical flow diagram showing order processing: customer submits order, system validates, if valid then processes payment and ships, if invalid notifies customer."

<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="order-flow-1" name="Order Processing">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0"/><mxCell id="1" parent="0"/>
        <mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;" vertex="1" parent="1"><mxGeometry x="80" y="50" width="80" height="40" as
how to use drawio-logical-diagrams
CursorClaude CodeClineCodexWindsurfGooseGitHub CopilotVS CodeGemini CLIKiloOpencodeKimi CLIRoo ClineAiderContinueZedBolt.newLovablev0Replit AgentSweepSmol DeveloperDevinCavemanAmpAntigravity
How to use drawio-logical-diagrams on Cursor
AI-first code editor with Composer
1
Prerequisites
Before installing skills in Cursor, ensure your development environment meets these requirements:
›Cursor installed and configured on your development machine
›Node.js version 16.0+ with npm package manager (verify with node --version)
›Active project directory or workspace where you want to add drawio-logical-diagrams
2
Execute installation command
Execute the skills CLI command in your project's root directory to begin installation:
$npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagramscopy
The skills CLI fetches drawio-logical-diagrams from GitHub repository giuseppe-trisciuoglio/developer-kit and configures it for Cursor.
3
Select Cursor when prompted
The CLI will show a list of available agents. Use arrow keys to navigate and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ── always included ────
│   • Amp
│   • Antigravity
│   • Cline
│   • Codex
│ ●Cursor(selected)
│   • Cursor
│   • Windsurf
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/drawio-logical-diagrams
Reload or restart Cursor to activate drawio-logical-diagrams. Access the skill through slash commands (e.g., /drawio-logical-diagrams) or your agent's skill management interface.
⚠
Security & Verification Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your development environment. Always verify the publisher's identity, review recent commits, and test in isolated environments before production deployment.
Additional Resources
›View source code on GitHub›Skills CLI documentation›Learn more about Cursor›What are agent skills?