ER Diagram Focus

A modern web application for editing and viewing Entity-Relationship (ER) diagrams, built with Vite, TypeScript, React, shadcn-ui, and Tailwind CSS.

Demo

Documentation

• Requirements
• Manual ER Viewer Test

How can I edit this code?

There are several ways of editing your application:

Use your preferred IDE

If you want to work locally using your own IDE, you can clone this repo and push changes.

The only requirement is having Node.js & npm installed - install with nvm

Follow these steps:

# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>

# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>

# Step 3: Install the necessary dependencies.
npm i

# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev

Edit a file directly in GitHub

• Navigate to the desired file(s).
• Click the "Edit" button (pencil icon) at the top right of the file view.
• Make your changes and commit the changes.

Use GitHub Codespaces

• Navigate to the main page of your repository.
• Click on the "Code" button (green button) near the top right.
• Select the "Codespaces" tab.
• Click on "New codespace" to launch a new Codespace environment.
• Edit files directly within the Codespace and commit and push your changes once you're done.

What technologies are used for this project?

This project is built with:

• Vite
• TypeScript
• React
• shadcn-ui
• Tailwind CSS

How can I deploy this project?

You can deploy this project using your preferred static hosting provider (e.g., Vercel, Netlify, GitHub Pages). Build the project with:

npm run build

Then follow your hosting provider's instructions to deploy the contents of the dist folder.

Custom Domain

If you are using a static hosting provider, refer to their documentation for connecting a custom domain.