Diagram

graphical connection lines

Props

animation

Animation to be used by entire Diagram.

boolean

true

false

string

"pulse"

"draw"

object


{
  type: "pulse" | "draw",
  delay: number | "string",
  duration:  number | "string",
  size: "xsmall" | "small" | "medium" | "large" | "xlarge"
}

connections

Array of objects describing the connections.

array

The 'fromTarget' and 'toTarget' may be either DOM element ids or React references. 'animation' can be used to give specific connections their own animation. '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.


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

where anchor could be:

"center"

"vertical"

"horizontal"

where offset could be:

"xsmall"

"small"

"medium"

"large"

"string"

where thickness could be:

"hair"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"string"

where type could be:

"direct"

"curved"

"rectilinear"

React/DOM Properties

At its core, the Diagram component is a regular <svg> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for svg elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

diagram.animation

Configuration for draw and pulse animations in Diagram.

object


{ 
  pulse: {
    duration: 1000,
  }, 
  draw: {
    duration: 2000,
  },
}

diagram.extend

Any additional style for Diagram.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

diagram.line.color

The color of the connection line.

string

A hex, name, or rgb value.

"graph-0"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.animation

The animation configuration for Diagram.

object


{
  duration: "1s",
  jiggle: { duration: "0.1s" }
}

global.colors

Color options.

object


{
  "icon": { "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.

object


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