Draw.io Logical Diagrams Creation

Overview

Create professional logical diagrams in draw.io's native XML format. This skill enables generation of production-ready .drawio files for logical flow diagrams, system architecture visualizations, and abstract process representations using generic shapes and symbols.

When to Use

Use this skill when:

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)
Infrastructure-specific diagrams

Instructions

Creating a Logical Diagram

Analyze the request: Understand the system/process to diagram
Choose diagram type: Flowchart, architecture, BPMN, UML, DFD, etc.
Identify elements: Determine actors, processes, data stores, connectors
Draft XML structure: Create the mxGraphModel with proper root cells
Add shapes: Create mxCell elements with appropriate styles
Add connectors: Link elements with edge elements
Validate XML: Ensure all tags are closed and IDs are unique
Output: Write the .drawio file for the user

Key XML Components

mxfile: Root element with host and version
diagram: Contains the diagram definition
mxGraphModel: Canvas settings (grid, page size)
root: Container for all cells (must include id="0" and id="1")
mxCell: Individual shapes (vertices) or connectors (edges)

Draw.io XML Structure

Every .drawio file follows this 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

Shape	Style
Rectangle	`rounded=0;whiteSpace=wrap;html=1;`
Rounded Rectangle	`rounded=1;whiteSpace=wrap;html=1;`
Ellipse/Circle	`ellipse;whiteSpace=wrap;html=1;`
Diamond	`rhombus;whiteSpace=wrap;html=1;`
Cylinder	`shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;`
Hexagon	`shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;`
Parallelogram	`shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;`

Standard Color Palette

Element Type	Fill Color	Border Color	Usage
Process	`#dae8fc` (light blue)	`#6c8ebf`	Operations/actions
Decision	`#fff2cc` (light yellow)	`#d6b656`	Conditional branches
Start/End	`#d5e8d4` (light green)	`#82b366`	Terminal states
Data/Store	`#e1f5fe` (light cyan)	`#0277bd`	Databases/files
Entity	`#f3e5f5` (light purple)	`#7b1fa2`	External systems
Error/Stop	`#f8cecc` (light red)	`#b85450`	Error states
Actor/User	`#ffe0b2` (light orange)	`#f57c00`	Users/actors
Container	`#f5f5f5` (light gray)	`#666666`	Grouping areas

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

1. Logical Flow Diagram

Shows the logical flow of data or processes through system components:

┌─────────┐     ┌─────────┐     ┌─────────┐
│  User   │────▶│ Service │────▶│  Data   │
└─────────┘     └─────────┘     └─────────┘

Key elements:

Actors/Users (orange)
Services/Processes (blue)
Data Stores (cyan)
External Systems (purple)
Data flows (solid arrows)

2. Logical Architecture Diagram

Abstract representation of system components:

┌─────────────────────────────────────────┐
│            Presentation Layer            │
│  ┌─────────────┐  ┌─────────────┐       │
│  │  Web UI     │  │  Mobile    │       │
│  └─────────────┘  └─────────────┘       │
└─────────────────────────────────────────┘
                    │
┌─────────────────────────────────────────┐
│            Application Layer             │
│  ┌─────────────┐  ┌─────────────┐       │
│  │   API       │  │  Business   │       │
│  │   Gateway   │  │   Logic     │       │
│  └─────────────┘  └─────────────┘       │
└─────────────────────────────────────────┘
                    │
┌─────────────────────────────────────────┐
│              Data Layer                  │
│  ┌─────────────┐  ┌─────────────┐       │
│  │  Database   │  │    Cache    │       │
│  └─────────────┘  └─────────────┘       │
└─────────────────────────────────────────┘

3. BPMN Process Diagram

Business process modeling:

Symbol	Meaning
Circle	Start/End Event
Rounded Rectangle	Activity/Task
Diamond	Gateway/Decision
Arrow	Sequence Flow

4. UML Sequence Diagram

Interaction between components:

┌─────────┐     ┌─────────┐     ┌─────────┐
│  Actor  │     │Service A│     │Service B│
└────┬────┘     └────┬────┘     └────┬────┘
     │              │              │
     │─────────────▶│              │
     │              │─────────────▶│
     │              │◀─────────────│
     │◀─────────────│              │

5. Data Flow Diagram (DFD)

System data movement:

External Entity (square) - Sources/destinations
Process (circle/rounded) - Transformations
Data Store (open rectangle) - Storage
Data Flow (arrow) - Data movement

Shape Examples

Simple Process Box

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

Decision Diamond

<mxCell id="3" value="Decision?"
  style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
  vertex="1" parent="1">
  <mxGeometry x="280" y="200" width="80" height="80" as="geometry" />
</mxCell>

Start/End Oval

<mxCell id="4" value="Start"
  style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
  vertex="1" parent="1">
  <mxGeometry x="200" y="300" width="80" height="40" as="geometry" />
</mxCell>

Data Store (Cylinder)

<mxCell id="5" value="Database"
  style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;"
  vertex="1" parent="1">
  <mxGeometry x="400" y="100" width="60" height="80" as="geometry" />
</mxCell>

Connector/Arrow

<mxCell id="10"
  style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;"
  edge="1" parent="1" source="2" target="3">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

Label on Connector

<mxCell id="11" value="Data"
  style="text;html=1;align=center;verticalAlign=middle;fontSize=11;fontColor=#333333;labelBackgroundColor=#ffffff;"
  vertex="1" parent="1">
  <mxGeometry x="250" y="160" width="40" height="20" as="geometry" />
</mxCell>

Layout Best Practices

Flow direction: Left-to-right or top-to-bottom consistently
Spacing: 40-60px between elements, 20px inside containers
Grid alignment: All coordinates in multiples of 10
Label placement: Above horizontal arrows, right of vertical arrows
Container grouping: Use rounded rectangles for logical groupings
Balance: Keep diagrams centered, avoid extreme whitespace

Reference Files

For detailed templates and shape references, see:

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

Examples

Example 1: Simple Order Processing Flow

User 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."

Generated XML:

<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" />
        <!-- Start -->
        <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="geometry" />
        </mxCell>
        <!-- Submit Order -->
        <mxCell id="3" value="Submit Order"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="60" y="130" width="120" height="60" as="geometry" />
        </mxCell>
        <!-- Validate -->
        <mxCell id="4" value="Validate&#xa;Order?"
          style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="80" y="230" width="80" height="80" as="geometry" />
        </mxCell>
        <!-- Invalid: Notify -->
        <mxCell id="5" value="Notify&#xa;Customer"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="220" y="240" width="100" height="50" as="geometry" />
        </mxCell>
        <!-- Valid: Process Payment -->
        <mxCell id="6" value="Process&#xa;Payment"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="60" y="350" width="120" height="60" as="geometry" />
        </mxCell>
        <!-- Ship -->
        <mxCell id="7" value="Ship Order"
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="60" y="450" width="120" height="60" as="geometry" />
        </mxCell>
        <!-- End -->
        <mxCell id="8" value="End"
          style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
          vertex="1" parent="1">
          <mxGeometry x="80" y="550" width="80" height="40" as="geometry" />
        </mxCell>
        <!-- Connectors -->
        <mxCell id="10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="3">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="3" target="4">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="12" value="No" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="5">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="13" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#82b366;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="6">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="6" target="7">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="7" target="8">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;" edge="1" parent="1" source="5" target="8">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Example 2: Three-Tier Logical Architecture

User Request: "Create a logical architecture diagram for a web application with presentation, business logic, and data tiers."