Diagram

graphical connection lines

Props

connections

Array of objects describing the connections. The 'fromTarget' and 'toTarget' may be either DOM element ids or React references. 'offset' can be used to shift a bit to reduce the amount of overlap with other connection lines to make the lines easier to distinguish.

{
  "fromTarget": "my-dom-id-1",
  "toTarget": "my-dom-id-2"
}

{
  "anchor": "center",
  "color": "graph-0",
  "fromTarget": "my-dom-id-1",
  "label": "link 5",
  "thickness": "medium",
  "toTarget": "my-dom-id-2",
  "type": "rectilinear"
}

where anchor could be:"center""vertical""horizonta"

where offset could be:"xsmall""small""medium""large""any CSS size"

where thickness could be:"hair""xxsmall""xsmall""small""medium""large""any CSS size"

where type could be:"direct""curved""rectilinear"

Theme

diagram.extend

Any additional style for Diagram.

"any CSS"

(props) => {}

diagram.line.color

The color of the connection line.

"graph-0"

global.colors

Color options.

{
  "icon": {
    "0": "#",
    "1": "6",
    "2": "6",
    "3": "6",
    "4": "6",
    "5": "6",
    "6": "6",
    "dark": "#f8f8f8",
    "light": "#666666"
  },
  "active": "rgba(221,221,221,0.5)",
  "background-back": {
    "dark": "#33333308",
    "light": "#EDEDED"
  },
  "background-front": {
    "dark": "#444444",
    "light": "#FFFFFF"
  },
  "background-contrast": {
    "light": "#33333310",
    "dark": "#FFFFFF18"
  },
  "active-background": "background-contrast",
  "active-text": "text-strong",
  "black": "#000000",
  "border": {
    "dark": "rgba(255,255,255,0.33)",
    "light": "rgba(0,0,0,0.33)"
  },
  "brand": "#7D4CDB",
  "control": {
    "dark": "accent-1",
    "light": "brand"
  },
  "focus": "#6FFFB0",
  "graph-0": "accent-1",
  "graph-1": "neutral-1",
  "graph-2": "neutral-2",
  "graph-3": "neutral-3",
  "graph-4": "neutral-4",
  "placeholder": "#AAAAAA",
  "selected": "brand",
  "text": {
    "dark": "#f8f8f8",
    "light": "#444444"
  },
  "text-strong": {
    "dark": "#FFFFFF",
    "light": "#000000"
  },
  "text-weak": {
    "dark": "#CCCCCC",
    "light": "#555555"
  },
  "text-xweak": {
    "dark": "#BBBBBB",
    "light": "#666666"
  },
  "selected-background": "brand",
  "selected-text": "text-strong",
  "white": "#FFFFFF",
  "accent-1": "#6FFFB0",
  "accent-2": "#FD6FFF",
  "accent-3": "#81FCED",
  "accent-4": "#FFCA58",
  "dark-1": "#333333",
  "dark-2": "#555555",
  "dark-3": "#777777",
  "dark-4": "#999999",
  "dark-5": "#999999",
  "dark-6": "#999999",
  "light-1": "#F8F8F8",
  "light-2": "#F2F2F2",
  "light-3": "#EDEDED",
  "light-4": "#DADADA",
  "light-5": "#DADADA",
  "light-6": "#DADADA",
  "neutral-1": "#00873D",
  "neutral-2": "#3D138D",
  "neutral-3": "#00739D",
  "neutral-4": "#A2423D",
  "status-critical": "#FF4040",
  "status-error": "#FF4040",
  "status-warning": "#FFAA15",
  "status-ok": "#00C781",
  "status-unknown": "#CCCCCC",
  "status-disabled": "#CCCCCC",
  "background": {
    "light": "#ffffff",
    "dark": "#000000"
  }
}

global.edgeSize

The possible sizes for the connections thickness and offset.

{
  "none": "0px",
  "hair": "1px",
  "xxsmall": "3px",
  "xsmall": "6px",
  "small": "12px",
  "medium": "24px",
  "large": "48px",
  "xlarge": "96px",
  "responsiveBreakpoint": "small"
}