drawio-diagram-builder

Name: drawio-diagram-builder
Author: Will-hxw

77installs7forks

How to install drawio-diagram-builder?

will-hxw/drawio-diagram-builder-skill/drawio-diagram-builder

$npx -y skills add Will-hxw/drawio-diagram-builder-skill --skill drawio-diagram-builder

Installs into the current project.

Summary

Create, edit, replicate, and iteratively refine editable research and technical diagrams in diagrams.net/draw.io (.drawio XML) from prompts, papers, repositories, screenshots, or existing diagrams. Use when asked to generate a scientific figure, paper method diagram, ML/system ar

Files · 1

View on GitHub

SKILL.md

1	# Research Draw.io Diagram Builder
2
3	## Prerequisites
4
5	Before starting, verify these are available. If anything is missing, tell the user immediately — do not proceed without them.
6
7	\| Requirement \| Why \|
8	\|-------------\|-----\|
9	\| Python 3 (3.7+) \| All preview/validation scripts are Python. Run `python --version` to check. \|
10	\| Browser automation \| The iterative refinement loop depends on taking screenshots of a local preview. You need one of: Playwright MCP, Puppeteer MCP, browser-evaluate/screenshot tools, or equivalent. \|
11	\| Vision / image-reading tool (required when user provides reference images as style guides) \| Style extraction (see `references/style-extraction.md`) requires sampling pixel colors from reference images. You need one of: vision-capable model with image reading, a color-picker MCP/browser tool, or the ability to ask the user for hex codes. Without this, you CANNOT complete the style extraction table — do not fabricate hex codes. Fallback: ask the user for the palette. \|
12	\| Internet access \| Preview loads `https://embed.diagrams.net/` in an iframe. Offline won't work. \|
13	\| File write access \| You will create `.drawio` files. \|
14
15	Script paths in this document are relative to the skill directory. Resolve them like `<skill-dir>/scripts/serve_drawio_preview.py`. If you can't find the skill directory, look under the agent's installed skills path (e.g., `~/.claude/skills/drawio-diagram-builder/` or `~/.codex/skills/drawio-diagram-builder/`).
16
17	If Playwright reports a missing bundled browser, first try an installed browser channel before giving up, for example `npx playwright screenshot --channel chrome ...` or `--channel msedge ...`.
18
19	## Core Principle
20
21	Produce an editable draw.io diagram first, especially for research and technical figures. Do not use an embedded screenshot as the final answer when the user asks for redraw, replica, vector, editable, or 100% reproduction. Raster images may be used only as references, temporary overlays, or explicitly approved assets.
22
23	Prefer direct `.drawio` XML authoring plus browser screenshot feedback for complex or high-fidelity diagrams. Use local draw.io UI control only when it materially improves inspection or user handoff.
24
25	## Tool Strategy
26
27	Use this priority order:
28
29	1. Direct `.drawio` XML generation/editing — reliable, reproducible. Write XML with explicit `mxGeometry` positions.
30	2. Local preview HTML + diagrams.net iframe postMessage — run `scripts/serve_drawio_preview.py` (one command, starts server + opens browser) or `scripts/make_drawio_preview.py` + `python -m http.server`. This keeps the browser URL short, avoiding the Windows long-URL crash.
31	3. Browser automation screenshots — navigate browser to `http://127.0.0.1:<port>/drawio-preview.html`, wait for the draw.io embed to load (2-5 seconds), take a full-page or viewport screenshot. This is the evidence you compare against the reference.
32	4. draw.io MCP / `@drawio/mcp` — only for small diagrams or quick opening. On Windows, large encoded URLs fail with `The data area passed to a system call is too small`; do not rely on `.url` shortcuts for large XML.
33	5. draw.io desktop/CLI export — if installed. Treat as optional; always have the local iframe preview fallback.
34
35	Load `references/drawio-workflow.md` for the detailed end-to-end process. Load `references/self-supervision-and-intake.md` for any non-trivial diagram, mixed prompt-plus-image input, project-context diagram, or iterative visual repair. Load `references/style-extraction.md` when the user provides reference images as style guides — mandatory before authoring XML; you must extract palette, typography, spacing, and arrow grammar before drawing. Load `references/topconf-paper-style.md` when the user asks for a computer-science paper, top-conference, camera-ready, method, ML pipeline, multimodal architecture, benchmark, or polished research figure, especially when the user gives weak or missing style references. Load `references/xml-authoring.md` when writing or repairing XML shapes, styles, edges, and text layout. Load `references/xml-preflight.md` before rendering any diagram — it documents static XML quality checks that catch computable defects (arrow-box collisions, text overflow, spacing variance, color chaos) without a screenshot. Load `references/primitive-icons.md` when a reference figure contains small modality, memory, warning, tool, clock, document, or other pap

People who liked this also viewed

6 picks

Type

drawio-diagram-builder

77installs7forks

View on GitHub

How to install drawio-diagram-builder?

will-hxw/drawio-diagram-builder-skill/drawio-diagram-builder

$npx -y skills add Will-hxw/drawio-diagram-builder-skill --skill drawio-diagram-builder

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Research Draw.io Diagram Builder
2
3	## Prerequisites
4
5	Before starting, verify these are available. If anything is missing, tell the user immediately — do not proceed without them.
6
7	\| Requirement \| Why \|
8	\|-------------\|-----\|
9	\| Python 3 (3.7+) \| All preview/validation scripts are Python. Run `python --version` to check. \|
10	\| Browser automation \| The iterative refinement loop depends on taking screenshots of a local preview. You need one of: Playwright MCP, Puppeteer MCP, browser-evaluate/screenshot tools, or equivalent. \|
11	\| Vision / image-reading tool (required when user provides reference images as style guides) \| Style extraction (see `references/style-extraction.md`) requires sampling pixel colors from reference images. You need one of: vision-capable model with image reading, a color-picker MCP/browser tool, or the ability to ask the user for hex codes. Without this, you CANNOT complete the style extraction table — do not fabricate hex codes. Fallback: ask the user for the palette. \|
12	\| Internet access \| Preview loads `https://embed.diagrams.net/` in an iframe. Offline won't work. \|
13	\| File write access \| You will create `.drawio` files. \|
14
15	Script paths in this document are relative to the skill directory. Resolve them like `<skill-dir>/scripts/serve_drawio_preview.py`. If you can't find the skill directory, look under the agent's installed skills path (e.g., `~/.claude/skills/drawio-diagram-builder/` or `~/.codex/skills/drawio-diagram-builder/`).
16
17	If Playwright reports a missing bundled browser, first try an installed browser channel before giving up, for example `npx playwright screenshot --channel chrome ...` or `--channel msedge ...`.
18
19	## Core Principle
20
21	Produce an editable draw.io diagram first, especially for research and technical figures. Do not use an embedded screenshot as the final answer when the user asks for redraw, replica, vector, editable, or 100% reproduction. Raster images may be used only as references, temporary overlays, or explicitly approved assets.
22
23	Prefer direct `.drawio` XML authoring plus browser screenshot feedback for complex or high-fidelity diagrams. Use local draw.io UI control only when it materially improves inspection or user handoff.
24
25	## Tool Strategy
26
27	Use this priority order:
28
29	1. Direct `.drawio` XML generation/editing — reliable, reproducible. Write XML with explicit `mxGeometry` positions.
30	2. Local preview HTML + diagrams.net iframe postMessage — run `scripts/serve_drawio_preview.py` (one command, starts server + opens browser) or `scripts/make_drawio_preview.py` + `python -m http.server`. This keeps the browser URL short, avoiding the Windows long-URL crash.
31	3. Browser automation screenshots — navigate browser to `http://127.0.0.1:<port>/drawio-preview.html`, wait for the draw.io embed to load (2-5 seconds), take a full-page or viewport screenshot. This is the evidence you compare against the reference.
32	4. draw.io MCP / `@drawio/mcp` — only for small diagrams or quick opening. On Windows, large encoded URLs fail with `The data area passed to a system call is too small`; do not rely on `.url` shortcuts for large XML.
33	5. draw.io desktop/CLI export — if installed. Treat as optional; always have the local iframe preview fallback.
34
35	Load `references/drawio-workflow.md` for the detailed end-to-end process. Load `references/self-supervision-and-intake.md` for any non-trivial diagram, mixed prompt-plus-image input, project-context diagram, or iterative visual repair. Load `references/style-extraction.md` when the user provides reference images as style guides — mandatory before authoring XML; you must extract palette, typography, spacing, and arrow grammar before drawing. Load `references/topconf-paper-style.md` when the user asks for a computer-science paper, top-conference, camera-ready, method, ML pipeline, multimodal architecture, benchmark, or polished research figure, especially when the user gives weak or missing style references. Load `references/xml-authoring.md` when writing or repairing XML shapes, styles, edges, and text layout. Load `references/xml-preflight.md` before rendering any diagram — it documents static XML quality checks that catch computable defects (arrow-box collisions, text overflow, spacing variance, color chaos) without a screenshot. Load `references/primitive-icons.md` when a reference figure contains small modality, memory, warning, tool, clock, document, or other pap

People who liked this also viewed

6 picks

Type