skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

blueprint

Render interactive self-contained HTML sequence diagrams from JSON specs with a frozen deterministic renderer.

Updated Aug 2, 2026
Search Tags:#architecture#documentation#html#python#json#visualization#sequence diagram
One-click install
npx skills add https://github.com/leonardoacosta/skills --skill blueprint-leonardoacosta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blueprint
Source: https://github.com/leonardoacosta/skills/tree/main/leo-core/skills/blueprint
Command: npx skills add https://github.com/leonardoacosta/skills --skill blueprint-leonardoacosta

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Hand-drawn ASCII sequence diagrams break once labels contain real text, and ad-hoc diagramming produces inconsistent visuals across projects. This Skill renders real sequence diagrams as one self-contained interactive HTML app from a JSON spec, with a frozen renderer (tokens, layout, emitter) so the drafting-paper look, generated OKLCH palette, swimlane headers, and colour lenses are byte-identical every run. ## Core Features & Use Cases - Deterministic rendering: You author only JSON; tokens.py, layout.py, and render_html.py produce identical SVG/HTML output on any project, with UML arrowhead mechanics, api/io type markers, combined fragments, and phase rails. - Two modes: Ad-hoc mode renders one diagram from a spec immediately; project mode discovers flows once into a cached master file, uses a git freshness check to re-render only changed scenarios, and fans out one agent per chosen flow. - Interactive output: The HTML app includes a scenario dropdown, switchable colour lenses (path highlight, cost, latency), click-for-detail cards, and built-in PNG export. - Use Case: Ask to diagram a checkout or login request flow; the Skill reads the real code, writes the v3 JSON spec, validates it, stamps the git SHA, and delivers an interactive index.html you can share. ## Quick Start Ask the agent to create a blueprint diagram of the login request flow in this repository and open the generated index.html.

Frequently Asked Questions about blueprint

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

FAQPage Schema
How do I generate a sequence diagram from my codebase?▼

Ask for a blueprint of a specific flow, or run render_html.py on a JSON spec: python3 scripts/render_html.py spec.json index.html. In project mode the Skill enumerates flows, lets you pick, fans out one agent per flow, and renders a master file into one interactive HTML.

How do I export a sequence diagram as PNG?▼

Open the generated index.html in a browser and click the PNG button in the bottom toolbar. The export is an in-browser canvas stitch of the header and body, so no separate PNG renderer is needed.

Does the diagram stay up to date when my code changes?▼

Yes. The master file stores a git SHA, and freshness.py compares it to HEAD to list only the scenarios whose source_paths changed. Unchanged scenarios are reused byte-for-byte and only stale or new flows are redrawn.

What JSON schema does the blueprint spec use?▼

It uses the v3 schema: per-scenario actors with id, label, and zone, plus ordered messages supporting kind (ret/async), via (api/io), captions, metrics, paths, and fragments. validate_master.py checks actor references and fragment ranges before rendering.

Why does the renderer reject certain label characters?▼

The validator rejects middle dots and em dashes in primary message text and warns past the length cap, because primaries must render as one short line without wrapping. Detail such as parameters, state, and model names belongs in the caption field instead.

Can I customize the diagram colors or style?▼

Not from the authoring side; the style is frozen so output is identical every run. Colors are positional OKLCH values generated from actor zones, and any visual change must be made in tokens.py, layout.py, or render_html.py, never in the JSON spec.

Related Skills

Explore More Software Engineering Skills→
n0rvynn0rvyn
1

feature-review

Validate feature implementations against user journey completeness and UX feedback.

Community
Advanced
lailtonjuniorlailtonjunior

Documentation

Generate and update Markdown and HTML documentation from code, schemas, and design notes.

Community
Intermediate
hanzlahabibhanzlahabib
2

rcode-browser-verify

Verify live browser behavior and UI state using Chrome DevTools MCP.

Community
Advanced
iani-kuliiani-kuli

diagrams

Generate technical diagrams from text-based markup languages like Mermaid, D2, or PlantUML.

Community
Intermediate