Parameters

Label

export type LabelAlignX = 'center' | 'left' | 'right'
export type LabelAlignY = 'middle' | 'top' | 'bottom'
export type LabelTextAlign = 'left' | 'right' | 'center' | 'justify'

export interface FlowLabelParameters {
  text?: string
  isicon?: boolean // text is the name of an icon. see https://fonts.google.com/icons
  size?: number
  material?: MeshBasicMaterialParameters
  font?: string
  padding?: number
  alignX?: LabelAlignX
  alignY?: LabelAlignY
  hidden?: boolean
  wrapwidth?: number
  textalign?: LabelTextAlign
}

Parameter	Description	Default
text	The text to show in the label or the icon name.	blank
isicon	When using Troika label, set text to the name of an icon from https://fonts.google.com/icons.	false
size	Size of the text.	0.1
material	Color and other material properties	black
font	When using text geometry, name of a loaded font registered with Flow Diagram	undefined
padding	Space around the text.	0.1
alignX	Horizontal align left, right or centered.	center
alignY	Vertical align top, middle or bottom.	middle
hidden	When true, label is hidden (visible=false).	false
wrapwidth	When using Troika label, width of text before it wraps.	Infinity
textalign	When using Troika label, text is left, right or centered. Use justify to space across wrapwidth.	left

Transform

export interface FlowTransform {
  translate?: { x?: number, y?: number, z?: number }
  rotate?: { x?: number, y?: number, z?: number }
}

Parameter	Description	Default
translate	x, y and z translation
rotate	x, y and z rotation

Connector

export type AnchorType = 'left' | 'right' | 'top' | 'bottom' | 'center'
export interface FlowConnectorParameters {
  id: string
  anchor?: AnchorType // default is left
  index?: number // order when there are multiple
  userData?: { [key: string]: any }
  label?: FlowLabelParameters
  labeloffset?: number // default is 1.5 times size of geometry
  transform?: FlowTransform // adjust position and rotation
  shape?: string // allow each connector to have custom shape
  hidden?: boolean
  material?: MeshBasicMaterialParameters
  radius?: number // shape radius
  width?: number  // if shape has specific width, otherwise radius*2
  height?: number // if shape has specific height, otherwise radius*2
}

Parameter	Description	Default
id	Unique id for the connector. Assigned to Object3D name	Required
anchor	Anchor location at boundary of node shape	left
index	Order for multiple connectors at same anchor location	0
userData	Assigned to Object3D userData	undefined
label	Optional label to show next to connector	undefined
labeloffset	Label offset from connector shape	1.5
transform	Optional transform connector shape	undefined
shape	Shape name to identify type of connector	circle
material	Color and other material properties	black
radius	Radius of shape	0.1
width	Width of shape	radius*2
height	Height of shape	radius*2
hidden	When true, connector is hidden (visible=false).	false

Arrow

export type ArrowStyle = 'default'

export interface FlowArrowParameters {
  type?: ArrowType
  width?: number
  height?: number
  indent?: number

  material?: MeshBasicMaterialParameters
  arrowstyle?: ArrowStyle
  scale?: number
}

Parameter	Description	Default
width	Width of arrow wings	0.15
height	Length of arrow	0.3
indent	Indent of arrow head	0.05
material	Color and other material properties	black
arrowstyle	Style of arrow. Useful when overriding	default
scale	Scale of mesh	1

Edge

export type EdgeLineStyle = 'straight' | 'offset' | 'split' | 'spline'

export interface FlowEdgeParameters {
  from: string // from node id
  to: string // to node id
  id?: string

  points?: Array<{ x: number, y: number }>  // dagre layout positions of line segments

  material?: MeshBasicMaterialParameters
  linestyle?: EdgeLineStyle
  lineoffset?: number // offset from connector to start bending line (when linestyle is offset or spline)
  divisions?: number
  thickness?: number
  toarrow?: FlowArrowParameters
  fromarrow?: FlowArrowParameters
  userData?: { [key: string]: any }

  fromconnector?: string // optional connector id on from node
  toconnector?: string   // optional connector id on to node
}

Parameter	Description	Default
from	node id	Required
to	node id	Required
id	Unique id. Assigned to Object3D name	e<total edges+1>
points	Dagre layout positions	undefined
material	Color and other material properties	black
linestyle	Style of line	spline
lineoffset	When offset or spline, length of small line segment from connector	0.2
divisions	When spline, smooth straight line amount	20
thickness	For tube geometry, thickness of tube	0.01
toarrow	Optional to arrow parameters	undefined
fromarrow	Optional from arrow parameters	undefined
userData	Assigned to Object3D userData	undefined
fromconnector	connector id/name	undefined
toconnector	connector id/name	undefined

Node

export type FlowNodeType = 'node' | 'route'

export interface FlowNodeParameters {
  id?: string
  type?: FlowNodeType
  x?: number
  y?: number
  z?: number
  width?: number
  minwidth?: number
  maxwidth?: number
  height?: number
  minheight?: number
  maxheight?: number
  material?: MeshBasicMaterialParameters
  label?: FlowLabelParameters
  labelanchor?: AnchorType
  labeltransform?: FlowTransform
  userData?: { [key: string]: any }
  resizable?: boolean
  resizematerial?: MeshBasicMaterialParameters
  draggable?: boolean
  scalable?: boolean
  selectable?: boolean
  scalematerial?: MeshBasicMaterialParameters
  scale?: number
  minscale?: number
  maxscale?: number
  hidden?: boolean
  connectors?: FlowConnectorParameters[]
}

Parameter	Description	Default
id	Unique id. Assigned to Object3D name	n<total nodes+1>
type	If its a node or a route	node
x	Horizontal center of node	0
y	Vertical center of node	0
z	Depth center of node. Allows positioning node in front or behind other nodes	0
width	Width of visual	1
minwidth	Minimum width when resizing	Initial width
maxwidth	Maximum width when resizing	Infinity
height	Height of visual	1
minheight	Minimum height when resizing	Initial height
maxheight	Maximum width when resizing	Infinity
material	Color and other material properties	white
label	Optional label to in node	undefined
labelanchor	Label location at boundary	center
labeltransform	Label transform to adjust position or rotation	undefined
userData	Assigned to Object3D userData	undefined
resizable	When true, node is resizable. See min/max width/height	true
resizematerial	Color and other material properties of resizing handle	black
draggable	When true, node can be dragged around	true
selectable	When true, node is included when Raycasting. Used for hovering and selecting a node	true
scalable	When true, node can be scaled. See min/max scale	true
scalecolor	Color and other material properties of scaling handle	black
scale	Initial scale of node	1
minscale	Minimum scale when scaling	Initial scale
maxscale	Maximum scale when scaling	Infinity
hidden	When true, connector is hidden (visible=false).	false
connectors	Array of connector locations	undefined

Route

export interface FlowRouteParameters extends FlowNodeParameters {
  radius?: number
}

Parameter	Description	Default
radius	Radius of route shape. Also sets width and height to this value	0.1

Resizable and scalable are forced to false

Diagram

export interface FlowDiagramParameters {
  version?: number;
  nodes: FlowNodeParameters[],
  edges: FlowEdgeParameters[]
}

Parameter	Description	Default
version	Optional version number	1
nodes	Array of node parameters	empty
edges	Array of edge parameters	empty

Diagram Options

export type FlowMaterialType = 'line' | 'geometry'

export interface FlowDiagramOptions {
  gridsize?: number
  fonts?: Map<string, Font>
  linematerial?: MeshBasicMaterialParameters
  linestyle?: EdgeLineStyle
  linedivisions?: number
  linethickness?: number
  lineoffset?: number
  layout?: FlowLayout
}```

| Parameter | Description | Default |
| -- | -- | -- |
| gridsize | When dragging a node in the diagram, the position jumps at this grid size | 0 |
| fonts | A map of font name to Font.  Used when FlowLabel is using TextGeometry implementation | undefined |
| linematerial | Default color and other material properties when adding edge | Edge default |
| linestyle | Default line style when adding edge | Edge default |
| linedivisions | Default divisions for smoothing lines when adding edge | Edge default |
| linethickness | Default line thickness when adding edge | Edge default |
| lineoffset | Default line offset when adding edge | Edge default |
| layout | Provide custom implementation for node layout | No Op |