Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
giuseppe-trisciuoglio avatar

Drawio Logical Diagrams

giuseppe-trisciuoglio/developer-kit

  • 1.8k installs
  • 311 repo stars
  • Updated June 22, 2026
  • giuseppe-trisciuoglio/developer-kit

drawio-logical-diagrams generates validated logical draw.io XML diagrams for flows and abstract architecture.

About

The drawio-logical-diagrams skill outputs valid .drawio mxGraphModel XML for logical flows, system architecture, BPMN processes, UML class or sequence diagrams, data flow diagrams, and decision flowcharts using generic shapes. Workflow analyzes the request, picks diagram type, assigns sequential mxCell ids starting at two, validates closed tags, unique ids, parent references, escaped entities, and coordinate positivity before writing files. It explicitly excludes AWS, Azure, or GCP architecture diagrams covered by a separate cloud skill. Agents structure roots, vertices, edges, and connectors per draw.io conventions with validation checklist gates. Use when users need logical system diagrams, process flows, or abstract architecture docs in draw.io format.

  • Writes native draw.io XML with mxGraphModel structure.
  • Supports flowcharts, BPMN, UML, DFD, and logical architecture types.
  • Validates unique ids, parent links, and escaped special characters.
  • Uses generic shapes, not cloud provider icon libraries.
  • Reserves ids 0 and 1 for root cells per draw.io rules.

Drawio Logical Diagrams by the numbers

  • 1,799 all-time installs (skills.sh)
  • +60 installs in the week ending Jul 28, 2026 (Skillselion tracking)
  • Ranked #183 of 1,901 Documentation skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
At a glance

drawio-logical-diagrams capabilities & compatibility

Capabilities
draw.io xml authoring · diagram validation · bpmn and uml output
Use cases
documentation · ui design
npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs1.8k
repo stars★ 311
Security audit3 / 3 scanners passed
Last updatedJune 22, 2026
Repositorygiuseppe-trisciuoglio/developer-kit ↗

How do I create a logical system or process diagram as a .drawio file?

Create draw.io XML logical flow, architecture, BPMN, UML, and DFD diagrams without cloud-provider-specific shapes.

Who is it for?

Logical architecture and BPMN or UML documentation without cloud icons.

Skip if: AWS or Azure architecture diagrams requiring provider-specific stencils.

When should I use this skill?

User needs draw.io logical flow, BPMN, UML, or DFD diagrams.

What you get

Well-formed .drawio XML with validated cells, connectors, and diagram-type-appropriate layout.

  • .drawio files

Files

SKILL.mdMarkdownGitHub ↗

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

ComponentDescription
mxfileRoot element with host and version
diagramContains the diagram definition
mxGraphModelCanvas settings (grid, page size)
rootContainer for all cells (must include id="0" and id="1")
mxCellIndividual shapes (vertices) or connectors (edges)

Draw.io 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

ShapeStyle
Rectanglerounded=0;whiteSpace=wrap;html=1;
Rounded Rectanglerounded=1;whiteSpace=wrap;html=1;
Ellipse/Circleellipse;whiteSpace=wrap;html=1;
Diamondrhombus;whiteSpace=wrap;html=1;
Cylindershape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;
Hexagonshape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;
Parallelogramshape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;

Standard Color Palette

Element TypeFill ColorBorder ColorUsage
Process#dae8fc#6c8ebfOperations/actions
Decision#fff2cc#d6b656Conditional branches
Start/End#d5e8d4#82b366Terminal states
Data/Store#e1f5fe#0277bdDatabases/files
Entity#f3e5f5#7b1fa2External systems
Error/Stop#f8cecc#b85450Error states
Actor/User#ffe0b2#f57c00Users/actors
Container#f5f5f5#666666Grouping 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

TypeKey Elements
Logical FlowActors (orange), Services (blue), Data Stores (cyan), External Systems (purple)
Logical ArchitectureLayered containers with nested components
BPMNCircle (Start/End), Rounded Rectangle (Activity), Diamond (Gateway)
UML SequenceVertical lifelines with message arrows
DFDSquare (Entity), Circle (Process), Open Rectangle (Data Store)

Reference Files

For detailed shape examples and style references, see:

  • shape-styles.md - Complete shape examples and style reference
  • 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."

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

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

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

Related skills

open.feishu.cnLark MarkdownInstantly turn any markdown file into clean, formatted Lark/Figma-compatible documents without manual reformatting.402klarksuiteLark DocCreate, read, update, summarize, rewrite and manage Feishu/Lark cloud documents directly from agent workflows.377k15.7klarksuiteLark WikiCreate, organize, query, and manage documents, spaces, and members inside Lark (Feishu) knowledge bases directly from AI agent workflows.374k15.7kxixu-meOpensource Guide CoachGet expert, attribution-safe guidance on launching and sustaining an open-source project.270k72xixu-meReadme I18nMaintain consistent, updatable language selector blocks across every README variant in a multilingual repository.270k72juliusbrusseeCavemanCompress SPEC.md files and any spec-adjacent prose into a token-efficient format that preserves precision while slashing context usage.259k1.1k

Forks & variants (1)

Drawio Logical Diagrams has 1 known copy in the catalog totaling 23 installs. They canonicalize to this original listing.

How it compares

Pick drawio-logical-diagrams for vendor-neutral logical diagrams; pick aws-drawio-architecture-diagrams when stencils must reflect a specific cloud provider.

FAQ

Can this skill draw AWS architecture?

No. Use aws-drawio-architecture-diagrams for cloud-specific diagrams.

What validation is required?

Unique ids, closed tags, valid parent and source or target refs, and escaped XML entities.

Which id numbers are reserved?

Cells 0 and 1 are reserved root containers; shapes start at id 2.

Is Drawio Logical Diagrams safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Documentationui
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.