Afzan Khan
afzanlearns
Back to Projects
ReactTypeScriptTailwind CSSReact FlowShadcn UI

Schema Weaver

Schema Weaver

About the Project

Convert raw SQL schema definitions into interactive visual diagrams and TypeScript interfaces with dual view modes and markdown export.

Overview

Schema Weaver is a developer tool that transforms SQL schema definitions into interactive visual diagrams and usable TypeScript interfaces — entirely client-side with no database connection required.

Key Features

  • SQL to Visual Diagrams — Paste SQL to generate interactive schema diagrams and ER diagrams instantly
  • Dual View Modes — Switch between Schema Mode (structural table view) and ER Mode (conceptual entity-relationship view)
  • TypeScript Interface Generation — Automatically converts table definitions into ready-to-use TypeScript interfaces
  • Markdown Documentation Export — Generates comprehensive markdown docs summarizing your schema structure
  • Interactive Exploration — Inspect individual tables, highlight relationships between them, and hover for emphasis

Tech Stack

React 18, TypeScript, Tailwind CSS, shadcn/ui, React Flow for diagram rendering. Entirely client-side with local storage persistence — no backend, no database connection, no data ever leaves your browser.