ERAI: ER Diagrams Made Easy

ERAI is a web application that transforms converts English descriptions of database schemas into Entity-Relationship Diagrams (ERDs). Simply describe your tables and relationships in plain English, and ERAI will generate a clean, downloadable SVG diagram for you.

✨ Features

• Natural Language Processing: Leverages Gemini AI to understand your database descriptions.
• DBML Generation: Converts your text into a valid Database Markup Language (DBML) schema.
• SVG Diagram Rendering: Automatically generates a clear and professional SVG diagram from the DBML.
• Downloadable Assets: Allows you to download the generated SVG diagram for use in documentation, presentations, or other projects.
• Simple & Fast: A streamlined interface for quick diagram generation without complex tools.

⚙️ How It Works

The application follows a secure, server-centric architecture to process user requests:

1. Frontend (React): The user enters description into the text area and submits the form.
2. Backend API Call #1 (Node.js/Express): The frontend sends the user's text to a custom backend endpoint (/api/generate-dbml-from-text).
3. Secure LLM Call: The backend server securely calls the Google Gemini API with the user's text and a specialized prompt. The server uses an API key stored safely in an .env file.
4. DBML Response: The Gemini API returns the generated DBML code as a string back to the backend server.
5. Backend API Call #2 (Node.js/Express): The frontend receives the DBML string and immediately sends it to a second backend endpoint (/api/render-dbml).
6. SVG Generation: The backend saves the DBML to a temporary file and uses the @softwaretechnik/dbml-renderer command-line tool to generate an SVG file on the server.
7. SVG URL Response: The backend returns the public URL of the newly created SVG file to the frontend.
8. Display Diagram: The React frontend receives the SVG URL and displays the diagram to the user.

🛠️ Tech Stack

• Frontend:
  • React
• Backend:
  • Node.js
  • Express
• APIs & Tools:
  • Google Gemini API: For natural language to DBML conversion.
  • @softwaretechnik/dbml-renderer: For DBML to SVG rendering.

🚀 Setup and Installation

Prerequisites

• Node.js and npm (or yarn) installed.
• A Google Gemini API Key.

Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Install dependencies:

   npm install

3. Create an environment file: Create a file named .env in the backend directory.

   touch .env

4. Add your API Key: Add your Google Gemini API key to the .env file.

   # backend/.env
   GEMINI_API_KEY="YOUR_GEMINI_API_KEY_HERE"
   

5. Run the backend server:

   node index.js

   The server should now be running on http://localhost:4000.

Frontend Setup

1. Navigate to the frontend directory:

   cd ../frontend

2. Install dependencies:

   npm install

3. Run the frontend development server:

   npm run dev
   # or if using Create React App
   # npm start

   The React app should now be running on http://localhost:3000.

Usage

Once both servers are running, open your browser and navigate to the frontend URL (e.g., http://localhost:5173).

1. Type a description of your database schema into the text area.
2. Click the "Generate Diagram" button.
3. The loading indicator will appear while the request is processed.
4. The generated ER diagram will be displayed on the screen.
5. Click the "Download SVG" button to save the diagram to your computer.

🔮 Future Improvements

• Export as PNG: Add a feature to convert the SVG to a PNG format on the client-side using a canvas.
• DBML Preview & Edit: Show the generated DBML in a syntax-highlighted editor and allow the user to make manual edits before rendering the final diagram.
• Enhanced Error Handling: Provide more specific error messages to the user if the DBML is invalid or the LLM fails.