drawio-skills

Editing Diagrams (`/drawio edit`)

Use /drawio edit for incremental changes, theme switches, restructures, or imports from existing .drawio files.

Preferred Edit Modes

Existing offline bundle

This is the preferred path when the skill created the original diagram.

read .spec.yaml
update the spec
re-render .drawio
refresh .arch.json

Existing `.drawio` file without sidecars

Import first:

node skills/drawio/scripts/cli.js existing.drawio --input-format drawio --export-spec --write-sidecars

Then edit the generated spec and re-render.

Live browser session

Use this only when optional MCP is already configured and the user explicitly wants live refinement.

Critical rule:

call get_diagram before edit_diagram

Common Edit Operations

Rename labels

/drawio edit rename User Service to Auth Service

Add elements

/drawio edit add a Redis Cache node between API Gateway and User Service, then connect it with data-flow arrows

Change semantic types

/drawio edit change the Event Store node from service to database

Switch theme

/drawio edit switch the diagram to high-contrast for accessibility review

Restructure modules

/drawio edit restructure this into input, processing, and output modules using academic theme

Major structural edits should pause for confirmation after the logic draft when semantics may change.

Theme and Style Rules

new nodes inherit the current theme
new edges inherit the current connector style family
type changes update shape semantics
theme switches re-apply theme-token styling
explicit color overrides stay explicit

Offline Edit Commands

Re-render a .drawio bundle:

node skills/drawio/scripts/cli.js my-diagram.spec.yaml my-diagram.drawio --validate --write-sidecars

Re-render a strict SVG review artifact:

node skills/drawio/scripts/cli.js my-diagram.spec.yaml my-diagram.svg --validate --write-sidecars --strict-warnings

Live MCP Edit Flow

Use the live route only when needed:

start_session
create_new_diagram or load the current diagram
get_diagram
edit_diagram
export_diagram

This route is optional. The offline sidecar path remains the default editing workflow.

Troubleshooting

Styles look inconsistent after edits

check whether explicit style overrides were added
re-apply the theme if you want token-based consistency

Labels or IDs no longer match

inspect the current .spec.yaml
if using live MCP, fetch the latest XML with get_diagram

Edit scope is too large

convert it into a restructure request
confirm the new logic graph before rendering