Visual Explainer Studio

Turn systems into styled HTML diagrams, slide decks, diff reviews and plan audits, in-browser.

Visual Explainer Studio — turn systems into styled HTML diagrams, slide decks, diff reviews and plan audits, in-browser.

How to use Visual Explainer Studio

Pick a mode: web diagram, slide deck, diff review or plan review
Choose one of the 11 real themes and a font pair from the repo's themes reference
Edit node labels, kinds, columns and rows to draw your system, then watch the live SVG update
Step through the job-queue replay or flip the before/after view to compare states
Paste a unified diff for a file map, or set requirement statuses for plan coverage
Copy or download the standalone HTML page with the theme tokens baked in

The skill's 11 real theme palettes and 5 font pairs from references/themes.md, with exact hex values
Live SVG diagrams using the repo's grammar: grid layout, orthogonal edges, shape kinds, flow dots and callouts
Six diagram types: flowchart, sequence, schema, state-machine replay, timeline and before/after
Slide-deck mode with the repo's per-slide budget and a delivery check
Diff review with a unified-diff file map and plan review with requirement coverage
Copy or download a standalone HTML page carrying the repo's theme tokens

Yes, unlimited.