JavaScript is required
relation-graph Relational Data Visualization and Editing
Sign in 中文 GitHub

Styling Logic

relation-graph uses a CSS-variable + class-based styling system.

This design allows both:

  • global style defaults
  • per-node/per-line overrides

while keeping rendering features (including minimap) consistent.

1. Core Styling Entry

The root graph element is .relation-graph.

Global CSS variables are defined on it, such as:

  • --rg-background-color
  • --rg-node-color, --rg-node-border-color, --rg-node-border-width, --rg-node-border-radius
  • --rg-node-font-color, --rg-node-font-size
  • --rg-line-color, --rg-line-width, --rg-line-fontcolor, --rg-line-fontsize
  • --rg-checked-item-bg-color

These variables are consumed by node/line DOM structures and state classes.

2. DOM Layer Structure (Conceptual)

Main canvas/view layers:

  • .rg-map
  • .rg-canvas-behind (canvas slot behind graph items)
  • .rg-map-canvas (nodes + lines)
  • .rg-canvas-above (canvas-above slot)

Core containers:

  • nodes in .rg-nodes-container
  • lines in .rg-lines-container
  • line text in .rg-linetext-container

3. Node Styling Pipeline

Node host and content classes:

  • .rg-node-peel (state + vars host)
  • .rg-node (visual body)
  • .rg-node-text (label)

State classes:

  • .rg-node-checked
  • .rg-node-selected
  • .rg-node-dragging

Typical override points:

.my-graph .relation-graph .rg-node-peel .rg-node {
  border-radius: 10px;
}

.my-graph .relation-graph .rg-node-peel.rg-node-checked > .rg-node {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

4. Line Styling Pipeline

Line classes:

  • .rg-line-peel
  • .rg-line (actual stroke)
  • .rg-line-bg (wider hit area)
  • .rg-line-label (line text)

State classes:

  • .rg-line-checked

Typical override points:

.my-graph .relation-graph .rg-line-peel .rg-line {
  stroke-dasharray: 8 4;
}

.my-graph .relation-graph .rg-linetext-container .rg-line-label {
  font-weight: 600;
}

5. Editor and View-Level Components

View-related classes include:

  • .rg-editing-ctrl, .rg-editing-connect-ctrl
  • .rg-selection
  • .rg-miniview
  • .rg-toolbar

Use these for toolbar/minimap/selection styling consistency with your design system.

6. Critical Best Practice

Do not rely only on slot-local CSS to define node background/border and line color/width.

Recommended source of truth:

  • Node visual core: node.color, node.borderColor, node.borderWidth, node.borderRadius or graph defaults.
  • Line visual core: line.color, line.lineWidth or graph defaults.

Reason:

  • relation-graph and built-in features like RGMiniView use these data-driven style values and CSS variables for consistent rendering.

7. Practical Strategy

  1. Define baseline via RGOptions defaults.
  2. Override special items via node/line data fields.
  3. Add project theme polish with higher-specificity CSS selectors.
  4. Keep state styles (checked/selected/dragging) explicit and consistent.

8. Next Reading