<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Prisma Schema Architecture</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #0a0a0f;
color: #e2e8f0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
padding: 2rem 1rem;
}
.card {
max-width: 780px;
width: 100%;
background: linear-gradient(135deg, rgba(34,211,238,0.04), rgba(59,130,246,0.04));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 2rem;
overflow: hidden;
}
.badge {
display: inline-block;
background: rgba(34,211,238,0.12);
color: #22d3ee;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.25rem 0.75rem;
border-radius: 999px;
margin-bottom: 0.75rem;
}
h1 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.25rem;
background: linear-gradient(135deg, #22d3ee, #3b82f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subtitle {
color: #94a3b8;
font-size: 0.85rem;
margin-bottom: 1.5rem;
line-height: 1.5;
}
.section-title {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #22d3ee;
margin-bottom: 0.75rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid rgba(34,211,238,0.15);
}
.tree {
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: 0.8rem;
line-height: 1.7;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
padding: 1.25rem;
margin-bottom: 1.5rem;
overflow-x: auto;
}
.tree .file { color: #e2e8f0; }
.tree .comment { color: #64748b; }
.tree .dir { color: #22d3ee; }
.tree .accent { color: #3b82f6; }
.schema-example {
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: 0.75rem;
line-height: 1.65;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
padding: 1.25rem;
margin-bottom: 1.5rem;
overflow-x: auto;
}
.schema-example .kw { color: #c084fc; }
.schema-example .type { color: #22d3ee; }
.schema-example .attr { color: #fbbf24; }
.schema-example .str { color: #4ade80; }
.schema-example .cm { color: #64748b; }
.workflow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin-bottom: 1.5rem;
}
.w-step {
display: inline-flex;
align-items: center;
font-family: 'SF Mono', monospace;
font-size: 0.72rem;
padding: 0.45rem 0.75rem;
border-radius: 8px;
white-space: nowrap;
}
.w-step.define {
background: rgba(59,130,246,0.15);
border: 1px solid rgba(59,130,246,0.3);
color: #93c5fd;
}
.w-step.migrate {
background: rgba(34,211,238,0.12);
border: 1px solid rgba(34,211,238,0.25);
color: #22d3ee;
}
.w-step.generate {
background: rgba(168,85,247,0.12);
border: 1px solid rgba(168,85,247,0.25);
color: #c084fc;
}
.w-step.use {
background: rgba(34,197,94,0.12);
border: 1px solid rgba(34,197,94,0.25);
color: #4ade80;
}
.w-arrow {
color: #475569;
font-size: 1rem;
flex-shrink: 0;
}
.gen-section {
background: rgba(168,85,247,0.06);
border: 1px solid rgba(168,85,247,0.15);
border-radius: 10px;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
}
.gen-section h3 {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #c084fc;
margin-bottom: 0.6rem;
}
.gen-flow {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.75rem;
font-family: 'SF Mono', monospace;
}
.gen-flow .node {
background: rgba(168,85,247,0.12);
padding: 0.35rem 0.65rem;
border-radius: 6px;
color: #c084fc;
}
.gen-flow .result {
background: rgba(34,197,94,0.12);
padding: 0.35rem 0.65rem;
border-radius: 6px;
color: #4ade80;
}
.gen-flow .arrow { color: #475569; }
.source {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,0.06);
}
.source a {
color: #64748b;
font-size: 0.75rem;
text-decoration: none;
transition: color 0.2s;
}
.source a:hover { color: #22d3ee; }
</style>
</head>
<body>
<div class="card">
<div class="badge">Architecture</div>
<h1>Prisma Schema Architecture</h1>
<p class="subtitle">Models, relations, multi-file schemas, migrations, and the Prisma Client generation pipeline.</p>
<div class="section-title">Project Structure</div>
<div class="tree">
<span class="dir">prisma/</span>
<span class="accent"> ├── schema.prisma</span> <span class="comment">(Single-file schema)</span>
<span class="file"> │ ├── datasource db</span> <span class="comment">(provider, url)</span>
<span class="file"> │ ├── generator client</span> <span class="comment">(output config)</span>
<span class="file"> │ └── model User { }</span> <span class="comment">(Tables & relations)</span>
<span class="accent"> ├── schema/</span> <span class="comment">(Multi-file alternative)</span>
<span class="file"> │ ├── user.prisma</span>
<span class="file"> │ ├── post.prisma</span>
<span class="file"> │ └── billing.prisma</span>
<span class="accent"> ├── migrations/</span>
<span class="accent"> │ ├── 20260101_init/</span>
<span class="file"> │ │ └── migration.sql</span>
<span class="file"> │ └── migration_lock.toml</span>
<span class="accent"> └── seed.ts</span> <span class="comment">(Dev seed data)</span>
</div>
<div class="section-title">Mini Schema Example</div>
<div class="schema-example">
<span class="kw">datasource</span> <span class="type">db</span> {
provider = <span class="str">"postgresql"</span>
url = <span class="attr">env</span>(<span class="str">"DATABASE_URL"</span>)
}
<span class="kw">generator</span> <span class="type">client</span> {
provider = <span class="str">"prisma-client-js"</span>
}
<span class="kw">model</span> <span class="type">User</span> {
id <span class="type">Int</span> <span class="attr">@id @default</span>(autoincrement())
email <span class="type">String</span> <span class="attr">@unique</span>
name <span class="type">String</span>?
posts <span class="type">Post</span>[] <span class="cm">// one-to-many</span>
}
<span class="kw">model</span> <span class="type">Post</span> {
id <span class="type">Int</span> <span class="attr">@id @default</span>(autoincrement())
title <span class="type">String</span>
author <span class="type">User</span> <span class="attr">@relation</span>(fields: [authorId], references: [id])
authorId <span class="type">Int</span>
}
</div>
<div class="section-title">Workflow</div>
<div class="workflow">
<span class="w-step define">Define Schema</span>
<span class="w-arrow">→</span>
<span class="w-step migrate">prisma migrate dev</span>
<span class="w-arrow">→</span>
<span class="w-step generate">prisma generate</span>
<span class="w-arrow">→</span>
<span class="w-step use">Use typed client</span>
</div>
<div class="gen-section">
<h3>Client Generation Pipeline</h3>
<div class="gen-flow">
<span class="node">schema.prisma</span>
<span class="arrow">→</span>
<span class="node">Prisma Engine (Rust)</span>
<span class="arrow">→</span>
<span class="node">AST → DMMF</span>
<span class="arrow">→</span>
<span class="result">@prisma/client (Typed)</span>
</div>
</div>
<div class="source">
<a href="https://www.prisma.io/docs/orm/prisma-schema/overview" target="_blank" rel="noopener">Source: Prisma Schema Docs</a>
<a href="https://www.prisma.io/docs/orm/prisma-schema/data-model/relations" target="_blank" rel="noopener">Relations</a>
<a href="https://www.prisma.io/docs/orm/prisma-migrate" target="_blank" rel="noopener">Prisma Migrate</a>
</div>
</div>
</body>
</html>