Diagram Kit — interfaces

reference

5 min readUpdated 2026-10-05

Interfaces

Import these from @grafloria/element.

Interfaces

`CardEditingHandle`

ts
interface CardEditingHandle

Members

dispose(): void

`ErColumn`

ts
interface ErColumn

Properties

Name	Type	Default	Description
`name`	`string`
`type?`	`string`
`pk?`	`boolean`
`fk?`	`boolean`

`ErDiagramOptions`

ts
interface ErDiagramOptions

Properties

Name	Type	Description
`entities`	`ErEntitySpec[]`
`relationships?`	`ErRelationshipSpec[]`
`rowSelection?`	`boolean`	Rows are selectable by default: click a column to select it (painted with .axk-row-selected; axk / axk CustomEvents fire on the container). Set false to opt out.
`editable?`	`boolean`	In-canvas editing (opt-in, default false — read-only diagrams are unchanged). When true the card grows editing chrome: double-click the header to rename the table, double-click a column name to rename it, an "add column" affordance and a per-row delete control. Every change routes through {@link updateEntity } as ONE undoable step.

`ErEntityDelta`

What an ER table edit can change. Omitted fields are left as they were.

ts
interface ErEntityDelta

Properties

Name	Type	Description
`name?`	`string`
`width?`	`number`
`height?`	`number`
`columns?`	`ErColumn[]`	The NEW full column list. Survivors are matched to the old columns to move their ports (object identity → name → positional remainder), so a rename, a retype, a reorder, an insert and a delete are all understood without the caller preserving object references. See {@link matchColumns}.

`ErEntitySpec`

ts
interface ErEntitySpec

Properties

Name	Type	Description
`id`	`string`
`name?`	`string`	Header text. Defaults to the id.
`columns`	`ErColumn[]`
`position?`	`{ x: number; y: number }`
`width?`	`number`
`height?`	`number`	Fixed card height. When smaller than the computed height the column list SCROLLS (the kit body is overflow-y , and the canvas yields the wheel to it). Omit for auto-height from the column count.

`ErRelationshipSpec`

ts
interface ErRelationshipSpec

Properties

Name	Type	Description
`from`	`string`	Entity id, or `ENTITY.column` to attach at that column's row.
`to`	`string`
`label?`	`string`
`cardinality?`	`ErCardinality \| { tail: string; head: string }`	Named cardinality (default one-to-many) or explicit marker types.
`fromSide?`	`ErSide`
`toSide?`	`ErSide`
`color?`	`string`
`id?`	`string`

`HandleApi`

The slice of DiagramInstance the handles need (same shape update.ts uses).

ts
interface HandleApi

Properties

Name	Type	Default	Description
`container`	`HTMLElement`

Members

getModel(): { getNode(id: string): | { getMetadata?(key: string): unknown; size: { width: number; height: number }; state?: { selected?: boolean }; } | undefined; selectNode?(node: unknown): void; }
getEngine?(): { undo(): Promise<void> | void; redo(): Promise<void> | void } | undefined
renderNow?(): void

`JoinEnd`

One end of a candidate join: a table (node) and one of its columns.

ts
interface JoinEnd

Properties

Name	Type	Default	Description
`table`	`string`
`column`	`JoinColumn`

`JoinGuidanceApi`

The slice of DiagramInstance the binding needs (matches HandleApi's shape).

ts
interface JoinGuidanceApi

Properties

Name	Type	Default	Description
`container`	`HTMLElement`

Members

getModel(): { getNode(id: string): NodeLike | undefined; getNodes?(): NodeLike[]; }
getEngine?(): | { eventBus?: { on(event: string, handler: (data: unknown) => void): () => void } } | undefined

`JoinGuidanceHandle`

ts
interface JoinGuidanceHandle

Members

activeTiers(): Map<string, Map<number, MatchTier>> — nodeId → rowIndex → tier for the drag in progress (empty when idle).
dispose(): void

`JoinGuidanceOptions`

ts
interface JoinGuidanceOptions

Properties

Name	Type	Description
`resolvePort?`	`(portId: string, nodeId: string \| undefined) => { nodeId: string; column: string } \| null`	Resolve a PORT id to its table column. The default understands both the ER kit's convention (`TABLE__col__side__n`) and the query-builder dot convention (`table.col-in` / `table.col-out`), checked against the node's actual `kitEntity` columns so an ambiguous name never mis-resolves.
`chipText?`	`string`	Text of the gold chip on the best row. Default `'★ BEST'`.
`portCss?`	`(tier: MatchTier, selector: string) => string`	Extra per-tier CSS for the target columns' PORT glyphs, injected per drag. Default paints the production glows (gold/green/blue drop-shadows).

`UmlClassDelta`

What a UML class edit can change.

ts
interface UmlClassDelta

Properties

Name	Type	Default	Description
`name?`	`string`
`stereotype?`	`string`
`abstract?`	`boolean`
`width?`	`number`
`height?`	`number`
`attributes?`	`string[]`
`methods?`	`string[]`

`UmlClassSpec`

ts
interface UmlClassSpec

Properties

Name	Type	Description
`id`	`string`
`name?`	`string`	Displayed name. Defaults to the id.
`stereotype?`	`string`	Renders as «stereotype» above the name (e.g. 'interface', 'abstract', 'enum').
`abstract?`	`boolean`	Italicises the name (also set automatically for stereotype 'abstract'/'interface').
`attributes?`	`string[]`
`methods?`	`string[]`
`position?`	`{ x: number; y: number }`
`width?`	`number`
`height?`	`number`	Fixed card height — smaller than the content makes the compartments scroll.

`UmlDiagramOptions`

ts
interface UmlDiagramOptions

Properties

Name	Type	Description
`classes`	`UmlClassSpec[]`
`relationships?`	`UmlRelationshipSpec[]`
`rowSelection?`	`boolean`	Members are selectable by default: click one to select it (painted with .axk-row-selected; axk / axk CustomEvents fire on the container). Set false to opt out.
`editable?`	`boolean`	In-canvas editing (opt-in, default false). When true: double-click the class name to rename it, double-click a member to rename it, an "add" affordance per compartment and a per-member delete control — all routed through {@link updateClass } as one undoable step.

`UmlRelationshipSpec`

ts
interface UmlRelationshipSpec

Properties

Name	Type	Description
`from`	`string`
`to`	`string`
`kind?`	`UmlRelationKind`	Default 'association'.
`label?`	`string`
`multiplicity?`	`[string, string]`	Multiplicity / role chips at the [from, to] ends (e.g. ['0..*', '1']).
`fromSide?`	`UmlSide`
`toSide?`	`UmlSide`
`id?`	`string`

Was this page helpful?

ADocs generated by Atloria — from the code, always in sync →