From e447ec5eceeb6f8906a8cf6532b1084356862c0f Mon Sep 17 00:00:00 2001 From: Praveen Bishnoi Date: Fri, 14 Aug 2026 02:39:38 +0530 Subject: [PATCH] feat(motion): add example-queue-animated.html for Semantic Pattern #1 (Fan-in Queue / Bottleneck) (#49) * feat(motion): add example-queue-animated.html for Semantic Pattern #1 (Fan-in Queue / Bottleneck) * docs(gallery): register example-queue-animated.html in assets/index.html gallery * fix(motion): adjust queue container height and step 5 box placement to prevent overlap * fix(motion): expand slot rects and right column nodes to eliminate text overflow * chore(release): bump plugin version to 2.3.3 for synchronized version gate * docs(motion): add footer legend bar to fan-in queue animated diagram * fix(motion): implement true SVG visual legend footer with mini-arrows and mini-rects * fix(motion): unify queue depth status badge into a single dynamic full-height badge * fix(motion): refine queue traffic rates and state description for realistic backpressure math --- .claude-plugin/plugin.json | 2 +- .codex-plugin/plugin.json | 2 +- .../assets/example-queue-animated.html | 577 ++++++++++++++++++ skills/diagram-design/assets/index.html | 3 + 4 files changed, 582 insertions(+), 2 deletions(-) create mode 100644 skills/diagram-design/assets/example-queue-animated.html diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index 32326c5..79c5fa8 100644 --- a/.claude-plugin/plugin.json +++ b/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "diagram-design", "description": "Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, bar, line, Gantt and scatter charts, high-level, process, medallion, data flow, DP integration, or DP security matrix diagrams as standalone HTML/SVG/PNG. Redraw .drawio/.drawio.png/.drawio.svg or Mermaid .mmd sources at a chosen size/detail; onboard brand tokens from a website; add semantic patterns, callouts, accessible motion, or sketchy/hand-drawn styling.", - "version": "2.3.2", + "version": "2.3.3", "author": { "name": "Cathryn Lavery", "url": "https://github.com/cathrynlavery" diff --git a/.codex-plugin/plugin.json b/.codex-plugin/plugin.json index e0ab6bd..5ed265c 100644 --- a/.codex-plugin/plugin.json +++ b/.codex-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "diagram-design", "description": "Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, bar, line, Gantt and scatter charts, high-level, process, medallion, data flow, DP integration, or DP security matrix diagrams as standalone HTML/SVG/PNG. Redraw .drawio/.drawio.png/.drawio.svg or Mermaid .mmd sources at a chosen size/detail; onboard brand tokens from a website; add semantic patterns, callouts, accessible motion, or sketchy/hand-drawn styling.", - "version": "2.3.2", + "version": "2.3.3", "author": { "name": "Cathryn Lavery", "url": "https://github.com/cathrynlavery" diff --git a/skills/diagram-design/assets/example-queue-animated.html b/skills/diagram-design/assets/example-queue-animated.html new file mode 100644 index 0000000..002ec26 --- /dev/null +++ b/skills/diagram-design/assets/example-queue-animated.html @@ -0,0 +1,577 @@ + + + + + + Fan-in Queue & Ingress Bottleneck Analysis + + + + +
+
+
+

Semantic pattern · Fan-in queue / bottleneck

+

Fan-in Queue & Ingress Bottleneck Analysis

+
+

+ Multiple ingress traffic sources converge on a bounded 5-slot queue buffer before processing by a constrained worker service. +

+
+ +
+ + Fan-in Queue and Bottleneck Analysis + Interactive step-by-step demonstration of fan-in request ingress, queue buffering, rate-limiting, and worker service processing. + + + + + + + + + + + + + + + + INGRESS SOURCES + + + + Web Client App + Rate: 4 req/sec (Steady) + + + + Mobile Native API + Rate: 3 req/sec (Steady) + + + + Payment Webhooks + Rate: 8 req/sec (Spike) + + + + Legacy ERP Batch + Rate: 12 req/sec (Spike) + + + + Central Ingress Queue Buffer + Capacity: 5 slots (Bounded FIFO) + + + + + + + + + + Slot 1: req_web_8019 [GET /api] + + + + Slot 2: req_mob_4412 [POST /auth] + + + + + DEPTH + 2/5 + + + + + + + + + + + + Slot 3: req_pay_9920 [WEBHOOK] + + + + Slot 4: req_erp_1044 [BATCH] + + + + Slot 5: req_erp_1045 [FULL] + + + + FULL + 5/5 + WARN + + + + + + + + + + 429 Rate Limiter & Overflow Sink + Status: 429 Backpressure (19 req/sec Shed) + + + + + + + + + + Constrained Worker Service + Instance: Worker-Node-01 + Service Capacity: 8 req/sec max + Status: PROCESSING [FIFO] + + + + + + + Downstream Database & Core API + Result: 200 OK Admitted Traffic Stream (8 req/sec) + + + + + + System State: Controlled Equilibrium + Worker Protected · Backpressure Active + + + + + +
+ + +
+ + + + + + ←/→ step · Space play/pause · R replay · Home/End jump + +
+

+ +
+ + + + diff --git a/skills/diagram-design/assets/index.html b/skills/diagram-design/assets/index.html index d2a9b0f..56ac71e 100644 --- a/skills/diagram-design/assets/index.html +++ b/skills/diagram-design/assets/index.html @@ -300,6 +300,9 @@ +