A modern, interactive PostgreSQL schema visualizer that transforms your SQL CREATE TABLE statements into beautiful, professional database diagrams.
- SQL to Diagram: Instantly convert PostgreSQL CREATE TABLE statements into interactive diagrams
- Real-time Parsing: Live error detection and syntax validation using
sql-parser-cst - Relationship Mapping: Automatic detection and visualization of foreign key relationships
- Smart Layout: Auto-arranged diagrams using Dagre layout algorithm
- Monaco Editor Integration: Full-featured SQL editor with syntax highlighting and error markers
- Inline Error Display: See SQL errors directly in the editor with precise line/column positioning
- Theme Support: Light/Dark mode with system preference detection
- Export Functionality: Download your SQL schemas (disabled for invalid SQL)
- Import/Export: Load SQL files or save your work
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- Modern UI: Built with Tailwind CSS and Radix UI components
- Touch-Friendly: Optimized for mobile interactions and touch gestures
- Accessibility: Full keyboard navigation and screen reader support
- Relationship Types: Displays One-to-One, One-to-Many, Many-to-One, and Many-to-Many relationships
- Validation Status: Clear indicators for SQL validity with error counts
- Table Details: Complete column information including types, constraints, and keys
- Interactive Diagrams: Pan, zoom, and explore your database schema
- Node.js 18+
- npm or pnpm
- Clone the repository
git clone https://github.com/paripsky/sqlgram.git
cd sqlgram- Install dependencies
npm install
# or
pnpm install- Start development server
npm run dev
# or
pnpm dev- Open in browser Navigate to
http://localhost:5173
npm run build
# or
pnpm build- Enter your SQL schema in the editor:
CREATE TABLE users (
id SERIAL PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
email VARCHAR(100) NOT NULL UNIQUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
CREATE TABLE posts (
id SERIAL PRIMARY KEY,
title VARCHAR(200) NOT NULL,
content TEXT,
user_id INTEGER NOT NULL REFERENCES users(id),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);-
Watch the magic happen ✨ - Your schema automatically appears as an interactive diagram!
-
Explore relationships - See how your tables connect with labeled relationship lines
- ✅ CREATE TABLE statements
- ✅ Primary keys (SERIAL, INTEGER PRIMARY KEY)
- ✅ Foreign key relationships (REFERENCES)
- ✅ Column constraints (NOT NULL, UNIQUE)
- ✅ Data types (VARCHAR, INTEGER, TEXT, TIMESTAMP, BOOLEAN, etc.)
- ✅ Default values
- ✅ Composite primary keys
- ✅ Junction tables (many-to-many relationships)
sqlgram provides comprehensive error detection:
- Syntax Errors: Real-time SQL syntax validation
- Missing References: Detection of broken foreign key references
- Type Mismatches: Validation of data type consistency
- Inline Markers: Errors highlighted directly in the editor
- React 18 - Modern React with hooks and concurrent features
- TypeScript - Type-safe development with full IntelliSense
- Vite - Lightning-fast build tool and development server
- Tailwind CSS - Utility-first CSS framework
- Radix UI - Unstyled, accessible component primitives
- Lucide React - Beautiful, customizable icons
- React Flow - Interactive node-based diagrams
- Monaco Editor - VS Code editor experience in the browser
- sql-parser-cst - Robust PostgreSQL SQL parser
- Dagre - Directed graph layout algorithm
sqlgram supports three theme modes:
- Light Mode - Clean, bright interface
- Dark Mode - Easy on the eyes for extended use
- System - Automatically follows your OS preference
The Monaco editor theme automatically syncs with your selected theme preference.
sqlgram is fully responsive and optimized for mobile devices:
- Touch-friendly interface with appropriate touch targets
- Tabbed layout on mobile for better space utilization
- Optimized diagram controls for touch interaction
- Prevents zoom on form inputs for better UX
We welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Run tests:
npm run test - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Use TypeScript for all new code
- Follow the existing ESLint configuration
- Write meaningful commit messages
- Add JSDoc comments for complex functions
This project is licensed under the MIT License - see the LICENSE file for details.
- sql-parser-cst - For robust SQL parsing capabilities
- React Flow - For the amazing diagram visualization
- Monaco Editor - For bringing VS Code editor experience to the web
- Radix UI - For accessible, unstyled component primitives
- Tailwind CSS - For the utility-first CSS framework
- Support for additional SQL dialects (MySQL, SQLite)
- Schema comparison and diff visualization
- Export to various formats (PNG, SVG, PDF)
- Collaborative editing features
- Schema version history
- Integration with popular databases
- Advanced relationship editing
- Custom diagram themes
- Documentation: Check this README and inline help
- Issues: Report bugs on GitHub Issues
- Discussions: Join conversations in GitHub Discussions
If sqlgram helps you visualize your database schemas, please consider:
- ⭐ Starring the repository
- 🐛 Reporting bugs
- 💡 Suggesting new features
- 🤝 Contributing code
- 📢 Sharing with colleagues
Built with ❤️ for developers, by developers
sqlgram - Making database schemas beautiful, one diagram at a time