Component Styling Logic

relation-graph’s styling system has three layers:

1. Data fields: node.color, line.lineWidth, and similar fields express the core visual semantics of graph elements.
2. Global options: RGOptions.defaultNodeColor, defaultLineColor, and similar options provide defaults.
3. CSS variables and class names: these finally control DOM rendering details, state styles, and theme extensions.

Understanding the relationship between these layers is important. Changing only CSS can alter the main view, but minimaps, EasyView, export analysis, automatic classification, and similar capabilities rely more on data fields and effective styles.

1. Root Node and CSS Variables

The graph root node class is:

.relation-graph

Framework components write part of RGOptions to inline CSS variables on the root node:

CSS variable	Source option	Default	Effect
--rg-background-color	options.backgroundColor	transparent	Background color of .rg-map.
--rg-checked-item-bg-color	options.checkedItemBackgroundColor	CSS default rgba(150,150,150,0.2)	Checked node halo, checked line hit area, and similar highlights.
--rg-node-color	options.defaultNodeColor	#ffffff	Default node background color.
--rg-node-border-color	options.defaultNodeBorderColor	#666666	Default node border color.
--rg-node-border-width	options.defaultNodeBorderWidth + 'px'	1px	Default node border width.
--rg-node-border-radius	options.defaultNodeBorderRadius + 'px'	4px	Default rectangular node border radius.
--rg-line-color	options.defaultLineColor	#cccccc	Default line color.
--rg-line-width	options.defaultLineWidth + 'px'	2px	Default line width.

SCSS also defines a set of base variables:

CSS variable	Default	Description
--rg-node-opacity	1	Overall node opacity.
--rg-node-font-size	1rem	Node text font size.
--rg-node-font-color	#000000	Node text color.
--rg-node-width	fit-content	Default node DOM width.
--rg-node-height	fit-content	Default node DOM height.
--rg-node-text-px	10px	Default horizontal padding for node text.
--rg-node-text-py	3px	Default vertical padding for node text.
--rg-line-fontcolor	var(--rg-line-color, #666666)	Line text color.
--rg-line-fontsize	12px	Line text font size.
--rg-line-opacity	1	Line opacity.
--rg-checked-line-text-bg-color	rgb(234, 232, 232)	Checked line text background.

You can override them under an outer namespace:

.my-graph .relation-graph {
  --rg-node-font-size: 13px;
  --rg-node-text-px: 12px;
  --rg-line-fontsize: 11px;
  --rg-checked-line-text-bg-color: #e0f2fe;
}

2. From Data Fields to CSS Variables

Final node rendering combines:

1. Node fields: node.color, node.borderColor, node.borderWidth, node.borderRadius, node.opacity, node.fontColor, node.fontSize, node.width, node.height, node.zIndex.
2. Global defaults: defaultNodeColor, defaultNodeBorderColor, and similar options.
3. CSS variables and DOM classes.

Final line rendering combines:

1. Line fields: line.color, line.lineWidth, line.opacity, line.fontColor, line.fontSize, line.dashType, line.animation.
2. Global defaults: defaultLineColor, defaultLineWidth, defaultLineTextOffsetX, and similar options.
3. CSS variables, SVG markers, and path class names.

Recommended principles:

• Put core semantic colors, widths, and shapes in node/line data.
• Put global baselines in RGOptions.
• Put theme refinements and state effects in CSS.

Not recommended:

/* Not recommended as the only source */
.my-node-card {
  background: red;
}

.relation-graph .rg-line {
  stroke: red;
}

If this is the only styling source, the main view may change, but the minimap, EasyView, style analysis, and export semantics may still treat the node/line as using default colors.

3. DOM Hierarchy

Simplified hierarchy:

.relation-graph
  .rg-map
    .rg-map-background
    .rg-map-canvas
      .rg-canvas-behind
        .rg-canvas-slot.rg-canvas-slot-behind
      .rg-lines-container
        svg.rg-lines-svg
          .rg-line-peel
            path.rg-line-bg
            path.rg-line
            text.rg-line-text
      .rg-linetext-container
        .rg-line-peel
          .rg-line-label
      .rg-nodes-container-wrapper
        .rg-nodes-container
          .rg-node-peel
            .rg-node
              .rg-node-text
      .rg-canvas-above
        .rg-canvas-slot.rg-canvas-slot-above
  .rg-graph-plugs
    .rg-view-slot

Layer meanings:

Layer	Description
.relation-graph	Root container. It carries global class names, CSS variables, focus, and keyboard events.
.rg-map	Viewport layer. It handles background, clipping, dragging, and wheel interactions.
.rg-map-canvas	Canvas coordinate layer. Pan and zoom transforms are applied to this layer.
.rg-canvas-behind	Lower canvas slot. It moves and scales with the canvas.
.rg-lines-container	SVG line path layer.
.rg-linetext-container	HTML line text layer.
.rg-nodes-container-wrapper	Node layer.
.rg-canvas-above	Upper canvas slot. It moves and scales with the canvas.
.rg-graph-plugs .rg-view-slot	Fixed view layer. It does not move or scale with the canvas.

4. Node Style Classes

Node DOM structure:

<div class="rg-node-peel rg-node-shape-1 rg-node-type-service">
  <div class="rg-node">
    <div class="rg-node-text">API Service</div>
  </div>
</div>

Core classes:

Class	Description
.rg-node-peel	Outer node positioning and state layer. transform, opacity, and z-index usually apply here.
.rg-node	Node visual body. Background, border, width, and height mainly apply here.
.rg-node-text	Default node text. It may be absent or structurally different when using a custom node slot.
.rg-node-shape-0	Circular node. The inner .rg-node uses border-radius: 50%.
.rg-node-shape-1	Rectangular node. The inner .rg-node uses --rg-node-border-radius.
.rg-node-type-{type}	Type class generated from node type, suitable for category themes.
node.className	Custom class name provided in node data.

State classes:

Class	Description
.rg-node-checked	Current checked node. The default style raises z-index and adds an outer shadow to .rg-node.
.rg-node-selected	Selected node. The default style shows an editing-colored outer ring.
.rg-node-dragging	Node currently being dragged. The source reserves this state class; you can customize the effect.
.rg-node-disable-events	Node events are disabled.
.rg-node-hover	Reserved hover-related class.

Recommended override pattern:

.my-graph .relation-graph .rg-node-peel.rg-node-type-service > .rg-node {
  font-weight: 600;
}

.my-graph .relation-graph .rg-node-peel.rg-node-checked > .rg-node {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.my-graph .relation-graph .rg-node-peel.node-error > .rg-node {
  border-color: #dc2626;
}

Also keep the core semantics in data:

{
  id: 'api',
  text: 'API',
  type: 'service',
  className: 'node-error',
  color: '#fef2f2',
  borderColor: '#dc2626'
}

5. Line Style Classes

Simplified line path DOM:

<g class="rg-line-peel rg-line-checked" data-id="line-a-b">
  <path class="rg-line-bg"></path>
  <path class="rg-line rg-line-dashtype-2 rg-line-anm-1"></path>
</g>

HTML text layer:

<div class="rg-line-peel" data-id="line-a-b">
  <div class="rg-line-label">Calls</div>
</div>

Core classes:

Class	Description
.rg-line-peel	Outer line state layer.
.rg-line	The actually visible SVG path. Color, width, and arrow markers apply here.
.rg-line-bg	Wider transparent hit area. Hover and checked highlights usually apply here.
.rg-line-text	SVG textPath text.
.rg-line-label	HTML line text label.
.rg-line-disable-events	Line events are disabled.
.rg-line-checked	Current checked line state.
.rg-line-selected	Selected line state. Reserved by the source.

Dash presets:

Class	Source	Effect
.rg-line-dashtype-1	line.dashType = 1	stroke-dasharray: 2, 2, 2
.rg-line-dashtype-2	line.dashType = 2	stroke-dasharray: 5, 5, 5
.rg-line-dashtype-3	line.dashType = 3	stroke-dasharray: 9, 9, 9
.rg-line-dashtype-4	line.dashType = 4	stroke-dasharray: 5, 5, 15

Animation presets:

Class	Source	Description
.rg-line-anm-1	line.animation = 1	Flowing dashed line, 10s linear loop.
.rg-line-anm-2	line.animation = 2	Dash offset animation, 3s loop.
.rg-line-anm-3	line.animation = 3	Opacity blinking animation, 1s loop.
.rg-line-anm-4	line.animation = 4	Line drawing-like animation, 3s loop.

Recommended override pattern:

.my-graph .relation-graph .rg-line-peel.line-warning .rg-line {
  filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.45));
}

.my-graph .relation-graph .rg-line-checked .rg-line-bg {
  stroke: rgba(37, 99, 235, 0.2);
}

.my-graph .relation-graph .rg-linetext-container .rg-line-label {
  border: 1px solid #e2e8f0;
  background: #ffffff;
}

Corresponding data:

{
  id: 'line-a-b',
  from: 'a',
  to: 'b',
  text: 'Warning path',
  className: 'line-warning',
  color: '#f59e0b',
  lineWidth: 3,
  dashType: 2,
  animation: 1
}

6. Canvas, Background, and Slot Layer Styles

Class	Layer	Description
.rg-map-background	Background layer	Container related to background slots/background capabilities.
.rg-canvas-slot	Canvas slot	Base class for all canvas slots.
.rg-canvas-slot-behind	Lower canvas layer	Default z-index is lower than nodes/lines.
.rg-canvas-slot-above	Upper canvas-above layer	Default z-index is higher than nodes/lines.
.rg-view-slot	View layer	Container for fixed view-layer content.

Notes:

• canvas and canvas-above are in the canvas coordinate system, so they move and scale with the canvas transform.
• view is in the viewport layer and does not follow the canvas transform.
• The background slot is at the bottom layer and is more suitable for watermarks, fixed backgrounds, or export backgrounds.

7. Editor-related Style Classes

Editing features use these classes:

Class	Description
.rg-editing-ctrl	Node editing controller outline.
.rg-editing-line-ctrl	Line editing controller.
.rg-editing-connect-ctrl	Node connection controller outline.
.rg-editing-bar	Base class for the toolbar near a node.
.rg-editing-bar-top/right/bottom/left/tl/tr/bl/br	Toolbar position classes.
.rg-connect-source-handle	Drag area for the connection source.
.rg-connect-target	Connectable target area.
.rg-connect-ctl-*	Directional control points on the connection controller.
.rg-selection	Selection rectangle.
.rg-miniview	Minimap.
.rg-toolbar	Toolbar.

Recommended:

.my-graph .relation-graph {
  --editor-main-color: #2563eb;
  --editor-light-color: #60a5fa;
  --editor-light2-color: #bfdbfe;
  --editor-light-opacity: rgba(37, 99, 235, 0.1);
}

It is better to scope editor class styles with an outer namespace to avoid affecting other graphs on the site.

8. Root Node State Classes

The root .relation-graph node adds classes according to runtime state:

Class	Source	Effect
.rg-creating-line	options.creatingLinePlot	Indicates that a line is being created. You can use it to change the cursor or show hints.
.rg-move-mode	options.dragEventAction === 'move'	The .rg-map cursor becomes grab.
.rg-enable-node-xy-animation	options.enableNodeXYAnimation	Enables a 150ms transition for .rg-node-peel position changes.
.rg-enable-canvas-animation	options.enableCanvasTransformAnimation	Enables a 0.5s transition for .rg-map-canvas transform. Editing controllers are briefly hidden.

Example:

.my-graph .relation-graph.rg-creating-line {
  cursor: crosshair;
}

9. Recommended Style Priority

Recommended order:

1. Set the default theme through RGOptions.
2. Set business differences through node/line data fields.
3. Use className or type for category styling.
4. Use outer-namespace CSS for the project theme.
5. Use slot-internal CSS for complex content layout.

Example:

const graphOptions = {
  defaultNodeColor: '#ffffff',
  defaultNodeBorderColor: '#cbd5e1',
  defaultLineColor: '#94a3b8',
  defaultLineWidth: 2
};

const node = {
  id: 'risk-node',
  text: 'High-risk Service',
  type: 'service',
  className: 'node-risk',
  color: '#fef2f2',
  borderColor: '#ef4444'
};

.my-graph .relation-graph .rg-node-peel.node-risk > .rg-node {
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.12);
}

This keeps the main view, minimap, export semantics, and custom visuals as consistent as possible.

10. Style Boundaries for Custom Node Slots

After using #node, the default node shell still exists, but the inner content is rendered by you.

Recommendations:

• Still set node.color, node.borderColor, node.width, and node.height.
• Let the slot content handle complex structure, such as icons, metrics, buttons, and status rows.
• If the slot content exceeds the default node width/height, explicitly set width/height to avoid layout and line intersection jitter caused by delayed measurement.

Not recommended:

• Fully depending on the inner card’s width/height without telling node data its actual size.
• Stopping events on internal buttons and forgetting to handle node selection/dragging relationships.

11. Style Boundaries for Custom Line Slots

After using #line, you can fully customize paths and text. Still, it is recommended to:

• Use line.color and line.lineWidth to express core line semantics.
• Use graphInstance.generateLinePath(lineConfig) to obtain path information.
• Forward click/hover events to unified logic, so default interactions and custom interactions do not diverge.
• Use line.className or line.animation as data-layer markers for complex animations.

12. FAQ

Why did CSS change the main graph but not the minimap?

The minimap is mainly drawn from node/line data fields. It does not fully parse all CSS written for the DOM. Core colors, widths, and shapes should be written into data fields or RGOptions.

Why cannot I override the checked node style?

The default checked style applies to:

.rg-node-peel.rg-node-checked > .rg-node

Your selector needs enough priority, and it is better to add an outer namespace:

.my-graph .relation-graph .rg-node-peel.rg-node-checked > .rg-node {
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25);
}

Why are there two DOM structures for line text?

relation-graph supports two line text modes:

• HTML label: .rg-line-label, suitable for normal horizontal text and complex styling.
• SVG textPath: .rg-line-text, suitable for text following a path.

This is decided by line.useTextOnPath or options.defaultLineTextOnPath.

Why is the click area thicker than the visible line?

.rg-line-bg is a transparent hit area. Its default width is lineWidth + 6px, which makes thin lines easier to click. To disable line events, use line.disablePointEvent or options.disableLinePointEvent.

13. Next Reading

• Global Graph Options
• Node Data Model
• Line Data Model
• Slot System Overview
• Custom Nodes
• Custom Lines