Guidelines

Intro

Diagram nodes can represent objects, transformations, operators, or actions. They contain minimal information to be recognized quickly, with details accessible through additional popovers.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=37300-87781&t=0xMKbDA922JX3D8C-11

When to Use

Use a Node:

For a distinct purpose (objects, transformations, operators, or actions)

Don't

Don’t Use the Node:

Without a distinct function or a role in the diagram’s context

Anatomy

Size

The size of a node should be set based on its content. Moreover, it should be a multiple of 1rem.

The default minimum size is 5rem (80px) and the maximum of 38rem (608px). However, diagrams can define their own minimum and maximum sizes.

Header Content

All nodes uses a common header, except the Modeler nodes.

Icon Panel: background-color indicates the node type.
Icon: Reflects the object, transformation, operator, or action.
Heading: Should display either the technical name or business name depending on the user’s settings.
Subheading (optional): Displays additional information, for example, semantic usage or system name.
Expand / Collapse Arrow (optional): Used by some DSP editors.

Two annotated nodes showing header anatomy. The left has five callouts marking the left icon panel, node type icon, heading, subheading, and collapse chevron. The right is a modeler variant with three callouts marking the icon panel, icon, and heading.

Diagram Node Header - Anatomy

Footer Content

Additional information or features.

Status Bar (optional): Can contain counters and icons.
Counter (optional): Can indicate for example, the number of columns. In case more information is available, a button can be used that opens an additional popover.
Icon (optional): Can display, for example, deployment statuses, with a maximum of three icons.
Columns Table (optional): Different per editor.

Two annotated nodes showing footer content. The left node has callouts on the (1) bottom status bar, (2) counter, and (3) status icon. The right node shows a node with callout (4) pointing to the columns table.

Diagram Node Footer - Anatomy

Exceptional Cases

A validation tag may be displayed the header. However, this feature is reserved for data action and multi-action nodes.

Deactivated Tag (optional): Tag that indicates the status of the node.

A diagram node for with a grey "Deactivated" validation tag in the header. Callout (1) points to the badge.

Header validation for data actions and multi actions nodes

Message Badges / Semantic Icons

Nodes in BDC and DSP can display a message badge. Avoid using the badge and semantic icons.

Diagram node showing an output object with a blue icon panel, truncated heading, column count of 4, and a red message badge displaying the number 72.

Message badge only

Semantic nodes can be used to indicate the message with the highest severity.

Three diagram nodes in error (red), warning (orange), and success (green) semantic states, each displaying a truncated heading, column count of 4, and a red message badge with the number 72.

Semantic nodes and message badge

Semantic icons can be used to emphasize semantic states or status, for example, the deployment status in DSP. Avoid using a message badge with semantic icons.

Three diagram nodes in error semantic state, with an error semantic icon: a view node, an allocation node, and a Data Foundation node listing five measures including Discount, Gross Margin, Original Sales Price, Price, and Product Count.

Semantic states and semantic icons

Types

White, Grey, Blue Nodes

Their purpose can vary depending on the editor. However, they should be used consistently across a product.

Information

Icon

false

Three diagram node types, from left to right: White, Grey, and Blue.

White, Grey and Blue nodes

A data lineage diagram showing an analytic model node ("Opportunities Items") as the source, connected to seven downstream output object nodes, with the "Responsible / Employees" node selected.

Analytic Model – Zoom Level: 0.8

A data lineage diagram illustrating transformation flow nodes connecting source tables through a series of intermediate transformation steps to a final output object.

Tranformation Flows

A data lineage diagram for Data Actions, showing six nodes / steps.

Data Actions

Spotlight Node

A single spotlight diagram node with a pink left icon panel, heading, and subheading.

Spotlight node

A data lineage diagram with a "Sales View" node highlighted in magenta (spotlight state), showing its upstream sources — dimension tables and permissions nodes — and downstream outputs including "Enriched Sales View" and grouped destination containers.

Spotlight Node in Impact and Lineage – Zoom Level: 0.6

Operator Node

A single operator node with a teal icon panel on the left and placeholder text "<Heading>" and "<Subheading>" on the right.

Operator Node

A graphical view diagram showing two source nodes ("Acme Geo Dimension" and "Acme Sales") merging through two compact operator nodes, flowing into a "Gross Sales / Calculated Columns" node, then to a "Shared Source View" output node.

Operator Node in Graphical View

Placeholder Node

A single placeholder node with a yellow fill, dashed orange border, orange grid icon, and "<Heading>" label text.

Default Placeholder Node

Two placeholder nodes — "Transformation" and "Target" — connected by an arrow, both styled with yellow fill and dashed orange borders.

Placeholder Node in Transformation Flows

Behavior and Interaction

Interaction States

Five diagram nodes demonstrating interaction states from left to right: Default (light blue accent), Hover (grey background), Selected (dark blue outline with context toolbar), Selected & Hovered (dark blue fill), and Focused & Selected (dark blue fill with focus ring).

Interaction states

Two overlapping diagram nodes illustrating a drag interaction: a stationary node behind and a semi-transparent elevated node being dragged on top.

Hovered while dragging another element

Expand / Collapse

Two states of an operator node: collapsed view and expanded view revealing the operator's configuration details beneath the header.

Operator Node in Graphical View

Two states of an E/R model node: collapsed view and expanded view revealing the full list of entity fields beneath the header.

E/R Model Nodes

Tooltips / ARIA Labels

Icons and buttons without a clear label must have respective tooltips and ARIA labels.

A diagram node with a tooltip displayed on hover, showing additional metadata about the node such as its object type and description of status bar icons.

Tooltips / ARIA Labels

Counter

An icon can indicate, for example, the number of columns. In case more information is available, a button can be used that opens an additional popover.

Diagram node with blue left accent and a blue counter button in the bottom status bar.

Counter

Highlight Path

Nodes that are not part of the highlight path have a reduced opacity.

A data lineage diagram with a highlighted path tracing from "Permissions" through "Sales Permissions" to the highlighted "Sales View" node (magenta). Nodes and connectors on this path are visually emphasized with blue outlines, while all other nodes — including upstream dimension tables and downstream outputs — appear with reduced opacity.