New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Drawio Generator

by luongnv89 in luongnv89/skills

Generate professional diagrams as valid draw.io XML — flowcharts, architecture, C4 models, ER diagrams, sequence diagrams, mind maps, and swimlanes.

MITAuto-check passedDevelopment

Install Drawio Generator

skills CLI
$ npx skills add luongnv89/skills --skill drawio-generator -a claude-code

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

GitHub CLI
$ gh skill install luongnv89/skills drawio-generator --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/luongnv89/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/diagram-generator/drawio-generator .claude/skills/drawio-generator && 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
drawio-generator
GitHub stars
131
Token cost
~2.5k tokens
SKILL.md length
1,340 words
Files
11 (incl. references)
Skills in repo
37
Repo updated
First seen
Licence
MIT

At a glance

Generate professional diagrams as valid draw.io XML — flowcharts, architecture, C4 models, ER diagrams, sequence diagrams, mind maps, and swimlanes.

  • Works in 4 steps: Understand → Propose → Generate → …
  • Hand-drawn sketch styles
  • SKILL.md covers Environment Check, Repo Sync Before Edits…, Core Workflow and Expected Output, plus 7 more sections
  • Calls git

What it does

Drawio Generator is an agent skill from luongnv89/skills. Generate professional diagrams as valid draw.io XML — flowcharts, architecture, C4 models, ER diagrams, sequence diagrams, mind maps, and swimlanes. Don't use for Excalidraw or Mermaid output, hand-drawn sketch styles, or slide decks/presentations.

Its SKILL.md is about 2.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 14 other files, including reference files (for example `agents/xml-fixer.md`, `agents/xml-generator.md` and `agents/xml-validator.md`).

It sits in Development, covering Diagrams. It works with draw.io, Excalidraw, Mermaid and Git. The repository describes itself as: Supercharge your AI agents/bots with reusable skills. The licence is MIT.

When your agent uses it

  • Hand-drawn sketch styles
  • Slide decks/presentations

Example prompts

  • “/drawio-generator”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Understand
  2. Propose
  3. Generate
  4. Validate

What it can do on your machine

Read from SKILL.md and the folder at commit 891c720. 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

    Shell commands in SKILL.md call:

    • git

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

  • Network

    No URLs in SKILL.md. Its commands use git, which can reach the network depending on how they are called.

    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

Drawio Generator loads about 2.5k tokens when it runs, and up to ~8.9k if it reads all its reference files. Until then it costs about 66 tokens; SKILL.md has 1,340 words of instructions outside code blocks.

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

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from luongnv89/skills at commit 891c720, republished under its MIT licence (© luongnv89). 1,340 words, ~2,497 tokens.

Download SKILL.mdSave it as .claude/skills/drawio-generator/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.
name
drawio-generator
description
Generate professional diagrams as valid draw.io XML — flowcharts, architecture, C4 models, ER diagrams, sequence diagrams, mind maps, and swimlanes. Don't use for Excalidraw or Mermaid output, hand-drawn sketch styles, or slide decks/presentations.
license
MIT
effort
high
metadata.version
1.4.0
metadata.author
Luong NGUYEN <luongnv89@gmail.com>

Draw.io Diagram Generator

Generate professional diagrams as valid draw.io XML. Every request flows through four phases — Understand, Propose, Generate, Validate — before the file is written. Body content is intentionally lean to respect the agent's context budget; depth lives in references/.

Part of the diagram-generator suite. For a hand-drawn / sketch look, use excalidraw-generator instead; the diagram-generator umbrella routes between the two.

Environment Check

If the Agent tool is available, use subagents per Subagent Architecture for large diagrams; fresh-context validation avoids single-pass context overflow. Without it (e.g., Claude.ai), run every phase inline and self-review against the 9 checks.

Repo Sync Before Edits (mandatory)

Run this once: before reading an existing .drawio file (Iteration), otherwise before the Phase 4 write. The sync target is the output file's directory.

  1. Run repo="$(git -C "<output dir>" rev-parse --show-toplevel)". If it fails, skip the sync and record sync: skipped (not a git repo).
  2. Run git -C "$repo" remote get-url origin. If it fails, skip steps 3–6 and record sync: skipped (no origin).
  3. Run branch="$(git -C "$repo" rev-parse --abbrev-ref HEAD)". If it prints HEAD, skip steps 4–6 and record sync: skipped (detached HEAD).
  4. Run git -C "$repo" status --porcelain. If the output is empty, run git -C "$repo" fetch origin && git -C "$repo" pull --rebase origin "$branch".
  5. If the output is not empty, run git -C "$repo" stash push -u -m "drawio-generator pre-sync", then the same fetch and pull, then git -C "$repo" stash pop.
  6. If the rebase conflicts, run git -C "$repo" rebase --abort, then git -C "$repo" stash pop when step 5 stashed. If the stash pop conflicts, leave the stash in place. In both cases do not write the file; stop and ask the user how to continue. With no answer, the status is BLOCKED.

This skill writes one file and commits nothing.

Core Workflow

Phase 1: Understand

Confirm what to draw before generating anything.

  • Clear request — restate briefly and propose a visualization type:

    "I'll create a C4 container diagram with a layered layout: API gateway on top, services in the middle, databases at the bottom. Sound good?"

  • Ambiguous input — ask targeted questions: main entities, relationships, flow direction, multi-page need.
  • Code, schema, or config provided — extract structure:
    • Code → class/dependency/architecture
    • SQL/schema → ER diagram
    • JSON/YAML config → architecture, deployment
    • Steps/process → flowchart, sequence
Phase 2: Propose

Present the numbered plan below.

  • If the request names the diagram type and every element, state the defaults you chose in one line and proceed to Phase 3.
  • Otherwise, wait for the user to confirm or change the plan. Do not generate XML before the user answers.
  1. Diagram type (offer alternatives if multiple fit)
  2. Key elements — list nodes/shapes
  3. Layout — e.g. (A) Top-to-bottom, (B) Left-to-right, (C) Layered
  4. Style — (1) Professional, (2) C4 official, (3) Monochrome
  5. Multi-page? — for C4, offer one page per level
  6. Estimated complexity — small (<10), medium (10–30), large (30+)
Phase 3: Generate

Generate the draw.io XML in memory. Phase 4 writes the file.

Output path: use the path the user gave. Otherwise use a descriptive kebab-case name ending in .drawio (auth-flow.drawio) in the current working directory. If that file exists and the user did not ask to update it, confirm with the user before you overwrite it; to update it, follow Iteration.

Read references/xml-authoring.md for shape/edge/container syntax, sizing rules, multi-page structure, and file naming. Read references/drawio-format.md for the full XML schema and color palettes.

Critical rules every shape must follow:

  • Always include html=1;whiteSpace=wrap; in the style string
  • Use descriptive kebab-case IDs (node-api-gateway)
  • Provide <mxGeometry x y width height as="geometry"/> sized to fit the label
  • Edges need source, target, and <mxGeometry relative="1" as="geometry"/>
Phase 4: Validate

Run all 9 checks before writing the file. See references/validation-checks.md for the full check list and fix patterns.

  1. Run the 9 checks. If all pass, run Repo Sync, write the file, and give the Final Report with status COMPLETE.
  2. If a check fails, fix it and re-run all 9 checks. A failure of check 1 or 8 needs a Phase 3 regeneration, not a patch. Stop after 3 fix cycles.
  3. If checks 1–5 pass but a check from 6–9 still fails after cycle 3, run Repo Sync, write the file, and report PARTIAL with the failed check numbers.
  4. If check 1–5 still fails after cycle 3, do not write the file. Report BLOCKED with the failed checks.

The 9 checks: (1) XML structure and system cells, (2) required shape attributes, (3) unique IDs per page, (4) edge bindings, (5) edge geometry, (6) no overlaps >10px, (7) container hierarchy, (8) semantic completeness, (9) readable text and fitted shapes.

Expected Output

A valid .drawio file written to disk (raw XML), then the Final Report. A minimal complete file is in references/xml-authoring.md → Minimal complete file.

Show full SKILL.md (549 more words)Show less

Final Report

End every run, stops included, with this compact text block. A Phase 1–2 question that awaits the user's answer does not end the run; if the user ends the run without answering, report BLOCKED. Status is COMPLETE (file written, 9/9 checks pass), PARTIAL (file written, a check from 6–9 failed), or BLOCKED (no file written). Fill rules, PARTIAL and BLOCKED examples, and reader checks: references/final-report.md. Example:

Result: COMPLETE. Wrote flow.drawio (1 page, 2 shapes, 1 edge, 0 containers).
Evidence: /abs/path/flow.drawio. Validation 9/9 checks passed (inline, 1 cycle). sync: skipped (not a git repo)
Uncertainty: Rendering in draw.io untested. Assumed top-to-bottom flow; the request gave no direction.
Decision: No approval needed.

Acceptance Criteria

Verify these for every run:

  • A .drawio file is written to disk and its XML parses, unless the status is BLOCKED.
  • Checks 1–7 and 9 in references/validation-checks.md pass on every page, or the Final Report lists each failed check.
  • Every entity and relationship in the user's request is represented in the output (check 8).
  • The Final Report opens with Result: and its status, and has Evidence:, Uncertainty: and Decision: lines. Evidence: cites only checks that ran; 9/9 appears only when all 9 passed.
  • The Final Report passes the four reader checks in references/final-report.md (result findable, facts and assumptions separated, claims traceable, next decision clear). Without a human reviewer's answer, human understanding is unconfirmed.

Edge Cases

  • Empty or vague input ("make a diagram"): ask targeted clarifying questions before generating — never produce a placeholder.
  • Very large diagram (>50 elements): warn that one page will be crowded; offer multi-page or hierarchical C4.
  • Unsupported diagram type (e.g., Gantt with real date-axis ticks): explain the limitation and propose the closest supported alternative (e.g., swimlane timeline).
  • User supplies an existing .drawio file: read it first, preserve existing cell IDs, append new elements — never regenerate from scratch.
  • Conflicting layout constraints: surface the conflict and ask which takes priority.
  • Cross-page ID collision: each <diagram> has its own ID namespace; system cells id="0" and id="1" must be present on every page independently.
  • Text exceeds shape capacity: auto-grow shape height ~20px per extra line rather than letting text overflow silently.

Step Completion Reports

After each phase, print a short status report with that phase's checks; the template and per-phase checks are in references/step-reports.md. The Validate report precedes the Final Report; it does not replace it.

Styles and Diagram Types

Default style is Professional; C4 requests use the official C4 palette. Color rules and the supported diagram types: references/xml-authoring.md → Style guidelines and Supported diagram types.

Iteration

When iterating on an existing diagram, read the file and modify the XML in memory. Preserve element IDs that haven't changed. Run Phase 4 on the result before rewriting the file; a BLOCKED result leaves the original file untouched.

Subagent Architecture

Use the Phase 2 complexity estimate: large (30+ elements) runs this subagent loop; small and medium run inline.

Phase 3 — agents/xml-generator.md

  • Receives: diagram type, elements, edges, style, complexity
  • Outputs: complete draw.io XML with all required attributes
  • Constraint: shapes sized to fit text labels

Phase 4 — review loop (max 3 cycles)

  1. Validate — spawn agents/xml-validator.md. Outputs PASS/FAIL for all 9 checks.
  2. Fix — if NEEDS_FIX, spawn agents/xml-fixer.md with the report. Patches XML; never regenerates. Skips semantic/structure issues (those require generator revision).
  3. Re-validate with cycle++ until PASS or cycle == 3. If the fixer returns ready_for_validation: false (check 1 or 8), re-spawn agents/xml-generator.md with the validator report; that counts as a cycle.
  4. Return the XML and the last validator report to the main agent, which applies Phase 4 steps 1–4 (write, PARTIAL, or BLOCKED).

© luongnv89, 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 10 other files (references) in skills/diagram-generator/drawio-generator of luongnv89/skills.

  • SKILL.md
  • agents/xml-fixer.md
  • agents/xml-generator.md
  • agents/xml-validator.md
  • docs/README.md
  • evals/evals.json
  • references/drawio-format.md
  • references/final-report.md
  • references/step-reports.md
  • references/validation-checks.md
  • references/xml-authoring.md

Open the folder on GitHubat commit 891c720

Compare with similar skills

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

Drawio Generator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Drawio Generator this skillluongnv89/skills131—~2.5kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design47k1 repos~7.5kAutomated safety check: PassMIT
System Design Artifact IntakeHoangNguyen0403/agent-skills-standard571—~1.3kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT
Excalidraw Skillyctimlin/mcp_excalidraw2.5k—~4.6kAutomated safety check: PassMIT
Mermaid Diagramsjjmartres/opencode1336 repos~1.9kAutomated safety check: PassMIT

Similar skills

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

    47k GitHub starsUsed in 1 repo~7.5k tokens
    DevelopmentAuto-check passed

  • System Design Artifact Intake

    HoangNguyen0403/agent-skills-standard

    Ingest a provided design artifact - screenshot, drawio, Mermaid, PlantUML, Excalidraw, slides, PDF, or IaC - into a reviewable fact sheet.

    571 GitHub stars~1.3k tokensUpdated today
    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 7 days ago
    DevelopmentAuto-check: notes

  • Excalidraw Skill

    yctimlin/mcp_excalidraw

    Excalidraw canvas toolkit for creating, editing, and refining diagrams on a live canvas.

    2.5k GitHub stars~4.6k tokensUpdated 4 days ago
    DevelopmentAuto-check passed

  • Mermaid Diagrams

    jjmartres/opencode

    Helps an agent pick the right Mermaid diagram type and write the syntax for class, sequence, flow, ER, C4, state and other software diagrams.

    133 GitHub starsUsed in 6 repos~1.9k tokens
    DevelopmentAuto-check passed

  • Drawio Skill

    yuanchen-home/cumcm-step-review

    A skill your agent uses when the user requests diagrams, flowcharts, architecture diagrams, ER diagrams, UML / sequence / class diagrams, SysML / MBSE diagrams (block definition, internal block…

    319 GitHub stars~11k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

More from luongnv89/skills

All 37 skills in this repo

  • Dont Make Me Think

    luongnv89/skills

    Review UI usability using Steve Krug's principles and produce a scannable report.

    131 GitHub stars~2.5k tokensUpdated today
    Auto-check passed

  • Herdr Agent

    luongnv89/skills

    Manage AI agent fleets in Herdr: tile root + sub-agents in one tab, start/prompt/wait/read/monitor via the herdr agent CLI, steer any pane; help lists every operation.

    131 GitHub stars~4.8k tokensUpdated today
    Auto-check passed

  • Ollama Optimizer

    luongnv89/skills

    Optimize Ollama configuration for the current machine's hardware.

    131 GitHub stars~4.1k tokensUpdated today
    Auto-check: notes

  • Security Setup

    luongnv89/skills

    Install local-first security hardening: pre-commit secret detection, offline dependency scans, static analysis, reports, and gated free CI.

    131 GitHub stars~4.5k tokensUpdated today
    Auto-check passed

  • SEO AI Optimizer

    luongnv89/skills

    Audit and optimize websites for technical SEO, content SEO, and AI bot accessibility.

    131 GitHub stars~2.7k tokensUpdated today
    Auto-check passed

  • Tasks Generator

    luongnv89/skills

    Generate sprint-based development tasks from a PRD. An agent skill from luongnv89/skills.

    131 GitHub stars~3.8k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Drawio Generator

What does Drawio Generator do?

Generate professional diagrams as valid draw.io XML — flowcharts, architecture, C4 models, ER diagrams, sequence diagrams, mind maps, and swimlanes. Drawio Generator is an agent skill from luongnv89/skills.io XML — flowcharts, architecture, C4 models, ER diagrams, sequence diagrams, mind maps, and swimlanes.

When should I use Drawio Generator?

Drawio Generator fits situations like: hand-drawn sketch styles; slide decks/presentations.

How do I install Drawio Generator in Claude Code?

Run `npx skills add luongnv89/skills --skill drawio-generator -a claude-code`. Or copy the skill folder (skills/diagram-generator/drawio-generator in luongnv89/skills) into .claude/skills/drawio-generator in your project. Claude Code loads it when a task matches its description.

How do I install Drawio Generator in Codex?

Run `npx skills add luongnv89/skills --skill drawio-generator -a codex`. Or copy the skill folder (skills/diagram-generator/drawio-generator in luongnv89/skills) into .agents/skills/drawio-generator in your project. Codex loads it when a task matches its description.

Can I use Drawio Generator 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 luongnv89/skills --skill drawio-generator -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/drawio-generator, .gemini/skills/drawio-generator, .github/skills/drawio-generator and .opencode/skills/drawio-generator in your project.

What does Drawio Generator need to run?

Going by SKILL.md and its folder, Drawio Generator needs the command-line tools its instructions call (git).

Does Drawio Generator access the network?

SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Drawio Generator 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. Review the folder before installing.

What licence does Drawio Generator use?

Drawio Generator is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Drawio Generator use?

About 2.5k tokens (SKILL.md is roughly 10k 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 6.4k tokens, read only when the agent opens those files.

What are the alternatives to Drawio Generator?

Skills that share tags, products or a category with Drawio Generator: Diagram Design (cathrynlavery/diagram-design, 47k stars), System Design Artifact Intake (HoangNguyen0403/agent-skills-standard, 571 stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars) and Excalidraw Skill (yctimlin/mcp_excalidraw, 2.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Drawio Generator?

luongnv89 (a GitHub user) maintains it in luongnv89/skills, which has 131 GitHub stars. The repository holds 37 skills in this directory. The repository was last updated on October 9, 2026.

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