Skip to content

Add animated system flowchart SVG to docs and README#157

Merged
TFT444 merged 1 commit into
devfrom
docs/add-animated-flowchart
Jun 23, 2026
Merged

Add animated system flowchart SVG to docs and README#157
TFT444 merged 1 commit into
devfrom
docs/add-animated-flowchart

Conversation

@TFT444

@TFT444 TFT444 commented Jun 23, 2026

Copy link
Copy Markdown
Owner

Closes #156

Summary

  • Adds docs/images/retailshield_flow.svg — a CSS-animated, transparent-background SVG showing the full RetailShield end-to-end flow
  • Replaces the ASCII architecture block in README.md with a single image reference
  • SVG renders correctly on both GitHub light and dark mode (no background rect, all colours hardcoded inline)
  • All animations are CSS-only — no JavaScript
  • & entities preserved correctly for valid SVG XML

Flow covered: Retail data sources → HMAC-SHA256 signed ingestion → Microsoft Sentinel → 24 KQL detection rules (retail + LP + generic) → incident engine → 3-step automated response (triage / contain / comply) → SOC portal modules → analyst output with avg ~22 min MTTD

How to test

  1. Open docs/images/retailshield_flow.svg directly in a browser — verify 7-layer animated flow with staggered fade-in, flowing dashed arrows, scanning lines, blinking indicators, and pulsing borders
  2. View the README on GitHub — confirm the SVG renders under the Architecture section in both light and dark mode
  3. Open the raw SVG and confirm no <rect> with a background fill covers the full canvas, and &amp; appears exactly as written in the MITRE ATT&CK label

Generated by Claude Code

CSS-animated, transparent-background SVG showing the RetailShield
end-to-end flow: data sources → Sentinel ingestion → 24 KQL rules
→ incident engine → 3-step automated response → SOC portal modules
→ analyst output. Works on GitHub light and dark mode. Replaces the
ASCII architecture block in README.md.
@vercel

vercel Bot commented Jun 23, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
retail-shield Ready Ready Preview, Comment Jun 23, 2026 8:28pm

@TFT444 TFT444 left a comment

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect 👌

@TFT444 TFT444 merged commit 1c31c29 into dev Jun 23, 2026
9 checks passed
@TFT444 TFT444 deleted the docs/add-animated-flowchart branch June 23, 2026 20:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant