I Built a Visual System Design Reference — Switch Any Architecture Between AWS, Azure, GCP & Open Source

Description and use

An interactive reference for system architectures that supports switching between AWS, Azure, GCP, and open‑source services, with hop‑by‑hop walkthroughs.

Problem

System design diagrams were static, vendor‑specific, and scattered across notes, making it hard to understand or translate architectures between clouds.

Outcome

The project delivers an interactive reference that lets users view and switch system architectures across multiple clouds, walk through request flows, and explore component options, aiding interview prep and real‑world design work.

Workflow

• Create a static site with Next.js and React Flow for diagrams
• Define system data in typed content files validated with Zod
• Implement cloud‑agnostic component mapping and one‑click cloud switching
• Add hop‑by‑hop walkthroughs highlighting request flow
• Provide component pages with provider options and pitfalls
• Build learning paths and search functionality

Evidence

Diagrams were static — you could see the boxes, but not how a request actually flows through them.

Source

Every architecture can be relabelled for: Generic, AWS, Google Cloud, Azure, Open source

Source

Instead of just looking at a diagram, you can follow a request step by step

Source