Infinity

AI agentic canvas · Diagram synthesis & workspace

Infinity is an AI-agentic whiteboard and system architecture workspace engineered to bridge the gap between high-level architectural ideation and visual canvas modeling.

Give FeedbackView LiveRead Case Study
Infinity AI-agentic whiteboard architecture canvas and diagram generator

What is Infinity?

Built with Next.js 16 (App Router), React 19, Excalidraw, and Tailwind CSS v4, Infinity pairs a vector canvas with Google Gemini 2.5 (@google/genai). Rather than generating unconstrained graphics, an agentic synthesis layer generates structured JSON diagram schemas that are strictly validated against spatial overlap and bounds constraints via Zod (lib/validate.ts) before rendering onto the canvas via RenderAIDiagram.tsx.

The platform features dynamic context-aware floating element property inspectors, a debounced 10-second multi-tier autosave pipeline (persisting elements, files, normalized appState, and Base64 WebP preview thumbnails to Neon Serverless PostgreSQL via Drizzle ORM), Clerk authentication, and a complete soft-delete and archive recovery lifecycle.

Engineering Highlights

04 Core Pillars

Agentic AI Diagram Generator

Google Gemini 2.5 & Zod geometry constraints

Translates natural language system architecture, flowchart, and mindmap prompts into structured JSON schemas, strictly validated against Zod geometry and bounds constraints (lib/validate.ts) before rendering onto the canvas via RenderAIDiagram.tsx.

Context-Aware Floating Element Inspector

Dynamic canvas overlay controls

Dynamically positions a property inspector above active canvas elements, enabling instant manipulation of stroke color, background, stroke width, roughness, opacity, font size, layer ordering, and duplication.

Debounced 10s Autosave & State Normalization

Multi-tier Neon PostgreSQL persistence

Batches canvas elements, files, normalized appState (sanitizing non-serializable Map objects and stale selections to eliminate viewport distortion), and Base64 WebP thumbnails every 10 seconds via Drizzle ORM.

Soft Delete & Project Archive Lifecycle

Production workspace management

Provides board management with Grid/List views, live search filtering, sorting, client-side PNG export (exportToBlob), and a soft-delete pipeline with a dedicated /archived page for safe restoration or permanent purge.

Technology Stack

Frontend & Canvas

Next.js 16App Router, Server Components & Route Handlers
React 19Concurrent rendering & optimistic UI state updates
TypeScript 5Strict end-to-end schema typing & geometry contracts
ExcalidrawCore vector canvas engine & exportToBlob PNG export
Tailwind CSS v4Design tokens, fluid typography & dark-mode styling

AI & Diagram Engine

Google Gemini 2.5Multi-prompt structured diagram generation (@google/genai)
Zod Schema ValidatorRuntime geometry, bounds & spatial overlap constraint enforcement
RenderAIDiagramCustom canvas ingestion & Excalidraw element constructor

Database & Storage

Neon PostgreSQLServerless PostgreSQL with connection pooling & instant scaling
Drizzle ORMType-safe database schemas, relations & migrations
WebP RasterizerBase64 WebP preview thumbnail generation for board cards

Auth & Workspace Infrastructure

Clerk AuthUser authentication, route middleware & session resolution
Workspace EngineBoard listing, search, sort, soft delete & archive restore

Want to see how it was built?

Explore the detailed technical case study covering database transactions, auth primitives, fail-fast validation, and lessons learned.

Read the Technical Case StudyBack to Portfolio

Have thoughts, critiques, or feature requests for Infinity?

Give Feedback via Contact Form