Schema Lens

Your schema, in focus. Instant ERD from the files you already write — right inside VS Code.

⚠️ Early-stage, vibe-coded, and evolving. Expect rough edges. PRs and issues are very welcome — this is built in public.

You know that moment when you're three files deep into a migration and you can no longer remember how orders relates to line_items without grep-ing through five files? Yeah. That's why this exists.

Schema Lens is a VS Code extension that reads your schema and migration files and renders an interactive ERD in a side panel. No browser tab. No SaaS login. No database connection. Just click ≋ View ERD and see your schema.

  You have this:              Schema Lens gives you this:

  schema.prisma               ┌─────────────┐     ┌─────────────┐
  migrations/001.sql    ───▶  │  users      │────▶│  posts      │
  drizzle/schema.ts           │  PK id      │     │  PK id      │
                              │  email      │     │  FK author  │
                              │  name       │     │  title      │
                              └─────────────┘     └─────────────┘

Fair question. There are great ERD tools out there. Here's the honest comparison:

Schema Lens isn't trying to replace those tools. It's the thing you reach for when you already have a migration file open and just want to see it, fast.

• ≋ ERD on demand — click one button in the editor title bar, get a diagram
• Interactive canvas — zoom, pan, drag nodes, hover columns for details
• Multi-format parsing — Prisma, Drizzle, Knex, and raw SQL (coverage growing)
• Fully offline — nothing leaves your machine
• Zero config to start — open a supported file, click the button, done
• Schema diff (planned) — compare two migrations visually

Not on the marketplace yet? Skip to the .vsix instructions below.

Option A — VS Code Marketplace:

1. Open VS Code
2. Hit Ctrl+Shift+X (or Cmd+Shift+X)
3. Search Schema Lens
4. Click Install

Option B — Install from .vsix:

code --install-extension schema-lens-x.y.z.vsix

Option C — Clone and run locally:

git clone https://github.com/SchemaLens/schema-lens
cd schema-lens
npm install
# Press F5 in VS Code to launch the Extension Development Host

1. Open a folder containing your schema or migration files
2. Open any supported file (schema.prisma, *.sql, etc.)
3. Click ≋ View ERD in the editor title bar — or run Schema Lens: Open ERD from the Command Palette (Ctrl+Shift+P)
4. The ERD panel opens to the side. Explore away.

  ┌──────────────────────────────────────────────┐
  │  project › migrations › schema.sql            │  ← breadcrumb
  │                                    [≋ ERD]    │  ← click this
  ├──────────────────────────────────────────────┤
  │  CREATE TABLE users (                         │
  │    id    SERIAL PRIMARY KEY,                  │
  │    email VARCHAR(255) UNIQUE NOT NULL          │
  │  );                                           │
  └──────────────────────────────────────────────┘

{
  // Paths to scan for schema/migration files
  "schemaLens.includePaths": ["./migrations", "./src/db"],

  // Explicitly set the parser (auto-detected by default)
  "schemaLens.parser": "auto", // "prisma" | "drizzle" | "knex" | "sql" | "auto"

  // How many tables to show before paginating the ERD
  "schemaLens.maxTablesPerView": 20
}

Tracked properly in GitHub Issues and the project board — here's the high-level picture.

Near-term (rough priority order):

• TypeORM entity parser
• Schema diff between two files / commits
• Keyboard shortcuts for zoom and navigation
• Configurable themes (light mode, custom colors)

Medium-term:

• Jump-to-definition from ERD column → source file
• Better layout engine for large schemas (>20 tables)
• Multi-root workspace support

Longer-term / exploratory:

• GitHub Action to generate ERD PNGs on schema change
• Optional team diff viewer (potential paid add-on)

Have an idea? Open a discussion rather than an issue if it's exploratory.

Contributions are welcome — especially:

• 🐛 Bug reports with clear repro steps
• 🔌 New parsers for schema/migration formats not yet supported
• ⚡ ERD performance or layout improvements
• 📖 Docs, examples, and config samples

Before opening a PR:

1. Check existing issues first
2. Open an issue describing what you want to change
3. Keep changes focused and minimal

By contributing, you agree your work is licensed under the same terms as the project.

git clone https://github.com/SchemaLens/schema-lens
cd schema-lens
npm install

# Run tests
npm test

# Build the extension
npm run build

# Package as .vsix
npm run package

src/
├── extension.ts       ← entry point, command registration
├── parsers/           ← one file per format (sql, prisma, drizzle, knex)
├── renderer/          ← webview HTML + ERD canvas logic
└── diff/              ← schema diff engine

If Schema Lens saves you even one "wait, what was that foreign key again?" moment — a star helps a lot. It makes the project more visible and keeps the motivation to ship.

Schema Lens is source-available under the PolyForm Noncommercial 1.0.0 license.

TL;DR:

This is intentionally not an OSI "open source" license — commercial use needs a separate agreement. This keeps the code public and accessible for personal use while letting me build something sustainable around it.

Schema Lens is provided "as is" — no warranties, no guarantees, no SLA. Use it at your own risk, especially in production or critical environments.

This README may lag behind the actual implementation. Treat it as a best-effort description, not a formal spec. When in doubt, read the source.