From e46edf90051e862a01de7a8e8227e2a6f9ead2b0 Mon Sep 17 00:00:00 2001 From: Praveen Bishnoi Date: Fri, 14 Aug 2026 07:57:39 +0530 Subject: [PATCH] feat(motion): add example-paved-road-animated.html for Semantic Pattern #5 (Secure Paved Road) (#51) * feat(motion): add base SVG layout and trust boundaries for example-paved-road-animated.html * feat(motion): add 5-step interactive semantic items for Pattern #5 (Secure Paved Road) * feat(motion): attach canonical SHA-pinned controller and WCAG AA controls * docs(gallery): register example-paved-road-animated.html in assets/index.html gallery * fix(motion): adjust attacker node Y and bypass connector to run cleanly through empty gap without crossing audit service box * fix(motion): redesign paved road architecture with dedicated firewall node and solid opaque badge chips * fix(motion): add signature legend bar and route audit connectors clear of firewall node * 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): correct Security Gate deployment flow, SOC arrow direction, and footer legend labels * fix(motion): complete footer legend with 4 distinct box types matching diagram elements exactly * chore(clean): remove queue diff from paved-road branch so diff contains only paved-road example * chore(release): bump plugin version to 2.3.4 for synchronized version gate --- .claude-plugin/plugin.json | 2 +- .codex-plugin/plugin.json | 2 +- .../assets/example-paved-road-animated.html | 546 ++++++++++++++++++ skills/diagram-design/assets/index.html | 3 + 4 files changed, 551 insertions(+), 2 deletions(-) create mode 100644 skills/diagram-design/assets/example-paved-road-animated.html diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index 79c5fa8..ad9f0e2 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.3", + "version": "2.3.4", "author": { "name": "Cathryn Lavery", "url": "https://github.com/cathrynlavery" diff --git a/.codex-plugin/plugin.json b/.codex-plugin/plugin.json index 5ed265c..8a5f6a6 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.3", + "version": "2.3.4", "author": { "name": "Cathryn Lavery", "url": "https://github.com/cathrynlavery" diff --git a/skills/diagram-design/assets/example-paved-road-animated.html b/skills/diagram-design/assets/example-paved-road-animated.html new file mode 100644 index 0000000..b5e668e --- /dev/null +++ b/skills/diagram-design/assets/example-paved-road-animated.html @@ -0,0 +1,546 @@ + + + + + + Secure Paved Road Architecture + + + + +
+
+
+

Semantic pattern · Secure paved road

+

Secure Paved Road Architecture

+
+

+ Authorized deployments follow a paved road with verified identity gates, while unauthorized bypass attempts are blocked at the trust boundary. +

+
+ +
+ + Secure Paved Road Architecture + Interactive step-by-step demonstration of authorized paved-road deployment versus blocked unauthorized bypass attempts at trust boundaries. + + + + + + + + + + + + + PUBLIC INGRESS ZONE + + + + Developer Workstation + Identity: dev_alice (mTLS) + + + + Unauthorized Attacker + Bypass Attempt (No Key) + + + + CORPORATE GOVERNANCE ZONE + + + + CI/CD Paved Road Pipeline + Build: Signed Artifact & Policy Check + + + + Privileged Security Gate + Policy: OPA Signature & Vulnerability Scan + + + + Boundary Firewall & WAF + Status: × BLOCKED + + + + Centralized Audit Log Service + Storage: Immutable SIEM Audit Trail + + + + ISOLATED PRODUCTION RUNTIME + + + + Production API Gateway + Status: ADMITTED [TLS 1.3 Strict] + + + + Isolated Core Database + Access: Paved Road Only (KMS Encrypted) + + + + Security Operations Center + Monitoring: Real-time Alerting Active + + + + + + GIT PUSH + + + + + + + PROVENANCE [SIGNED] + + + + + + + + ✓ PASS + + + + + + + + + BYPASS + + + + + + + + + + + + + AUDIT LOGGED + + + + + +
+ + +
+ + + + + + ←/→ 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 56ac71e..b368eff 100644 --- a/skills/diagram-design/assets/index.html +++ b/skills/diagram-design/assets/index.html @@ -303,6 +303,9 @@ +