Strata : A Drizzle ORM Visualizer

Most entity relationship diagram (ERD) tools live in a parallel universe, completely detached from your codebase. You draw a beautiful diagram, manually translate it into database migrations, and then watch the two inevitably drift apart. Within weeks, your visual documentation is completely stale.

To solve this, I built Strata, a local-first, disk-first visual companion for the Cloudflare D1 + Drizzle ORM stack. It uses your TypeScript schema as the absolute single source of truth. No sidecar files, no custom JSON metadata, no proprietary formats. Just your code, visualized and editable in real-time.

The Philosophy

Traditional tools treat diagrams as the source of truth, exportable to SQL. Strata flips this relationship. Your TypeScript schema is the schema, and the ERD acts as an interactive front-end for your AST (Abstract Syntax Tree).

       ┌──────────────────────────┐
       │   Visual Canvas (UI)     │
       └─────┬──────────────▲─────┘
             │              │
     AST Manipulation   File Watcher
     (via ts-morph)     (via Tauri)
             │              │
       ┌─────▼──────────────┴─────┐
       │      schema.ts           │
       │ (JSDoc + Drizzle Code)   │
       └──────────────────────────┘

The system operates in a closed loop:

Visual Design: You can drag-and-drop to position tables, add columns, change data types, and map foreign key relationships on a fluid interactive canvas.
AST Injection: Visual actions are converted into AST transformations via ts-morph and surgically injected directly back into your TypeScript file without losing your formatting or manual comments.
Disk-First Synchronicity: A native Tauri-powered file system watcher listens for changes. The moment you save a file in your IDE, the UI refreshes instantly to match.

Adoption & Zero Lock-in

A core design goal was preventing tool lock-in. If you decide to stop using Strata, you shouldn’t be left with a broken workflow or proprietary artifacts.

We achieve this with the @strata standard. Visual metadata (like x and y canvas coordinates) and binding targets are stored directly within non-intrusive JSDoc comments preceding your tables:

/** 
 * @strata { "target": "d1", "x": 120, "y": 340 } 
 */
export const users = sqliteTable("users", {
  id: integer("id").primaryKey(),
});

Because these are plain JS/TS comments, your runtime doesn’t care about them, but it unlocks incredible leverage:

For Humans: Keep writing code as you always do. Drizzle is fully supported without wrapper functions.
For AI Assistants: If you tell your AI coding assistant to “move the user tables next to the billing nodes,” it can parse the file and update the JSDoc coordinates directly.
For Portability: Standard Drizzle CLI and migrations continue working perfectly. To remove Strata completely, just delete the comments.

Under the Hood

The architecture is split cleanly between a high-performance visual layer and a robust native layer:

The Parser (src/lib/parser.ts): Utilizes ts-morph to read, manipulate, and compile TypeScript files. Rather than treating the file as a raw text string, the parser operates directly on the AST, allowing it to add, modify, or delete columns safely and cleanly.
Reactive Visual Engine (src/lib/state.svelte.ts): Built entirely on Svelte 5 Runes. Using Svelte 5’s new reactivity model allows us to manage deep nested visual layouts, active selections, and state transitions efficiently, resulting in a lightweight UI that maintains 60 FPS under load.
The Native Bridge (src-tauri): A Rust-based backend that handles operating system integration, reads local workspace files, and maintains a zero-CPU file watcher to capture manual edits immediately.

Multi-Tiered Reliability

Working with code generators is always scary because a single bug can ruin an entire file. To guarantee schema safety, Strata utilizes three independent layers of testing:

Parser Unit Tests: Runs strict compiler checks verifying that AST modifications yield valid syntax and retain formatting.
```
npm test
```
System Core Tests: Rust tests verifying file integrity, encoding, and Tauri OS integration.
```
cd src-tauri && cargo test
```
Visual E2E Tests: Runs automated browser environments via Playwright to ensure that UI modifications trigger the correct file system edits.
```
npm run test:e2e
```

Current Focus & Limitations

While Strata already replaces traditional diagram design, it has clear boundaries:

Drizzle & SQLite/D1 Focus: Optimized for Cloudflare D1/SQLite schemas and Drizzle ORM patterns.
Local-First Native App: Relies on Tauri APIs for native filesystem access, meaning it runs as a local app rather than in a standard web browser.
UI Relationships: Creating relationships via the UI ensures the complex Drizzle relations() blocks are formatted correctly and linked with accurate reverse-relations.

Visualizing your database schemas should never mean sacrificing the integrity of your code. By matching visual design with AST injection, Strata bridges the gap between visual architecture and raw typescript.

View Strata on GitHub →