AI Diagrammer

AI-Diagrammer

An AI-powered diagram creation tool that transforms natural language descriptions into beautiful, hand-drawn style diagrams. Built with React, TypeScript, and Azure OpenAI.

Features

• AI-Powered Generation: Convert natural language prompts into structured diagrams
• Manual Drawing Tools: Create and edit diagrams with rectangle, ellipse, diamond, and freehand pen tools
• Image Support: Upload and integrate images directly into your diagrams
• Auto-Layout: Intelligent hierarchical layout algorithm for organized diagrams
• Undo/Redo: Full history management with 50-state buffer
• Auto-Save: Automatic saving with 2-second debounce
• Import/Export: Save and load diagrams as JSON files
• Authentication: Secure user authentication via Supabase
• Persistent Storage: Cloud-based diagram storage with PostgreSQL
• Hand-Drawn Aesthetic: Beautiful sketchy style using RoughJS

System Architecture

flowchart TB
    User[User] --> Auth[Authentication Layer
AuthContext]

    Auth -->|Authenticated| Editor[Diagram Editor
DiagramEditor.tsx]
    Auth -->|Not Authenticated| AuthForm[Auth Form
Login/Signup]

    Editor --> Toolbar[Toolbar
Tool Selection & Actions]
    Editor --> Canvas[Canvas
Rendering & Interactions]
    Editor --> AIInput[AI Input
Natural Language Prompts]

    Canvas --> RoughJS[RoughJS
Hand-drawn Rendering]

    AIInput --> AILib[AI Service
ai.ts]
    AILib --> Azure[Azure OpenAI
GPT-4]

    Azure -->|Structured JSON| Layout[Auto-Layout
layout.ts]
    Layout --> Editor

    Editor --> History[History Hook
useHistory.ts]
    History -->|Undo/Redo| Editor

    Editor -->|Auto-Save| Supabase[(Supabase)]
    Supabase --> Database[(PostgreSQL
diagrams table)]
    Supabase --> Storage[(Storage
diagram-images)]

    Toolbar -->|Image Upload| Storage
    Toolbar -->|Import/Export| FileSystem[Local File System]

    style User fill:#e1f5ff
    style