Architectural diagramming tools force engineers into a frustrating tradeoff: manually drag dozens of boxes and connectors in visual canvas tools, or write code-only DSLs that lack interactive visual refinement.

SystemCraft AI eliminates this friction by combining natural language system generation powered by Google Gemini with deterministic graph theory layout engines and a fluid, Excalidraw-inspired interactive canvas.

Why LLMs Cannot Draw (and How We Fixed It)

Large language models excel at semantic reasoning: they understand why an API Gateway needs a Redis token bucket rate limiter before routing to an Order Service. But LLMs are notoriously bad at computing 2D canvas coordinates (x, y coordinates, collision bounding boxes, edge bezier routing).

If you ask an LLM to "draw" a diagram directly with coordinates, nodes overlap, edges crisscross, and the output is illegible.

SystemCraft AI decouples semantic reasoning from spatial geometry through a two-stage pipeline:

  1. Stage 1 (Semantic Graph Extraction): Gemini AI receives the architecture prompt and returns a pure logical graph (nodes with infrastructure types, labels, and directed dependencies). The output is strictly validated against a recursive Zod schema on the Express backend.
  2. Stage 2 (Topological Layout with Dagre): The raw graph is passed to a specialized Dagre hierarchical layout engine that calculates mathematical ranks, node bounding boxes, and collision-free edge routing in under 50ms.
// Server-side Zod contract enforcing valid graph topology
export const DiagramGraphSchema = z.object({
  nodes: z.array(z.object({
    id: z.string(),
    type: z.enum(['client', 'gateway', 'service', 'database', 'cache', 'queue']),
    label: z.string(),
    metadata: z.record(z.any()).optional(),
  })),
  edges: z.array(z.object({
    id: z.string(),
    source: z.string(),
    target: z.string(),
    label: z.string().optional(),
    animated: z.boolean().optional(),
  })),
});

Contextual AI Diagram Refinement ("Ask AI")

Static generation is only the first step. In real engineering sessions, architecture evolves incrementally: "Add a Redis cache in front of PostgreSQL", or "Split the billing service into a separate worker reading from Kafka".

The floating Ask AI assistant injects the active diagram topology as context into the prompt, instructing the model to perform surgical graph additions and rewiring while preserving existing component IDs. Dagre then realigns the newly added nodes seamlessly without shuffling the existing layout.

Fluid Interactive Canvas Engine

  • Smooth Pan & Zoom: Trackpad pinch and mouse wheel navigation with level-of-detail rendering.
  • Component Palette: Curated library of cloud infrastructure components spanning Clients, Edge Gateways, Compute, Caches, Relational/NoSQL Stores, and Message Brokers.
  • Debounced Autosave & Version Restore: Edits are debounced and saved to MongoDB with full version history snapshots.
  • Multi-Format Export: One-click vector SVG export, high-res PNG, or structural JSON for documentation pipelines.