Class Diagram

A diagram is the core data structure that holds all nodes, layers, and metadata. It provides methods for managing these elements and supports serialization and deserialization for persistence and data exchange.

It does not support viewing. For that, use DiagramView which extends this base model and adds rendering, selection, and interaction capabilities. It does not support editing. For that, use DiagramController which manages user interactions and updates the Diagram model accordingly.

Hierarchy (View Summary)

Diagram
- DiagramView

Implements

Constructors

constructor

new Diagram(id: string, initial?: Partial<Omit<IDiagram, "id">>): Diagram
Parameters
- id: string
- Optionalinitial: Partial<Omit<IDiagram, "id">>
Returns Diagram
- Defined in src/model/diagram.ts:46

Properties

id

id: string

The unique identifier of the diagram, which is used to reference the diagram within the application and for serialization purposes.

nodes

nodes: INode[]

An array of nodes that belong to the diagram, which represent the entities and elements that can be connected and manipulated within the diagram.

groups

groups: IGroup[]

An optional array of groups that belong to the diagram, which can be used to organize nodes into visual collections. Grouped nodes maintain their relative positions.

layers

layers: ILayer[] = []

An array of layers that belong to the diagram, which can be used to organize nodes into different visual layers.

`Optional`sheet_id

sheet_id?: string

An optional identifier for the sheet associated with the diagram, which can be used to apply specific styles and configurations to the diagram's nodes and connections.

`Optional`background

background?: FillStyle

An optional background fill style for the diagram, which can be used to set the background color or gradient of the diagram area.

`Optional`meta

meta?: Record<string, any>

An optional metadata object for the diagram, which can be used to store additional information about the diagram that is not part of its core structure. This can include custom properties, annotations, or any other relevant data that is not related to diagram rendering.

Accessors

image_assets

get image_assets(): Record<string, string>
Returns Record<string, string>
- Defined in src/model/diagram.ts:42

sheetRepository

get sheetRepository(): SheetRepository
The diagram's sheet repository, for managing and applying spec sheets to the diagram and its nodes.

Returns SheetRepository
The SheetRepository instance associated with the diagram.
Implementation of HasSheetRepository.sheetRepository
- Defined in src/model/diagram.ts:335
set sheetRepository(repo: SheetRepository): void
Sets the diagram's sheet repository, allowing for the management and application of spec sheets to the diagram and its nodes.
Parameters
- repo: SheetRepository
  The SheetRepository instance to set for the diagram. Cannot be null or undefined.
Returns void
Implementation of HasSheetRepository.sheetRepository
- Defined in src/model/diagram.ts:346

assetStore

get assetStore(): AssetStore
The diagram's asset store, for registering and resolving image/SVG asset sources.

Returns AssetStore
The AssetStore instance associated with the diagram.
- Defined in src/model/diagram.ts:357

metadata

get metadata(): Record<string, any>
Gets the metadata object for the diagram. If no metadata exists, an empty object is returned.

Returns Record<string, any>
The metadata object for the diagram.
- Defined in src/model/diagram.ts:387
set metadata(data: Record<string, any>): void
Sets the metadata object for the diagram. If a null or undefined value is provided, the metadata is cleared.
Parameters
- data: Record<string, any>
  The metadata object to set for the diagram.
Returns void
- Defined in src/model/diagram.ts:395

Methods

destroy

destroy(): void
Releases model-managed resources.

Returns void
- Defined in src/model/diagram.ts:66

node

node(id: string): INode | undefined
Retrieves a node by its ID.
Parameters
- id: string
  The ID of the node to retrieve.
Returns INode | undefined
The node with the specified ID, or undefined if not found.
Implementation of IDiagram.node
- Defined in src/model/diagram.ts:79

group

group(id: string): IGroup | undefined
Returns a group by its ID.
Parameters
- id: string
  The ID of the group to return.
Returns IGroup | undefined
The group with the specified ID, or undefined if not found.
- Defined in src/model/diagram.ts:88

layer

layer(id: string): ILayer | undefined
Retrieves a layer by its ID.
Parameters
- id: string
  The ID of the layer to retrieve.
Returns ILayer | undefined
The layer with the specified ID, or undefined if not found.
- Defined in src/model/diagram.ts:97

upsertNode

upsertNode(node: INode): INode
Inserts a new node or updates an existing node in the diagram.
Parameters
- node: INode
  The node to upsert.
Returns INode
The upserted node.
- Defined in src/model/diagram.ts:106

upsertGroup

upsertGroup(group: string | IGroup): IGroup
Inserts a new group or updates an existing group in the diagram.
Parameters
- group: string | IGroup
  The group to upsert, or the ID of the group to create.
Returns IGroup
The upserted group.
- Defined in src/model/diagram.ts:123

upsertLayer

upsertLayer(layer: string | ILayer): ILayer
Inserts a new layer or updates an existing layer in the diagram.
Parameters
- layer: string | ILayer
  The layer to upsert, or the ID of the layer to create.
Returns ILayer
The upserted layer.
- Defined in src/model/diagram.ts:143

setNodeGroup

setNodeGroup(node: string | INode, groupId: string | undefined): void
Add or remove a node from a group. If the groupId is undefined, the node is removed from any group it belongs to. A node can only belong to one group at a time. If the node is already in a different group, it will be removed from that group before being added to the new group.
Parameters
- node: string | INode
  The node or node ID to add to the group.
- groupId: string | undefined
  The ID of the group to add the node to, or undefined to remove the node from any group.
Returns void
- Defined in src/model/diagram.ts:165

nodeGroup

nodeGroup(node: string | INode): IGroup | undefined
Parameters
- node: string | INode
Returns IGroup | undefined
- Defined in src/model/diagram.ts:184

`Protected`groupOwner

groupOwner(group: IGroup): INode | undefined
Parameters
- group: IGroup
Returns INode | undefined
- Defined in src/model/diagram.ts:191

setNodeLayer

setNodeLayer(node: string | INode, layerId: string | undefined): void
Add or remove a node from a layer. If the layerId is undefined, the node is removed from any layer it belongs to. A node can only belong to one layer at a time. If the node is already in a different layer, it will be removed from that layer before being added to the new layer.
Parameters
- node: string | INode
  The node or node ID to add to the layer.
- layerId: string | undefined
  The ID of the layer to add the node to, or undefined to remove the node from any layer.
Returns void
- Defined in src/model/diagram.ts:203

deleteNode

deleteNode(nodeId: string): void
Deletes a node from the diagram.
Parameters
- nodeId: string
  The ID of the node to delete.
Returns void
- Defined in src/model/diagram.ts:226

deleteGroup

deleteGroup(groupId: string): void
Deletes a group from the diagram. Effectively ungrouping nodes.
Parameters
- groupId: string
  The ID of the group to delete.
Returns void
- Defined in src/model/diagram.ts:268

deleteLayer

deleteLayer(layerId: string): void
Deletes a layer from the diagram.
Parameters
- layerId: string
  The ID of the layer to delete.
Returns void
- Defined in src/model/diagram.ts:276

setNodeImageSource

setNodeImageSource(
    node: string | INode,
    imageSrc: string,
    mode?: ImageMode,
    imageId?: string,
): INode | undefined
Assigns an image source to a node for background/content rendering.
Parameters
- node: string | INode
- imageSrc: string
- mode: ImageMode = 'contain'
- OptionalimageId: string
Returns INode | undefined
- Defined in src/model/diagram.ts:283

setNodeSvgSource

setNodeSvgSource(
    node: string | INode,
    svgOrSrc: string,
    mode?: ImageMode,
    imageId?: string,
): INode | undefined
Assigns SVG markup or SVG source URL/data URL to a node. Raw SVG markup is converted to a data URL.
Parameters
- node: string | INode
- svgOrSrc: string
- mode: ImageMode = 'contain'
- OptionalimageId: string
Returns INode | undefined
- Defined in src/model/diagram.ts:297

clearNodeImageSource

clearNodeImageSource(node: string | INode): INode | undefined
Removes image source and rendering mode from a node.
Parameters
- node: string | INode
Returns INode | undefined
- Defined in src/model/diagram.ts:305

resolveNodeImageSource

resolveNodeImageSource(node: string | INode): string | undefined
Resolves the concrete image source for a node image reference.
Parameters
- node: string | INode
Returns string | undefined
- Defined in src/model/diagram.ts:318

clearImageAssets

clearImageAssets(): void
Clears all in-memory image assets. Intended for teardown paths.

Returns void
- Defined in src/model/diagram.ts:364

clear

clear(): void
Clears all nodes, layers, metadata, and assets from the diagram, effectively resetting it to an empty state while retaining the same ID. Intended for reuse scenarios where the diagram instance should be preserved but its content should be cleared.

Returns void
- Defined in src/model/diagram.ts:372

getMeta

getMeta(key?: string): any
Gets the value of a specific metadata key for the diagram.
Parameters
- Optionalkey: string
  The key of the metadata to retrieve.
Returns any
The value of the specified metadata key, or undefined if the key does not exist.
- Defined in src/model/diagram.ts:404

setMeta

setMeta(key: string, value: any): void
Sets the value of a specific metadata key for the diagram.
Parameters
- key: string
  The key of the metadata to set.
- value: any
  The value to set for the specified metadata key.
Returns void
- Defined in src/model/diagram.ts:413

deleteMeta

deleteMeta(key?: string): void
Deletes a specific metadata key from the diagram.
Parameters
- Optionalkey: string
  The key of the metadata to delete. If not provided, all metadata for the diagram is deleted.
Returns void
- Defined in src/model/diagram.ts:424

getNodeMeta

getNodeMeta(node: string | INode, key: string): any
Gets the value of a specific metadata key for a node.
Parameters
- node: string | INode
  The node or node ID to retrieve metadata from.
- key: string
  The key of the metadata to retrieve.
Returns any
The value of the specified metadata key, or undefined if the key does not exist.
- Defined in src/model/diagram.ts:440

setNodeMeta

setNodeMeta(node: string | INode, key: string, value: any): void
Sets the value of a specific metadata key for a node.
Parameters
- node: string | INode
  The node or node ID to set metadata for.
- key: string
  The key of the metadata to set.
- value: any
  The value to set for the specified metadata key.
Returns void
- Defined in src/model/diagram.ts:454

deleteNodeMeta

deleteNodeMeta(node: string | INode, key?: string): void
Deletes a specific metadata key from a node.
Parameters
- node: string | INode
  The node or node ID to delete metadata from.
- Optionalkey: string
  The key of the metadata to delete. If not provided, all metadata for the node is deleted.
Returns void
- Defined in src/model/diagram.ts:471

read

read(
source: string | ISerializedDiagram,
serializer?: ISerializer,
): Promise<Diagram>
Loads the diagram data from a serialized JSON object.
Parameters
- source: string | ISerializedDiagram
  The serialized diagram data.
- Optionalserializer: ISerializer
  The serializer to use for reading the data (optional if source is already an object).
Returns Promise<Diagram>
The diagram instance.

Throws
An error if the input is an invalid JSON string or if the parsed JSON is null or undefined.
Implementation of IDiagram.read
- Defined in src/model/diagram.ts:495

write

write(serializer: ISerializer): any
Writes the diagram data to the specified serializer.
Parameters
- serializer: ISerializer
  The serializer to use for writing the data.
Returns any
The serialized diagram data.
Implementation of IDiagram.write
- Defined in src/model/diagram.ts:557

export

export(
    format?: DiagramExportFormat,
    pretty?: boolean,
    serializer?: ISerializer,
): string | Blob | Uint8Array<ArrayBufferLike>
Exports the current diagram in a native format. Supported formats are JSON text, UTF-8 bytes, and Blob (browser runtime).
Parameters
- format: DiagramExportFormat = 'json'
  The format to export the diagram in ('json', 'bytes', or 'blob'). (defaults to 'json')
- pretty: boolean = true
  Whether to pretty-print the output (applicable to JSON format). (defaults to true)
- serializer: ISerializer = jsonSerializer
  The serializer to use for exporting the diagram. (optional)
Returns string | Blob | Uint8Array<ArrayBufferLike>
The exported diagram data in the specified format.
- Defined in src/model/diagram.ts:609

save

save(options?: DiagramSaveOptions): Promise<string>
Saves the current diagram directly from the model. In Node.js this writes to the file system; in browsers this triggers a file download.
Parameters
- options: DiagramSaveOptions = {}
  The options for saving the diagram, including path, file name, serializer, pretty-printing, and MIME type.
Returns Promise<string>
A promise that resolves to the path or download URL of the saved file.
- Defined in src/model/diagram.ts:636

`Protected`applyNodeImageSource

applyNodeImageSource(
    target: INode,
    imageSrc: string,
    mode?: ImageMode,
    imageId?: string,
): void
Parameters
- target: INode
- imageSrc: string
- mode: ImageMode = 'contain'
- OptionalimageId: string
Returns void
- Defined in src/model/diagram.ts:690

layerNodes

layerNodes(layer: ILayer): INode[]
Returns all nodes within the specified layer.
Parameters
- layer: ILayer
  The layer whose nodes should be returned.
Returns INode[]
An array of nodes within the specified layer.
- Defined in src/model/diagram.ts:700

`Protected`serializeNode

serializeNode(node: INode): ISerializedNode
Parameters
- node: INode
Returns ISerializedNode
- Defined in src/model/diagram.ts:706

`Protected`serializeGroup

serializeGroup(group: IGroup): ISerializedGroup
Parameters
- group: IGroup
Returns ISerializedGroup
- Defined in src/model/diagram.ts:728

`Protected`createLayer

createLayer(
    id: string,
    name?: string,
    visible?: boolean,
    nodes?: string[],
): ILayer
Creates a new layer with the specified properties.
Parameters
- id: string
  The ID of the layer.
- name: string = id
  The name of the layer.
- visible: boolean = true
  Whether the layer is visible.
- nodes: string[] = []
  The nodes within the layer.
Returns ILayer
The created layer.
- Defined in src/model/diagram.ts:776

Class Diagram

Hierarchy (View Summary)

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns Diagram

Properties

id

nodes

groups

layers

Optionalsheet_id

Optionalbackground

Optionalmeta

Accessors

image_assets

Returns Record<string, string>

sheetRepository

Returns SheetRepository

Parameters

Returns void

assetStore

Returns AssetStore

metadata

Returns Record<string, any>

Parameters

Returns void

Methods

destroy

Returns void

node

Parameters

Returns INode | undefined

group

Parameters

Returns IGroup | undefined

layer

Parameters

Returns ILayer | undefined

upsertNode

Parameters

Returns INode

upsertGroup

Parameters

Returns IGroup

upsertLayer

Parameters

Returns ILayer

setNodeGroup

Parameters

Returns void

nodeGroup

Parameters

Returns IGroup | undefined

ProtectedgroupOwner

Parameters

Returns INode | undefined

setNodeLayer

Parameters

Returns void

deleteNode

Parameters

Returns void

deleteGroup

Parameters

Returns void

deleteLayer

Parameters

Returns void

setNodeImageSource

Parameters

Returns INode | undefined

setNodeSvgSource

Parameters

`Optional`sheet_id

`Optional`background

`Optional`meta

`Protected`groupOwner

`Protected`applyNodeImageSource

`Protected`serializeNode

`Protected`serializeGroup

`Protected`createLayer