How to Export DBML from DrawDB: Schema Serialization Guide

DrawDB exports your visual database diagrams to DBML (Database Markup Language) using the pure toDBML function located in src/utils/exportAs/dbml.js, accessible either through the built-in side panel or programmatically via the useDiagram hook.

DrawDB is an open-source entity-relationship diagram builder (drawdb-io/drawdb) that maintains bidirectional sync between visual schemas and DBML text. Exporting DBML allows you to generate portable, version-controlled database definitions from your diagrams for use with DBML-compatible tools like dbdocs or programmatic migration scripts.

Using the DBML Side Panel for Live Export

The fastest way to export DBML is through the built-in DBML Editor side panel. This component lives in src/components/EditorSidePanel/DBMLEditor.jsx and automatically serializes your current diagram state to DBML text using the toDBML utility.

When you open the side panel, it calls toDBML(diagram) to generate the textual representation, keeping the visual diagram and DBML code in real-time sync. You can copy the generated DBML directly from this panel or save it to a .dbml file.

Exporting Programmatically with toDBML

For custom workflows or automated exports, call the toDBML function directly from src/utils/exportAs/dbml.js. This pure function accepts a diagram object and returns a DBML string, making it safe to use in any component or utility script.

import { toDBML } from "./utils/exportAs/dbml";
import { useDiagram } from "./hooks/useDiagram";

function exportCurrentSchema() {
  const { diagram } = useDiagram();
  
  // Serialize the entire diagram to DBML format
  const dbmlText = toDBML(diagram);
  
  console.log("Exported DBML:\n", dbmlText);
  
  // Optional: trigger file download
  const blob = new Blob([dbmlText], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'database_schema.dbml';
  link.click();
}

The useDiagram hook provides access to the central diagram store, while toDBML handles the conversion without side effects.

Understanding the Export Architecture

DrawDB separates import and export logic into distinct utility modules for maintainability:

• src/utils/exportAs/dbml.js – Contains the toDBML serializer that maps DrawDB's internal diagram structure (tables, columns, relationships, notes) to DBML syntax.
• src/utils/importFrom/dbml.js – Contains the fromDBML parser for the reverse operation.

The toDBML function is pure, meaning it takes a diagram object as input and returns a string without modifying application state. This architecture allows you to export DBML from anywhere in the application—from the DBMLEditor side panel, custom export buttons, or headless scripts.

Working with the Exported DBML

Once exported, the DBML text follows the standard Database Markup Language specification. You can use the output with:

• dbdocs – Deploy the DBML file using the DBML CLI to generate interactive documentation.
• Version control – Check the .dbml file into Git to track schema changes as code.
• ** Migration tools** – Transform the DBML into SQL DDL using tools like dbml-cli.

Because toDBML serializes the complete diagram state, the export includes all tables, column definitions, primary keys, foreign key relationships, and notes as defined in the visual editor.

Summary

• Use src/utils/exportAs/dbml.js and its toDBML function to serialize diagrams to DBML text.
• Access the DBML Editor side panel (src/components/EditorSidePanel/DBMLEditor.jsx) for a live, copy-ready view of your schema.
• Leverage the useDiagram hook to access the current diagram state for programmatic exports.
• The export system is stateless and pure, allowing safe integration into any workflow.

Frequently Asked Questions

What file format does DrawDB use for DBML export?

DrawDB exports plain text in the DBML (Database Markup Language) format, typically saved with a .dbml extension. The toDBML function in src/utils/exportAs/dbml.js generates raw DBML syntax that is compatible with the DBML parser ecosystem, including dbdocs and various SQL generation tools.

Can I export only a subset of tables to DBML?

The current toDBML implementation in the drawdb-io/drawdb repository serializes the complete diagram object passed to it. To export partial schemas, you would need to filter the diagram's tables array before calling toDBML, creating a subset diagram object containing only the desired tables and their relationships.

How does exporting DBML differ from importing?

Importing uses fromDBML in src/utils/importFrom/dbml.js to parse DBML text and populate the diagram store via setDiagram. Exporting uses toDBML in src/utils/exportAs/dbml.js to read from the useDiagram hook and generate DBML text. The two functions are inverse operations—import builds the internal state from text, while export serializes state to text.

Is the exported DBML compatible with other database tools?

Yes. DrawDB implements standard DBML syntax generation, making exports compatible with any DBML-compliant tool. You can validate outputs using the dbml-parser library (the same one DrawDB uses for imports) or deploy directly to documentation platforms that support DBML schema definitions.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}