Drawio Logical Diagrams
Generate draw.io native XML diagrams for logical architecture, BPMN, UML, DFD, and flowcharts without tying diagrams to a single cloud vendor.
Overview
Draw.io Logical Diagrams is an agent skill most often used in Build (also Validate, Ship) that produces vendor-neutral logical flow and architecture .drawio XML including BPMN, UML, and DFD.
Install
npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagramsWhat is this skill?
- Creates .drawio XML for logical flow and abstract system architecture
- Supports BPMN, UML (class, sequence, activity), DFD, decision flowcharts, and interaction diagrams
- Explicitly not for AWS/Azure-specific architecture decks—use a cloud-specific skill for those
- Allowed tooling: Read, Write, Bash for file generation workflow
- Generic shapes and symbols for vendor-neutral design communication
- 7 diagram use cases listed (logical flow, logical architecture, BPMN, UML, DFD, decision flowcharts, system interaction)
Adoption & trust: 1.3k installs on skills.sh; 271 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need shareable system and process diagrams but only have ad-hoc boxes in chat or cloud-specific drawings that misrepresent your actual logical design.
Who is it for?
Solo builders documenting modular backends, agent workflows, or business processes before or during implementation using standard draw.io tooling.
Skip if: AWS or Azure well-architected icon diagrams, pixel-perfect UI mockups, or auto-synced live infrastructure topology from a cloud API.
When should I use this skill?
Creating logical flow diagrams, abstract architecture, BPMN, UML, DFD, decision flowcharts, or system interaction diagrams in draw.io XML—not cloud-provider architecture icons.
What do I get? / Deliverables
You receive editable .drawio files that document logical architecture and flows your team and agents can reuse across specs, reviews, and onboarding.
- .drawio XML diagram files
- Logical architecture or process flow documentation
- UML or BPMN views aligned to your system narrative
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Build/docs is the canonical shelf because the skill primarily produces .drawio artifacts that document system structure and flows alongside implementation. Docs subphase matches architecture and process documentation outputs rather than runtime code or deploy scripts.
Where it fits
Map a proposed checkout and webhook flow in BPMN before committing to stack choices.
Add a logical component diagram beside your service README for agent onboarding.
Hand reviewers a DFD that shows data movement without exposing cloud account layout.
How it compares
Use for abstract logical and UML-style .drawio output; use a separate cloud architecture skill when diagrams must show provider-specific services.
Common Questions / FAQ
Who is drawio-logical-diagrams for?
It is for indie developers and small teams who want their agent to create draw.io logical architecture and process diagrams as first-class repo artifacts.
When should I use drawio-logical-diagrams?
Use it in Validate when scoping flows on a whiteboard equivalent, in Build/docs when pairing code with architecture files, and in Ship/review when reviewers need a logical view distinct from deployment diagrams.
Is drawio-logical-diagrams safe to install?
It requests Read, Write, and Bash to create diagram files locally; review the Security Audits panel on this page and restrict Bash scope in untrusted repositories.
SKILL.md
READMESKILL.md - Drawio Logical Diagrams
# 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 | 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 | S