Skip to content

Visual cues at a glance

A quick reference table covering every visual signal in the diagram. Bookmark this if you're skimming. For the explanations behind each cue, follow the link in the rightmost column.

Containers

What you seeWhat it meansMore
Dashed-border box around entitiesA container declaration (Schema, Database, Container, etc.)Containers
Colored header band on the containerIdentifies the container by its accent colorContainers
Keyword and name in the headerThe container's keyword (Schema, Database, etc.) and its nameContainers
→ EngineName on the right of the headerThe target storage engine (Oracle, MongoDB, etc.)Containers
All entities inside share a header colorThey belong to the same containerContainers
Thicker blue outline on the containerThe container is currently selectedInspector pane

Entity cards

What you seeWhat it meansMore
Card with header band and field rowsAn entity (Table, Entity, Collection, Record)Entity cards
Keyword in the header (small text)"Table", "Entity", "Collection", or "Record"Entity cards
Entity name in the header (large text)The entity's declared nameEntity cards
Thicker blue card outlineThe entity (or one of its fields) is currently selectedInspector pane
Light blue row backgroundThat field row is selectedInspector pane
Blue strip on the left edge of a rowSelection accent on the selected field rowInspector pane

Field badges

BadgeColorWhat it meansSource setting
PKYellowPrimary key[pk] or [primary key]
UNIQUEPurpleUnique constraint[unique]
REQUIREDRedNot nullable[not null] or [required]
AUTOBlueAuto-increment[increment]

Composite primary keys show the PK badge on every member field, not just the first one.

Field row text

What you seeWhat it means
Plain field nameA user-defined field
Italic field nameA synthetic row ([item], {alt}, <key>, <value>, <item>, [N]) that doesn't correspond to a user-written field
Type label right-alignedThe compact form of the field's type
varchar(100), decimal(10,2)A sized scalar type with parameters
object {…}An object type with sub-fields rendered as nested rows
array of XAn array type; X is the element type's short form
oneOf (n), anyOf (n), allOf (n)A polymorphism with n alternatives
map [K → V]A map type from K to V
set [X]A set of X
tuple (n)A tuple with n positions

Disclosure carets

CaretMeaning
(downward)The parent row is expanded; children are visible. Click to collapse.
(rightward)The parent row is collapsed; children are hidden. Click to expand.
No caretLeaf field; no children to show.

Carets only appear on rows whose field has structured-type children. See Nested fields.

Relationships

The curved line between two entities is a Ref:. Each endpoint carries a symbol indicating cardinality and optionality:

SymbolCardinalityReads as
─║Exactly onemin=1, max=1 (mandatory, single)
─○║Zero or onemin=0, max=1 (optional, exclusive)
─≺One or manymin=1, max=* (mandatory, multiple)
─○≺Zero or manymin=0, max=* (optional, multiple)

The ring () means "zero allowed." The bar () caps "exactly one." The crow's foot () means "many," with the V opening toward the entity. See Relationships & crow's foot notation.

When the line is blue and thicker, the relationship is currently selected.

Cardinality text labels (0..*, 1..1, etc.) appear next to the glyphs as the source of truth. Glyphs are the visual shorthand; text is exact.

Colors

ColorWhere it appearsWhat it means
Blue (#2563eb)Selection outlines, accentsCurrently selected element
YellowPK badgePrimary key
PurpleUNIQUE badgeUnique constraint
RedREQUIRED badge, error squiggles, diagnostics errorsRequired field, or a parse error
AmberWarning indicators, screenshot placeholders in helpWarning or todo
GreyType labels, cardinality text, indent guidesSubordinate information
Container accent colorsContainer header bands, member entity header bandsContainer identity (deterministic from name)

Cursor states

CursorWhereWhat it indicates
Default (arrow)Empty canvasNo action available; click to deselect
Pointer (hand)Anywhere clickable: entity headers, field rows, container bodies, relationship linesClickable to select
Grab / grabbingEntity header band when heldDrag in progress
Col-resizePane dividersDrag to resize the pane

What's next

If you want the explanations behind the cues:

Spec under Apache License 2.0 · Examples under CC0 1.0