Agent skill

draw.io Architecture Diagramming

by HoangNguyen0403 in HoangNguyen0403/agent-skills-standard

Draws architecture diagrams as editable draw.io files from a JSON spec, with a fixed house style, one C4 level per diagram and evidence-tagged shapes.

MITAuto-check passedDevelopment

Install draw.io Architecture Diagramming

skills CLI
$ npx skills add HoangNguyen0403/agent-skills-standard --skill common-architecture-diagramming -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install HoangNguyen0403/agent-skills-standard common-architecture-diagramming --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/HoangNguyen0403/agent-skills-standard.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/common/common-architecture-diagramming .claude/skills/common-architecture-diagramming && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
common-architecture-diagramming
GitHub stars
572
Token cost
~1.3k tokens
SKILL.md length
518 words
Files
71 (incl. scripts, references, assets)
Skills in repo
211
Repo updated
First seen
Licence
MIT

At a glance

Draws architecture diagrams as editable draw.io files from a JSON spec, with a fixed house style, one C4 level per diagram and evidence-tagged shapes.

  • Works in 6 steps: Write spec.json — schema in… → python3 scripts/validate_spec.py spec.json → python3 scripts/render_drawio.py… → …
  • Producing a C4 context, container or component diagram as a draw.io file
  • SKILL.md covers Priority: P1 (HIGH), Pipeline, Guidelines and Anti-Patterns, plus 2 more sections
  • Runs Python scripts from its folder; calls python3

What it does

The agent never hand-writes mxGraph XML. It writes a spec.json, and bundled scripts own every visual decision so diagrams look the same across authors, repositories and sessions. The flow is to write the spec, with schema_to_spec.py generating one from a SQL schema for ERDs, validate it with validate_spec.py, render with render_drawio.py in strict mode, optionally validate a manifest of related views, and export a PNG with export_drawio.py or a draw.io MCP tool.

The JSON spec is the semantic source of truth, the .drawio file is the editable presentation, and the image is a copy for a deck. Regeneration protects manual edits unless you acknowledge them after moving the changes back into the spec. After exporting, the agent looks at the image at normal reading size because strict validation cannot prove that labels and edges are legible.

Guidelines include naming the audience and decision first, one C4 level per diagram, choosing the diagram type from the message, separating evidence from confidence with assumed or unverified tags, putting load or SLO numbers in the metric field without inventing them, labeling every edge with its protocol or event, and using official GCP and AWS icons only, with other vendors as generic cloud kinds. Supported types include context, container, component, deployment, data flow, sequence, state and ERD.

When your agent uses it

  • Producing a C4 context, container or component diagram as a draw.io file
  • Redrawing an ASCII or Mermaid diagram as an editable draw.io diagram
  • Generating an ERD from a SQL schema file
  • Keeping architecture diagrams visually consistent across repositories

Example prompts

  • “Draw a C4 container diagram of the orders service as a draw.io file.”
  • “Generate an ERD from db/schema.sql and export it as a PNG.”
  • “Redraw the Mermaid sequence diagram in docs/checkout.md as an editable draw.io diagram.”

Requirements

  • Python 3, for the bundled spec, render and export scripts

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Write spec.json — schema in diagram-spec.md. For an ERD,
  2. python3 scripts/validate_spec.py spec.json
  3. python3 scripts/render_drawio.py spec.json -o docs/architecture/.drawio --strict
  4. For related views, optionally validate view-manifest.md
  5. Export the image: a draw.io MCP tool if the session has one, else
  6. Inspect the exported image at normal reading size; strict validation cannot prove labels and edges are legible. Fix the spec and re-export…

What it can do on your machine

Read from SKILL.md and the folder at commit b529c2d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Python, from the files we listed), which the agent can run.

    Shell commands in SKILL.md call:

    • python3

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

draw.io Architecture Diagramming loads about 1.3k tokens when it runs, and up to ~12k if it reads all its reference files. Until then it costs about 83 tokens; SKILL.md has 518 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~83
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~12k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from HoangNguyen0403/agent-skills-standard at commit b529c2d, republished under its MIT licence (© HoangNguyen0403). 518 words, ~1,274 tokens.

Download SKILL.mdSave it as .claude/skills/common-architecture-diagramming/SKILL.md (or your agent's skills folder). This skill also uses 70 other files; get the full folder from GitHub.
name
common-architecture-diagramming
description
Draws architecture diagrams as editable draw.io files with a fixed house style, C4 levels, evidence-tagged shapes, and optional multi-view identity checks. Use when producing a system context, container, component, deployment, data flow, sequence, state, or ERD, or redrawing an ASCII or Mermaid one.

Architecture Diagramming Standard

Priority: P1 (HIGH)

Pipeline

Never hand-write mxGraph XML. Write a spec; the scripts own every visual decision, so diagrams stay identical across authors, repositories, and sessions.

  1. Write spec.json — schema in diagram-spec.md. For an ERD, generate it: python3 scripts/schema_to_spec.py db/schema.sql --title "<System> — ERD" -o spec.json
  2. python3 scripts/validate_spec.py spec.json
  3. python3 scripts/render_drawio.py spec.json -o docs/architecture/<slug>.drawio --strict (exit 2 = a layout finding; change the spec, per layout-rules.md)
  4. For related views, optionally validate view-manifest.md: python3 scripts/validate_manifest.py view-manifest.json
  5. Export the image: a draw.io MCP tool if the session has one, else python3 scripts/export_drawio.py docs/architecture/<slug>.drawio -f png -o docs/architecture/<slug>.png, else ship the .drawio and say the image was not exported. See export paths.
  6. Inspect the exported image at normal reading size; strict validation cannot prove labels and edges are legible. Fix the spec and re-export before handoff.

The JSON spec is the semantic source of truth; .drawio is the editable presentation and the image is a copy for a deck. Generated XML records its own baseline; regeneration protects manual edits by default. Use --acknowledge-manual-edits only after returning semantic changes to the spec.

Guidelines

  • Name the audience and the decision before drawing anything.
  • One C4 level per diagram: context, container, or component, never mixed.
  • Pick the type from the message, not from habit. See diagram-selection.md.
  • Evidence and confidence are separate. Code citations are documented evidence, not runtime observations; use assumed or unverified for honest design uncertainty.
  • Put the number on the box. metric carries the load or SLO that sized the node, constraint says why it exists; never invent either.
  • Label every edge with its protocol or event; use style: async for events.
  • Cloud icons only where verified. gcp:* and aws:* are official icons; every other vendor is a cloud:* kind with the service named in sublabel. No Azure logos exist in the bundle, so Azure is always cloud:*.
  • Exec audience caps at 12 nodes. Past that, split by level or by flow.
  • Legend and title block are generated. Do not remove or duplicate them.
  • Refine in the spec, not by mutating generated XML. Regeneration preserves files with a valid own baseline, but refuses hand mutation until explicitly acknowledged.
Show full SKILL.md (158 more words)Show less

Anti-Patterns

  • No hand-written XML: Write the spec, run the renderer.
  • No invented boxes: Omit what the evidence does not support.
  • No mixed levels: Table columns never appear in a context diagram.
  • No unlabeled arrows: State the protocol or the event.
  • No mystery acronyms: Expand every abbreviation on first use.
  • No orphan nodes: Connect it or cut it.

Red Flags

ThoughtReality
"It is one box, I will write the XML"The renderer owns style, legend, and title block. Use it.
"Close enough, I will guess this service"Guesses ship as facts. Omit the evidence and let it render UNVERIFIED.
"Managers want the whole system on one page"Past 12 nodes they stop reading. Split it.

References

© HoangNguyen0403, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 70 other files (scripts, references, assets) in skills/common/common-architecture-diagramming of HoangNguyen0403/agent-skills-standard.

  • SKILL.md
  • assets/fixtures/component.drawio
  • assets/fixtures/component.spec.json
  • assets/fixtures/container.drawio
  • assets/fixtures/container.spec.json
  • assets/fixtures/context.drawio
  • assets/fixtures/context.spec.json
  • assets/fixtures/dataflow.drawio
  • assets/fixtures/dataflow.spec.json
  • assets/fixtures/deployment.drawio
  • assets/fixtures/deployment.spec.json
  • assets/fixtures/erd.drawio
  • assets/fixtures/erd.spec.json
  • assets/fixtures/evidence/component-view.md
  • assets/fixtures/evidence/orders_api.py
  • assets/fixtures/evidence/orders_retry.py
  • assets/fixtures/evidence/orders_schema.sql
  • assets/fixtures/schemas
  • … and 53 more

Open the folder on GitHubat commit b529c2d

Compare with similar skills

draw.io Architecture Diagramming next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

draw.io Architecture Diagramming compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
draw.io Architecture Diagramming this skillHoangNguyen0403/agent-skills-standard572—~1.3kAutomated safety check: PassMIT
Code Graph Mermaid Diagramstrailofbits/skills7.5k—~1.7kAutomated safety check: PassCC-BY-SA-4.0
DrawZimoLiao/scholaraio577—~1.3kAutomated safety check: NotesMIT
Archify Diagramstt-a1i/archify82k—~2.9kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design49k1 repos~7.6kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT

Similar skills

  • Code Graph Mermaid Diagrams

    trailofbits/skills

    Official

    Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps and attack surface data flows.

    7.5k GitHub stars~1.7k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Draw

    ZimoLiao/scholaraio

    A skill your agent uses when the user wants diagrams, flowcharts, architecture visuals, data relationships, timelines, concept maps, Mermaid, Graphviz, drawio, or polished paper figures generated…

    577 GitHub stars~1.3k tokensUpdated 15 days ago
    DevelopmentAuto-check: notes
  • Archify Diagrams

    tt-a1i/archify

    Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.

    82k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed
  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    49k GitHub starsUsed in 1 repo~7.6k tokens
    DevelopmentAuto-check passed
  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated today
    DevelopmentAuto-check: notes
  • Senior Architect Toolkit

    maslennikov-ig/claude-code-orchestrator-kit

    Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin…

    260 GitHub starsUsed in 8 repos~1.2k tokens
    DevelopmentAuto-check: notes

More from HoangNguyen0403/agent-skills-standard

All 211 skills in this repo
  • Subagent-Driven Development

    HoangNguyen0403/agent-skills-standard

    Runs a multi-task implementation plan by sending each task to a fresh implementer subagent, reviewing it independently, then reviewing the whole branch.

    572 GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed
  • Android Navigation 3 Guide

    HoangNguyen0403/agent-skills-standard

    Implements and migrates to Jetpack Navigation 3 in Compose: NavDisplay, typed route objects, a state-list back stack, deep links, multiple back stacks and dialog scenes.

    572 GitHub stars~687 tokensUpdated yesterday
    Auto-check passed
  • Angular HttpClient Standards

    HoangNguyen0403/agent-skills-standard

    Sets rules for Angular HTTP code: functional interceptors, typed requests, services that own every call, and httpResource for reactive data loading in Angular 17+.

    572 GitHub stars~652 tokensUpdated yesterday
    Auto-check passed
  • Angular Tooling

    HoangNguyen0403/agent-skills-standard

    Angular CLI usage, code generation, build configuration, and bundle optimization.

    572 GitHub stars~743 tokensUpdated yesterday
    Auto-check passed
  • Common Code Review

    HoangNguyen0403/agent-skills-standard

    Conduct high-quality, persona-driven code reviews. An agent skill from HoangNguyen0403/agent-skills-standard.

    572 GitHub stars~772 tokensUpdated yesterday
    Auto-check passed
  • Common Feedback Reporter

    HoangNguyen0403/agent-skills-standard

    Pre-write audit for skill violations: checks planned code against loaded skill anti-patterns before any file write.

    572 GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

Categories

Questions about draw.io Architecture Diagramming

What does draw.io Architecture Diagramming do?

Draws architecture diagrams as editable draw.io files from a JSON spec, with a fixed house style, one C4 level per diagram and evidence-tagged shapes. The agent never hand-writes mxGraph XML.json, and bundled scripts own every visual decision so diagrams look the same across authors, repositories and sessions.

When should I use draw.io Architecture Diagramming?

draw.io Architecture Diagramming fits situations like: producing a C4 context, container or component diagram as a draw.io file; redrawing an ASCII or Mermaid diagram as an editable draw.io diagram; generating an ERD from a SQL schema file; keeping architecture diagrams visually consistent across repositories.

How do I install draw.io Architecture Diagramming in Claude Code?

Run `npx skills add HoangNguyen0403/agent-skills-standard --skill common-architecture-diagramming -a claude-code`. Or copy the skill folder (skills/common/common-architecture-diagramming in HoangNguyen0403/agent-skills-standard) into .claude/skills/common-architecture-diagramming in your project. Claude Code loads it when a task matches its description.

How do I install draw.io Architecture Diagramming in Codex?

Run `npx skills add HoangNguyen0403/agent-skills-standard --skill common-architecture-diagramming -a codex`. Or copy the skill folder (skills/common/common-architecture-diagramming in HoangNguyen0403/agent-skills-standard) into .agents/skills/common-architecture-diagramming in your project. Codex loads it when a task matches its description.

Can I use draw.io Architecture Diagramming in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add HoangNguyen0403/agent-skills-standard --skill common-architecture-diagramming -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/common-architecture-diagramming, .gemini/skills/common-architecture-diagramming, .github/skills/common-architecture-diagramming and .opencode/skills/common-architecture-diagramming in your project.

What does draw.io Architecture Diagramming need to run?

Going by SKILL.md and its folder, draw.io Architecture Diagramming needs Python for the scripts in its folder and the command-line tools its instructions call (python3). Our summary lists: Python 3, for the bundled spec, render and export scripts.

Does draw.io Architecture Diagramming access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is draw.io Architecture Diagramming safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does draw.io Architecture Diagramming use?

draw.io Architecture Diagramming is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does draw.io Architecture Diagramming use?

About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 11k tokens, read only when the agent opens those files.

What are the alternatives to draw.io Architecture Diagramming?

Skills that share tags, products or a category with draw.io Architecture Diagramming: Code Graph Mermaid Diagrams (trailofbits/skills, 7.5k stars), Draw (ZimoLiao/scholaraio, 577 stars), Archify Diagrams (tt-a1i/archify, 82k stars) and Diagram Design (cathrynlavery/diagram-design, 49k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains draw.io Architecture Diagramming?

HoangNguyen0403 (a GitHub user) maintains it in HoangNguyen0403/agent-skills-standard, which has 572 GitHub stars. The repository holds 211 skills in this directory. The repository was last updated on October 9, 2026.

Source: HoangNguyen0403/agent-skills-standard on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.