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