{"id":29054320,"url":"https://github.com/paripsky/sqlgram","last_synced_at":"2026-05-17T06:45:05.084Z","repository":{"id":300277700,"uuid":"1005758877","full_name":"paripsky/sqlgram","owner":"paripsky","description":"Visualize your PostgreSQL database schemas.","archived":false,"fork":false,"pushed_at":"2025-06-20T19:19:18.000Z","size":2013,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-20T20:37:31.184Z","etag":null,"topics":["database-diagram","database-visualization","postgresql","sql"],"latest_commit_sha":null,"homepage":"https://paripsky.github.io/sqlgram/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paripsky.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-20T19:06:45.000Z","updated_at":"2025-06-20T19:40:59.000Z","dependencies_parsed_at":"2025-06-20T20:48:04.410Z","dependency_job_id":null,"html_url":"https://github.com/paripsky/sqlgram","commit_stats":null,"previous_names":["paripsky/sqlgram"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/paripsky/sqlgram","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paripsky%2Fsqlgram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paripsky%2Fsqlgram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paripsky%2Fsqlgram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paripsky%2Fsqlgram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paripsky","download_url":"https://codeload.github.com/paripsky/sqlgram/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paripsky%2Fsqlgram/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262177377,"owners_count":23270842,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["database-diagram","database-visualization","postgresql","sql"],"created_at":"2025-06-27T02:30:22.839Z","updated_at":"2025-10-10T23:13:26.594Z","avatar_url":"https://github.com/paripsky.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sqlgram 🗂️\n\nA modern, interactive PostgreSQL schema visualizer that transforms your SQL\nCREATE TABLE statements into beautiful, professional database diagrams.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![React](https://img.shields.io/badge/React-20232A?logo=react\u0026logoColor=61DAFB)](https://reactjs.org/)\n[![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite\u0026logoColor=white)](https://vitejs.dev/)\n\n## ✨ Features\n\n### 🎯 Core Functionality\n\n- **SQL to Diagram**: Instantly convert PostgreSQL CREATE TABLE statements into\n  interactive diagrams\n- **Real-time Parsing**: Live error detection and syntax validation using\n  `sql-parser-cst`\n- **Relationship Mapping**: Automatic detection and visualization of foreign key\n  relationships\n- **Smart Layout**: Auto-arranged diagrams using Dagre layout algorithm\n\n### 🔧 Developer Experience\n\n- **Monaco Editor Integration**: Full-featured SQL editor with syntax\n  highlighting and error markers\n- **Inline Error Display**: See SQL errors directly in the editor with precise\n  line/column positioning\n- **Theme Support**: Light/Dark mode with system preference detection\n- **Export Functionality**: Download your SQL schemas (disabled for invalid SQL)\n- **Import/Export**: Load SQL files or save your work\n\n### 📱 User Interface\n\n- **Responsive Design**: Works seamlessly on desktop, tablet, and mobile devices\n- **Modern UI**: Built with Tailwind CSS and Radix UI components\n- **Touch-Friendly**: Optimized for mobile interactions and touch gestures\n- **Accessibility**: Full keyboard navigation and screen reader support\n\n### 🔍 Advanced Features\n\n- **Relationship Types**: Displays One-to-One, One-to-Many, Many-to-One, and\n  Many-to-Many relationships\n- **Validation Status**: Clear indicators for SQL validity with error counts\n- **Table Details**: Complete column information including types, constraints,\n  and keys\n- **Interactive Diagrams**: Pan, zoom, and explore your database schema\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js 18+\n- npm or pnpm\n\n### Installation\n\n1. **Clone the repository**\n\n```bash\ngit clone https://github.com/paripsky/sqlgram.git\ncd sqlgram\n```\n\n2. **Install dependencies**\n\n```bash\nnpm install\n# or\npnpm install\n```\n\n3. **Start development server**\n\n```bash\nnpm run dev\n# or\npnpm dev\n```\n\n4. **Open in browser** Navigate to `http://localhost:5173`\n\n### Build for Production\n\n```bash\nnpm run build\n# or\npnpm build\n```\n\n## 📖 Usage\n\n### Basic Example\n\n1. **Enter your SQL schema** in the editor:\n\n```sql\nCREATE TABLE users (\n    id SERIAL PRIMARY KEY,\n    username VARCHAR(50) NOT NULL UNIQUE,\n    email VARCHAR(100) NOT NULL UNIQUE,\n    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\n\nCREATE TABLE posts (\n    id SERIAL PRIMARY KEY,\n    title VARCHAR(200) NOT NULL,\n    content TEXT,\n    user_id INTEGER NOT NULL REFERENCES users(id),\n    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\n```\n\n2. **Watch the magic happen** ✨ - Your schema automatically appears as an\n   interactive diagram!\n\n3. **Explore relationships** - See how your tables connect with labeled\n   relationship lines\n\n### Supported SQL Features\n\n- ✅ CREATE TABLE statements\n- ✅ Primary keys (SERIAL, INTEGER PRIMARY KEY)\n- ✅ Foreign key relationships (REFERENCES)\n- ✅ Column constraints (NOT NULL, UNIQUE)\n- ✅ Data types (VARCHAR, INTEGER, TEXT, TIMESTAMP, BOOLEAN, etc.)\n- ✅ Default values\n- ✅ Composite primary keys\n- ✅ Junction tables (many-to-many relationships)\n\n### Error Handling\n\nsqlgram provides comprehensive error detection:\n\n- **Syntax Errors**: Real-time SQL syntax validation\n- **Missing References**: Detection of broken foreign key references\n- **Type Mismatches**: Validation of data type consistency\n- **Inline Markers**: Errors highlighted directly in the editor\n\n## 🛠️ Tech Stack\n\n### Frontend\n\n- **React 18** - Modern React with hooks and concurrent features\n- **TypeScript** - Type-safe development with full IntelliSense\n- **Vite** - Lightning-fast build tool and development server\n- **Tailwind CSS** - Utility-first CSS framework\n\n### Components \u0026 UI\n\n- **Radix UI** - Unstyled, accessible component primitives\n- **Lucide React** - Beautiful, customizable icons\n- **React Flow** - Interactive node-based diagrams\n- **Monaco Editor** - VS Code editor experience in the browser\n\n### Data Processing\n\n- **sql-parser-cst** - Robust PostgreSQL SQL parser\n- **Dagre** - Directed graph layout algorithm\n\n## 🎨 Theme Support\n\nsqlgram supports three theme modes:\n\n- **Light Mode** - Clean, bright interface\n- **Dark Mode** - Easy on the eyes for extended use\n- **System** - Automatically follows your OS preference\n\nThe Monaco editor theme automatically syncs with your selected theme preference.\n\n## 📱 Mobile Support\n\nsqlgram is fully responsive and optimized for mobile devices:\n\n- Touch-friendly interface with appropriate touch targets\n- Tabbed layout on mobile for better space utilization\n- Optimized diagram controls for touch interaction\n- Prevents zoom on form inputs for better UX\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how you can help:\n\n### Development Setup\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\n3. Make your changes\n4. Run tests: `npm run test`\n5. Commit your changes: `git commit -m 'Add amazing feature'`\n6. Push to the branch: `git push origin feature/amazing-feature`\n7. Open a Pull Request\n\n### Code Style\n\n- Use TypeScript for all new code\n- Follow the existing ESLint configuration\n- Write meaningful commit messages\n- Add JSDoc comments for complex functions\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file\nfor details.\n\n## 🙏 Acknowledgments\n\n- **sql-parser-cst** - For robust SQL parsing capabilities\n- **React Flow** - For the amazing diagram visualization\n- **Monaco Editor** - For bringing VS Code editor experience to the web\n- **Radix UI** - For accessible, unstyled component primitives\n- **Tailwind CSS** - For the utility-first CSS framework\n\n## 🔮 Roadmap\n\n- [ ] Support for additional SQL dialects (MySQL, SQLite)\n- [ ] Schema comparison and diff visualization\n- [ ] Export to various formats (PNG, SVG, PDF)\n- [ ] Collaborative editing features\n- [ ] Schema version history\n- [ ] Integration with popular databases\n- [ ] Advanced relationship editing\n- [ ] Custom diagram themes\n\n## 📞 Support\n\n- **Documentation**: Check this README and inline help\n- **Issues**: Report bugs on\n  [GitHub Issues](https://github.com/paripsky/sqlgram/issues)\n- **Discussions**: Join conversations in\n  [GitHub Discussions](https://github.com/paripsky/sqlgram/discussions)\n\n## 🌟 Show Your Support\n\nIf sqlgram helps you visualize your database schemas, please consider:\n\n- ⭐ Starring the repository\n- 🐛 Reporting bugs\n- 💡 Suggesting new features\n- 🤝 Contributing code\n- 📢 Sharing with colleagues\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003eBuilt with ❤️ for developers, by developers\u003c/p\u003e\n  \u003cp\u003e\u003cstrong\u003esqlgram\u003c/strong\u003e - Making database schemas beautiful, one diagram at a time\u003c/p\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparipsky%2Fsqlgram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparipsky%2Fsqlgram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparipsky%2Fsqlgram/lists"}