How drawDB Generates Unique Identifiers for Tables and Fields: UUID-v4 Implementation Explained

DrawDB uses the UUID-v4 algorithm from the uuid npm package to generate random 128-bit identifiers for every table and field when they are created in the UI.

This client-side approach ensures globally unique IDs without requiring a central server, making the diagram tool fully functional offline while maintaining data integrity across sessions and shared diagrams.

UUID-v4 as the Core Mechanism

In src/data/db.js, drawDB imports v4 as uuidv4 from the uuid library and applies it consistently across the application. The function produces standard UUID strings like "f47ac10b-58cc-4372-a567-0e02b2c3d479"—randomly generated 128-bit values with collision probability low enough to treat as unique for practical purposes.

The generation pattern follows three key principles:

• Universally unique: Astronomic collision resistance lets diagrams merge safely
• Stateless: No server coordination needed—works entirely offline
• Simple API: uuidv4() returns a ready-to-use string for React state and Dexie storage

Where Table and Field IDs Are Generated

Workspace Component Instantiation

In src/components/Workspace.jsx, new tables receive their identifiers during user interaction:

import { v4 as uuidv4 } from "uuid";

function addTable(name, x, y) {
  const table = {
    id: uuidv4(),          // ← unique Table ID generated here
    name,
    x,
    y,
    fields: [],
    // …other table properties
  };
  // Persist in Dexie IndexedDB wrapper
  db.tables.add(table);
}

Field Creation Pattern

Fields follow identical generation logic when added to existing tables:

function addField(tableId, fieldName, fieldType) {
  const field = {
    id: uuidv4(),          // ← unique Field ID generated here
    name: fieldName,
    type: fieldType,
    // …other field properties
  };
  db.tables.where({ id: tableId }).modify(t => t.fields.push(field));
}

Each field maintains its own independent UUID, allowing relationships, notes, and diagram elements to reference fields directly even when table structures change.

Storage and Persistence Strategy

Generated UUIDs persist through Dexie, a Promise-based IndexedDB wrapper. The id field becomes the primary key for records in the client-side database, enabling:

• Session recovery without ID regeneration
• Stable references for foreign key relationships between tables
• Conflict-free diagram imports/exports

Template files in src/templates/template*.js demonstrate the same pattern—templateId values use uuidv4() for consistency across the codebase.

Summary

• DrawDB generates unique identifiers using uuidv4() from the uuid npm package
• IDs are created client-side in src/components/Workspace.jsx during UI interactions
• Every table and field receives an independent 128-bit UUID-v4 string
• Identifiers persist via Dexie/IndexedDB using the id field as primary key
• Stateless generation enables fully offline diagram editing without collision risk

Frequently Asked Questions

Does drawDB use auto-incrementing integers for table IDs?

No. DrawDB exclusively uses UUID-v4 strings generated by uuidv4(). The src/data/db.js implementation shows no sequence counters—random UUID generation eliminates the need for centralized ID coordination.

What happens if two users generate the same UUID?

The collision probability for UUID-v4 is approximately 1 in 2.71 quintillion. Statistically, this is treated as unique for all practical purposes, making conflicts negligible even when merging diagrams from different sources.

Can drawDB work offline with this ID generation method?

Yes. Since uuidv4() requires no server communication, drawDB functions completely offline. The src/data/db.js architecture stores all identifiers locally via IndexedDB, syncing only when explicitly exported or shared.

Are field IDs scoped to their parent table?

No. Field IDs are globally unique UUIDs, not composite keys. The addField implementation in Workspace.jsx generates a fresh uuidv4() for each field, storing it in the table's fields array while maintaining independent referencability.

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