Skip to main content
affpapa.org
RU EN
skill CX Codex

drawio-logical-diagrams — Claude Code skill: how to install

Generates draw.io native XML files for logical flowcharts, system architecture, BPMN, and UML diagrams. Useful when documenting abstract logic without cloud provider icons.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams -a claude-code
Open on GitHub

What drawio-logical-diagrams does

The skill writes clean .drawio XML files using the mxGraphModel structure. It maps systems into generic blocks: processes, data stores, external entities, actors, and decision diamonds. Each element uses preset color palettes and shapes. Output files pass an internal XML checklist that verifies closed tags, positive grid coordinates, and proper edge references.

This skill focuses purely on generic logical design. It will break expectations if you need AWS, Azure, or GCP cloud icons, because cloud-specific stacks require aws-drawio-architecture-diagrams.

What it helps with

  • create logical system architecture diagrams without cloud provider specifics
  • build BPMN diagrams for business workflows
  • generate UML sequence, class, and activity diagrams
  • produce data flow diagrams (DFD) and decision flowcharts

Example prompts for the agent

  • Create a logical flow diagram showing order processing in a .drawio file
  • Generate a UML sequence diagram for user login and token refresh
  • Draw a BPMN workflow for invoice approval

How to install drawio-logical-diagrams

1Skills CLI (Vercel)

npx skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams -a claude-code

2Manually: put the files in place

~/.claude/skills/drawio-logical-diagrams/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/drawio-logical-diagrams/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about drawio-logical-diagrams

How to install drawio-logical-diagrams in Claude Code?

Run the following command: npx skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams -a claude-code.

What does drawio-logical-diagrams do?

It outputs valid draw.io XML files for abstract system architectures, data flows, BPMN diagrams, and UML models.

Can I use it for AWS or Azure infrastructure diagrams?

No. The skill only handles abstract and generic components. For cloud provider architectures, use aws-drawio-architecture-diagrams.

Source text

SKILL.md · MIT 
---
name: drawio-logical-diagrams
description: 'Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files). Use when creating: (1) logical flow diagrams showing data/process flow between system components, (2) logical architecture diagrams representing system structure without cloud provider specifics, (3) BPMN process diagrams, (4) UML diagrams (class, sequence, activity), (5) data flow diagrams (DFD), (6) decision flowcharts, or (7) system interaction diagrams. This skill focuses on generic/abstract representations, not AWS/Azure-specific architectures (use aws-drawio-architecture-diagrams for cloud diagrams).'
allowed-tools: Read, Write, Bash
---

# 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 (`<` → `&lt;`, `>` → `&gt;`, `&` → `&amp;`)
- [ ] Multi-line labels use `&#xa;` or `<br>` with `html=1` in style

### Key XML Components

| Component | Description |
|-----------|-------------|
| `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

```xml
<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` | `#6c8ebf` | Operations/actions |
| Decision | `#fff2cc` | `#d6b656` | Conditional branches |
| Start/End | `#d5e8d4` | `#82b366` | Terminal states |
| Data/Store | `#e1f5fe` | `#0277bd` | Databases/files |
| Entity | `#f3e5f5` | `#7b1fa2` | External systems |
| Error/Stop | `#f8cecc` | `#b85450` | Error states |
| Actor/User | `#ffe0b2` | `#f57c00` | Users/actors |
| Container | `#f5f5f5` | `#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

| Type | Key Elements |
|------|--------------|
| Logical Flow | Actors (orange), Services (blue), Data Stores (cyan), External Systems (purple) |
| Logical Architecture | Layered containers with nested components |
| BPMN | Circle (Start/End), Rounded Rectangle (Activity), Diamond (Gateway) |
| UML Sequence | Vertical lifelines with message arrows |
| DFD | Square (Entity), Circle (Process), Open Rectangle (Data Store) |

## Reference Files

For detailed shape examples and style references, see:
- [shape-styles.md](references/shape-styles.md) - Complete shape examples and style reference
- [diagram-templates.md](references/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."

```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"/>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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

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

```xml
<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="three-tier-1" name="Three-Tier Architecture">
    <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="User" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe0b2;strokeColor=#f57c00;fontSize=12;" vertex="1" parent="1"><mxGeometry x="40" y="340" width="60" height="40" as="geometry"/></mxCell>
        <mxCell id="3" value="Presentation Layer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="160" y="40" width="300" height="180" as="geometry"/></mxCell>
        <mxCell id="4" value="Web&#xa;Browser" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="3"><mxGeometry x="20" y="30" width="80" height="50" as="geometry"/></mxCell>
        <mxCell id="5" value="Mobile&#xa;App" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="3"><mxGeometry x="120" y="30" width="80" height="50" as="geometry"/></mxCell>
        <mxCell id="7" value="Application Layer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="160" y="260" width="300" height="180" as="geometry"/></mxCell>
        <mxCell id="8" value="API&#xa;Gateway" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;" vertex="1" parent="7"><mxGeometry x="20" y="30" width="80" height="50" as="geometry"/></mxCell>
        <mxCell id="9" value="Business&#xa;Logic" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="7"><mxGeometry x="110" y="30" width="80" height="50" as="geometry"/></mxCell>
        <mxCell id="11" value="Data Layer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="160" y="480" width="300" height="180" as="geometry"/></mxCell>
        <mxCell id="12" value="Primary&#xa;Database" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;" vertex="1" parent="11"><mxGeometry x="20" y="30" width="60" height="80" as="geometry"/></mxCell>
        <mxCell id="13" value="Cache" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#fff3e0;strokeColor=#e65100;fontSize=12;" vertex="1" parent="11"><mxGeometry x="100" y="30" width="60" height="80" as="geometry"/></mxCell>
        <mxCell id="20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="4"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="4" target="8"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="8" target="9"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="9" target="12"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="24" value="query" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=open;endFill=0;strokeColor=#666666;strokeWidth=1;fontSize=10;dashed=1;" edge="1" parent="1" source="9" target="13"><mxGeometry relative="1" as="geometry"/></mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
```

For additional templates (microservice architecture, event-driven, decision tree, sequence, DFD), see [diagram-templates.md](references/diagram-templates.md).

## Constraints and Warnings

### Critical Constraints

1. **XML validity**: Always close tags properly and escape special characters
2. **Unique IDs**: All cell IDs must be unique (except parent "0" and "1")
3. **Valid references**: Source/target must reference existing cell IDs
4. **Positive coordinates**: All x, y values must be >= 0

### Warnings

- XML files must be well-formed or will fail to open in draw.io
- Invalid parent references cause elements to disappear
- Negative coordinates place elements outside visible canvas

## Best Practices

1. Use consistent colors per element type across all diagrams
2. Keep arrows straight with minimal bends
3. Place labels at least 20px from arrow lines
4. Group related elements in containers
5. Use 12-14px font for labels, 10-11px for annotations
6. Align all coordinates to grid (multiples of 10)
7. Use high contrast colors and don't rely solely on color for meaning

© giuseppe-trisciuoglio · MIT · giuseppe-trisciuoglio/developer-kit

Similar skills

Everything for Design →
drawio-reconstruction HKUSTDial Reconstructs diagram images, research figures, and slides into editable .drawio files while matching the original look. It exports vector elements alongside rendered preview images. CX Codex +1 509installs drawio jgraph This skill has the agent draw draw.io diagrams and save them as .drawio files, with export to PNG, SVG or PDF. CX Codex +1 3,200installs draw-io davila7 A Claude skill that edits .drawio XML, converts diagrams to PNG and fixes element layout. 757installs cli-anything-drawio HKUDS A command-line harness over Draw.io: the skill hands your agent commands to build a diagram step by step and export it to PNG, PDF or SVG. CX Codex +1 672installs next-ai-drawio DayuanJiang Turns a plain-language description into a draw.io diagram and shows it in your browser while Claude works. ★ 36,398repo stars bicep-diagrams Eraser Labs Parses .bicep files and renders an Azure infrastructure diagram through the Eraser API. Useful when you need a picture of the architecture instead of reading code. CX Codex +1 530installs

From the same set93

unit-test-boundary-conditions A skill that hands your agent ready patterns for Java unit tests at the edges: min and max values, nulls, empty collections, overflow and double precision. CX Codex +1 4,100installs turborepo-monorepo A skill that walks your agent through Turborepo: workspaces, turbo.json tasks, test pipelines and build caching. CX Codex +1 4,100installs spring-data-jpa Patterns and rules for Spring Data JPA persistence layers: repository setup, pagination, entity auditing, and transaction boundaries. CX Codex +1 4,100installs spring-boot-security-jwt A skill with ready JWT auth patterns for Spring Boot 3.5.x: token generation with JJWT, filters, RBAC and OAuth2 wiring. CX Codex +1 4,100installs clean-architecture Guides Clean Architecture, hexagonal architecture and DDD patterns in Java 21+ Spring Boot 3.5+ projects. Use it when separating domain code from frameworks or refactoring coupled code. CX Codex +1 4,000installs spring-boot-openapi-documentation A skill that walks your agent through SpringDoc OpenAPI 3.0 and Swagger UI setup in Spring Boot 3.x projects, annotations included. CX Codex +1 4,000installs nextjs-app-router Patterns and code examples for Next.js 16+ App Router work, including components, actions, API handlers, caching and routing. CX Codex +1 3,900installs spring-boot-crud-patterns A skill that builds the whole CRUD layer for Spring Boot 3 services: aggregates, JPA repositories, DTOs and REST controllers in a feature-based layout. CX Codex +1 3,900installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor