Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>Schemap ERDNew to Visual Studio Code? Get it now.
Schemap ERD

Schemap ERD

Mike Lyndon B. Bigcas

|
1 install
| (0) | Free
Connect to a MySQL database and explore its tables and relationships as an interactive ERD.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Schemap

Explore any MySQL database as an interactive entity-relationship diagram — right inside VS Code.

Purpose-built for large, real-world schemas. Instead of dumping hundreds of tables onto a canvas, Schemap lets you search for what matters and grow the diagram outward through foreign-key relationships.


Overview

Schemap connects to a MySQL server, reads its structure, and renders it as a clean, navigable ERD. It is designed for schemas that are too big to view all at once (800+ tables): you start from a single table and expand into its neighbors on demand, so the diagram always reflects the slice you actually care about.

Schemap is strictly read-only. It queries information_schema and SHOW CREATE TABLE only — it never issues a statement that could modify your data or schema.

alt text

Features

Explore

  • Focused, incremental diagrams — search a table, place it with its related tables, then pull in more neighbors on demand via the +N badge on each node.
  • Search by table or column — find every table containing student_id, not just tables named after it.
  • Locate & center — jump the viewport to any table instantly.
  • Click to focus — clicking a table dims everything except it and its direct relationships.
  • Show all / Hide all and Expand all / Collapse all, with a confirmation guard before rendering very large schemas.
  • Automatic layout via ELK, plus pan, zoom, and a minimap.

Understand

  • Table details panel — every column with PK / FK / unique badges, data types, nullability, indexes, and both incoming and outgoing relationships. Click a related table to pull it onto the canvas.
  • Group coloring — tables are accent-colored by name prefix, so related tables read as a visual group.
  • Labeled relationships — foreign-key edges show the exact child → parent column pairs.
  • Right-click actions — copy a table's name, a ready-to-run SELECT ... LIMIT 100, or the exact CREATE TABLE DDL (SHOW CREATE TABLE).

Connect securely

  • Guided connection form — a single dialog for host, port, credentials, TLS, and environment, with a built-in Test connection button.
  • Encrypted transport (TLS/SSL) — optional per connection, with certificate verification or a self-signed allowance for local servers.
  • Environment awareness — tag connections as development, staging, or production. Production connections require an explicit confirmation before connecting and display a persistent warning banner.
  • Credentials stay safe — passwords are stored in VS Code SecretStorage; connection profiles never contain passwords, so they are safe to export or share.
  • Query timeouts — every query is capped so a heavy information_schema scan can't hang the extension or overload a busy server.

Diagram persistence & export

  • The set of open tables and their positions is saved per connection + database and restored when you reopen it.
  • Export the current diagram as PNG or SVG.

Requirements

  • VS Code 1.90 or newer.
  • A reachable MySQL server (local or remote) and a database user with read access. A dedicated read-only account is recommended.

Getting started

Install from a package (.vsix)

  • UI: Extensions view → ··· menu → Install from VSIX… → select the file.
  • CLI: code --install-extension schemap-erd-<version>.vsix

Run from source (development)

npm install
npm run watch      # rebuild extension + webview on change

Press F5 to launch the Extension Development Host, then:

  1. Open the Schemap icon in the activity bar to reveal the Connections panel.
  2. Click Add Connection (or Connect to Local MySQL) and fill in the form.
  3. Pick a database, search for a table, and start exploring.

Connecting to a database

Local MySQL (XAMPP / WAMP / MAMP)

phpMyAdmin is a web UI on top of a local MySQL server, so Schemap connects to that MySQL server directly. Use Connect to Local MySQL to pre-fill the usual local settings:

  • Host 127.0.0.1, Port 3306, User root
  • Password: empty on XAMPP/WAMP, root on MAMP

Remote MySQL over an SSH tunnel (recommended)

Production databases are usually not exposed to the internet — MySQL listens on localhost behind a firewall. The safe way to reach one is an SSH tunnel that forwards a local port to the server's MySQL port:

ssh -i ./your-key -L 3307:localhost:3306 user@your-server

Leave that terminal open, then add a connection in Schemap pointing at the local end of the tunnel:

Field Value
Host 127.0.0.1
Port 3307
User / Password your MySQL credentials on the remote server
TLS/SSL Off — SSH already encrypts the traffic
Environment Production

The database credentials are the MySQL user's, which is typically different from your SSH login.

Security model

Schemap is built to be safe to point at sensitive databases:

  • Read-only by design. Only information_schema and SHOW CREATE TABLE are ever queried. The "Copy SELECT" action places text on your clipboard; it is never executed.
  • No SQL injection surface. Schema and table filters are passed as bound parameters; the one place identifiers are interpolated (SHOW CREATE TABLE) is safely backtick-escaped.
  • Secrets in SecretStorage. Passwords live in the OS credential store via VS Code, never in profile data.
  • Short-lived connections. Each operation opens a connection and closes it in a finally block — no lingering idle sockets.
  • Production guardrails. Connecting to a profile marked production requires explicit confirmation and surfaces a warning banner in the diagram.

For defense in depth, connect with a MySQL user that only has read privileges. The server-enforced permissions are the ultimate guarantee.

Command reference

Command Description
Schemap: Open Diagram Open the diagram panel.
Add Connection Create a new connection via the form.
Connect to Local MySQL (XAMPP/phpMyAdmin) Add a connection pre-filled with local defaults.
Open Diagram (connection) Open the diagram for a saved connection.
Edit Connection Edit a saved connection in the form.
Delete Connection Remove a saved connection.
Manage Connections Edit or delete a connection from a picker.
Refresh Refresh the Connections view.

Building & packaging

npm run compile     # one-off development build
npm run build       # production build (minified)
npm run typecheck   # type-check without emitting
npm run package     # produce a shareable .vsix

Architecture

Schemap compiles into two independent bundles that communicate only through a typed message protocol:

  • Extension host (src/) — connection management, MySQL introspection via information_schema, and the webview panel lifecycle. Bundled to dist/extension.js (Node, CommonJS).
  • Webview (webview/) — a React application built on React Flow for rendering and ELK for layout. Bundled to media/webview.js (browser, IIFE).
  • Messaging (src/messages.ts) — the typed postMessage contract shared by both sides.
  • Schema model (src/db/schemaTypes.ts) — a framework-free description of tables, columns, and relationships, imported by both the host and the webview.

The webview runs under a strict Content-Security-Policy with a per-load script nonce and no network egress, so bundled third-party code cannot exfiltrate schema data.

Roadmap

  • Native SSH-tunnel support configured directly in the connection form.
  • Multi-database (cross-schema) relationship views.
  • Additional engines (PostgreSQL, SQL Server) — the introspection layer and schema model are kept engine-agnostic to make this possible.

Notes

  • Schemap never modifies your database.
  • Connection profiles are stored without passwords, so the same profile or .vsix is safe to share; each user enters their own credentials.

License

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft