← all projects
Design + Simulation Tool

Systyfield

Browser-based system-design tool that runs simulations on your diagrams. Instead of static architecture sketches, you build designs that simulate virtual traffic, metrics spiking, and failures cascading in real time — across three modes in one product.

A node-graph system-design canvas (React Flow) where architecture diagrams come alive: virtual traffic flows through services, metrics react, and failures cascade — with a node palette, config panels, metrics panel, and demo templates.

GitHub
React
TypeScript
Vite
Tailwind

Problem Statement

Architecture diagrams are dead pictures. Tools like Excalidraw or Lucidchart let you draw a system, but they can't answer the questions that actually matter: what happens to latency when traffic spikes? If this service falls over, does the failure cascade? Where's the bottleneck? Engineers reason about these dynamics in their heads (or learn them the hard way in production). Systyfield's premise: make the diagram executable.

Proposed Solution

Systyfield is a browser-based system-design tool where you build a design and then simulate it. You lay out services/nodes and edges on a canvas, then watch virtual traffic flow, metrics spike, and failures cascade in real time. It spans three modes in one product (design → simulate → observe), with starter demo templates so users can see a working simulation immediately.

Full Solution Details

  • Canvas — a node-graph editor (custom base-node and simulation edges sim-edge) with node and edge config panels, an onboarding tour, and a "cinematic" presentation context for playback.
  • Node palette — drag in system components to compose a design.
  • Metrics panel — live readouts as the simulation runs.
  • Demo templates — pre-built designs to explore the simulation instantly.
  • Sessions — save/manage designs.
  • Three modes — design the topology, run the simulation (traffic + failures), and observe the resulting metrics.

Technical Documentation

React + TypeScript + Vite, built on @xyflow/react (React Flow) for the node/edge canvas — the right primitive for an interactive graph editor with custom node and edge renderers. UI is composed from Radix UI primitives (dialog, dropdown, popover, slider, switch, tabs, tooltip, scroll-area, etc.) with class-variance-authority + tailwind-merge for a tokenized component system, Tailwind (+ tailwindcss-animate) for styling/animation, TanStack Query for data, and the author's meemaw utilities. The codebase is Feature-Sliced (canvas, demo, metrics-panel, node-palette, session), with the canvas feature owning custom nodes/edges, config panels, hooks (use-canvas), a typed node model (canvas-node.types), and a cinematic context for animated playback. The simulation layer animates traffic along edges and propagates state (load, failure) through the graph so downstream nodes react.

Tech Stack

React, TypeScript, Vite, @xyflow/react (React Flow), Radix UI, class-variance-authority, Tailwind CSS (+ animate), TanStack Query, meemaw, uuid; Feature-Sliced Design.

System Design

 Node Palette ──drag──► Canvas (React Flow)
                          ├── base-node (custom renderer) + node-config-panel
                          ├── sim-edge (animated) + edge-config-panel
                          ├── use-canvas hook · typed canvas-node model
                          └── cinematic-context (playback)
                                  │ run
                                  ▼
            Simulation: traffic flows along edges → load propagates →
                        metrics update → failures cascade downstream
                                  │
                                  ▼
            Metrics panel (live readouts)   ·   Demo templates (instant start)
     Modes: Design ──► Simulate ──► Observe

Smart Architectural Decisions

  • Right primitive for the job. Building on React Flow (@xyflow) rather than hand-rolling a canvas means pan/zoom, node dragging, and edge routing are solid from day one, freeing effort for the hard part — the simulation.
  • Custom nodes + animated sim-edges. Modeling edges as simulation conduits (animated sim-edge) and nodes as stateful components is what turns a diagram into a live system — the core technical idea.
  • Tokenized, accessible UI via Radix + CVA. Composing from Radix primitives with CVA gives a consistent, accessible control surface (sliders for tuning load, tabs for modes) without reinventing widgets.
  • Demo templates as onboarding. Shipping pre-built simulations + an onboarding tour solves the "blank canvas" problem — users see value before building anything.
  • Feature-Sliced canvas isolation keeps the complex canvas/simulation logic self-contained (nodes, edges, panels, hooks, types) and the rest of the app simple.

Impacts

Turns static architecture diagramming into an interactive simulation — letting engineers visualize traffic, bottlenecks, and cascading failures before they happen, with an approachable, template-driven onboarding.

Demonstrated Skills

Interactive graph/canvas engineering (React Flow custom nodes/edges, config panels, pan/zoom); simulation modeling (traffic propagation, cascading failure across a graph); design-system composition (Radix + CVA + Tailwind tokens); React + Feature-Sliced Design; animation/playback state (cinematic context); product onboarding design (templates + tour).

Notes

  • Genuinely novel idea: "executable architecture diagrams" (simulate traffic + cascading failures) is a creative, hard problem far beyond CRUD — it signals systems thinking and product imagination.
  • Strong technical primitive choice: building on React Flow and then layering a real simulation (stateful nodes, animated conduit edges) shows he picks the right foundation and spends effort where it counts.
  • Polished, accessible UI: Radix + CVA + Tailwind tokens demonstrate design-system maturity, not just functional UI.
  • Onboarding empathy: demo templates + a guided tour solve the blank-canvas problem most tools ignore.
  • Clean Feature-Sliced isolation of the complex canvas/simulation logic is a good architecture talking point.
← back to all projects
Ask me anything