drawDB

What it is

drawDB is a database diagram editor that runs in your browser, made by drawdb-io. You add tables and fields, link them with relationships, and export the SQL. The README calls it a free, simple and intuitive schema editor and SQL generator. It works without an account.

1. Pick a database type, or Generic for a portable diagram
2. Add tables and fields, or import SQL, DBML or JSON
3. Drag from a foreign-key field to the field it references
4. Group tables in subject areas and add notes
5. Export SQL, an image, DBML, Mermaid or Markdown

Who it suits

Developers, students and teams who want to sketch or document a database before they build it, or to read an old schema as a picture. You can import existing SQL and see its tables and relationships as a diagram. The hosted editor needs no account for the core modeling, and you can run your own copy if you prefer.

Skip it if you need a tool that reads a running database. The docs list imports from SQL scripts, JSON, DDB and DBML files, and none from a live connection.

Where to use it

You can use the hosted editor, run your own copy, or connect the MCP server to an AI tool. The docs list seven database types, with Oracle SQL still in beta.

• Hosted editor: drawdb.app/editor in your browser, with no account for the core modeling
• Your own copy: the README gives a development server, a production build and a Docker image
• Sharing: an optional drawdb-server, for a copy that can share diagrams
• AI tools: the @drawdb/mcp server, which reads your drawDB Pro cloud diagrams from Claude Desktop, Cursor, Cline, Goose or Windsurf
• drawDB Pro (paid plans): cloud diagrams, an AI assistant, API keys and MCP on Pro Solo and Pro Team, and team workspaces and live collaboration on Pro Team only

How to set it up

Get it saves a zip of Mindket’s setup notes in your downloads folder, with the steps from drawDB’s README and docs. The quickest route is the hosted editor, which needs no install. To run your own copy from source, you need Git and Node.js with npm. The Docker routes need Docker instead, and the prebuilt image needs no clone.

1. Clone the repository and move into its folder.
2. Run npm install.
3. Run npm run dev to start the editor.

git clone https://github.com/drawdb-io/drawdb
cd drawdb
npm install
npm run dev

For Docker, the README gives two lines to run in the clone. The -p 3000:80 part maps port 3000 on your computer to port 80 in the container.

docker build -t drawdb .
docker run -p 3000:80 drawdb

If you run the optional drawdb-server for sharing, pass its address to the prebuilt image. The README says no rebuild is needed.

docker run -p 3000:80 -e VITE_BACKEND_URL=https://your-drawdb-server.example.com ghcr.io/drawdb-io/drawdb:latest

How to use it

Open the editor, choose File, then New, and pick a blank diagram or a template. Choose the database type first, because it decides which field types and features you see.

1. Add a table from the sidebar or the toolbar and define its fields.
2. Drag from the blue connection point on a foreign-key field to the field it references.
3. Open the Relationships tab to rename the relationship, swap its sides or set the field pairs. ON DELETE and ON UPDATE each take no action, restrict, cascade, set null or set default.
4. Group tables with subject areas and add notes.
5. Press Ctrl/Cmd + I to start from SQL, DBML or JSON.

Ctrl/Cmd + S saves, Ctrl/Cmd + Z undoes, Alt + E opens the DBML editor and Ctrl/Cmd + Alt + W fits the diagram to the window.

For an AI tool, add this block to its local MCP server settings, with your own API key in place of the placeholder. It needs drawDB Pro.

{
  "mcpServers": {
    "drawdb": {
      "command": "npx",
      "args": ["-y", "@drawdb/mcp"],
      "env": {
        "DRAWDB_API_KEY": "ddb_your_key_here"
      }
    }
  }
}

Example

You want a small blog schema. You open the editor, choose File, then New, and pick a blank PostgreSQL diagram. You add a users table and a posts table, and give posts a user_id field. Then you drag from the blue connection point on user_id to users.id.

The docs use this same pair as their example. drawDB infers the cardinality from the primary and unique constraints, and you can adjust it afterward. When you export, the SQL comes from a generator for PostgreSQL.

With drawDB Pro, a cloud diagram can also be read by an AI tool through the MCP server. You ask:

List my drawDB diagrams, then summarize the schema of the diagram named “Orders”.

The docs say the agent calls list_diagrams first, then uses the diagram ID it gets back for the other tools.

For newcomers and experts

If you are new. A schema is the set of tables in a database and how they link. An entity relationship diagram draws it as boxes and lines. A primary key identifies a row, and a foreign key points at a row in another table. Start in the hosted editor and pick Generic if you have not chosen a database. Fork one of the six built-in templates to see a finished diagram. Export a diagram before you clear your browser data, because the open-source editor keeps it only there.

For experts. The open-source editor is a React app built with Vite. Editor state lives in React Context providers, with no Redux or Zustand store. The canvas is an SVG surface driven by pointer events. Tables are drawn through foreignObject elements, and relationships are SVG paths calculated from the positions of their fields.

Diagrams and custom templates go to IndexedDB through Dexie, while preferences and custom datatype aliases go to local storage. SQL is parsed into an abstract syntax tree, then converted into tables, fields, indexes, enums, types and relationships where the dialect gives enough information. Check constraints are inserted into the generated SQL as written, so write them in the target database’s syntax. PostgreSQL diagrams add table inheritance, array dimensions and enums. PostgreSQL and Generic diagrams both have a Types tab for composite types.

A new language takes four steps: create a translated locale file based on src/i18n/locales/en.js, import it in src/i18n/i18n.js, add it to the language list and register it in the i18next resources map.

Good to know

drawDB runs in your browser, and a few parts of it reach beyond it.

• License: AGPL-3.0. Section 13 says that if you modify the program, your version must offer its source to every user who interacts with it over a network. Read the LICENSE file before you host a changed copy for other people
• Where your work lives: the open-source editor keeps diagrams and templates in your browser’s IndexedDB. Settings has Export saved data, and Flush storage removes the local diagrams for good
• Sharing: the docs say Share publishes a private GitHub Gist. For a copy you run yourself, the README says to set up drawdb-server to enable sharing. Private is not encrypted, so anyone with the link may read it. Put no secrets in a shared diagram
• drawDB Pro: paid plans (the site’s FAQ says “drawDB Pro adds paid plans”). The docs list Pro Solo and Pro Team. Both include cloud diagrams, the AI schema assistant, version history, API keys and MCP. Team workspaces, per-diagram permissions and live collaboration are Pro Team only. The docs say plan availability and pricing can change
• Hosted site: drawDB’s privacy policy lists product events, a device identifier kept in local storage, your IP address and browser details, with Amplitude and Sentry for analytics and error monitoring when configured. When you use the AI assistant, your prompts and diagram context go to Anthropic. The policy does not cover a copy you host yourself
• MCP: it is read-only and runs on your computer with your API key. The key can list diagram names across every team you belong to and read the schemas its owner may open, so treat it like a password. Web-only clients are not supported yet
• Gaps: the README gives no update steps and no Node.js version, and the docs give no steps for Claude Code, Codex or Gemini CLI
• Removal: the README and docs give no removal steps. Delete the cloned folder. In Settings, use Export saved data first, then Flush storage to clear diagrams saved in the browser. If you set up MCP, delete its API key (the key’s action menu, then Delete)