1. Habit
  2. Skills
  3. Draw.io skill
bahayonghang · 8K installs

Draw.io skill
Runs by itself, every time a diagram file changes.

Your diagrams stay correct as things change.

Install the Draw.io skill and make it a habit: follow https://gethabit.dev/skills/bahayonghang/drawio.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

8K installs291 starsMIT licenceSource on GitHub ↗

Draw.io

by bahayonghang · 8K installs

The skill

Draws diagrams from a text file and checks them.

Only when you ask.

Up-to-date diagrams

Your diagrams stay correct as things change. Less confusion for your team.

↻ Runs by itselfevery time a diagram file changes

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

diagram spec changed. Runs in Claude Code routine or GitHub Actions.

  • ↻ diagram spec changed
  • push touches *.spec.yaml

02

It checks its work

validator and export check. If a check fails, it tries again.

  • ✓cli.js --validate reports no errors
  • ✓the .drawio file exists
  • ✓a PNG or fallback SVG was exported
  • ✓no unresolved blockers from the previous review

03

It remembers

visual review record. The next run reads it first: blockers left open in the last visual review.

loops/drawio-diagram-loop/review.md

One run, step by step.
Then it stops.

Stop ruleStops after 3 diagrams or 2 rework rounds per diagram.

  1. 01

    Pick the route

    Identify the diagram type and load only the references for that route.

  2. 02

    Normalize to YAML

    Turn text, Mermaid, CSV or an imported .drawio into the canonical YAML spec.

  3. 03

    Validate and render

    Run node scripts/cli.js with --validate to write the .drawio and the image.

  4. 04

    Inspect the export

    Look at the exported PNG, or the SVG fallback, for overlaps and label problems.

  5. 05

    Fix and rerun

    Patch the YAML when validation or the visual check fails, then render again.

  6. 06

    Report

    List deliverables, commands run, the image checked and any missing exporters.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Draw.io skill helps.

Use it when

  • ✓ drawing an architecture diagram
  • ✓ converting Mermaid or CSV to draw.io
  • ✓ redrawing a screenshot of a diagram

Skip it when

  • – figures for a paper or thesis
  • – a quick sketch with no file needed

Questions

Draw.io skill, answered.

Does it need draw.io Desktop?

Only for PNG, PDF and JPG export. Without it the skill falls back to a standalone SVG.

Does it need a server?

No. The default path works offline; the live browser backend is optional.

Does it do paper figures?

No. Publication figures belong to the separate drawio-academic-skills overlay.

How do I install the Draw.io skill?

Copy the prompt at the top into your agent. It installs the skill from bahayonghang/drawio-skills and sets up the habit. Or run npx skills add bahayonghang/drawio-skills --skill drawio.

Is the Draw.io skill free?

Yes. It is published under MIT. Habit is free too.

Draw.io. Now as a habit.

Install the Draw.io skill and make it a habit: follow https://gethabit.dev/skills/bahayonghang/drawio.md

  • Free
  • No account
  • Undo in one line

All bahayonghang skills →More docs skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by bahayonghang, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.