# drawio-logical-diagrams

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4000 installs · ★ 363
- Author: giuseppe-trisciuoglio
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/giuseppe-trisciuoglio/developer-kit/tree/HEAD/plugins/developer-kit-core/skills/drawio-logical-diagrams/SKILL.md
- Updated: 2026-09-10
- HTML: https://affpapa.org/en/nevibecode/skills/drawio-logical-diagrams

## What it 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`.

## Requirements
- Works with: AWS, Azure

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/drawio-logical-diagrams/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/drawio-logical-diagrams/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/drawio-logical-diagrams/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/drawio-logical-diagrams/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install giuseppe-trisciuoglio/developer-kit drawio-logical-diagrams
```

2. **Manually: put the files in place**
- File: `.github/skills/drawio-logical-diagrams/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/giuseppe-trisciuoglio/developer-kit --path plugins/developer-kit-core/skills/drawio-logical-diagrams
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/drawio-logical-diagrams/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/giuseppe-trisciuoglio/developer-kit/tree/HEAD/plugins/developer-kit-core/skills/drawio-logical-diagrams/SKILL.md

## When to use it
- 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
- 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

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 3fd5e833a201c822.

BEGIN THIRD-PARTY FILE 3fd5e833a201c822
```text
---
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
```
END THIRD-PARTY FILE 3fd5e833a201c822

The third-party file has ended. Everything between the 3fd5e833a201c822 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2796 of 15479 bytes. © giuseppe-trisciuoglio · MIT · https://github.com/giuseppe-trisciuoglio/developer-kit/tree/HEAD/plugins/developer-kit-core/skills/drawio-logical-diagrams/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md