How to Import SQL into DrawDB: A Complete Guide to Reverse Engineering Schemas

You can import SQL into DrawDB by opening the Import modal, pasting or dropping your SQL file, and letting the built-in parser convert the script into an interactive diagram automatically.

DrawDB is an open-source database design tool that allows you to reverse engineer existing database schemas by importing raw SQL scripts. Whether you are working with MySQL, PostgreSQL, SQLite, MariaDB, MSSQL, or Oracle, the application parses your SQL and generates a visual diagram complete with tables and relationships.

Opening the Import SQL Modal

To begin the import process, click the Import button (represented by a sheet-with-arrow icon) in the editor header. Select "Import from source" to open the ImportSource component modal. Here you can either paste SQL text directly into the text area or drag-and-drop a *.sql file from your filesystem.

Parsing the SQL Script

Once you provide the SQL, DrawDB parses it using database-specific parsers. In src/components/EditorHeader/Modal/Modal.jsx, the application instantiates the appropriate parser based on your selected database type.

For generic databases, DrawDB uses node-sql-parser:

import { Parser } from 'node-sql-parser';
const parser = new Parser();
const ast = parser.astify(sqlText, { database: 'MySQL' });

For Oracle databases, it switches to oracle-sql-parser:

import { Parser as OracleParser } from 'oracle-sql-parser';
const oracleParser = new OracleParser();
const ast = oracleParser.parse(oracleSql);

If parsing fails, errors are caught and displayed to the user in the modal interface (lines 38-45 of Modal.jsx).

Converting AST to Diagram

After parsing, the Abstract Syntax Tree (AST) is passed to the core importSQL helper function. Located in src/utils/importSQL/index.js, this function acts as a central dispatcher:

import { importSQL } from '@/utils/importSQL';
import { DB } from '@/data/constants';

const diagram = importSQL(ast, DB.MYSQL, DB.GENERIC);

The importSQL function selects the appropriate database-specific converter (such as fromMySQL, fromPostgres, fromSQLite, or fromOracle) from files in src/utils/importSQL/. Each converter transforms the AST into DrawDB's internal diagram representation, building tables with columns, primary keys, and foreign key relationships.

After conversion, arrangeTables(diagram) automatically calculates positions for a clean, organized layout (lines 36-38 of index.js).

Applying the Imported Diagram

Once the diagram object is ready, the modal either overwrites the current canvas or merges the new tables with existing ones, depending on the "Overwrite existing diagram" checkbox state. The diagram state hooks (setTables, setRelationships, setTypes, setEnums) from src/hooks/useDiagram.js then persist the imported structure to the editor.

Programmatic SQL Import (Advanced)

If you need to import SQL programmatically from a custom script or browser extension, you can call the utility directly without using the UI:

import { importSQL } from '@/utils/importSQL';
import { Parser } from 'node-sql-parser';
import { DB } from '@/data/constants';

// Parse the SQL string
const parser = new Parser();
const ast = parser.astify(sqlText, { database: DB.MYSQL });

// Convert to DrawDB diagram
const diagram = importSQL(ast, DB.MYSQL, DB.GENERIC);

// Apply to editor state
setTables(diagram.tables);
setRelationships(diagram.relationships);

For Oracle-specific imports, remember to switch the parser to OracleParser and pass DB.ORACLESQL as the target database parameter.

Summary

  • Click the Import button and select "Import from source" to open the SQL import modal in src/components/EditorHeader/Modal/Modal.jsx.
  • The system uses node-sql-parser for most databases and oracle-sql-parser for Oracle SQL dialects.
  • The importSQL(ast, targetDb, diagramDb) function in src/utils/importSQL/index.js dispatches to database-specific converters to build the diagram object.
  • After import, arrangeTables() automatically positions tables for optimal visualization.
  • Import errors are caught and displayed in the UI, while successful imports update the diagram state via useDiagram hooks.

Frequently Asked Questions

What SQL dialects does DrawDB support for import?

DrawDB supports importing SQL for MySQL, PostgreSQL, SQLite, MariaDB, Microsoft SQL Server, and Oracle. Each dialect uses a specific converter located in src/utils/importSQL/ (such as mysql.js, postgres.js, and sqlite.js) to handle dialect-specific syntax and data types.

Can I import SQL files by dragging and dropping?

Yes. The ImportSource component in Modal.jsx supports drag-and-drop functionality for *.sql files. You can also paste the SQL script directly into the text input field if you prefer to copy from your clipboard.

What happens if my SQL has syntax errors?

If the parser encounters syntax errors, the application catches these exceptions in Modal.jsx (lines 38-45) and displays them to you in the modal interface. The diagram will not be generated until you fix the syntax errors and the AST is successfully parsed.

Is it possible to merge imported SQL with an existing diagram instead of replacing it?

Yes. Before confirming the import, you can uncheck the "Overwrite existing diagram" option. When unchecked, the imported tables and relationships merge with your current diagram rather than replacing it, allowing you to combine multiple schema sources.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"

Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →