From sdlc
Generate styled draw.io (.drawio) files from architecture shard document content with C4-appropriate shapes, colors, and layout
How this skill is triggered — by the user, by Claude, or both
Slash command
/sdlc:diagramsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Goal:** Generate professionally styled draw.io `.drawio` files from architecture shard documents (01-07) by analyzing the document content directly. Do NOT rely on Mermaid code blocks — instead, read and understand the prose, tables, and descriptions in each document to design appropriate diagrams with C4 modeling conventions, correct XML structure, and professional layout.
Goal: Generate professionally styled draw.io .drawio files from architecture shard documents (01-07) by analyzing the document content directly. Do NOT rely on Mermaid code blocks — instead, read and understand the prose, tables, and descriptions in each document to design appropriate diagrams with C4 modeling conventions, correct XML structure, and professional layout.
All reference files are located at ${PLUGIN_ROOT}/skills/architecture/diagrams/references/:
| File | Purpose |
|---|---|
c4-shape-definitions.md | draw.io XML style strings for every C4 element type |
c4-color-palettes.md | Color tables per diagram type (C4, Infrastructure, ERD, etc.) |
layout-rules.md | Spacing, dimensions, edge routing, font sizes, grid alignment |
template-snippets.md | Complete <mxGraphModel> XML templates per diagram type |
mermaid-to-drawio-mapping.md | Reference for draw.io XML element patterns (legacy name, used as XML pattern reference) |
visual-validation-guide.md | Visual defect checklist, fix strategies, and iteration protocol for post-render QA |
0[1-7]-*.md files in the target directoryDetermine diagram types based on the document's content and purpose:
| Document Subject | Diagram Type |
|---|---|
| System overview, actors, external systems | C4 Context (Level 1) |
| Application containers, services, databases | C4 Container (Level 2) |
| Internal component breakdown | C4 Component (Level 3) |
| Interaction flows, request/response sequences | Sequence Diagram |
| Data models, entity relationships | Entity-Relationship Diagram |
| Server infrastructure, cloud resources | Infrastructure Topology |
| Network zones, firewalls, security boundaries | Network Topology |
| Lifecycle states, transitions | State Machine |
| Build/deploy pipelines | CI/CD Pipeline |
| Data movement between systems | Data Flow |
A single document may warrant multiple diagrams. Identify all appropriate diagrams from the content.
For each identified diagram:
references/template-snippets.mdreferences/c4-shape-definitions.mdreferences/c4-color-palettes.mdid attributes for every mxCellreferences/layout-rules.mdparent="{containerId}" with relative coordinatesedgeStyle=orthogonalEdgeStyle with rounded=1Before generating coordinates, produce a brief layout plan for each diagram:
This plan is internal (not written to a file) — it guides the coordinate generation that follows.
.drawio file alongside source documents{doc_number}-{diagram_type}.drawio
01-c4-context.drawio, 04-seq-auth-flow.drawio, 07-erd.drawio04-seq-auth-flow-1.drawiowhich drawio || test -f /Applications/draw.io.app/Contents/MacOS/draw.io
.drawio files as-is, mark Visual QA as Skipped (no CLI).drawio file:
a. Export to PNG at 2× scale for readable text:
/Applications/draw.io.app/Contents/MacOS/draw.io -x -f png --scale 2 -b 10 -o {name}.drawio.png {name}.drawio
b. Read the PNG using the Read tool to visually inspect it
c. Evaluate against the defect checklist from references/visual-validation-guide.md
d. If issues found AND iteration count < 3:
references/visual-validation-guide.md.drawio file, re-export to PNG, re-inspect
e. If clean or max iterations (3) reached → proceed.drawio filesProduce a summary table:
| Source Doc | Diagram Type | Output File | Nodes | Edges | Visual QA |
|---|---|---|---|---|---|
| 01-high-level-design.md | C4 Context | 01-c4-context.drawio | 8 | 12 | Pass |
| ... | ... | ... | ... | ... | ... |
Visual QA column values: Pass, Pass (N iterations), Issues remaining: [desc], Skipped (no CLI)
These rules must be followed for every .drawio file:
<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/>...</root></mxGraphModel>parent="1" unless nested in a containerparent="{containerId}" with relative coordinates-- (double hyphens) inside XML comments&, <, >, "mxCell — use descriptive prefixes (e.g., person-1, sys-ext-2, edge-3)vertex="1" on shape cells and edge="1" on connector cellsswimlane;startSize=30; style with container=1pointerEvents=0 in stylenpx claudepluginhub nexussema/omg-marketplace --plugin sdlcGenerates .drawio architecture diagrams with consistent styles for containers, capabilities, external services, processes, and outcomes. Includes legend and exports to PNG/SVG/PDF/HTML.
Create, read, edit, and open draw.io (.drawio) files for architecture diagrams, ER diagrams, flowcharts, domain models, and more. Use to visualize or reference designs in development.
Generates and manages Mermaid architecture diagrams as separate traceable files linked to parent SDD documents (BRD, PRD, ADR, SPEC, IPLAN). Handles creation, inline migration, validation, and SVG rendering.