Easy RD - Interactive Database Schema Designer

Easy RD is an open-source, web-based database schema designer that makes creating and sharing Entity-Relationship Diagrams effortless. Built with modern web technologies, it provides a seamless experience for database design and collaboration.

🚀 Live Service: https://easyrd.dev

✨ Features

📝 DBML Editor: Write database schemas using DBML (Database Markup Language) with full syntax highlighting and auto-completion
🎨 Real-time Visualization: See your database diagram update instantly as you type
🔗 Shareable Projects: Share your diagrams with others via unique URLs
👥 Collaboration: Invite team members to view or edit your diagrams
🔒 Permission Management: Fine-grained control over who can view, edit, or manage your projects
📱 Responsive Design: Works seamlessly on desktop and mobile devices
🌐 Resource Adapter Pattern: Flexible data source abstraction - use databases, APIs, or any backend

🛠️ Tech Stack

Core Technologies

Framework: SvelteKit - Fast, modern web framework
Language: TypeScript - Type-safe development
Styling: Tailwind CSS - Utility-first CSS framework
Authentication: Auth.js - Flexible authentication for web apps

Key Dependencies

🎨 Diagram Rendering - Flitter

Library: @meursyphus/flitter & @meursyphus/flitter-svelte
Purpose: Provides a Flutter-like widget system for building complex UI layouts
Usage: Powers the interactive database diagram visualization with draggable tables and connections
Organization: Both Easy RD and Flitter are part of the Meursyphus organization, sharing the same vision for modern web development tools

📝 Database Schema Language - DBML

Library: @dbml/core
Purpose: Database Markup Language parser for defining database schemas
Features:
- Human-readable syntax for database design
- Supports tables, relationships, indexes, and more
- Converts DBML to SQL or other formats

💻 Code Editor - Monaco Editor

Library: monaco-editor
Purpose: Powers the DBML code editor with VS Code-like features
Features:
- Syntax highlighting for DBML
- Auto-completion
- Error highlighting
- Code folding

Data Layer

ORM: Drizzle ORM - Type-safe SQL query builder
Database Abstraction: Resource Adapter pattern supporting:
- Cloudflare D1 (default)
- PostgreSQL
- MySQL
- REST APIs
- GraphQL endpoints
- Any custom data source

Infrastructure

Deployment: Cloudflare Pages
Database: Cloudflare D1 (SQLite at the edge)
Edge Runtime: Cloudflare Workers

🚀 Getting Started

Prerequisites

Node.js 18+ and npm
A database (Cloudflare D1, PostgreSQL, MySQL, or SQLite)
OAuth credentials (GitHub, Google, etc.)

Installation

Clone the repository:

git clone https://github.com/meursyphus/easy-rd.git
cd easy-rd

Install dependencies:
```
npm install
```
Set up environment variables:
```
cp .env.example .env
```
Edit .env and configure:
- AUTH_SECRET: Generate with openssl rand -base64 32
- OAUTH_CREDENTIALS: Your OAuth provider credentials
- Database connection (see database setup below)

Set up the database:

# First, check current migration status
npm run migration:list

# Generate new migrations if schema changes
npm run migration:generate

# Apply migrations to local D1 database
npm run migration:apply

Run the development server:
```
npm run dev
```

Visit http://localhost:5173 to see the application.

🏗️ Architecture

Resource Adapter Pattern

Easy RD uses a flexible Resource Adapter pattern that abstracts data operations, allowing you to use any backend:

// Use the default Drizzle adapter with Cloudflare D1
const adapter = new DrizzleAdapter(db);

// Or create your own adapter for REST APIs
const adapter = new APIAdapter({ 
  apiUrl: 'https://api.your-backend.com' 
});

// Or use GraphQL
const adapter = new GraphQLAdapter({ 
  endpoint: 'https://graphql.your-backend.com' 
});

See Resource Adapters Documentation for implementation details.

Project Structure

src/
├── lib/
│   ├── api/          # API client
│   ├── auth/         # Authentication setup
│   ├── components/   # Reusable components
│   │   ├── diagram/  # Flitter-based diagram components
│   │   ├── editor/   # Monaco editor wrapper
│   │   └── ...
│   ├── dbml/         # DBML parser and types
│   ├── server/       # Server-side code
│   │   ├── adapter/  # Resource adapter implementations
│   │   └── ...
│   └── ui/           # UI components
├── routes/           # SvelteKit routes
└── stories/          # Storybook stories

🔧 Configuration

Authentication

Easy RD uses Auth.js for authentication. Currently supports:

GitHub OAuth
Google OAuth
More providers can be easily added

See src/lib/auth/README.md for detailed setup.

Database Adapters

The project supports multiple data sources through the Resource Adapter pattern:

Drizzle + D1 (default)
REST API
GraphQL
Custom implementations

See docs/resource-adapters.md for details.

📚 Documentation

Resource Adapters - How to implement custom data sources
Authentication Setup - Configure OAuth providers
Migration Guide - Upgrading from older versions

🛠️ Development

Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm run preview - Preview production build
npm run check - Run type checking
npm run lint - Run linter
npm run format - Format code
npm run storybook - Start Storybook for component development

Database Management

Migration Commands

npm run migration:generate - Generate new database migrations from schema changes
npm run migration:list - List current migration status (local D1 database)
npm run migration:list-prod - List current migration status (production D1 database)
npm run migration:apply - Apply pending migrations to local D1 database
npm run migration:apply-prod - Apply pending migrations to production D1 database

Migration Workflow

Check Status: Always start by checking what migrations exist
```
npm run migration:list
```
For Schema Changes: When you modify src/lib/server/entity/index.ts
```
npm run migration:generate
npm run migration:apply
```

For Production: Deploy migrations to production

npm run migration:list-prod  # Check production status
npm run migration:apply-prod # Apply to production

Note: Local development uses Cloudflare D1 in local mode, while production uses the remote D1 database specified in wrangler.toml.

🚀 Deployment

Easy RD is deployed on Cloudflare Pages with D1 database. The production site is available at https://easyrd.dev.

Deploy Your Own Instance

Fork this repository
Create a Cloudflare account
Set up a D1 database
Configure environment variables in Cloudflare Pages
Deploy with Wrangler or connect GitHub repository

See detailed deployment instructions in the Cloudflare documentation.

🤝 Contributing

We welcome contributions! Whether it's bug fixes, new features, or documentation improvements.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Write tests for new features
Follow the existing code style
Update documentation as needed
Add examples for new functionality

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

DBML - For the excellent database markup language
@meursyphus/flitter - For the Flutter-inspired layout system
Monaco Editor - For the powerful code editor
SvelteKit - For the amazing web framework
Drizzle ORM - For the type-safe database toolkit
Cloudflare - For the edge computing platform

🔗 Links

Live Service: https://easyrd.dev
Source Code: GitHub Repository
Discord Community: Join our Discord
Report Issues: GitHub Issues
Organization: Meursyphus on GitHub - Home to Easy RD, Flitter, and other modern web tools

Made with ❤️ by the Easy RD community

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
docs		docs
migrations		migrations
src		src
static		static
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
drizzle.config.ts		drizzle.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
svelte.config.js		svelte.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts
wrangler.toml		wrangler.toml

License

meursyphus/easy-rd

Folders and files

Latest commit

History

Repository files navigation