drawio-diagram-builder

Create and iteratively refine editable draw.io XML diagrams using browser screenshot feedback loops.

Updated Aug 26, 2026
One-click install
npx skills add https://github.com/coollx/stable-harness --skill drawio-diagram-builder-coollx
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: drawio-diagram-builder
Source: https://github.com/coollx/stable-harness/tree/main/paper/.claude/skills/drawio-diagram-builder
Command: npx skills add https://github.com/coollx/stable-harness --skill drawio-diagram-builder-coollx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Creating high-fidelity research and technical diagrams in draw.io is error-prone when done blind: text overflows, arrows collide with boxes, and styles drift from reference figures. This Skill turns diagram authoring into an evidence-driven loop of XML authoring, local preview, screenshot review, and defect fixing. ## Core Features & Use Cases - Editable .drawio XML authoring: Generate diagrams.net files with explicit geometry for research figures, ML architecture diagrams, and paper method overviews, with pre-flight static validation of visual quality. - Screenshot feedback iteration: Preview diagrams locally via a diagrams.net iframe, capture canvas-only screenshots, and run structured defect inventories, red-team audits, and self-scoring before handoff. - Reference replication protocol: Reproduce reference figures through required intermediate artifacts (visual-spec, layout-grid, asset-ledger, defect-log) and style extraction from provided images. - Use Case: Given a machine learning paper's method section and a style reference figure, produce an editable, top-conference-quality architecture diagram verified across multiple screenshot review cycles. ## Quick Start Use the drawio-diagram-builder skill to create an editable draw.io diagram of my paper's method pipeline and refine it with screenshot review.

Frequently Asked Questions about drawio-diagram-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an editable draw.io diagram from a research paper?

Extract the method flow, entities, and connector semantics from the paper, then author .drawio XML with explicit mxGeometry positions. Preview it locally with the bundled serve_drawio_preview.py script and iterate using screenshot feedback until the diagram passes the self-score gate.

How do I replicate a reference figure in draw.io?

Follow the reference replication protocol: create visual-spec.md, layout-grid.md, asset-ledger.md, and defect-log.md before writing any XML. Then author the diagram, render it, and complete at least three screenshot review cycles comparing against the reference.

Why does my draw.io preview fail to load on Windows?

Large diagrams opened through long #create= URLs or .url shortcuts fail on Windows with a data area error. Use the local preview HTML approach instead, which loads XML into the diagrams.net embed iframe via postMessage with a short localhost URL.

What tools are required to use this diagram workflow?

You need Python 3.7+, a browser automation tool such as Playwright or Puppeteer for screenshots, internet access for the embed.diagrams.net iframe, and file write access. A vision-capable model is required when extracting styles from reference images.

Why does my first rendered diagram look wrong even though the XML is valid?

XML coordinates hide visual defects like arrow-box collisions, text overflow, and spacing chaos. Run the validate_visual_quality.py pre-flight checker before rendering; it computes these defects statically and must report zero FAILs before the first preview.