GraphFlow
Interactive distributed systems modeler and real-time data flow simulator.
Overview
Static diagramming tools (such as draw.io, Lucidchart, and Miro) represent system topologies as inert boxes and lines. They do not simulate dynamic runtime characteristics:
- Downstream saturation and latency compounding when ingress traffic scales
- Backpressure propagation through asynchronous event buffers (such as Apache Kafka and RabbitMQ)
- Cascading timeouts, circuit-breaker tripping, and cache-miss stampedes under degraded node states
- Transactional consistency boundaries across command/query separations (CQRS) and distributed outbox logs
GraphFlow models distributed architectures as dynamic, stateful topologies with an integrated client-side simulation engine. Topologies are composed on an infinite canvas, connected through cubic bezier paths, and evaluated with simulated traffic streams. Packets traverse edges according to computed velocities and latency curves, with real-time aggregation of throughput (requests per second), network jitter, error rates, and dropped payloads.
Core Capabilities
Native Vector Calculus & De Casteljau Evaluation
All edge curves and packet positions are evaluated using pure Bernstein polynomial forms of cubic bezier curves:
$$B(t) = (1-t)^3 P_0 + 3(1-t)^2 t P_1 + 3(1-t) t^2 P_2 + t^3 P_3, \quad t \in [0, 1]$$
Coordinates, velocity tangents ($B'(t)$), and normal vectors are computed directly against native SVG paths and DOM elements. The implementation avoids heavy third-party canvas runtimes (such as PixiJS, Fabric.js, or Konva), keeping asset payload minimal and maintaining 60 FPS frame rates.
Decoupled Simulation Subsystem
Simulation mechanics run on a non-blocking requestAnimationFrame tick loop separated from React's component reconciliation cycle via SimulationContext:
- Packet Lifecycle Management: Ingress queues, velocity calculations, and arrival callbacks are scheduled and resolved per tick.
- Micro-Component Separation: High-frequency rendering is isolated to
PacketDot layers, preventing full canvas re-renders during 60 FPS packet travel.
- Real-Time Telemetry: Continuous rolling calculations for aggregate RPS, average end-to-end latency, and jitter variance.
Fault Injection & Chaos Testing
- Per-Node Degradation: Configure latency overhead and failure probability ($[0.0, 1.0]$) across individual compute, storage, or external nodes.
- Error Packet Routing: Requests failing status checks transition to 5xx error states and highlight retry loops or dead-letter sinks.
- Traffic Modulation: Inject instantaneous burst spikes to analyze queue saturation and node backpressure.
Resilient Real-Time Networking
The ResilientSocket client ensures bulletproof WebSocket state synchronization:
- Jittered Exponential Backoff: Reconnection intervals scatter across randomized windows ($[1\text{s}, 30\text{s}]$) to prevent thundering herd conditions.
- Heartbeat & Zombie Detection: Periodic 30-second ping/pong frames detect half-open sockets caused by network drops and force reconnections.
- Offline Message Buffer: Outgoing state envelopes are queued in a bounded memory buffer and flushed in chronological sequence upon reconnection.
Procedural Web Audio Synthesis
Synthesizes acoustic feedback natively via the Web Audio API without external audio assets:
- Node Lifecycle Sounds: Dual-tone frequency sweeps ($C_5 \rightarrow E_5$) for node instantiation; downward triangle tones for deletion.
- Major Arpeggios: Three-tone chord synthesis ($C_5 \rightarrow E_5 \rightarrow G_5$) upon architecture export, preset load, or checkout success.
- ADSR Exponential Envelopes: Ramps gain values exponentially to eliminate speaker pops and clicks.
Multi-Language (i18n) Localization
Structured dictionary catalogs for English (en) and Turkish (tr):
- Dynamic one-click language switcher in the primary navigation toolbar.
- Automatic browser locale detection (
navigator.language) and persistent localStorage synchronization.
- Complete coverage across toolbar actions, component palette categories, inspector panels, and dialogue modals.
Privacy-First Product Telemetry
Standardized [Object] [Action] analytical event taxonomy (Node Created, Simulation Toggled, Modal Opened, Checkout Clicked):
- In-memory event buffer with subscriber observer interfaces.
- Zero-PII sanitization engine strips sensitive credentials, tokens, and emails before dispatch.
- Non-blocking network dispatches via
navigator.sendBeacon().
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
