# Drawio Reconstruction

Reconstructs reference images into high-fidelity, editable Draw.io files with rendered...

- Repository: https://github.com/HKUSTDial/Supervisor-Skills (11333 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-16
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add HKUSTDial/Supervisor-Skills --skill drawio-reconstruction -g -a claude-code -y`
Codex: `npx skills add HKUSTDial/Supervisor-Skills --skill drawio-reconstruction -g -a codex -y`
Cursor: `npx skills add HKUSTDial/Supervisor-Skills --skill drawio-reconstruction -g -a cursor -y`
Gemini CLI: `npx skills add HKUSTDial/Supervisor-Skills --skill drawio-reconstruction -g -a gemini-cli -y`

## Description

Reconstructs reference images into high-fidelity, editable Draw.io files with rendered previews: native Draw.io elements carry text and structure, SVG covers simple icons that match the reference, and cropped or transparent PNGs preserve complex visuals. Use when the user wants a diagram image, research figure, architecture diagram, slide, UI screenshot, or image folder turned into `.drawio` XML; batch requests use a manifest with bounded parallelism when available and a full-fidelity serial fallback otherwise.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Draw.io Reconstruction

Use this skill for high-quality reconstruction of diagram images into `.drawio` files.

## Helper Script Location

Resolve `SKILL_DIR` to the absolute directory containing this `SKILL.md` before running any bundled helper. Use the resolved skill location provided by the runtime; never assume the skill is installed under `~/.codex`, `~/.agents`, or any other fixed directory.

All commands below use `$SKILL_DIR` to mean that resolved absolute directory.

## Fidelity Contract

The primary goal is visual fidelity to the reference image. Editability is secondary.

Do not treat semantic equivalence as success. A generic icon, generic curve, generic font size, approximate panel, or approximate background is a defect when the reference has a specific visual style.

Script checks only prove technical validity. A diagram is not complete merely because `.drawio` opens, exports, or passes `check_drawio.py` / `batch_verify.py`. Completion requires visual comparison against the reference at full size.

Work only in the target directory or target files named by the user. Do not repair, overwrite, or improve neighboring diagrams because they look related. If the requested target is ambiguous, inspect and report the ambiguity before editing.

Never silently rewrite the user's content. If the user asks for larger fonts or a more professional PPT style, first distinguish:

- **Layout-only refinement**: increase font size, resize boxes, improve spacing, align elements, adjust line breaks without changing words.
- **Content compression**: shorten sentences, remove details, rewrite labels. Ask permission before doing this.

## Batch Folder Workflow

Use this workflow when the user provides a directory of images or asks for batch reconstruction.

### Batch Intent And Scheduling

Before opening images for detailed visual analysis, decide whether the request is a batch reconstruction task:

The rest: https://github.com/HKUSTDial/Supervisor-Skills/blob/HEAD/skills/drawio-reconstruction/SKILL.md