feat(library): add Entity-Relationship diagrams (Chen and crow's-foot notations)#776
Draft
FelixTJDietrich wants to merge 15 commits into
Draft
feat(library): add Entity-Relationship diagrams (Chen and crow's-foot notations)#776FelixTJDietrich wants to merge 15 commits into
FelixTJDietrich wants to merge 15 commits into
Conversation
Add a standalone EntityRelationship diagram type that draws the full Chen notation: strong/weak entities, regular/identifying relationships, and attributes as ellipses with key, partial-key, multivalued and derived decorations. Entity–relationship connectors carry a cardinality label (free text with presets for Chen ratio and (min,max)) and a participation toggle that renders total participation as a double line. The connect flow only allows structurally valid Chen edges (entities link to relationships, attributes hang off an owner) and picks the connector vs. link edge type automatically, including on reconnection. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
These files fail `pnpm format:check` (prettier 3.4.2) on the current main branch, which blocks the lint-and-format CI gate for every PR. They are unrelated to the ER feature; this is a whitespace-only fix to unblock CI. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The commit step set `-o pipefail` but ran under the container's default dash shell, which dies on that bash-only option — so the workflow could regenerate baselines but never commit them back. Pin the step to bash. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
43a6134 to
b54f7e8
Compare
Add a second ER diagram type using the crow's-foot (Information Engineering / Mermaid-style) notation: entity tables whose columns are listed as rows, related by straight lines with crow's-foot cardinality markers at each end (zero/one/many) and solid (identifying) or dashed (non-identifying) lines. The entity reuses the class diagram's row renderer and attribute editor; the composite end markers are a dedicated SVG renderer. The existing Chen ER type is relabelled "Entity-Relationship (Chen)" to distinguish the two. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
FelixTJDietrich
added a commit
that referenced
this pull request
Jun 20, 2026
…r Swap The shared Swap-Ends handler exchanges an edge's endpoints but not its data, so swapping a crow's-foot relationship left the per-end cardinality markers on the wrong entities (a "1 → 0..*" relationship silently became "0..* → 1"). Swap the directional cardinality data alongside the endpoints, scoped to the crow's-foot popover so other edge types are untouched. Also extract the edge's render logic (dashed/identifying, per-end marker direction and cardinality defaults) into a pure `deriveErCfEdgeRender` so this diagram type's defining behavior is unit-tested rather than only pixel-tested. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
A crow's-foot / Information-Engineering ER entity is a table whose columns
each carry a name, data type and key role — the layout Mermaid `erDiagram`,
DBML and physical-ER tools all use. The previous implementation reused the
class diagram's single free-text row, so type/PK/FK were just typing
conventions baked into one opaque string.
Model each column as { name, type?, keys?: (PK|FK|UK)[] } and render the
entity as a real table: a key gutter (PK/FK/UK), a name column with the
primary key underlined, and a right-aligned data-type column. Replace the
reused class attribute editor with a structured column editor (name + type
inputs and a PK/FK/UK selector, drag to reorder).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Make the crow's-foot entity read as a real database table and the column editor look professional, following how Mermaid, dbdiagram and DrawSQL render and edit ER tables. Entity: shade the title band (var(--apollon-background-variant), honouring a user fill), draw thin row dividers, and align the data type in a left-aligned column right after the name (computed from the widest name) instead of stranding it at the box edge with a large gap. Drop the redundant, geometry- fragile primary-key underline — the PK/FK/UK gutter is the key signal. Column editor: replace the three space-hogging PK/FK/UK toggle buttons with a compact multi-select (so the row stays legible in the narrow popover), add Name/Type/Key column labels, an empty state, and an inline "+ Add column" row. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Bring the crow's-foot entity in line with the shared theming system (traced against the class diagram, the reference). Three consistency fixes: - Per-column colour: each column now exposes a fill/text colour control in the editor (a paint-roller panel mirroring the class per-attribute editor). The renderer already read per-column colours, so columns were renderable but not settable — now they are individually themeable like class attributes. - Header fill: derive the header fill from getCustomColorsFromData like every other entity, so the header default matches the rows (white) and the entity fill themes the header — instead of a bespoke grey band that bypassed the shared fallback and produced a two-tone default. - Row dividers: draw inter-row rules from the entity's themeable strokeColor at low opacity, instead of a hard-coded grey chrome token, so they track a user-chosen border colour. Chen ER nodes were traced and already follow the shared pattern — untouched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Switch the crow's-foot relationship edge from straight to the class diagram's step (orthogonal) routing by reusing useStepPathEdge and StepEdgeBody — bringing bend points, midpoint dragging and reconnection for free, and removing the bespoke BaseEdge/overlay/endpoint-marker duplication. deriveErCfEdgeRender now orients each crow's-foot marker along the path's end segment (via getPathStartInfo/getPathEndInfo) instead of the source→target vector, so the markers stay attached and correctly angled when the edge bends. Falls back to the straight line before first layout. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds Entity-Relationship diagram support to Apollon, covering the two notations people actually use — shipped as two separate diagram types because they don't share a model:
1/N/M) and(min,max), plus a participation toggle (total = double line).erDiagram): entities are structured tables whose columns each carry a name, data type and key role — a PK/FK/UK key gutter, the column name, and an aligned data-type column, with subtle row dividers. Each column is individually themeable (fill/text colour), and all colours flow through the samegetCustomColorsFromDatapath as the class diagram, so theming behaves identically across diagram types. They are related by straight lines with crow's-foot cardinality markers at each end (zero/one/many) and solid (identifying) / dashed (non-identifying) lines. The column layout follows Mermaid'serDiagram/ DBML and the classic ER convention of underlining the primary key.Release note
You can now create Entity-Relationship diagrams in both Chen notation (entities, relationships, attributes with key/multivalued/derived decorations) and crow's-foot / Mermaid-style notation (entity tables with crow's-foot cardinality markers).
Implementation notes
erEntity/erRelationship/erAttribute) + two edge types; a small pureclassifyErConnectiongates structurally valid connections and auto-picks connector vs. link.erCfEntity) whose columns are a structuredErCfColumn { name, type?, keys?: (PK|FK|UK)[] }model, rendered by a 3-cell row renderer (ErCfRowSection: key gutter | name | type, with the data type aligned in its own column and row dividers drawn from the entity's themeable stroke colour) and edited by a structured column editor (ErCfColumnList) that also exposes a per-column fill/text colour control mirroring the class attribute editor and edited by a dedicated structured column editor (ErCfColumnList: name + type inputs, PK/FK/UK selector, drag-to-reorder). The relationship edge (ErCfRelationship) draws composite end markers viaErCrowsFootMarker(min = bar/ring, max = bar/foot, ordered outward per the IE standard); crow's-foot edges are straight-only so the markers stay attached, and Swap-Ends carries the directional cardinalities.line/circle/polygon/rect,var(--apollon-background)for open shapes), so PNG/PDF export via resvg renders correctly.Steps for testing
pnpm dev→ playground → pick Entity-Relationship (Chen) or Entity-Relationship (Crow's Foot) from the dropdown (or New diagram → Structural).(min,max)preset; toggle participation (Total = double line). Connect attribute→entity → link; entity→entity is rejected.cd library && pnpm test(Chen + crow's-foot unit tests; full suite green) and the Playwright e2e/visual specs.Screenshots / screencasts
Entity-Relationship (Chen) — full notation, weak entity + identifying relationship, key/multivalued/derived attributes:
Entity-Relationship (Crow's Foot) — structured tables (key gutter, name, aligned types, themeable per column), solid/dashed relationships, crow's-foot markers:
Structured column editor (name + type + PK/FK/UK + per-column colour):
Editing cardinality — Chen connector (ratio / min,max presets) and crow's-foot relationship (per-end cardinality + identifying toggle):
Checklist
feat) matches the kind of changedocs/user/overview.md