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.
Generate a diagram and route to the right engine — draw.io XML (precise, editable, C4, swimlanes) or Excalidraw JSON (hand-drawn, sketch, wireframes).
$ npx skills add luongnv89/skills --skill diagram-generator -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install luongnv89/skills diagram-generator --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/luongnv89/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/diagram-generator .claude/skills/diagram-generator && rm -rf skills-srcUse ~/.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/
Install the "diagram-generator" agent skill from https://github.com/luongnv89/skills/tree/main/skills/diagram-generator into .claude/skills/diagram-generator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram-generator", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/luongnv89/skills/tree/main/skills/diagram-generatorType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add luongnv89/skills --skill diagram-generator -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install luongnv89/skills diagram-generator --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/luongnv89/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/diagram-generator .agents/skills/diagram-generator && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "diagram-generator" agent skill from https://github.com/luongnv89/skills/tree/main/skills/diagram-generator into .agents/skills/diagram-generator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram-generator", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add luongnv89/skills --skill diagram-generator -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install luongnv89/skills diagram-generator --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/luongnv89/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/diagram-generator .cursor/skills/diagram-generator && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "diagram-generator" agent skill from https://github.com/luongnv89/skills/tree/main/skills/diagram-generator into .cursor/skills/diagram-generator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram-generator", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/luongnv89/skills.git --path skills/diagram-generator--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add luongnv89/skills --skill diagram-generator -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install luongnv89/skills diagram-generator --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/luongnv89/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/diagram-generator .gemini/skills/diagram-generator && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "diagram-generator" agent skill from https://github.com/luongnv89/skills/tree/main/skills/diagram-generator into .gemini/skills/diagram-generator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram-generator", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install luongnv89/skills diagram-generatorInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add luongnv89/skills --skill diagram-generator -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/luongnv89/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/diagram-generator .github/skills/diagram-generator && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "diagram-generator" agent skill from https://github.com/luongnv89/skills/tree/main/skills/diagram-generator into .github/skills/diagram-generator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram-generator", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add luongnv89/skills --skill diagram-generator -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install luongnv89/skills diagram-generator --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/luongnv89/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/diagram-generator .opencode/skills/diagram-generator && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "diagram-generator" agent skill from https://github.com/luongnv89/skills/tree/main/skills/diagram-generator into .opencode/skills/diagram-generator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram-generator", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
diagram-generatorGenerate a diagram and route to the right engine — draw.io XML (precise, editable, C4, swimlanes) or Excalidraw JSON (hand-drawn, sketch, wireframes).
Diagram Generator is an agent skill from luongnv89/skills. Generate a diagram and route to the right engine — draw.io XML (precise, editable, C4, swimlanes) or Excalidraw JSON (hand-drawn, sketch, wireframes). One entry for flowcharts, architecture, ER, sequence, mind maps. Don't use for Mermaid or slides.
Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `docs/README.md`, `evals/evals.json` and `references/final-report.md`).
It sits in Development, covering Diagrams. It works with draw.io, Excalidraw and Mermaid. The repository describes itself as: Supercharge your AI agents/bots with reusable skills. The licence is MIT.
6 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit b5ef695. It shows what the files ask for, not the result of running them.
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.
No scripts in the folder and no shell commands in SKILL.md (its code samples are bash).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Diagram Generator loads about 2.2k tokens when it runs, and up to ~3.2k if it reads all its reference files. Until then it costs about 67 tokens; SKILL.md has 1,059 words of instructions outside code blocks.
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.
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.
The full file from luongnv89/skills at commit b5ef695, republished under its MIT licence (© luongnv89). 1,059 words, ~2,239 tokens.
.claude/skills/diagram-generator/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.Single entry point for "make me a diagram". This umbrella picks one engine and hands the request to
it. Both engines cover the same diagram types (flowchart, architecture, C4, ER, sequence, mind map)
through the same four phases (Understand → Propose → Generate → Validate); they differ only in
output format and aesthetic. The umbrella writes no file itself. Its body stays short to protect
the agent's context window; report templates live in references/.
| Engine | When the user wants... | Output |
|---|---|---|
drawio-generator | Precise, professional diagrams to edit later in draw.io / diagrams.net / Confluence; official C4 styling; swimlanes; multi-page | kebab-case .drawio file (XML) |
excalidraw-generator | A hand-drawn, sketchy, whiteboard feel; wireframes; quick collaborative sketches | kebab-case .excalidraw file (JSON) |
Apply the routing rules in order and stop at the first rule that matches:
.drawio → drawio-generator,
.excalidraw → excalidraw-generator.excalidraw-generator.drawio-generator, and wireframes, brainstorms, and mind maps to excalidraw-generator.
Anything else that is delegated goes to drawio-generator.Silence is not delegation. Ask content questions (entities, relationships, direction) only inside the engine's Phase 1, never in the umbrella.
This skill invokes the two engines declared in frontmatter dependencies, but each run needs only
the one that routing selects. Run this once, after routing and before the engine starts:
if command -v asm >/dev/null && asm deps --help >/dev/null 2>&1; then
asm deps discover diagram-generator --json || echo "discover failed; acquire still runs" >&2
echo "dg_mode=lease"
else
echo "asm deps unavailable: npm install -g agent-skill-manager@latest" >&2
echo "dg_mode=installed"
fi
printf 'dg_session=%s\n' "diagram-generator-$(date +%s)-$$" # record it; reuse it verbatimdg_mode=lease, run asm deps acquire <engine> --session <dg_session> --json for the
routed engine only. Record the returned skillMdPath.dg_mode=installed, run
test -f "$HOME/.claude/skills/<engine>/SKILL.md" || test -f "$HOME/.agents/skills/<engine>/SKILL.md"
and record the path that exists.Missing skill: <engine> — install: asm install github:luongnv89/skills:skills/diagram-generator/<engine> -p claude --yes,
then stop with the missing-engine Final Report. Never substitute the other engine. Never
imitate the engine inline.finally. If any acquire ran, run asm deps release --session <dg_session> --json
once at every terminal outcome, stops included, after the closing Final Report.Do not acquire the engine that routing did not select.
The umbrella runs no git command and writes no file. The routed engine runs its own Repo Sync Before Edits (scoped to the output file's repository, with its conflict and network-failure rules) before it writes. Do not run a second sync here, and do not skip the engine's sync.
Routing to <engine>: <the rule that matched, in the user's words>.SKILL.md path and follow that engine's workflow with the user's request
unchanged. The engine owns its questions, file naming, Repo Sync, validation, and fix cycles.
It also asks for confirmation before it overwrites an existing file; never skip or pre-answer
that confirmation.Both engines end every run, stops included, with a four-line Final Report (Result: COMPLETE |
PARTIAL | BLOCKED, Evidence:, Uncertainty:, Decision:). When an engine ran, its Final Report
is this skill's closing output. Relay it verbatim: do not restate it, re-grade it, or change its
status. If the release step fails, add one line after the closing report, whichever skill wrote it:
Router note: asm deps release failed for session <dg_session>; run asm deps release --session <dg_session> --json.
When the umbrella stops before any engine runs (out of scope, unanswered routing question, missing
engine), it writes its own four-line report with status BLOCKED. Templates and fill rules:
references/final-report.md. Expected output when the routed engine is missing:
Result: BLOCKED. No diagram written: drawio-generator is not installed.
Evidence: Routed to drawio-generator (rule 3, "in draw.io"). Preflight dg_mode=lease; asm deps acquire drawio-generator failed.
Uncertainty: No engine ran, so no file was generated or validated.
Decision: Install drawio-generator with the printed command, then re-run. Excalidraw output is available only if you ask for it.Input: "Draw a sketchy onboarding wireframe for mobile."
Route: Routing to excalidraw-generator: rule 5, "sketchy wireframe".
Closing: excalidraw-generator's Final Report, relayed unchanged, e.g.
Result: COMPLETE. Wrote mobile-onboarding-wireframe.excalidraw (...)Verify these for every run:
Routing to line names the matching rule.Result: BLOCKED and has Evidence:,
Uncertainty: and Decision: lines.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.drawio-generator when no order was
given. After its Final Report, run the other engine on the same content without asking again,
because the user already asked for both: acquire it under the same dg_session. If the first
engine ended BLOCKED, ask before running the second. Relay each engine's Final Report in turn.© luongnv89, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 3 other files (references) in skills/diagram-generator of luongnv89/skills.
Open the folder on GitHubat commit b5ef695
Diagram 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Diagram Generator this skillluongnv89/skills | 131 | — | ~2.2k | Automated safety check: Pass | MIT | |
| Diagram Designcathrynlavery/diagram-design | 48k | 1 repos | ~7.6k | Automated safety check: Pass | MIT | |
| System Design Artifact IntakeHoangNguyen0403/agent-skills-standard | 572 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Draw.io Diagram StudioAgents365-ai/drawio-skill | 10k | — | ~2.4k | Automated safety check: Notes | MIT | |
| Excalidraw Skillyctimlin/mcp_excalidraw | 2.5k | — | ~4.6k | Automated safety check: Pass | MIT | |
| Drawio Skillyuanchen-home/cumcm-step-review | 319 | — | ~11k | Automated safety check: Pass | MIT |
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.
HoangNguyen0403/agent-skills-standard
Ingest a provided design artifact - screenshot, drawio, Mermaid, PlantUML, Excalidraw, slides, PDF, or IaC - into a reviewable fact sheet.
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.
yctimlin/mcp_excalidraw
Excalidraw canvas toolkit for creating, editing, and refining diagrams on a live canvas.
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…
bahayonghang/drawio-skills
Create, edit, replicate, import, and export draw.io diagrams with an offline YAML-first workflow: architecture, network topologies, flowcharts, UML/ER, org charts, Mermaid/CSV conversion, existing…
luongnv89/skills
Review UI usability using Steve Krug's principles and produce a scannable report.
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.
luongnv89/skills
Optimize Ollama configuration for the current machine's hardware.
luongnv89/skills
Install local-first security hardening: pre-commit secret detection, offline dependency scans, static analysis, reports, and gated free CI.
luongnv89/skills
Audit and optimize websites for technical SEO, content SEO, and AI bot accessibility.
luongnv89/skills
Generate sprint-based development tasks from a PRD. An agent skill from luongnv89/skills.
Works with
Categories
Generate a diagram and route to the right engine — draw.io XML (precise, editable, C4, swimlanes) or Excalidraw JSON (hand-drawn, sketch, wireframes). Diagram Generator is an agent skill from luongnv89/skills.io XML (precise, editable, C4, swimlanes) or Excalidraw JSON (hand-drawn, sketch, wireframes).
Diagram Generator fits situations like: tasks that involve Diagrams.
Run `npx skills add luongnv89/skills --skill diagram-generator -a claude-code`. Or copy the skill folder (skills/diagram-generator in luongnv89/skills) into .claude/skills/diagram-generator in your project. Claude Code loads it when a task matches its description.
Run `npx skills add luongnv89/skills --skill diagram-generator -a codex`. Or copy the skill folder (skills/diagram-generator in luongnv89/skills) into .agents/skills/diagram-generator in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add luongnv89/skills --skill diagram-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/diagram-generator, .gemini/skills/diagram-generator, .github/skills/diagram-generator and .opencode/skills/diagram-generator in your project.
SKILL.md names no scripts, command-line tools or credentials: Diagram Generator is instructions for the agent only. Our summary lists: Node.js.
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.
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.
Diagram Generator is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.2k tokens (SKILL.md is roughly 9k 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 965 tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Diagram Generator: Diagram Design (cathrynlavery/diagram-design, 48k stars), System Design Artifact Intake (HoangNguyen0403/agent-skills-standard, 572 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.
luongnv89 (a GitHub user) maintains it in luongnv89/skills, which has 131 GitHub stars. The repository holds 35 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.