Traceframe: animated architecture diagrams for AI coding agents

An open-source agent skill for Claude Code, Codex, Cursor and GitHub Copilot. Your agent writes a small JSON spec; Traceframe renders an interactive HTML diagram or an animated SVG that plays in GitHub READMEs, pull requests and docs.

npx skills add shashankswe2020-ux/traceframe

View on GitHub Try an interactive demo

Animated OAuth 2.0 Authorization Code with PKCE sequence diagram generated by Traceframe — OAuth 2.0 with PKCE: sign-in, code exchange and refresh-token rotation. Open the interactive version.

What you can explain with it

Architecture docs: how a request moves through services, queues, caches and databases.
AI and LLM systems: RAG pipelines, agent tool loops, memory and guardrails.
Pull requests: an animated SVG in the PR description that shows what a change does.
Onboarding: the checkout, auth or deploy path, step by step.
Incident reviews and design docs: replay what happened, beat by beat, with real data on screen.

Animated diagram examples

RAG pipeline diagram

Hybrid retrieval, ACL filtering, reranking and citation checks. Interactive version.

Event-driven architecture diagram

Animated event-driven order fulfillment diagram: outbox, event bus, payment, inventory, shipping, dead-letter queue — Transactional outbox, parallel consumers, retries and a dead-letter queue. Interactive version.

Incident response workflow diagram

Install

One command installs the skill into Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode and 70+ other agents. Rendering needs Node.js 22.18 or newer.

npx skills add shashankswe2020-ux/traceframe

Then ask your agent: “Use Traceframe to explain our checkout request, including cache-hit and cache-miss paths.”

FAQ

How is Traceframe different from Mermaid?: Mermaid draws static flowcharts and sequence diagrams. Traceframe animates them: packets travel along arrows, cards fill with real data, and each scenario plays as its own step.
Do animated SVGs work in GitHub READMEs?: Yes. The SVG output animates with CSS and native SVG animation, with no JavaScript, so GitHub renders it in READMEs, issues and pull requests.
Which AI coding agents are supported?: Any agent that reads Agent Skills (SKILL.md), including Claude Code, OpenAI Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Can I use it without an AI agent?: Yes. Write the JSON spec yourself and run node scripts/svg.mjs or node scripts/html.mjs.