Schemap ERD

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.

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:

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

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