Published by FR Studios

Strata

A CrossPlatform Application (windows,macos and linux) that Makes it easier to visualize your cloudflare applications

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 internal databases, no custom JSON metadata, no proprietary formats. Just your code, visualized and editable in real-time.

The Philosophy: Code ⇄ UI Bi-directional Sync

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:

  • Instant Code Sync: Every visual interaction (such as dragging nodes, adding columns, or forging relationships) triggers surgical AST editing that patches the schema.ts file on disk.
  • Live File Watcher: When you save changes externally (e.g. in your favorite IDE), Strata’s native OS file watcher detects it, re-parses the file via ts-morph analysis, and reflects the updates on the canvas instantly.
  • Node Inspector: Double-click any table node on the canvas to open the sidebar Inspector, where you can rename the table, add/remove fields, customize keys, or manage relations.
  • Canvas Navigation: Designed for both mouse and trackpads:
    • Trackpad: Swipe with two fingers to pan in any direction. Pinch to zoom in/out.
    • Mouse: Hold Right-Click or Middle-Click and drag to pan. Hold Ctrl/Cmd and scroll the wheel to zoom.

Storage Targets & Metadata

Strata adapts its visuals, badges, and code generation based on the targeted database architecture specified in your table’s JSDoc metadata.

Target Types

  • Cloudflare D1: Standard SQLite relational tables for edge-scale SQL databases.
  • Durable Objects: SQLite storage blocks embedded within stateful Durable Objects.
  • KV Store: Key-Value representations for high-performance caching.

JSDoc Metadata Syntax

Visual metadata (like x and y canvas coordinates) and storage target configurations are stored directly within non-intrusive JSDoc comments preceding your tables:

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

Because these are plain JS/TS comments, your runtime environment ignores them, providing a zero-lock-in solution while still giving Strata all the positioning and target information it needs.

Physical & Logical Relationships

Strata supports two types of relationships between your schema tables, visualized differently to represent physical constraints versus logical connections:

  • Solid Line (Physical Foreign Key Constraint): Created in code via .references(() => parentTable.id). Enforces absolute relational integrity in the SQLite engine.
  • Dashed Line (Logical Drizzle Relation block): Created in code via Drizzle’s relations() API. Used to make relational querying simple and fluid in your TS queries.
  • Arrowhead (Dependency / Cardinality Direction): A closed arrowhead points from the Child table (possessing the Foreign Key) to the Parent table (One side). This establishes relationship flows instantly.

Visual Drag-and-Drop Forging

Strata features visual drag-and-drop forging. Simply drag an edge line from a source handle (right dot) of a table to the target handle (left dot) of another. Strata will automatically generate and inject the corresponding relationship blocks directly into your source code!

Synthetic JSDoc Connections

When establishing relations involving non-relational storage targets (like Key-Value namespaces or Durable Objects), standard SQL foreign keys are not available. Strata handles this by saving the relation directly inside your entity’s JSDoc metadata under the relations key:

/**
 * @strata { "target": "kv", "relations": [{"to": "users"}] }
 */

These connections render on your visual canvas as dashed lines, but have zero compilation or runtime overhead on your database engine.

AI-Driven Schema Architecting

Strata is engineered to seamlessly integrate with LLM assistants (such as Claude, Gemini, or ChatGPT). You can pair program with your AI to design entire schemas, and the AI will auto-position tables visually!

Workflow

  1. Feed the AI the Blueprint: Copy the text from your project’s STRATA_FORGE_AI.md blueprint and paste it straight into your AI system prompt or chat context.
  2. Prompt the AI to generate schemas: Ask the AI to design your features (e.g. “Add a billing system with subscription tables”). The AI will output standard Drizzle code containing pre-calculated @strata coordinate coordinates.
  3. Paste and watch it mirror: Paste the generated Drizzle tables into your schema.ts file. The Svelte Flow diagram will immediately refresh and display the beautifully structured layout in full!

You can inspect the STRATA_FORGE_AI.md file in your workspace for standard system prompts and concrete visual design pattern models.

Under the Hood

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

  1. 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.
  2. 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.
  3. 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

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 →