Walkthrough: an ERD in five minutes

We will build this:

Every step below was performed in the app and checked (/home/claude/tool/scratch/walkthroughs.mjs).

1. Start a page and open the ERD stencils#

Ctrl/⌘ N for a new diagram. Left panel → Stencils, type entity in the search box. Two swatches match: Entity and Weak entity.

2. Place two entities#

Click the Entity swatch — it arms the shape tool (pendingShape becomes erdEntity) — then click the canvas. Do it again for the second entity. Dragging the swatch onto the canvas works too.

3. Name them and give them attributes#

Double-click an entity and type its name (customer) into the first block, then Tab into the body and type one attribute per line:

PK id: uuid
email: text
name: text

The syntax is plain text, on purpose — it survives the inline editor, the Inspector, copy/paste and save/load:

<MARKER> <name>: <type>

MARKER is optional and one of PK, FK, PFK, UQ, NN, IX. It is drawn as a small muted chip, the name in the node's ink, the type muted and right-aligned. A line with no marker and no colon is just a name.

For the second entity:

PK id: uuid
FK customer_id: uuid
total: numeric

The entity draws the attribute rows itself — dividers and text — so a row can never drift away from its divider.

4. Tidy the boxes#

Select the entities. The Stencils panel grows an ERD section with the attribute list, + Attribute and Fit.

Fit sizes each entity to its attributes (also ERD: fit entity to its attributes in the palette, and ERD: repair entities on this page if an entity was built by hand and its body is being drawn twice).

5. Relate them#

Press C (or drag from a port) and connect customer to order. Double-click the connector and label it places.

6. Set the cardinality#

With the connector selected, the ERD section shows the presets:

Click 1:N. That writes start: crowOne, end: crowMany onto the connector's style — the bar on the customer end, the crow's foot on the order end. ⇄ swaps the two ends. The same presets are in the palette as ERD cardinality ….

Crow's-foot heads are drawn on the canvas and in the SVG, PDF and draw.io exports.

Two shortcuts worth knowing#

• Drag off an entity into empty space and the generic shape the canvas would normally create is upgraded to a related entity, already connected.
• ERD: add attribute in the palette appends attribute: text to every selected entity, ready to be renamed.

Getting it out#

Export ▸ SVG for documents, Export ▸ draw.io if a colleague needs to keep editing it elsewhere, Export ▸ Plota JSON to round-trip. The MCP server's build_erd tool builds the same structure from a spec if you would rather have an agent do it.