Building GraphFlow: An Interactive Distributed Systems Simulator in Pure SVG

Berke Akdemir — Sat, 10 Oct 2026 13:42:38 +0000

Hey everyone! 👋

Today I'm excited to open-source GraphFlow, an interactive browser-based distributed systems modeler and chaos simulator.

⚡ Live Simulator: graph-flow-virid.vercel.app
🔗 GitHub Repository: github.com/Hanubaki/GraphFlow

The Problem: Architecture Diagrams Are Inert

Whenever we design distributed microservices, we reach for tools like draw.io, Miro, Lucidchart, or Excalidraw.

While they look great in documentation, static boxes and arrows can't tell you how your system actually behaves. They don't reveal:

What happens when a downstream worker starts choking?
How packet latency compounds across synchronous gRPC calls?
Whether an upstream circuit breaker will trip and isolate failures before crashing your entire API Gateway.

I wanted a tool where the diagram actually runs.

What Makes GraphFlow Different?

GraphFlow is not just a diagramming canvas; it's a living, client-side simulation engine:

1. Native SVG Vector Calculus (60 FPS)

Request packets travel along cubic Bézier curves evaluated on every single frame with the De Casteljau algorithm. There are no heavy canvas dependencies or bulky WebGL runtimes — the entire bundle is lightweight (< 75 KB compressed).

2. Live Chaos & DDoS Surge Testing

With a single click on "Inject Surge", you can simulate real-world load spikes (e.g. jumping from 700 to 2,450+ RPS), tune node error rates, and observe cascading HTTP 500 error packets propagating into Dead Letter Queues (DLQ) in real time.

3. Infrastructure as Code (IaC) & Spec Export

Your architecture is never locked into the browser. With one click, export directly to:

Terraform (IaC) scaffolding
Docker Compose network definitions
GitHub-flavored Mermaid Markdown documentation

4. Zero-Cost Instant State Sharing

The entire system topology, node states, and simulation parameters compress directly into a shareable URL hash. You can send a link to your colleagues on Slack, and they will load your exact interactive simulation with zero database friction.

5. Local-First & Offline Ready

Runs 100% in your browser. Even without an AI API key or cloud database, built-in neural rules and local storage keep everything completely functional offline.

Tech Stack

Framework: React + TypeScript + Vite
Styling: Tailwind CSS (Engineered "Control Room" dark archetype, WCAG AA compliant)
Math & Animation: Native SVG + requestAnimationFrame cubic Bézier calculus
State & Testing: Zustand, Vitest (TDD regression test suite)
License: MIT Open Source

I'd Love Your Feedback!

GraphFlow is 100% free and open-source. What distributed patterns or failure modes would you like to see modeled next?

🚀 Try it live: graph-flow-virid.vercel.app
⭐ Star the project on GitHub: github.com/Hanubaki/GraphFlow

Thanks for reading, and happy designing!

DEV Community: Berke Akdemir