Hey everyone! 👋

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

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?

Thanks for reading, and happy designing!