Skip to content

GALLERY.md

Latest commit

 

History

History
185 lines (131 loc) · 15.6 KB

GALLERY.md

File metadata and controls

185 lines (131 loc) · 15.6 KB
Raw

termchart gallery

Real diagrams across domains and personas — each one is the native JSON an agent pushes to the live viewer (flow / component / vegalite / panes / markdown), captured headlessly with Playwright. No hand-tuning: an agent reads the diagram-recipes skill and emits these directly.

Install into any coding agent: npx skills add ivanmkc/termchart · then npm i -g @ivanmkc/termchart.

Live & animated

The viewer is a live screen, not a static export — flow edges animate (marching-ant streams), and agents narrate long-running work with status overlays that update in place. (Animated GIFs — they loop.)

Animated stream edges (flow) Live status overlays (status)
zoned architecture with animated marching-ant stream edges flowing between Edge/Frontend/Services/Async/Data zones a deploy narrated live in the corner — a loader, then a progress bar advancing 35→70→100%, then a green success toast — all updating in place

Themes

A header picker switches the whole viewer — System (follows your OS), Dark, Light, Midnight (blue-slate dark), Paper (warm light). Every renderer follows: React Flow nodes, Vega-Lite charts, Mantine components, and the chrome. The same task-tracker, three ways:

Light Dark Midnight
task-tracker report in the Light theme — white surfaces, dark text, semantic stat colors and badges task-tracker report in the Dark theme — zinc surfaces, light text task-tracker report in the Midnight theme — navy-slate surfaces

Software architecture

Tiered topologies with labeled zones, layer colors, orthogonal routing, and animated stream edges.

Zoned architecture (flow, clustered into Edge / Frontend / Services / Data / Async) C4 model — three zoom levels (panes: Context · Container · Component)
zoned web-app architecture — nodes clustered into labeled Edge/Frontend/Services/Data/Async zones, colored edges, animated streams C4 model of an internet-banking system at three zoom levels — System Context (customer + system + external email/mainframe), Containers (web app, SPA, API, database), and Components (controllers, security, mainframe facade) — each a clean color-coded flow with a legend
Swimlanes (flow with lanes:true — full-length parallel lanes per actor)
order-fulfillment swimlane — Customer / Storefront / Order Service / Fulfillment-Ops lanes, process flowing left-to-right with cross-lane hand-offs and a retry path
Web-app system architecture (flow) Event-driven / streaming (flow)
web-app architecture — edge → web → gateway → services → datastores, colored by layer, animated async edges event-driven — producers → ingest gateway → topic → consumers, with a dead-letter path

Algorithms & deep code

Explaining how code works — call trees, step-by-step traces, and complexity.

Deep-code answer (panes: code · trace · complexity) Recursion tree (flow)
binary search walkthrough — annotated code, a step trace table, and a log n vs n complexity chart fib(5) recursion call tree — base cases green, memoized hits blue
Big-O complexity (vegalite)
Big-O growth curves O(1) to O(n^2) on a symlog scale
Call hierarchy before/after (calltree) — one model, viewer-toggled
call-hierarchy diff as a compact outline — handleRequest() tree with checkCache() added (green +), queryDB() modified (amber ~), validate() removed (red strikethrough), render() renamed; file paths + 120→41ms timings; a Tree/Graph toggle top-right the same call-hierarchy diff as a graph — handleRequest() root fanning to status-colored change nodes (added green, removed red, modified amber) with the Graph view of the toggle active
Sortable data table with spreadsheet export (datatable)
cloud spend datatable — Service/Region/Monthly(USD)/Δ MoM/Owner columns with numeric columns right-aligned, a Copy (TSV→Sheets/Excel) and Download CSV control in the toolbar, sortable headers

Algorithm stepping (animated)

Algorithms are best understood moving. Each of these is pushed once as a flow, then driven one algorithm step at a time with incremental patches (setNodeData) that recolor the active element in place — no flicker, just the changed node ringing briefly. Same push-once-then-patch pattern an agent uses to narrate a live run. (Animated GIFs — they loop.)

Binary search stepping (flow + patch) BFS graph traversal (flow + patch)
binary search on a sorted array of 11 values searching for 42 — the whole array starts amber (in window) with the mid cell blue; each step recolors the eliminated half grey and moves the blue mid pointer, until the target cell turns green (found) with a check — color-coded with a legend breadth-first search from start node S over a small graph — the start is blue, then each dequeue turns a node green (visited) and recolors its newly-discovered neighbors amber (frontier/queued), expanding layer by layer until every node is visited — color-coded with a legend

Explainers

Teach a hard concept the way the best explainers do — hook → mental model → the quantitative heart → real-world grounding — as one cohesive top-down panes document. The same template works for relativity, entropy, eigenvectors, back-prop, a protocol…

Special relativity (panes) Entropy (panes) Bayes' theorem (panes)
explainer: why moving clocks run slow — hook, the light-clock reasoning chain as a color-coded flow, the Lorentz-factor γ curve shooting up near c, and GPS/0.87c→2x grounding with the 'it's every clock' misconception explainer: why a shuffled deck never sorts itself — counting-not-a-force hook, the microstates reasoning chain, the binomial 'ways to arrange' bell curve, and 52!/heat-death grounding with the 'entropy isn't a force' misconception explainer: a 99%-accurate test for a rare disease still means ~50% — the base-rate trap counted out as natural frequencies, a 99-true vs 99-false positives bar, and the Bayes formula with the 'accuracy ≠ my probability' misconception

Same template, three very different topics — proof it generalizes to any hard idea.

DevOps & platform

CI build pipeline (flow) Kubernetes topology (flow)
CI build pipeline — checkout → install → parallel lint/test/typecheck → build → deploy/rollback, status-colored Kubernetes topology — ingress, services, deployments (running/pending/crashloop), statefulsets
Service topology (flow) Mobile nav state machine (flow)
service dependency graph with health colors app onboarding navigation state machine

SRE & observability

Dense 2×2 mission control — SLO rings, latency percentiles, top errors, throughput in one push.

Observability dashboard (panes, 2×2)
observability mission-control — SLO ring gauges, p50/p95/p99 latency chart, top-errors table with a spike alert, and a throughput area chart in a 2x2 grid
Service health (flow with per-node trend sparklines)
service-health graph — each service node shows a status-colored inline sparkline of its latency/error trend; degrading services show rising amber/red trends
Incident postmortem (component) Ticket escalation (flow)
incident postmortem — TTD/TTR stat cards, timeline, root-cause alert support escalation journey L1→L2→L3→resolved/breach, color-coded

Debugging & performance

Progressive windowing — an agent renders a window of a long run and expands it (via live re-push) toward the useful part, instead of loading the whole transcript.

Agent reasoning trace (component, windowed timeline) Flame graph (component, width ∝ time)
agent reasoning trace — a windowed timeline of a debugging run (steps 6–19 of 19), color-coded by think/tool-call/observation/result/error, ending in a red root-cause alert; the window expands earlier toward the cause CPU flame graph — stacked call frames, width proportional to time, warm palette by self-time, hottest path widest
Distributed-trace waterfall (vegalite) SQL query plan (flow, cost-colored)
distributed trace waterfall — request spans as horizontal bars by start/duration, colored by service, nested calls cascading SQL EXPLAIN plan as a tree — operators colored by cost, hot Seq Scan flagged

Data, ML & research

Calendar / activity heatmap (vegalite) Latency matrix heatmap (vegalite, cell labels)
GitHub-style activity heatmap — 12 weeks × 7 days of rect cells, sequential greens, hot days darker service-mesh p95 latency matrix — 6×6 caller×callee cells colored by ms with value labels, blank for no calls
Data lineage (flow, zoned) SQL query plan (flow, cost-colored)
data lineage — Sources/Staging/Marts/Consumers zones, fresh green edges and a stale dashed edge SQL EXPLAIN plan as a tree — operators colored by cost, hot Seq Scan flagged, rows/cost per node
ETL pipeline (flow) Training run (component + chart)
nightly ETL DAG — sources → transforms → loads, with a failed-retry branch ML training dashboard — stat cards + embedded loss curve
Experiment results (panes) Growth funnel (vegalite)
scientific experiment — scatter with exponential regression fit beside a fit-summary stats panel activation funnel bar chart with value labels

Project management

Risk matrix (component, likelihood × impact heat-grid) Critical path (flow, longest chain highlighted)
risk matrix — 5×5 likelihood×impact grid tinted green→amber→red by severity, risks R1–R10 placed in their cells critical-path schedule — tasks with durations, the critical chain in red with thick edges, slack tasks grey
Sprint burndown (vegalite, ideal vs actual) RACI matrix (component, tasks × roles)
sprint burndown — ideal grey dashed line vs actual remaining points in blue over the sprint, with a today rule RACI chart — deliverables × roles table with color-coded R/A/C/I badges
Task / release tracker (component, cohesive top-down status)
release status report — title with a 67% ring, Done/In-progress/Blocked/To-do stat cards, a task table with owner and status badges and due dates, and a blocker callout

Planning & timelines

Project Gantt (vegalite, with a "today" line) Quarterly roadmap (vegalite, by team)
project Gantt — tasks as bars spanning start→end, colored by status (done/active/blocked/planned), a dashed today line 2026 product roadmap — initiatives spanning quarters, colored by team

DIY & project planning

A single component plan that pulls together the interactive surfaces — stat badges, a materials table, an interactive checklist (the agent ticks progress, you tick sign-off), video tutorial cards (real YouTube thumbnails + play overlays), a where-to-buy map (markers + routes), and a budget chart — instead of a wall of "open in Maps / watch on YouTube" links.

DIY build plan (component — checklist + video + map + budget)
DIY cedar privacy fence build plan — cost/time/difficulty badges, a materials & cut-list table, an interactive tools and build-steps checklist with the first steps ticked, three YouTube tutorial thumbnail cards with play buttons, a where-to-buy map with home/lumber-yard/hardware pins and routes, and a budget-by-category bar chart

Product & leadership

Quarterly roadmap (component) OKR tree (flow)
4-quarter product roadmap as columns of cards objective → key results → initiatives, colored on-track/at-risk/done
Sprint board (component)
kanban board — To do / In progress / Review / Done with priority badges

Security & finance

Threat model (flow) Reconciliation (panes)
auth threat model / attack tree colored by severity with mitigations GL-vs-bank reconciliation table beside a variance chart

Product comparison & shopping

Image-forward comparison cards — each option has a product image, price, ★rating, a "best for" badge, specs, and an outbound deal/site link.

Product comparison (component, with images) Shopping research (component)
noise-cancelling headphone comparison — a product image, price, rating, best-for badge, specs, and a 'View deal' link per option headphone shopping picks — logo, price, rating, specs, deal link per product