Skip to main content
DiagramOptions
Options for a diagram.
NameTypeDescription
allowMultipleSelections?booleanDefaults to true - whether or not to allow multiple objects to be selected at the same time via shift+click.
allowRotation?booleanWhether or not to allow rotation of elements being dragged from the palette. Defaults to true.
autoPan?booleanDefaults to true, meaning the canvas will pan automatically to track elements that have been dragged out of the visible area.
beforeConnect?BeforeConnectInterceptorDefinition of a function to use as a beforeConnect interceptor.
beforeStartConnect?EdgeDataGeneratorThis method is invoked when a user begins to drag a new edge. It is given the vertex the drag is starting from, and any derived type for the edge being dragged. This method can be used for two purposes: firstly, if you return false, the drag will be aborted. Secondly, if you return a data object from this method, that object will be used as the edge's backing data. So a common usage is to use this method to set properties that will define an edge's initial appearance.
cells?{
  clonable:boolean,
  defaultHeight:number,
  defaultWidth:number,
  deletable:boolean,
  draggable:boolean,
  editable:boolean,
  events:NodeEventOptions<any>,
  font:FontSpec,
  getCollapsedGroupSize:(g:Group, currentSize:Size) => Size,
  groups:DiagramGroupMapping,
  heightProperty:string,
  labelBackground:boolean | LabelBackgroundOptions,
  labelFillRatio:number,
  labelPosition:LabelPosition,
  labelProperty:string,
  leftProperty:string,
  linkable:boolean,
  magnetizer:MagnetizeOptions,
  multilineLabels:boolean,
  nodes:DiagramNodeMapping,
  outlineWidth:number,
  resizable:boolean,
  resize:{
  bordersVisible:boolean,
  handlerFactory:ResizingToolsHandlerFactory,
  handleShape:"circle" | "rectangle",
  handleSize:number,
  ignoreGrid:boolean,
  method:ResizingToolsResizeMethod,
  modelUpdater:ResizingToolsModelUpdater,
  resizeX:boolean,
  resizeY:boolean
},
  rotatable:boolean,
  rotationProperty:string,
  rotationStops:number,
  shouldDeleteGroupMembers:(g:Group, el:BrowserElement) => boolean,
  showLabels:boolean,
  templateEvents:DiagramCellTemplateEvents,
  topProperty:string,
  widthProperty:string
}		Options for cells.
defaultColor?stringDefaults to #000000
defaultFillColor?stringDefaults to #FFFFFF
defaultOutlineColor?stringDefaults to #000000
defaultOutlineWidth?numberDefaults to 2px
defaults?UICoreDefaultsDefaults for connector/anchors etc
deselectOnCanvasTap?booleanDefaults to true - deselect any currently selected shapes when the user taps on canvas whitespace.
dragGroups?DragGroupsPluginOptionsOptions for drag groups.
editable?booleanDefaults to true, meaning the user can edit the diagram.
graphPropagation?GraphPropagationEnginePluginOptions<any>If provided, a graph propagation engine will be used to propagate changes to the graph.
grid?DiagramGridOptionsOptions for a grid for the diagram.
lasso?boolean | LassoPluginOptionsOptions for lasso, or just a boolean instructing the diagram to attach a lasso with default options, if true. If no value is set for this, the diagram will not have a lasso attached.
lineCrossings?boolean | LineCrossingsPluginOptionsControls whether line crossings are shown by a visual cue. Defaults to false. You can either supply a boolean and have the panbuttons plugin initialize with its default settings, or supply your own settings.
mediator?DiagramActionMediatorDefines an object that can decide at runtime whether a given shape should offer various actions in its shape editing tools. Defaults to null.
miniview?MiniviewPluginOptionsOptions for a miniview
pan?PanOptionsOptions to control how a user pans the canvas.
panButtons?boolean | PanButtonsPluginOptionsControls whether pan buttons are displayed at the edges of the canvas, defaults to false. You can either supply a boolean and have the panbuttons plugin initialize with its default settings, or supply your own settings.
rotationSpeed?numberThe number of milliseconds required to complete a full rotation of an element when the trigger key is held down. Defaults to 2000.
selectShapeOnTap?booleanDefaults to true - select a shape/edge if the user taps on it. This is valid also when the diagram is read only.
shapes?ShapeSet | Array<ShapeSet>Which shape sets to make available to this diagram.
snapLines?boolean | SnaplinesPluginOptionsControls whether snaplines are displayed, defaults to false. You can either supply a boolean and have the snaplines plugin initialize with its default settings, or supply your own settings.
wheel?WheelOptionsOptions for the behaviour of the mousewheel (which also covers two finger scrolling on a mac trackpad)
zoom?ZoomOptionsOptions to control how a user manages zoom on the canvas.
zoomToFit?booleanIf true, zoom the display so that the dataset is entirely visible after initialisation.
zoomToFitIfNecessary?booleanIf true, zoom the display so that the dataset is entirely visible after initialisation, but only adjust the zoom level if the dataset is not already visible at the default zoom level.