blueprint

Installation
SKILL.md

Sequence diagram

Render real sequence diagrams as one self-contained interactive index.html. Never hand-draw ASCII sequence diagrams — they collide once labels have real text. The renderer is frozen: scripts/tokens.py (the single source of truth for every colour/size — never hardcode style elsewhere) → scripts/layout.py (pure geometry) → scripts/render_html.py (SVG/HTML emitter) + scripts/assets/ (app.css/app.js/page.html). You only ever write JSON data, so the look is identical every run, on every project. Design legend: STYLE.md. PNG is the in-browser ⤓ export (no separate PNG renderer).

The output is a small app: a clean header bar with a scenario dropdown (when there are 2+), the active diagram full-bleed (sticky swimlane header, the body scrolls), and a bottom toolbar of colour lenses + a PNG export. Click any message for its detail.

Two modes

Installs
3
First Seen
Aug 2, 2026
blueprint — leonardoacosta/skills