GraphMyDB — VS Code Extension

Visualize SQL schemas, compare database versions, inspect migration changes, and open SQLite database files with interactive ER diagrams. All parsing happens locally inside VS Code by default. Optional co-op sessions can connect invited peers for live collaboration on the shared code editor while each user keeps independent ER diagram navigation.

Latest In 2.1.0

• Real file sync — Open .sql and .json files from VS Code, edit them in GraphMyDB, and save back to the workspace with dirty-state and external-change detection.
• Git compare — Compare the current SQL file against HEAD, a branch, or a commit directly from the Compare tab.
• Workspace scan — Combine multiple SQL schema or migration files from the workspace into one stitched graph.
• Explorer drag and drop — Drop supported files straight from the VS Code Explorer onto the GraphMyDB upload area.
• Large-schema controls — Filter by SQL schema namespace, hide junction tables, hide isolated tables, and keep a persisted layout per source.
• Relational data navigation — In Data view, click FK values to jump to matching rows in related tables when row data is available.

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.
• Workspace Schema Discovery — Scan the workspace for SQL schema or migration files and stitch them into a single graph.
• 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.
• SQLite DB Import — Open .db, .sqlite, and .sqlite3 files directly in the extension.
• Schema Comparison — Upload two schema versions (before & after) to see added, removed, and modified tables, columns, and indexes with color-coded diffs.
• Git-Aware Schema Review — Compare the active SQL source against HEAD, branches, or recent commits without manually exporting files.
• 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.
• Invite-Code Co-op — Start a live room after loading a schema and collaborate on the shared SQL/JSON code.
• 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, Excel, or SQLite .db.
• Live Code Editor + Save Back — Edit SQL/JSON in a built-in editor with instant diagram refresh and save supported source files back to disk.
• Multiple Layouts — Grid, left-to-right, and top-to-bottom auto-layout options.
• Persisted Layouts — Reopen the same source and keep your diagram layout and node positions.
• Large-Schema Filters — Filter by namespace and hide noisy or disconnected tables.
• Click to Focus — Click any table to highlight its relationships. Click a column to trace its edges.
• Relational Data Navigation — Follow FK values from one table to related rows in another from Data view.
• 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, .xlsx, or .db file in the Explorer or Editor and select GraphMyDB: Visualize This File.

The file will be parsed and the diagram opens automatically.

You can also drag supported files directly from the VS Code Explorer onto the upload area inside GraphMyDB.

Scan the Workspace

Inside the Upload tab, click Scan Workspace to select multiple SQL files and combine them into one diagram. This works well for split schemas and migration folders.

Upload or Paste

Inside the visualizer:

• Upload File — Click "Upload File" or drag and drop .sql, .json, .csv, .xlsx, or .db files.
• Scan Workspace — Pick multiple .sql files from the current workspace and stitch them together.
• 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
• Large-schema filters — Filter by SQL namespace, hide junction tables, and hide isolated tables
• Saved layouts — Node positions and sizes are remembered per source
• View Mode — Toggle between ER Diagram and Mind Map
• Fullscreen — Expand the diagram to fill the editor

Code Sync

• Open a .sql or .json file from the Explorer and edit it directly in GraphMyDB
• Press Ctrl+S / Cmd+S or use the Save button to write changes back to disk
• If the source changes outside GraphMyDB, the editor will prompt you to reload or keep your unsaved edits

Git Compare

• Open a SQL file in GraphMyDB
• Go to the Compare tab
• Enter HEAD, a branch name, or a commit SHA
• Generate a visual diff against the current working copy

Data View

• Browse imported row data from CSV, Excel, or SQLite files
• Click FK-like cell values to jump to matching rows in related tables

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 parses files directly inside the VS Code webview by default. If you never start co-op, your schema stays local to your machine. If you explicitly start co-op, the extension uses temporary network connections so invited peers can join the live session. Optional hosted accounts only store authentication and billing metadata for hosted limits. There is no account-based project storage for your schema files.

Commands

Requirements

• VS Code 1.85 or later

No additional dependencies required.

License

MIT — Stoian George