Core

Import these from @grafloria/element.

Functions

defineGrafloriaFlow

Register the element. Idempotent, and safe to call on the server (where customElements does not exist) — which is what lets a bundle be imported from an SSR entry point without a typeof window dance at every call site.

ts
Copy
function defineGrafloriaFlow(tagName = 'grafloria-flow'): void

fromDocument

Turn a saved document back into something render() can mount.

ts
Copy
const json = JSON.stringify(new DiagramSerializer().serialize(api.getModel()));
// …later, in a fresh page:
render(fromDocument(json), host);

Accepts the flat serializer form, the portable envelope, or the JSON string of either.

ts
Copy
function fromDocument(
  document: SavedDiagram,
  options: FromDocumentOptions = {}
): LoadedDiagramSpec

getNodeType

ts
Copy
function getNodeType(type: string): NodeTypeRenderer | undefined

hasNodeType

ts
Copy
function hasNodeType(type: string): boolean

registeredNodeTypes

Every registered type name.

ts
Copy
function registeredNodeTypes(): string[]

registerNodeType

Register (or replace) a node type globally.

ts
Copy
function registerNodeType(type: string, renderer: NodeTypeRenderer): void

render

Mount spec into target and return the live instance.

target may be an element or a CSS selector. Custom nodes (custom: true) are rendered by the types registered with {@link registerNodeType}.

SCOPE, stated plainly: spec is data (an object or its JSON), not a Mermaid- style text DSL. The engine does have a DSL, but wiring it in is a separate card — render() is the embedding surface, not a parser.

ts
Copy
function render(
  spec: RenderSpec,
  target: HTMLElement | string,
  options: RenderOptions = {}
): DiagramInstance

renderFromTemplate

Render a node from a slotted <template data-node-type="...">.

Clones the template's content into element and substitutes node.data into every [data-field="key"] descendant's text. Values are written with textContent, never innerHTML: a diagram's data is frequently user-supplied, and a template engine that injected raw HTML here would be an XSS vector in every host that embeds us.

ts
Copy
function renderFromTemplate(
  template: HTMLTemplateElement,
  node: NodeModel,
  element: HTMLElement
): void

renderStatic

Server-side render. Re-exported so the tiny API is self-contained.

ts
Copy
function renderStatic(options: StaticRenderOptions = {}): StaticRenderResult

unregisterNodeType

Drop a registration (mostly for tests).

ts
Copy
function unregisterNodeType(type: string): void

Classes

GrafloriaFlowElement

ts
Copy
class GrafloriaFlowElement extends HTMLElementBase

Methods

• static get observedAttributes(): string[] (static)
• get nodes(): NodeSpec[]
• set nodes(value: NodeSpec[])
• get edges(): EdgeSpec[]
• set edges(value: EdgeSpec[])
• get diagram(): DiagramInstance | null — The headless instance — the escape hatch to everything else.
• connectedCallback(): void
• disconnectedCallback(): void
• attributeChangedCallback(name: string, previous: string | null, next: string | null): void
• fitView(padding?: number): void

Constants

Grafloria

The namespace object, for import { Grafloria } and for <script> globals.

ts
Copy
const Grafloria: { render: (spec: RenderSpec, target: string | HTMLElement, options?: RenderOptions) => DiagramInstance; renderStatic: (options?: StaticRenderOptions) => StaticRenderResult; registerNodeType: (type: string, renderer: NodeTypeRenderer) => void; registeredNodeTypes: () => string[]; define: (tagName?: string) => void; }

GRAFLORIA_EVENTS

Events emitted on the element. All bubble and cross shadow boundaries.

ts
Copy
const GRAFLORIA_EVENTS: { readonly ready: "grafloria-ready"; readonly nodesChange: "grafloria-nodes-change"; readonly edgesChange: "grafloria-edges-change"; readonly selectionChange: "grafloria-selection-change"; readonly connect: "grafloria-connect"; readonly nodeClick: "grafloria-node-click"; readonly edgeClick: "grafloria-edge-click"; readonly viewportChange: "grafloria-viewport-change"; }

Interfaces

DiagramSpec

What Grafloria.render() accepts: an object spec, or the JSON string of one.

ts
Copy
interface DiagramSpec

Properties

FromDocumentOptions

ts
Copy
interface FromDocumentOptions

Properties

LoadedDiagramSpec

What {@link fromDocument} returns: a render() spec, plus the way back in.

ts
Copy
interface LoadedDiagramSpec

Properties

Types

NodeTypeRenderer

Fills element with the visual for node. Called once per mounted node.

ts
Copy
type NodeTypeRenderer = (node: NodeModel, element: HTMLElement) => void;

RenderOptions

ts
Copy
type RenderOptions = Omit<CreateDiagramOptions, 'nodes' | 'edges'>;

RenderSpec

ts
Copy
type RenderSpec = DiagramSpec | DashboardSpec | KitDiagramSpec | string;

SavedDiagram

Anything DiagramSerializer.deserialize() accepts, or the JSON string of it.

ts
Copy
type SavedDiagram =
  | SerializedDiagramData
  | DiagramDocumentEnvelope
  | Record<string, unknown>
  | string;