GraphMyDB — VS Code Extension

Visualize SQL schemas, compare database versions, and inspect migration changes with interactive ER diagrams — 100% private and stateless. All parsing happens locally inside VS Code. No data ever leaves your machine.

Features

• SQL → Interactive ER Diagrams — Upload or paste MySQL, PostgreSQL, or SQLite DDL and get a zoomable, pannable diagram instantly.
• Mind Map View — Switch between classic ER diagrams and an interactive mind map layout for a high-level overview.
• JSON Schema Support — Import { tables: [...] } or JSON Schema-style definitions.
• CSV / TSV Analysis — Upload CSV files of any size. Column types are inferred automatically. Multi-file uploads detect cross-file relationships.
• Excel Import — Drag in .xlsx or .xls files. Each sheet becomes a table.
• Schema Comparison — Upload two schema versions (before & after) to see added, removed, and modified tables, columns, and indexes with color-coded diffs.
• Migration Preview — Upload a base schema + migration SQL to preview exactly what the migration changes.
• Visual Editing — Add tables, columns, and relationships directly from the diagram.
• 9 Relationship Types — One-to-one, one-to-many, many-to-many, and more, each with distinct visual styles.
• Export — Save diagrams as PNG or SVG. Export schemas as SQL, CSV, JSON, or Excel.
• Live Code Editor — Edit SQL/JSON in a built-in editor with instant diagram refresh.
• Multiple Layouts — Grid, left-to-right, and top-to-bottom auto-layout options.
• Click to Focus — Click any table to highlight its relationships. Click a column to trace its edges.
• Fullscreen Mode — Expand the diagram to fill the entire editor area.

Getting Started

Open the Visualizer

1. Click the GraphMyDB icon in the Activity Bar (left sidebar).
2. Click "Open Visualizer" in the welcome panel.

Or press Ctrl+Shift+P and run GraphMyDB: Open Visualizer.

Visualize a File

Right-click any .sql, .json, .csv, or .xlsx file in the Explorer or Editor and select GraphMyDB: Visualize This File.

The file will be parsed and the diagram opens automatically.

Upload or Paste

Inside the visualizer:

• Upload File — Click "Upload File" or drag and drop .sql, .json, .csv, or .xlsx files.
• Paste SQL / JSON — Switch to the paste tab and paste your DDL or schema directly.
• Load Sample — Click "Load Sample" to try with a built-in example schema.

Usage

Sidebar Tabs

Diagram Controls

• Zoom — Scroll wheel or pinch
• Pan — Click and drag on the background
• Focus — Click a table node to highlight its relationships
• Layout — Switch between Grid, Left-Right, and Top-Bottom layouts via the toolbar
• View Mode — Toggle between ER Diagram and Mind Map
• Fullscreen — Expand the diagram to fill the editor

Visual Editing

When not in diff/compare mode:

• Click "+ Add Table from Scratch" to create a new table
• Click the + button on any table node to add a column
• Use the relationship tool to draw connections between tables
• All edits are reflected in the Code tab instantly

Supported Formats

Privacy

GraphMyDB is 100% client-side. Your files are parsed directly inside the VS Code webview. Nothing is sent to any server, nothing is stored, and no telemetry is collected. There is no network activity whatsoever.

Commands

Requirements

• VS Code 1.85 or later

No additional dependencies required.

License

MIT — Stoian George