Diagram generators

Fifteen SVG generators that turn a schema — or a process — into a picture. They
need no external tool: each is a class you construct with plain options and call
generate() on, returning the SVG as a string.

Every example on the pages below is the generator's real output, produced by
running it against one small blog schema. They are rebuilt by
scripts/build-diagram-examples.mjs, so an example cannot drift from what the
code emits.

import { ERDiagram } from 'ts-prorm-orm';

const svg = new ERDiagram({ title: 'Blog', models: [User, Post, Tag] }).generate();
// or write it straight to disk:
new ERDiagram({ models: [User, Post, Tag] }).save('docs/schema.svg');

Those options are written by hand. To draw the schema you already have — every
model on a connection, a query result, or the live database — see
From your models to a diagram, which also covers naming a
diagram with the DiagramType enum instead of importing its class:

saveDiagram(DiagramType.ER, prormToER(prorm, { title: 'Schema' }), './schema.svg');

Diagrams render in a single monochrome palette. The theme and color options
are accepted and ignored — they exist so older calls keep working.

Schema

Diagram	What it shows
ER diagram	Every model and the foreign keys between them
Model diagram	One table in detail: columns, types, keys
Crow’s foot	Cardinality — which side is one, which is many
Chen diagram	ER in Chen notation: diamonds and ovals
Schema documentation	A table as a data dictionary
Index diagram	Which indexes cover which columns
Migration diagram	What a migration does to a table

Behaviour

Diagram	What it shows
Sequence diagram	The call order during a write
State diagram	The states an instance moves through
Flow diagram	A read, from finder to instances

Structure

Diagram	What it shows
Tree diagram	A nested include, drawn as a tree
Dependency diagram	Create order, and its reverse for drops
Package diagram	How the ORM source is organised
Class diagram	Models as UML classes

Planning

Diagram	What it shows
Gantt diagram	A migration rollout over time

Generating from real models

ERDiagram and ModelDiagram take the same option objects you pass to
define(), so you can draw the schema you already have rather than
re-describing it:

const svg = new ERDiagram({
  title: 'Production schema',
  models: [UserOptions, PostOptions, TagOptions],
}).generate();

Models — the definitions these are drawn from

Migrations — the expand/migrate/contract shape the Gantt example plans

CLI — generating diagrams from the command line

Diagram generators

Schema#

Behaviour#

Structure#

Planning#

Generating from real models#

Related reading#

Schema

Behaviour

Structure

Planning

Generating from real models

Related reading