MySQL schema workflow prototype

A full-stack sample that extracts tables and foreign keys from a live MySQL database and renders them as an interactive ai-sdk.dev style workflow graph.

Stack

• Backend: Express.js + mysql2
• Frontend: React (Vite) + React Flow with ai-sdk-inspired workflow nodes
• Database: MySQL (reads from INFORMATION_SCHEMA)

Getting started

1. Backend

   cd server
   cp .env.example .env   # configure DB_HOST, DB_PORT, DB_USER, DB_PASSWORD, DB_NAME (PORT defaults to 3001)
   npm install
   npm run dev            # starts on http://localhost:3001

   The server exposes GET /schema returning nodes/edges plus GET /health for readiness.

2. Frontend

   cd client
   npm install
   npm run dev            # proxies /schema to the backend

   Open the Vite dev server URL printed in the console (typically http://localhost:5173). The canvas auto-loads your schema and lets you pan/zoom or refresh.

API shape

GET /schema responds with:

{
  "nodes": [
    { "id": "Users", "type": "workflow", "data": { "label": "Users", "handles": { "source": true, "target": true } }, "position": { "x": 0, "y": 0 } }
  ],
  "edges": [
    { "id": "fk-0", "source": "Orders", "target": "Users", "type": "animated", "label": "user_id" }
  ]
}

Tables are laid out in a simple grid; edges are animated to highlight foreign key direction.

Notes

• Ensure the database user can read information_schema.
• Update spacing/position logic in server/server.js if you want custom layouts.
• The React Flow node type mimics the ai-sdk.dev Workflow component structure (header, description, handles, and toolbar placeholder).