What Custom Types and Enums Does drawDB Support for Schema Design?

drawDB supports both custom types and enum definitions to extend the native data-type catalog of each supported database, with custom types stored in localStorage and enums parsed from DBML syntax.

The drawdb-io/drawdb schema designer lets you go beyond built-in database types. Whether you need domain-specific types like Money or state-machine enums like OrderStatus, drawDB provides a flexible type system that integrates seamlessly into your DBML diagrams and SQL export.

Custom Types in drawDB

Custom types allow you to define reusable type aliases with visual styling. They are implemented in src/utils/customTypes.js and persisted to localStorage under the key custom_types.

Custom Type Schema

Each custom type entry follows the customTypeEntrySchema structure:

{
  "type": "Money",
  "database": "POSTGRES",
  "color": "#4caf50"
}

Core Functions

The customTypes.js module exports several key functions:

• getCustomTypes() — retrieves all custom types from localStorage
• getCustomTypesForDb(db) — filters types by database (e.g., "POSTGRES", "MYSQL", "SQLITE")
• resolveType(db, name) — resolves any type name to its full descriptor
• mergeCustomTypes(incoming) — merges imported type definitions

Defining Custom Types via UI

The src/components/EditorHeader/ConfigureCustomTypes/index.jsx component provides the interface for creating and editing custom types. Changes are automatically persisted through saveCustomTypes.

Enums in drawDB

Enums are first-class types parsed from DBML syntax and surfaced to React components via the useEnums hook in src/hooks/useEnums.js.

DBML Enum Syntax

Define enums using standard DBML notation:

Enum OrderStatus {
  PENDING,
  SHIPPED,
  CANCELLED
}

Enum Parsing Pipeline

The parser in src/utils/dbml/parse.js extracts enum definitions into an enumsByDb collection. Each enum object contains:

• name — the enum identifier
• values — array of allowed values

Using Enums in Tables

Reference enums directly in column definitions:

Table orders {
  id int [pk]
  status OrderStatus
}

Type Resolution Order

When resolveType(db, name) is called, drawDB checks types in this priority order:

1. Built-in types from src/data/datatypes.js (dbToTypes map)
2. Custom types from localStorage
3. Enums from the parsed DBML collection
4. Fallback to generic BLOB type if no match found

This resolution ensures your custom definitions override defaults without breaking existing schemas.

Practical Code Examples

Programmatic Type Resolution

import { resolveType } from "./utils/customTypes";

// Custom type lookup
const moneyType = resolveType("POSTGRES", "Money");
// Returns: { type: "Money", database: "POSTGRES", color: "#4caf50" }

// Enum lookup
const statusType = resolveType("POSTGRES", "OrderStatus");
// Returns: { name: "OrderStatus", values: ["PENDING", "SHIPPED", "CANCELLED"] }

// Built-in type
const intType = resolveType("POSTGRES", "int");
// Returns: standard INTEGER descriptor from dbToTypes

Complete DBML Schema with Custom Types and Enums

Enum PaymentMethod {
  CREDIT_CARD,
  PAYPAL,
  BANK_TRANSFER
}

Table customers {
  id int [pk]
  name varchar
}

Table orders {
  id int [pk]
  customer_id int [ref: > customers.id]
  total_amount Money
  status OrderStatus
  payment PaymentMethod
  created_at timestamp
}

Key Implementation Files

File	Purpose
src/utils/customTypes.js	Storage, validation, and resolution of user-defined types
src/data/datatypes.js	Built-in type catalog (dbToTypes map)
src/utils/dbml/parse.js	DBML parser extracting tables, columns, and enums
src/hooks/useEnums.js	React hook exposing parsed enums to components
src/components/EditorHeader/ConfigureCustomTypes/index.jsx	Custom type management UI
src/components/EditorSidePanel/TypesTab/TypeField.jsx	Unified type selector (built-in, custom, enum)

Summary

• Custom types extend any database's native catalog with user-defined names and colors, stored in localStorage via src/utils/customTypes.js
• Enums are parsed from DBML Enum blocks and accessed through the useEnums hook
• resolveType() unifies type lookup across built-in, custom, and enum sources
• The type selector UI automatically includes all three categories for seamless schema design

Frequently Asked Questions

How do I create a custom type in drawDB?

Open the Configure Custom Types panel from the editor header (src/components/EditorHeader/ConfigureCustomTypes/index.jsx). Enter a type name, select the target database, and optionally set a color. The type is saved to localStorage under custom_types and immediately available in the type selector.

Can I use the same custom type across different databases?

No. Custom types are scoped per database via the database field in customTypeEntrySchema. Use getCustomTypesForDb(db) to retrieve types for a specific database, and define separate entries if you need similar types across PostgreSQL, MySQL, or SQLite.

What's the difference between enums and custom types in drawDB?

Enums define a closed set of allowed values (e.g., PENDING, SHIPPED) and are declared inline in DBML using Enum Name { ... }. Custom types are aliases for underlying database types with visual metadata, created through the UI and stored in localStorage. Both are resolved through resolveType() but enums carry value constraints while custom types carry presentation hints.

Where does drawDB store my custom types?

Custom types persist to browser localStorage under the key custom_types. They are not included in exported DBML or SQL files—only referenced by name—so you'll need to re-import or redefine them when switching devices or browsers.

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