Skip to main content

Diagram

A Diagram draws nodes, edges and group as SVG elements into an SVG container element, and provides a programmatic API for manipulating the various elements.

Methods​

addCell()​

addCell(o): DiagramCell

Adds a cell to the diagram.

Parameters​

o​

ObjectData

Returns​

DiagramCell


addLink(o): DiagramLink

Add a link to the diagram, which may be connected to a cell at one or both ends, or placed in whitespace.

Parameters​

o​

AddLinkOptions

Returns​

DiagramLink


attachMiniview()​

attachMiniview(options): void

Attach a miniview to this diagram.

Parameters​

options​

MiniviewPluginOptions

Options for the miniview.

Returns​

void


attachPalette()​

attachPalette(container, options?): DiagramPalette

Create a new DiagramPalette in the given container element, and attach it to this Diagram.

Parameters​

container​

HTMLElement

HTMLElement that will host the palette

options?​

DiagramPaletteOptions

Options for the palette.

Returns​

DiagramPalette


clear()​

clear(): void

Clears the diagram.

Returns​

void


clearPathEdits()​

clearPathEdits(edgeOrLink): void

Clear the edits for the given edge/link.

Parameters​

Edge | DiagramLink

Returns​

void


destroy()​

destroy(): void

Cleanup the diagram and release any DOM elements.

Returns​

void


exportData()​

exportData(): any

Exports the dataset - only the dataset. If you want the dataset plus the current state, use save

Returns​

any


exportImage()​

exportImage(options, onImageReady): void

Exports an image representation of the diagram.

Parameters​

options​

ImageExportOptions

onImageReady​

ImageReadyFunction

Returns​

void

An image representing the diagram.


exportSvg()​

exportSvg(options?): string

Exports an SVG representation of the diagram

Parameters​

options?​

SvgExportOptions

Returns​

string

An string representing the diagram in SVG.


getCell()​

getCell(id): DiagramCell

Gets the cell with the given ID. May return null if no matching cell found.

Parameters​

id​

string

Returns​

DiagramCell


getCellCount()​

getCellCount(): number

Gets the number of cells in the diagram

Returns​

number


getLink(id): DiagramLink

Gets the link with the given id.

Parameters​

id​

string

Returns​

DiagramLink


getLinkCount()​

getLinkCount(): number

Gets the number of links in the diagram.

Returns​

number


getZoom()​

getZoom(): number

Gets the current visible zoom.

Returns​

number


load()​

load(options): void

Loads data either as an object or from a url into the diagram, first clearing it. Invokes the given onload function after load is complete.

Parameters​

options​
data?​

any

onload?​

() => any

url?​

string

Returns​

void


lockGroup()​

lockGroup(groupOrGroupId): void

Mark a group as "locked" : edges inside of it cannot be detached, removed or have their paths edited, edges cannot be established to child vertices.

Parameters​

groupOrGroupId​

string | Group

Returns​

void


removeCell()​

removeCell(cell): void

Removes a cell from the diagram.

Parameters​

cell​

Either the cell to remove, or the ID of the cell to remove.

string | DiagramCell

Returns​

void


save()​

save(options?): DiagramSaveData

Exports the dataset and current state as JSON.

Parameters​

options?​

DiagramSaveOptions

Returns​

DiagramSaveData


saveToUrl()​

saveToUrl(options): void

Posts the Diagram data and state via ajax to a given URL.

Parameters​

options​

SaveOptions

Save options

Returns​

void


selectCell()​

selectCell(c): void

Sets the given cell as the selected cell in the model

Parameters​

c​

Cell to select.

string | DiagramCell

Returns​

void


selectEdge()​

selectEdge(l): void

Alias for selectLink

Parameters​

l​

Link to select.

string | Edge | DiagramLink

Returns​

void


selectLink(l): void

Sets the given link as the selected link in the model

Parameters​

l​

Link to select.

string | Edge | DiagramLink

Returns​

void


setZoom()​

setZoom(z): void

Sets the current zoom. If this value is outside the zoom range it will be ignored.

Parameters​

z​

number

Returns​

void


startEditingPath()​

startEditingPath(edgeOrLink, params): void

Start editing the given edge/link

Parameters​

Edge | DiagramLink

params​

any

Returns​

void


stopEditingPath()​

stopEditingPath(): void

Stop editing a link path. If a path is not being edited this is ignored.

Returns​

void


toBack()​

toBack(c): void

Send the given cell or link to the back.

Parameters​

c​

Cell or link, or its id.

string | DiagramCell | DiagramLink

Returns​

void


toFront()​

toFront(c): void

Bring the given cell or link to the front.

Parameters​

c​

Cell or link, or its id.

string | DiagramCell | DiagramLink

Returns​

void


unlockGroup()​

unlockGroup(groupOrGroupId): void

Unlock a group

Parameters​

groupOrGroupId​

string | Group

Returns​

void


zoomToFit()​

zoomToFit(params?): void

Zooms the display so that all the tracked elements fit inside the viewport. This method will also, by default, increase the zoom if necessary - meaning the default behaviour is to adjust the zoom so that the content fills the viewport. You can suppress zoom increase by setting doNotZoomIfVisible:true on the parameters to this method.

Parameters​

params?​

ZoomToFitOptions

Returns​

void

Tags​

zoom


zoomToFitIfNecessary()​

zoomToFitIfNecessary(params?): void

Zooms the display so that all the tracked elements fit inside the viewport, but does not make any adjustments to zoom if all the elements are currently visible (it still does center the content though).

Parameters​

params?​

ZoomToFitIfNecessaryOptions

Returns​

void

Tags​

zoom