How to Extend DrawDB Functionality: A Developer's Guide to Custom Extensions

Developers can extend DrawDB by using the ExtensionsContext API to inject custom React components and functions at predefined hook points without modifying core source files.

DrawDB is a browser-based database diagramming tool built with React that's designed with extensibility in mind. The project provides a clean slot-based extension system that lets you add custom UI panels, toolbar buttons, canvas overlays, or even replace built-in functionality like AI-powered SQL import. This guide shows you exactly how to leverage the extension architecture as implemented in the drawdb-io/drawdb repository.

DrawDB Extension Architecture Overview

The extension system centers on two pieces: ExtensionsContext and the Slot component. Both are defined in [src/context/ExtensionsContext.jsx](https://github.com/drawdb-io/drawdb/blob/main/src/context/ExtensionsContext.jsx).

• ExtensionsContext – A React context that stores an object mapping slot names to extension values (React elements or functions).
• Slot component – A helper that looks up a slot by name and renders whatever extension was registered, or returns null if empty.

The provider wraps the entire application in [src/App.jsx](https://github.com/drawdb-io/drawdb/blob/main/src/App.jsx), making extensions available throughout the component tree.

Key Extension Hook Points in DrawDB

The DrawDB UI exposes numerous named slots where you can inject custom content. These are scattered across major components:

Slot Name	Typical Location	Use Case
header-actions-start / header-actions-end	EditorHeader/ControlPanel.jsx	Toolbar buttons
canvas-overlay	EditorCanvas/Canvas.jsx	Floating badges or guides
right-panel	Workspace.jsx	Custom sidebar panels
share-modal-top	Share dialog	Extra sharing options
importSqlWithAi	Functional hook	Override AI SQL import

You can discover additional slots by searching for <Slot name="..." /> usages throughout the codebase.

How to Add a Custom Extension to DrawDB

Follow these steps to inject your own functionality without touching core files.

Step 1: Create Your Extension Component

Build a standard React component that uses DrawDB's hooks if needed:

// src/custom/MyExportButton.jsx
import { useDiagram } from "../hooks/useDiagram";

export default function MyExportButton() {
  const { exportDiagram } = useDiagram();
  
  return (
    <button
      className="btn btn-primary"
      onClick={() => exportDiagram("png")}
    >
      Export PNG
    </button>
  );
}

Step 2: Register in ExtensionsContext.Provider

Edit [src/App.jsx](https://github.com/drawdb-io/drawdb/blob/main/src/App.jsx) to include your extension:

import ExtensionsContext from "./context/ExtensionsContext";
import MyExportButton from "./custom/MyExportButton";

const extensions = {
  // Insert button at end of header actions
  "header-actions-end": <MyExportButton />
};

function App() {
  return (
    <ExtensionsContext.Provider value={extensions}>
      <MainAppRoutes />
    </ExtensionsContext.Provider>
  );
}

export default App;

Step 3: Access Extensions Programmatically (Optional)

For functional extensions, use the useExtensions hook:

import { useExtensions } from "../context/ExtensionsContext";

function MyComponent() {
  const { importSqlWithAi } = useExtensions();
  // Call the possibly-overridden function
  const result = await importSqlWithAi(userPrompt);
}

Practical DrawDB Extension Examples

Example 1: Custom Sidebar Panel

Add a notes panel to the right side of the workspace:

// src/custom/NotesPanel.jsx
export default function NotesPanel() {
  return (
    <aside className="notes-panel">
      <h3>My Custom Notes</h3>
      <textarea placeholder="Diagram notes..." />
    </aside>
  );
}

// In App.jsx
const extensions = {
  "right-panel": <NotesPanel />
};

Example 2: Override Built-in AI Import

Replace DrawDB's default AI SQL generation with your own service:

// src/custom/aiImport.js
export async function myImportSqlWithAi(prompt) {
  const response = await fetch("/api/my-ai", {
    method: "POST",
    body: JSON.stringify({ prompt })
  });
  const data = await response.json();
  return data.sql;
}

// In App.jsx
const extensions = {
  importSqlWithAi: myImportSqlWithAi
};

Example 3: Canvas Overlay Badge

Display a "Beta" indicator over the diagram canvas:

// src/custom/CanvasBadge.jsx
export default function CanvasBadge() {
  return (
    <div className="canvas-badge" style={{
      position: "absolute",
      top: 8,
      right: 8,
      background: "#f59e0b",
      padding: "4px 12px",
      borderRadius: 4
    }}>
      Beta
    </div>
  );
}

// In App.jsx
const extensions = {
  "canvas-overlay": <CanvasBadge />
};

Critical Files for DrawDB Extension Development

File	Purpose
[src/context/ExtensionsContext.jsx](https://github.com/drawdb-io/drawdb/blob/main/src/context/ExtensionsContext.jsx)	Core API: context, useExtensions() hook, and Slot component
[src/App.jsx](https://github.com/drawdb-io/drawdb/blob/main/src/App.jsx)	Where you register extensions via the provider
[src/components/Workspace.jsx](https://github.com/drawdb-io/drawdb/blob/main/src/components/Workspace.jsx)	Primary consumer of slot components
[src/hooks/useDiagram.js](https://github.com/drawdb-io/drawdb/blob/main/src/hooks/useDiagram.js)	Useful hook for diagram operations in custom extensions

Summary

DrawDB's extension system enables powerful customization through a slot-based React context pattern:

• ExtensionsContext.Provider accepts a plain object mapping slot names to React elements or functions
• <Slot name="..." /> components render injected content at predefined UI locations
• Functional overrides like importSqlWithAi let you replace core behavior without source modification
• Your custom code lives in separate files, ensuring clean upgrades when DrawDB releases updates

This architecture makes DrawDB adaptable for enterprise workflows, third-party integrations, and community plugins while maintaining its lightweight, open-source foundation.

Frequently Asked Questions

What types of extensions can I add to DrawDB?

You can add React components for UI elements (buttons, panels, overlays) and functions for behavior overrides. The ExtensionsContext accepts any valid React element or JavaScript function as a slot value. Common extensions include custom export buttons, AI service integrations, documentation panels, and workflow-specific tools.

Do I need to modify DrawDB's core files to create extensions?

No core modifications are required. You only need to edit src/App.jsx (or create a wrapper) to pass your extensions to ExtensionsContext.Provider. All custom code lives in separate files, which preserves your changes when updating to new DrawDB versions.

How do I find all available extension slots in DrawDB?

Search the codebase for <Slot name= to discover every hook point. The most frequently used slots are header-actions-start, header-actions-end, canvas-overlay, right-panel, and share-modal-top. More slots may be added in future releases, so checking Workspace.jsx and ControlPanel.jsx directly is recommended.

Can I override DrawDB's AI SQL import feature with my own implementation?

Yes. Supply a function under the importSqlWithAi key in your extensions object. DrawDB's core code checks for this extension and calls it instead of the built-in implementation. Your function should accept a prompt string and return an object with a sql property containing the generated SQL.

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