SchemaLens is a powerful, interactive database schema visualizer tailored for modern developers. It instantly transforms your Drizzle ORM, Prisma, or generic SQL schemas into beautiful, interactive entity-relationship diagrams.
- Multi-Format Support:
- 🌧️ Drizzle ORM: Paste your Drizzle schema definitions directly.
- 💎 Prisma: Visualize your
schema.prismafiles. - 🐘 SQL: Support for standard SQL
CREATE TABLEstatements.
- Interactive Diagrams:
- Drag and arrange tables to organize your view.
- Zoom and pan to explore large schemas.
- Auto-layout capabilities.
- Real-time Parsing: See changes in the diagram instantly as you edit the code.
- Code Editor: Integrated Monaco Editor for a premium coding experience.
- Privacy Focused: All parsing happens client-side. Your schema code never leaves your browser.
Built with the latest modern web technologies:
- Framework: React 19
- Build Tool: Vite
- Styling: Tailwind CSS
- State Management: Zustand
- Visualization: React Flow (@xyflow/react)
- Editor: Monaco Editor
- Icons: Lucide React
Follow these steps to run SchemaLens locally on your machine.
-
Clone the repository
git clone https://github.com/tutkuofnight/schema-lens.git cd schema-lens -
Install dependencies Using Bun (recommended):
bun install
Or using npm:
npm install
-
Start the development server
bun run dev # or npm run dev -
Open your browser Navigate to
http://localhost:5173to start using SchemaLens.
📖 Usage
< 7079 /a>- Open the application.
- Select your schema format (Drizzle, Prisma, or SQL) from the sidebar.
- Paste your schema code into the editor on the right (or bottom on mobile).
- Watch the diagram generate automatically!
- Drag tables to rearrange them.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request