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
order_status would fail unless CREATE 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!