Graphite Infrastructure Map
Understand how Graphite bridges a modern React frontend, a Node.js Express API, and intelligent LLM routing to automatically organize generated diagrams.
Interactive Integration Map
Click on nodes to inspect specific architecture components, their roles, and metadata.
The Complete Pipeline
Graphite orchestrates three distinct layers: A React/Next.js frontend, an Express API backend, and the Gemini AI engine with structured outputs.
💡 Core Architecture Concept
We strictly separate the semantic generation (Gemini) from the mathematical coordinate placement (client-side layout engines). This makes the AI extremely fast while the browser handles heavy geometry.
1. The UI Layer
React Flow provides the interactive canvas. TanStack React Query manages async network state seamlessly, allowing optimistic updates while the AI thinks.
2. The API Gateway
Node.js and Express form our robust backend layer. It parses requests, handles CORS securely, and relies on Zod validation to ensure perfectly structured input.
3. Intelligent LLM Router
Our AI service dynamically routes between `gemini-2.5-flash` for high-speed simple generation, and `gemini-2.5-pro` for deep architectural or database relationships.
4. Client-Side Layouting
Instead of prompting the AI for X/Y coordinates, we utilize mathematical engines like Dagre and ELK to compute beautiful orthogonal and layered layouts locally.