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 ↗