💎 ERD Builder Pro

ERD Builder Pro is a professional-grade, high-performance web application designed for developers and database architects to build, document, and visualize complex data structures. Built with a modular architecture and modern tech stack, it offers a seamless experience for database design and technical documentation.

🚀 Key Features

• 🎨 Multi-Mode Visual Workspace:
  • ERD Builder: Drag-and-drop entity relationship diagramming using XYFlow (React Flow v12).
  • Interactive Flowcharts: Visualize processes and architectures with customizable nodes, decision points, and smart connectors.
  • Excalidraw Integration: Free-hand sketching for whiteboarding and architectural brainstorming.
  • Rich Text Notes: Professional documentation powered by TipTap, supporting tables, task lists, and markdown.
• 🏗️ Modular Architecture:
  • Component-Based Views: Clean separation of concerns with dedicated views for ERD, Notes, Drawings, and Trash.
  • Scalable Design: Easily extendable codebase with a decoupled frontend/backend structure.
• 📤 Advanced Export Options:
  • SQL Schema Generation: Export diagrams directly to PostgreSQL or MySQL DDL scripts.
  • Universal Formats: High-quality Image and PDF exports for documentation sharing.
• 📁 Smart Organization:
  • Project Management: Group related assets into distinct projects for better workspace management.
  • Comprehensive Trash System: Safety-first soft-delete system for all projects and files.
• 🔐 Enterprise-Grade Security:
  • Supabase Authentication: Secure Email/Password login system with persistent session management.
  • Cloud Hybrid Storage: Real-time persistence using Supabase Database and Cloudflare R2.

🛠️ Tech Stack

• Frontend: React 18 + Vite 6 + Tailwind CSS v4
• UI System: Shadcn UI + Radix UI + Lucide Icons
• Canvas Engines: XYFlow + Excalidraw
• Content Editor: TipTap (Rich Text Engine)
• Backend Architecture: Express.js + Edge Functions Support
• Infrastructure: Supabase (DB/Auth) + Cloudflare R2 (Storage)

---

🏗️ Getting Started

📋 Prerequisites

• Node.js: v20+
• npm: v10+
• Supabase Account: For Database and Authentication management
• Cloudflare R2 / S3 Account: For storing large assets (drawings/attachments)

⚙️ Installation & Setup

1. Clone the repository:

   git clone <your-repository-url>
   cd erd-builder-pro

2. Install dependencies:

   npm install

3. Configure Environment: Create a .env file in the root directory:

   # Backend Config
   SUPABASE_URL=your_supabase_url
   SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
   R2_ACCOUNT_ID=your_cloudflare_id
   R2_ACCESS_KEY_ID=your_access_key
   R2_SECRET_ACCESS_KEY=your_secret_key
   R2_BUCKET_NAME=your_bucket_name
   R2_PUBLIC_URL=your_public_cdn_url
   
   # Frontend Config (Vite)
   VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_anon_key
   VITE_ENABLE_GUEST_MODE=true
   
   # Server
   PORT=3000

4. Start Development:

   npm run dev

   Access the dashboard at http://localhost:3000.

📦 Deployment

Build the optimized production bundle:

npm run build

Run the production server:

npm run start

---

📄 License

This project is licensed under the PolyForm Noncommercial License 1.0.0.

🚫 Non-Commercial Use Only

The software is free to use, modify, and distribute for non-commercial purposes only. Any use for revenue-generating activities or within for-profit organizations is strictly prohibited under these terms.

💼 Commercial Licensing

If you wish to use ERD Builder Pro for commercial purposes, business operations, or as part of a paid service, you must obtain a separate commercial license. Please contact the author for further information.

---

Built for Architects & Developers ❤️