Building an Interactive System Design Simulator to Better Understand Distributed Systems

While learning system design, I noticed a recurring problem.

Most resources explain concepts using static diagrams.

A diagram might show:

Client → Load Balancer → API Gateway → Redis → PostgreSQL

But it doesn't show what actually happens as requests move through the system.

Questions like these often remained abstract:

• What happens during a cache miss?
• How does a request get routed?
• What does failover look like in practice?
• How does a cache get populated after a database lookup?

I wanted a more interactive way to explore these concepts.

The Idea

Instead of drawing architecture diagrams, I started building a simulator.

The goal was simple:

Allow users to visualize request flows and system behavior step by step.

Rather than reading about a cache miss, users should be able to watch the request travel through the architecture and observe how each component responds.

What I Built

The project is called FlowFrame.

It's an interactive system design simulator that currently supports:

Load Balancing

Visualize how requests are distributed across multiple backend servers and how the system behaves when capacity changes.

Cache-Aside Pattern

Observe cache hits, cache misses, database fallbacks, cache population, and TTL expiration.

API Gateway Routing

Explore how requests are routed and how failures propagate through the system.

Valet Key Pattern

Visualize the process of generating temporary upload permissions and interacting with cloud storage.

Features

Current functionality includes:

• Interactive request flow visualization
• Frame-by-frame playback
• Node state inspection
• Sandbox environment for experimentation
• Preconfigured distributed system simulations

What I Learned

One of the biggest lessons was that understanding distributed systems becomes much easier when behavior is visible.

Most system design concepts are fundamentally about how information moves through a system.

Once you can see that movement, concepts that previously felt abstract become much easier to reason about.

Another lesson was that building a simulation engine is very different from building a diagram editor.

The challenge isn't drawing components.

The challenge is accurately modeling interactions between those components.

What's Next

Future plans include:

• Message Queue simulations
• Circuit Breakers
• Retry Strategies
• Saga Workflows
• CDN behavior
• Multi-region architectures

Looking for Feedback

This is still an early MVP, and I'm actively trying to understand whether this approach is useful for developers and students learning system design.

If you'd like to try it:

https://flowframe.taskplexus.app

I'd love feedback on:

• Which system design concepts are hardest to understand?
• What simulations would you like to see next?
• Would an interactive approach help you learn faster than static diagrams?

Thanks for reading.