The diagram-workflow skill

This is the curated public skill, agentic-mermaid-diagram-workflow. The live-editor skill stays out of agent onboarding; for an agent editing diagrams, this is the one to reach for.

The shape of a run

Four moves, the same every time.

1. Describe. “Move the verify node below mutate and label the back-edge warnings.” Plain language, no node IDs.
2. Narrow. The skill resolves your words to a node or edge and scopes the edit there, so nothing else can move.
3. Mutate and verify. It applies the change and runs verify; structural, geometric, and lint tiers come back with layout details for inspection.
4. Report. You get the new render plus the tiers – ship, re-narrow, or stop and ask.

A run, end to end

> describe: rename N to spell out "narrow, then move below mutate"
✓ narrowed: node N
✓ mutated: 1 node relabelled
verify → { "ok": true, "warnings": [
  { "code": "LABEL_OVERFLOW", "target": "N", "charCount": 60, "limit": 40 }   // tier: structural
] }
> re-narrow: shorten N’s label
verify → { "ok": true, "warnings": [] }   ✓ shipped

Because layout is deterministic, the re-narrow moved only the label – every other node landed exactly where it was, so the agent never re-checks work it already trusted.

When to use it

Reach for the workflow skill to change an existing diagram – the loop is the whole point. To author a diagram from scratch, the local CLI or library renderer is enough; for interactive, human-in-the-loop editing, the browser editor is the better fit. Read agent instructions

The local stdio MCP exposes execute, render_png, and describe. The workflow skill performs parse, narrow, mutate, and verify inside trusted local Code Mode execute; the hosted MCP remains a future bounded surface and never gets arbitrary execute(code).