width |
number
|
<optional>
|
800
|
Canvas width (px) |
height |
number
|
<optional>
|
600
|
Canvas height (px) |
nodes |
Array
|
<optional>
|
[]
|
Node data array |
conns |
Array
|
<optional>
|
[]
|
Connection data array
─── Interaction ─────────────────────────────────────────────────────── |
nodesDraggable |
boolean
|
<optional>
|
true
|
Allow node dragging |
nodesConnectable |
boolean
|
<optional>
|
true
|
Allow creating connections |
nodesResizable |
boolean
|
<optional>
|
true
|
Allow resizing nodes (per-node override: node.resizable) |
elementsSelectable |
boolean
|
<optional>
|
true
|
Allow selecting nodes/conns |
selectNodesOnDrag |
boolean
|
<optional>
|
true
|
Select node when drag starts |
deleteKeyEnabled |
boolean
|
<optional>
|
false
|
Enable keyboard deletion of selected elements |
deleteKeyCode |
string
|
<optional>
|
'Backspace'
|
Key to delete selected elements (requires deleteKeyEnabled) |
multiSelectEnabled |
boolean
|
<optional>
|
true
|
Enable multi-selection (box select + Shift+Click) |
boxSelectionKeyCode |
string
|
<optional>
|
'Shift'
|
Key to hold for box selection (drag on canvas) |
multiSelectionKeyCode |
string
|
<optional>
|
'Shift'
|
Key to hold for Shift+Click add/remove selection |
zoomOnScroll |
boolean
|
<optional>
|
true
|
Zoom with mouse wheel |
zoomMin |
number
|
<optional>
|
0.5
|
Minimum zoom level |
zoomMax |
number
|
<optional>
|
2
|
Maximum zoom level |
panOnDrag |
boolean
|
<optional>
|
true
|
Pan canvas by dragging background |
center |
Array
|
<optional>
|
[0,0]
|
Initial viewport center [x, y] |
zoom |
number
|
<optional>
|
1
|
Initial viewport zoom level |
panLimits |
Array
|
<optional>
|
null
|
Pan limits [[minX,minY],[maxX,maxY]] |
snapToGrid |
boolean
|
<optional>
|
false
|
Snap node positions to grid |
snapGridSize |
number
|
<optional>
|
20
|
Grid cell size (px, used for both drag snap and resize snap)
─── Platform ──────────────────────────────────────────────────────── |
platformBackgroundPatternType |
string
|
<optional>
|
'dots'
|
Background pattern: 'dots' | 'lines' | 'cross' |
platformBackgroundPatternGap |
number
|
<optional>
|
20
|
Pattern spacing (px) |
platformBackgroundPatternSize |
number
|
<optional>
|
1
|
Pattern element size |
platformBackgroundPatternColor |
string
|
<optional>
|
'#81818a'
|
Pattern color |
platformBackgroundColor |
string
|
<optional>
|
'#fff'
|
Canvas background color
─── Settings Popup ──────────────────────────────────────────────────── |
settingsPopupBackgroundColor |
string
|
<optional>
|
'#fff'
|
Settings popup background |
settingsPopupTextColor |
string
|
<optional>
|
'#333'
|
Settings popup text color |
settingsPopupTextFontSize |
string
|
<optional>
|
'12px'
|
Settings popup font size
─── Infor Popup ──────────────────────────────────────────────────────── |
inforPopupBackgroundColor |
string
|
<optional>
|
'#fff'
|
Info popup background |
inforPopupTitleTextColor |
string
|
<optional>
|
'#333'
|
Info popup title text color |
inforPopupTitleTextFontSize |
string
|
<optional>
|
'12px'
|
Info popup title font size |
inforPopupDescriptionTextColor |
string
|
<optional>
|
'#888'
|
Info popup description text color |
inforPopupDescriptionTextFontSize |
string
|
<optional>
|
'10px'
|
Info popup description font size
─── Default Node ────────────────────────────────────────── |
defNodeType |
string
|
<optional>
|
'basic'
|
Default node type: 'input' | 'basic' | 'output' |
defNodeShape |
string
|
<optional>
|
'rectangle'
|
Default shape: 'rectangle' | 'diamond' | 'ellipse' | 'triangle' | ... |
defNodeWidth |
number
|
<optional>
|
100
|
Default node width (px) |
defNodeHeight |
number
|
<optional>
|
40
|
Default node height (px) |
defNodeFontSize |
number
|
<optional>
|
12
|
Default node font size (px) |
defNodeFontSizeMin |
number
|
<optional>
|
1
|
Min font size in settings |
defNodeFontSizeMax |
number
|
<optional>
|
72
|
Max font size in settings |
defNodeFontColor |
string
|
<optional>
|
'#333333'
|
Default node text color |
defNodeFaceColor |
string
|
<optional>
|
'#ffffff'
|
Default node fill color |
defNodeEdgeColor |
string
|
<optional>
|
'#bbbbbb'
|
Default node border color |
defNodeEdgeWidth |
number
|
<optional>
|
1
|
Default node border width (px) |
defNodeToPosition |
string
|
<optional>
|
'bottom'
|
Default outgoing handle position: 'top' | 'bottom' | 'left' | 'right' |
defNodeFromPosition |
string
|
<optional>
|
'top'
|
Default incoming handle position |
defNodePopupDirection |
string
|
<optional>
|
'right'
|
Default settings popup direction
─── Default Creating Connection ──────────────────────────────────────────────────────── |
defConnCreatingType |
string
|
<optional>
|
'bezier'
|
Drag-line type: 'bezier' | 'straight' | 'step' | 'smoothstep' |
defConnCreatingEdgeColor |
string
|
<optional>
|
'#b1b1b7'
|
Drag-line color |
defConnCreatingEdgeWidth |
number
|
<optional>
|
1
|
Drag-line width (px) |
defConnCreatingEdgeDasharray |
string
|
<optional>
|
'5 5'
|
Drag-line dash pattern ('' for solid) |
funValidConnCreating |
function
|
<optional>
|
null
|
Custom connection validator fn(connection) → boolean
─── Default Connection ──────────────────────────────────── |
defConnType |
string
|
<optional>
|
'bezier'
|
Default conn type: 'bezier' | 'straight' | 'step' | 'smoothstep' |
defConnFontSize |
number
|
<optional>
|
10
|
Default conn label font size (px) |
defConnFontSizeMin |
number
|
<optional>
|
1
|
Min font size in settings |
defConnFontSizeMax |
number
|
<optional>
|
72
|
Max font size in settings |
defConnFontColor |
string
|
<optional>
|
'#333333'
|
Default conn label text color |
defConnEdgeColor |
string
|
<optional>
|
'#b1b1b7'
|
Default conn line color |
defConnEdgeWidth |
number
|
<optional>
|
1
|
Default conn line width (px) |
defConnEdgeDasharray |
string
|
<optional>
|
''
|
Default conn dash pattern ('' for solid, '5 5' for dashed) |
defConnMarkerEnd |
string
|
<optional>
|
''
|
Default arrow marker: '' | 'arrow' | 'arrowclosed' |
defConnAnimated |
boolean
|
<optional>
|
false
|
Default conn animation (dashed flow) |
defOffset |
number
|
<optional>
|
24
|
Step/smoothstep routing buffer (px) |