A VS Code extension that turns your dbt project into an interactive ERD — zoom,
pan, click a table to open its SQL, follow FK edges like breadcrumbs. Powered
by dbterd under the hood.
From the VS Code Marketplace: search for dbt ERD and click Install, or run:
code --install-extension datnguye.dbterd-vscodeYou'll need Python 3.10+ on PATH — the extension spawns a small FastAPI
server that wraps the dbterd library.
- Open the Command Palette (
Cmd/Ctrl+Shift+P). - Run dbterd: Open ERD.
- The ERD opens in a new panel. Click a table header to jump to its SQL.
- Run dbterd: Refresh ERD after
dbt compile/dbt docs generateto pick up manifest changes, or after editing.dbterd.yml.
| Setting | Default | Description |
|---|---|---|
dbterd.dbtProjectPath |
"" |
Absolute path to the dbt project root. |
dbterd.serverPort |
0 |
Port for the local server. 0 = auto-pick. |
dbterd.pythonPath |
"" |
Optional override for the base Python interpreter. Leave empty to auto-detect (dbt project .venv → $VIRTUAL_ENV → python3 on PATH). |
Three layers dressed up as one extension:
- A FastAPI server wraps
dbterdand serves/erdas JSON. - A React +
@xyflow/reactwebview renders that JSON as draggable table cards with FK edges between columns. - A TypeScript extension host spawns the server on activate, hosts the webview, and pipes click-to-open-SQL messages back to VS Code.
┌──────────────────────────────┐
│ VS Code Extension Host │ activate() → spawn server, open webview
└──────────────┬───────────────┘
│ child_process
▼
┌──────────────────────────────┐
│ dbterd-server (FastAPI) │ GET /erd → { nodes, edges, … }
└──────────────▲───────────────┘
│ fetch
┌──────────────┴───────────────┐
│ Webview (React + reactflow)│ renders custom table-card nodes
└──────────────────────────────┘
PRs welcome. This repo is built for agentic development (Claude Code is a
first-class contributor), but regular human PRs work just as well. See
CONTRIBUTING.md for setup, conventions, the /erd
contract rules, and release process.
A standing ovation to the humans who steer the agents (and occasionally remind them which file the contributor list belongs in). Agents may write the code, but merges still need a human to click the button — well done, human drivers ❤️
⭐ If this extension is useful, please star the repo on GitHub — it helps others discover it and keeps the maintainer motivated to keep shipping.
🍰 And if this extension saves you from squinting at manifest.json at 2 AM,
consider sponsoring a coffee — or, in 2026 currency, roughly 1M Claude tokens.
Either way, the late-night bug hunts stay fueled and the agents stay fed.
