Intro

These visual specifications should serve as a guideline for Front-End Developers on how implement this control.

Node Container

Diagram spec showing different elements of a node container: (A) its grey background and dark grey border; (B) the spacing within the header container; (C) the header text style and icon; (D) an overflow icon button; and (E) the content container spacing.

Value Description Details
A Node Container Background color: --sapAvatar_10_Background
Border color: --sapAvatar_10_TextColor
Border size: 0.063rem (1px) inside
B Header Container L margin: 1.25rem (20px)
R margin: 0.75rem (12px)
Top margin: 0.5rem (8px)
C Header Icon & Label Horizontal Alignment: Center-left

Icon:
R padding: 0.5rem (8px)
Size: 1rem (16px)
Color: --sapAvatar_10_TextColor

Heading:
Font: --sapFontBoldFamily
Font color: --sapTextColor
Font size: --sapFontSize
D Icon Button Visual Core: Icon Button
L padding: 0.5rem (8px)
E Content Container Top padding: 1rem (16px)
Left, right, bottom padding: 1.25rem (20px)

*Width & height should be flexible to the content

End Points

Diagram spec showing two endpoint types: (A) a filled circle representing a Start endpoint, and (B) a circle with an inner filled circle representing an End endpoint.

Value Description Details
A Start Point Vertical Alignment: Center

Text:
Font: --sapFontBoldFamily
Font color: --sapTextColor
Font size: --sapFontSize

Circle:
Top padding: 0.5rem (8px)
Color: --sapNeutralColor
Size: 0.75rem (12px)
B End Point Alignment: Center

Outer circle:
Border color: --sapNeutralColor
Border size: 0.125rem (2px) Inside
Size: 1.5rem (24px)

Inner circle:
Color: --sapNeutralColor
Size: 0.75rem (12px)

Node Structure

Diagram spec showing different elements of a standard node: (A) the border color and corner radius; (B) the icon panel with a blue grid icon; (C) the header portion of the node; and (D) the header and subheading text padding and style.

Value Description Details
A Node (Container) Border color: See Node Interactive States Spec
Border size: See Node Interactive States Spec
Corner radius: 0.375rem (6px)

Min width: 5rem (80px)
Min height: 2.5rem (40px)
*Container width should be adjustable as required by different products
B Icon Panel Width: 2.5rem (40px)

Background color: See Node Type Color Spec

Right border:
Border size: 0.0625rem (1px) center
Border color: --sapButton_BorderColor

Top padding: 0.5rem (8px)
Vertical alignment: Top-centered

Left container icon:
Font size: 1rem (16px)
Color: See Node Type Color Spec
Hover: Tooltip (Object Type)
C Header From left to right: D, E (see below)
*See J for an alternate variant with tag
Alignment: Top aligned
D Heading and Subheading Container:
Alignment: Top-left
Left padding: 0.75rem (12px)
Top, bottom, and right padding: 0.5rem (8px)
Spacing between elements: 0.125rem (2px)

Heading:
Font: --sapFontBoldFamily
Font color: --sapTextColor
Font size: --sapFontSize
Alignment: Left

Subheading (optional):
Font: --sapFontFamily
Font color: --sapContent_LabelColor
Font size: --sapFontSize
Alignment: Left

Diagram spec pointing to: (E) a red badge with the number 3 in the heading row, and (F) a downwards chevron icon indicating an expand/collapse action. A legend to the right shows three badge style variants: default, hover, and selected.

Value Description Details
E Badge Visual Core: Icon Button
Alignment: Top-right
Top padding: 0.188rem (3px)
Right padding: 0.125rem (2px)
Icons: Diagrams Badge

Diagrams Badge:

Default: Native UI5 Badge

Hover:
Background: --sapIndicationColor_2_Hover_Background
Border: --sapContent_BadgeBorderColor
Text: --sapContent_BadgeTextColor

Down:
Background: --sapIndicationColor_2_Active_Background
Border: --sapIndicationColor_2_BorderColor
Text: --sapIndicationColor_2_Active_TextColor
F Expand/Collapse Icon Visual Core: Icon Button
Alignment: Top-right
Top padding: 0.188rem (3px)
Icons: sap-icon://navigation-right-arrow, sap-icon://navigation-down-arrow

Diagram spec pointing to the elements in the bottom status bar of a node: (G) status bar padding; (H) display counters in the left side of the status bar; and (I) icons in the right side of the status bar.

Value Description Details
G Status Bar Padding: 0.125rem (2px)
*Status bar can contain G and H (see below)
H Status Bar (left) Container:
Alignment: Left
Top and bottom padding: 0.188rem (3px)
Spacing between elements: 0.125rem (2px)

Can contain:
Buttons (Transparent)
Display counters (non-interactive)
– Same size and padding as UI5 button with icon
– Color: --sapContent_NonInteractiveIconColor
I Status Bar (right) Container:
Alignment: Right
Spacing between elements: 0.125rem (2px)

Icon:
Font size: 1rem (16px)
Color: --sapNeutralElementColor
Padding: 0.5rem (8px)

Diagram spec showing an expanded node card labeled J with a <Heading> and Subheading, display counters (4 and 3), and an expanded data table section showing a <Group Header> with three rows of measure fields.

Value Description Details
J Measure Table Top border:
Border size: 0.0625rem (1px)
Border color: --sapButton_BorderColor

Table:
SAP Design System Guidelines: Table
Visual Core: Tables (Horizon)
UI5 Web Components: Table

Diagram spec showing a single node labeled K: a pill-shaped node with an allocations icon on the left, the label "Allocation", and a pink delete button (red X icon) on the right.

Value Description Details
K Header Variable Status bar:
Heading: Left-aligned
Tag and Icon: Right-aligned

Spacing between elements: 0.625rem (10px)

Tag: Native UI5: Tag

Icon: Font size: 1rem (16px)

*Top container for data actions & multi actions:
Horizontal alignment: Center-left

Diagram spec showing the collapsed forms of: (L) an Operator node, and (M) an ER Model node with a measure table.

Value Description Details
L, M Collapsed Forms Operator Node Collapse: All containers hidden except left container and the expand button

Right container width & height: 2.5rem (40px)
Icon button: Center-aligned

ER Model collapse: Hide Measure Table

Diagram spec showing a single node type labeled N: a drag-and-drop target zone represented by a rounded rectangle with a dashed border containing the label "Drag & Drop".

Value Description Details
N Drag & Drop Task Chain Node Drag & Drop: All containers hidden except for the Heading

Alignment: Center

See Node Interactive States Spec for styling guidelines

Node Type Colors

Three diagram nodes labeled A, B, and C. Node A shows a Primary node type, with a blue left icon panel. Node B shows a Secondary node type, with a white left icon panel. Node C shows a Tertiary node type, with a light grey left icon panel.

Value Description Details
A Primary (Blue) Icon panel background color: --sapAvatar_6_Background
Icon panel icon color: --sapAvatar_6_TextColor
Border color: --sapButton_Track_BorderColor
B Secondary (White) Icon panel background color: --sapTile_Background
Icon panel icon color: --sapTile_IconColor
Border color: --sapButton_Track_BorderColor
C Tertiary (Light Grey) Icon panel background color: --sapAvatar_10_Background
Icon panel icon color: --sapAvatar_10_TextColor
Border color: --sapButton_Track_BorderColor

Three diagram nodes labeled D, E, and F. Node D shows a Highlight node type, with a pink left icon panel. Node E shows an Operator node type, with an aqua left icon panel. Node F shows a Negative node type, with a red left icon panel.

Value Description Details
D Highlight (Pink) Icon panel background color: --sapAvatar_4_Background
Icon panel icon color: --sapAvatar_4_TextColor
Border color: --sapButton_Track_BorderColor
E Operator (Aqua) Icon panel background color: --sapAvatar_7_Background
Icon panel icon color: --sapAvatar_7_TextColor
Border color: --sapButton_Track_BorderColor
F Negative (Semantic) Icon panel background color: --sapErrorBackground
Icon panel icon color: --sapNegativeTextColor
Border color: --sapErrorBorderColor

Three diagram nodes labeled G, H, and I. Node G shows a Positive node type, with a green left icon panel. Node H shows a Critical node type, with a yellow left icon panel. Node I shows an Information node type, with a blue left icon panel.

Value Description Details
G Positive (Semantic) Icon panel background color: --sapSuccessBackground
Icon panel icon color: --sapPositiveTextColor
Border color: --sapSuccessBorderColor
H Critical (Semantic) Icon panel background color: --sapWarningBackground
Icon panel icon color: --sapCriticalTextColor
Border color: --sapWarningBorderColor
I Information (Semantic) Icon panel background color: --sapInformationBackground
Icon panel icon color: --sapInformativeTextColor
Border color: --sapInformationBorderColor

Node Interaction States

Five nodes showing interaction states. A: default state with blue left icon panel and thin outline. B: hover state with a light gray background fill. C: focused state with a solid blue outline. D: selected state with a blue background fill and solid blue outline. E: selected and focused state with a thicker, more prominent solid blue outline.

Value Description Details
A Default Right Container background color: --sapButton_Background

Border color: See Node Color Spec
Border size: 0.0625rem (1px) outside
B Hover Right Container background color: --sapHoverColor

Border color: --sapButton_Track_Hover_BorderColor
Border size: 0.0625rem (1px) outside
C Selected Right Container background color: --sapButton_Background

Border color: --sapButton_Track_Selected_BorderColor
Outside border size: 0.0625rem (1px)
Inside bottom border: 0.125rem (2px)
D Selected and Hovered Right Container background color: --sapButton_Selected_Hover_Background

Border color: --sapButton_Track_Selected_Hover_BorderColor
Outside border size: 0.0625rem (1px)
Inside bottom border: 0.125rem (2px)
E Focused 0.125rem (2px) gap outside to the component border

Border color: --sapContent_FocusColor
Border thickness: 0.125rem (2px) outside
Border corner radius: 0.625rem (10px)

Visual Core: Focus Visual Concept

Two nodes interaction states. F: default, selected state for a placeholder node with a dashed blue border. G: hover state for a placeholder node with a dashed blue border and light gray background fill.

Value Description Details
F Placeholder – Default, Selected Right Container background color: --sapAvatar_Lite_Background

Border color: --sapButton_Emphasized_BorderColor
Border size: 0.125rem (2px), center, dashed
Dash length: 0.25rem (4px)
Gap length: 0.188rem (3px)
G Placeholder – Hover Right Container background color: --sapHoverColor

Border color: --sapButton_Emphasized_Hover_BorderColor
Border size: 0.125rem (2px), center, dashed
Dash length: 0.25rem (4px)
Gap length: 0.188rem (3px)

Two nodes showing drag-and-drop interaction states, both displaying "Drag & Drop" label text. H: default drag and drop state with a gray dashed border. I: active on drag state with a blue dashed border and light gray background.

Value Description Details
H Default Background color: --sapNeutralBackground
Border color: --sapButton_BorderColor

Border size: 0.125rem (2px), center, dashed
Dash length: 0.125rem (2px)
Gap length: 0.125rem (2px)
I Active on Drag Right Container background color: --sapHoverColor

Border color: --sapButton_Emphasized_Active_BorderColor
Border size: 0.125rem (2px), center, dashed
Dash length: 0.125rem (2px)
Gap length: 0.125rem (2px)

Modeler Header

A diagram node for a "Data Foundation" entity with a teal header background and grid icon. Below the header, a gray section labels "Measures (7)" as a group. Five rows are listed beneath it — Discount, Gross_Margin, Original_Sales_Price, Price, and Product_Count — each prefixed with a numeric data type icon.

Value Description Details
A Modeler Header Container:
L padding: 0.75rem (12px)
R padding: 0.5rem (8px)
Top and bottom padding: 0.625rem (10px)
Spacing between elements: 0.625rem (10px)

Icon:
Font size: 1rem (16px)
Color: --sapContent_IconColor

Heading:
Font: --sapFontBoldFamily
Font color: --sapTextColor
Font size: --sapFontSize