Interactive diagrams
2 listings
Skills
Build interactive diagrams from a description or a repo
This skill creates interactive diagrams as self-contained HTML pages with embedded SVG, working from a plain-language description, Mermaid, or evidence read from a repository. It covers system architecture, request sequences, state machines, data models, class contracts, and timelines, with dark and light themes and export to image, SVG, or WebM. Each diagram is checked against a schema before it is delivered. It is not meant to replace charts of numbers or dashboards.
Draw interactive isometric figures that explain a system
This skill builds detailed interactive SVG figures that show how a technical idea works as a physical object, such as a dial gauge, a plotter, or a lock. Each figure has many small parts with four-tone shading and a framed card that carries a title, a hint, and a number that updates as you interact, with gentle animated motion. You can build it as plain TypeScript or JavaScript that outputs SVG and HTML pages, or within a React or Next.js project, and it can add WebGL shaders for effects like fire, water, and lamp light. Eight example figures ship with it, and it can share a completed figure in the Anatomy community gallery if you request that.