Quick Start
Get a live schema visualization running in under five minutes.
Express + Mongoose
This example assumes you already have an Express app with Mongoose models defined.
server.ts
import express from "express";
import mongoose from "mongoose";
import { schemaVisualizer } from "@picadeck/core";
import { parseMongooseConnection } from "@picadeck/mongoose-parser";
const app = express();
// Your existing Mongoose connection
await mongoose.connect("mongodb://localhost:27017/myapp");
// Parse your Mongoose schemas into a UniversalSchema
const schema = parseMongooseConnection(mongoose.connection);
// Mount the visualizer at /schema
app.use("/schema", schemaVisualizer(schema));
app.listen(3000, () => {
console.log("Server running on http://localhost:3000");
console.log("Schema visualizer at http://localhost:3000/schema");
});Express + Prisma
For Prisma, the parser reads your .prisma schema file directly.
server.ts
import express from "express";
import { schemaVisualizer } from "@picadeck/core";
import { parsePrismaFile } from "@picadeck/prisma-parser";
const app = express();
// Parse your Prisma schema file
const schema = parsePrismaFile("./prisma/schema.prisma");
// Mount the visualizer at /schema
app.use("/schema", schemaVisualizer(schema, {
theme: "dark",
title: "My App Schema",
}));
app.listen(3000, () => {
console.log("Schema visualizer at http://localhost:3000/schema");
});What you will see
Open http://localhost:3000/schema in your browser. PicaDeck Sync serves a self-contained HTML page with an interactive ReactFlow canvas. Each table or model appears as a draggable node showing all fields, their types, and constraints. Relationships are drawn as edges between nodes. The layout is computed automatically so everything is readable from the start, and you can zoom, pan, and rearrange nodes freely.