drawio-logical-diagrams

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 foc

305stars35forksUpdated 7/16/2026

#diagrams #bpmn #flowchart #drawio #uml #architecture

Security Assessment

Safe(100/100)

Security Score100/100

About drawio-logical-diagrams

drawio-logical-diagrams creates professional logical flow and logical system architecture diagrams in draw.io's native XML format (.drawio files). It targets generic, abstract representations rather than cloud-provider-specific architectures, and covers logical flow diagrams, abstract system architecture, BPMN process diagrams, UML diagrams (class, sequence, activity, state), data flow diagrams (DFD), decision flowcharts, and system interaction diagrams. It explicitly defers AWS/Azure/GCP cloud architecture work to a separate skill (aws-drawio-architecture-diagrams). It solves the problem of producing well-formed, visually consistent draw.io diagrams that open cleanly in diagrams.net.

The skill follows a defined workflow: analyze the request, choose the diagram type, identify elements (actors, processes, data stores, connectors), draft the mxGraphModel XML structure with proper root cells, add mxCell shapes and edge connectors, validate the XML, and write the .drawio file. It provides an XML validation checklist (properly closed tags, unique cell IDs starting at 2 with 0 and 1 reserved for root cells, valid source/target/parent references, positive grid-aligned coordinates, escaped special characters, and multi-line labels via 
 or <br> with html=1). It documents key XML components (mxfile, diagram, mxGraphModel, root, mxCell), a catalog of generic shape styles (rectangle, rounded rectangle, ellipse, diamond/rhombus, cylinder, hexagon, parallelogram), a standard color palette mapping element types (process, decision, start/end, data store, entity, error, actor, container) to fill and border colors, and connector styles including orthogonal, dashed, and arrow-head variants.

It is intended for engineers, architects, and analysts who document system design and processes, and it works with the allowed tools Read, Write, and Bash. Additional reference files (shape-styles.md, diagram-templates.md, and others) supply complete shape examples and ready-to-use templates. A worked example shows an order-processing flow. Its main stated limitation is scope: it is for logical/abstract diagrams only and should not be used for cloud-provider-specific architecture diagrams.

FAQ

What file format does this skill output?

It outputs draw.io native XML (.drawio files) built around an mxfile/diagram/mxGraphModel/root/mxCell structure, ready to open in app.diagrams.net.

Can I use it for AWS or Azure architecture diagrams?

No. It focuses on generic/abstract logical diagrams. For AWS/Azure/GCP cloud architectures, use the aws-drawio-architecture-diagrams skill instead.

Which diagram types are supported?

Logical flow diagrams, logical (abstract) architecture, BPMN, UML (class, sequence, activity, state), data flow diagrams (DFD), decision flowcharts, and system interaction diagrams.

How are cell IDs and coordinates handled to keep the XML valid?

IDs 0 and 1 are reserved for root cells; use sequential integer IDs starting at 2. All IDs must be unique, source/target/parent must reference existing cells, and coordinates must be positive and aligned to the grid (multiples of 10). Special characters must be escaped.

What tools does the skill require?

It uses the allowed tools Read, Write, and Bash. Reference files such as shape-styles.md and diagram-templates.md provide additional shape examples and ready-to-use templates.