What I built
DevForge is a free SQL schema visualizer - paste your Postgres
CREATE TABLE statements and instantly get a clean visual ER diagram
showing your tables, columns, primary keys, foreign keys, and
relationships between them.
No account needed. Just paste and generate.
Try it here: https://devforge-sql.vercel.app
Why I built it
I kept wanting to quickly visualize database schemas while learning
SQL and building projects, but existing tools were either too complex,
required signups, or didn't handle real-world messy schemas well.
What it handles
- Composite primary and foreign keys
- Array types (TEXT[], NUMERIC(10,2)[])
- Custom enum/type columns
- GENERATED ALWAYS AS IDENTITY columns
- Foreign keys defined via ALTER TABLE (not just inline REFERENCES)
- Self-referencing tables (tree structures)
- Circular foreign keys
Tech stack
- Next.js 14 + TypeScript
- React Flow (diagram rendering)
- elkjs (auto-layout - chose this over dagre after a side-by-side crossing-count comparison on a 15-table schema)
- node-sql-parser (Postgres dialect)
- Deployed on Vercel free tier
What I learned building it
The trickiest part was the SQL parser. node-sql-parser only accepts
a bare identifier as a column type if that exact name was already
declared via CREATE TYPE earlier in the same string. So status would fail unless
order_statusCREATE TYPE order_status AS ENUM
appeared before it. The fix was pre-scanning for undeclared custom
types and synthesizing throwaway CREATE TYPE declarations before
parsing.
What's next
Currently working on adding auth + save projects, then export
(PNG free, PDF paid). Would love any feedback - especially if you
throw a real/messy schema at it and something breaks!
