Published by FR Studios

Strata

Visualize your drizzle & cloudflare apps using JSDocs

#Tauri#Drizzle ORM#Svelte 5#Cloudflare D1#Rust#TailwindCSS

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

To solve this, I built Strata, a high-performance, local-first visual architecture canvas and ERD studio designed specifically for Drizzle ORM and the Cloudflare Workers stack (Cloudflare D1, KV Namespaces, Durable Objects, R2 Storage Buckets, and Modern Cloud Identity).

Strata uses your TypeScript schema codebase as the absolute single source of truth. No sidecar JSON files, no proprietary database formats, no hidden cloud subscriptions. Just your code, visualized and editable in real-time.

The Philosophy: Single Source of Truth & External IDE Pairing

Traditional visual database tools suffer from an identity crisis: they either demand sidecar configuration files (.diagram.json) that clutter your repository, or they try to replace your code editor with a mediocre in-browser text editor.

Strata takes an entirely different stance: Do not replace the developer’s editor; pair with it.

  ┌──────────────────────────────┐          ┌──────────────────────────────┐
  │   Primary Editor (VS Code /  │          │   Strata Visual Architecture │
  │    Cursor / WebStorm)        │          │          Canvas (UI)         │
  └──────────────┬───────────────┘          └──────────────▲───────────────┘
                 │                                         │
        Saves changes to disk                   Native OS File Watcher
                 │                               (Tauri Rust Actor)
                 ▼                                         │
  ┌────────────────────────────────────────────────────────┴───────────────┐
  │                           schema codebase                              │
  │     (Single-File Monolith schema.ts  OR  Modular Barrel schema/index.ts)│
  └────────────────────────────────────────────────────────────────────────┘

Strata is engineered to sit side-by-side with VS Code, Cursor, or WebStorm:

  • Zero-Jitter File Watching: A native Rust file watcher monitors disk changes and updates the visual canvas in milliseconds upon save. Internal visual mutations automatically debounce the watcher to eliminate feedback loops.
  • Deep IDE Integration: Clicking any entity file pill in the navigation bar or clicking a schema diagnostic badge (e.g. Line 42 ↗) instantly jumps to that exact file and line inside your primary editor.
  • Git is the History Stack: Strata has no proprietary undo/redo stack. Because your schema on disk is the single source of truth, standard Git commands (git checkout -- <file>) handle history management transparently.

Dual-Archetype Architecture & The @strata-layout Breakthrough

In the real world, Drizzle projects evolve in two distinct architectural patterns:

  1. Single-File Monoliths (src/db/schema.ts): Fast to set up, all tables and relations in one place.
  2. Modular Barrels (src/db/schema/index.ts): Domain models partitioned into dedicated files (users.ts, posts.ts, billing.ts) and re-exported through an aggregate barrel.

Early iterations of visual tools inject layout metadata directly above every entity declaration. In a single file, this works. But in a modular repository, dragging cards across the canvas meant dirtying dozens of business logic files in Git—triggering constant merge conflicts for teammates.

Strata solves this with the Git-Clean Layout Manifest (@strata-layout):

Pattern A: Modular Barrel Manifest (@strata-layout) — Recommended for Teams

In modular setups, node coordinates are consolidated into a single JSDoc manifest comment at the top of your barrel file (schema/index.ts):

// src/db/schema/index.ts
/**
 * @strata-layout {
 *   "users": { "x": 100, "y": 150 },
 *   "posts": { "x": 520, "y": 150 },
 *   "comments": { "x": 520, "y": 480 },
 *   "__clerk_identity__": { "x": -250, "y": 150 }
 * }
 */
export * from "./users";
export * from "./posts";
export * from "./comments";
  • Zero Git Churn on Domain Files: Rearranging 50 cards on the canvas touches exactly one comment in index.ts. Domain files (users.ts, posts.ts) stay 100% clean of UI metadata.
  • Targeted File Writes: Adding a column to users routes directly to schema/users.ts.
  • Cross-Module Auto-Imports: Dragging a foreign key relationship from posts.ts to users.ts automatically injects import { users } from "./users" and .references(() => users.id).
  • Standalone relations.ts Resolution: Dedicated Drizzle relations files are automatically discovered and resolved across all domain modules.

Pattern B: Single-File Inline JSDoc (@strata) — For Monoliths

For MVPs and solo projects, coordinates sit directly above table and storage declarations:

// src/db/schema.ts
/**
 * @strata { "target": "d1", "x": 120, "y": 300, "relations": [{ "to": "sessionCache" }] }
 */
export const users = sqliteTable("users", {
  id: integer("id").primaryKey(),
  email: text("email").notNull(),
});

/**
 * @strata { "target": "kv", "x": 450, "y": 300 }
 */
export const sessionCache = {};

Modern Identity & Cloud Auth Topology

Authentication is the backbone of modern web applications, but traditional ERD tools completely ignore external Identity Providers (IdPs) like Clerk or WorkOS because they aren’t local SQL tables.

Strata treats identity as a first-class visual architectural layer:

  1. D1-Resident Auth (Better Auth / Lucia): Automatically detects core authentication table clusters (user, session, account, verification) and decorates them with 🛡️ Better Auth badges. Developers can append custom profile attributes (e.g. stripeCustomerId, role) directly to the user table without breaking CLI compatibility.
  2. Cloud IdP Boundaries (Clerk & WorkOS): When tables reference external identity columns (clerkUserId or workosOrgId), Strata automatically renders branded Identity Boundary Nodes with animated connection lines.
  3. 1-Click Webhook Mirror Scaffolding: Need to join external user IDs against local data? Generate local D1 mirror tables (clerkUsers, workosUsers) and copyable webhook synchronization handlers directly from the node context menu or Inspector.

Full Cloudflare Workers Topology & Wrangler Synchronization

Strata isn’t just a database visualizer; it is a full visual architecture studio for the Cloudflare Workers ecosystem:

  • Cloudflare D1: Full visual design for relational SQLite tables, column types, primary keys, and foreign keys.
  • KV Namespaces: Visual key-value nodes with explicit value typing, TTL constraints, and metadata attributes.
  • Durable Objects (DO): Map stateful class targets, file paths, and public RPC method signatures.
  • R2 Storage Buckets: Model bucket bindings, public access flags, CORS policies, and folder MIME-type filters.

Three-Tier Relationship Engine

  • Physical Foreign Keys (Solid Lines): SQLite relational constraints (.references(() => users.id)).
  • Logical Drizzle Relations (Dashed, Animated Lines): Declared via Drizzle’s query-builder relations() API.
  • Synthetic Cross-Storage Links (Dashed, Static Lines): Cross-boundary connections linking SQL records to KV caches or Durable Objects stored in JSDoc metadata.

Bi-Directional Wrangler Integration

Strata recursively scans up to 12 parent directories for wrangler.toml, wrangler.jsonc, or wrangler.json. If an entity in your schema lacks a corresponding Cloudflare binding, Strata flags the mismatch and lets you synchronize it to your Wrangler config with a single click (⚡ Fix & Sync to Wrangler Config) using a non-destructive Rust AST actor.

AI Co-Design & Zero Lock-In

Strata is engineered to work hand-in-hand with LLM assistants (Claude 3.7, GPT-4o, Gemini, Cursor):

  1. Built-in AI Architect Prompt: Copy the official system prompt from Strata’s Help Center into your AI chat or Cursor rules. The prompt instructs the model on strict SQLite date mappings (integers), cross-module imports, and the @strata-layout barrel format.
  2. Interactive JSDoc Metadata Builder: An interactive visual tool to generate either Modular Barrel manifests or single-file entity blocks with 1-click presets (Blog + Clerk, E-Commerce + WorkOS, Multi-Tenant SaaS).
  3. Zero Lock-In: Deleting the JSDoc comments leaves 100% pure, standard Drizzle ORM code. No runtime libraries, no CLI wrappers, no proprietary dependencies.

Engineering & Quality Assurance

Strata is built on a modern, ultra-responsive local stack:

  • Framework: SvelteKit + Svelte 5 Runes ($state.raw for high-performance 60 FPS canvas rendering with large schemas).
  • Desktop Shell: Tauri 2.0 (Rust backend actor model for concurrency and safe file manipulation).
  • Canvas Engine: @xyflow/svelte (Svelte Flow).
  • AST Parser: ts-morph running isolated in-memory AST projects.
  • Styling: Tailwind CSS v4 + DaisyUI v5.
  • Testing: Strict suite of 177 automated unit, AST parser, and type diagnostic tests (npm test and npm run check) ensuring zero regressions and syntax corruption.

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

View Strata on GitHub →