Style Rules

Overview

Style Rules let you customize how vertices and edges appear on the graph canvas. Instead of viewing a uniform wall of identical nodes and lines, you can create conditional rules based on property values to assign colors, sizes, labels, and opacity. This makes graph visualization styling intuitive and powerful, helping you spot patterns, anomalies, and relationships at a glance.

Rules are evaluated in real time as query results render on the canvas, so your visual theme updates immediately when you add or modify a rule.

Creating a Style Rule

1. Open the Styles panel from the sidebar
2. Click + New Rule
3. Configure the rule:
   • Target — Vertex or Edge
   • Condition — Property name, operator, and comparison value
   • Style — Color, size, label template, opacity
4. Click Save

The rule takes effect immediately on the current graph. You can toggle individual rules on or off without deleting them.

Conditions

Each rule includes a condition that determines which vertices or edges it applies to. Conditions are property-based: they check the value of a specific property on each graph element and evaluate it against the operator and value you provide.

Supported Operators

Operator	Description	Example
Equals	Exact match against the property value	label equals "person"
Not Equals	Matches when the property does not equal the value	status not equals "archived"
Contains	Checks whether the property value includes a substring	name contains "admin"
Starts With	Matches when the property value begins with the given string	email starts with "support"
Greater Than	Numeric comparison for values above a threshold	weight greater than 5
Less Than	Numeric comparison for values below a threshold	age less than 18

Conditions operate on any property present in your graph data, including the built-in label and id properties as well as any custom properties you have defined in your graph schema.

Styling Properties

When a condition matches, the following style properties are applied to customize graph colors and visual appearance.

• Color — Accepts hex values (e.g., #37e0d0) or named colors (e.g., blue, red, green). Sets the fill color for vertices or the stroke color for edges.
• Size — Choose from preset sizes (small, medium, large) or enter a numeric pixel value for precise control. Larger sizes draw attention to important elements.
• Label Template — Controls the text displayed on or near the element. Use {property_name} syntax to insert dynamic values from the element’s properties. For example, {name} displays the value of the name property, and {label}: {city} would display something like person: Seattle.
• Opacity — A percentage from 0% (fully transparent) to 100% (fully opaque). Lower opacity dims elements so they recede into the background, letting more important nodes stand out.

Common Style Patterns

Here are practical patterns for creating effective graph database visual rules.

Color-Code Vertices by Type

Assign distinct colors to each vertex label so you can immediately distinguish entity types. For example, set persons to blue (#60a5fa), products to green (#4ade80), and orders to orange (#fb923c). This is the most common starting point for any style configuration.

Highlight High-Weight Edges

Create a rule targeting edges where weight is greater than a threshold value, then set the color to red and opacity to 100%. This is useful for anomaly detection in fraud graphs or identifying unusually strong relationships in social networks.

Dim Inactive or Archived Nodes

For vertices with a status property equal to "inactive" or "archived", set opacity to 20-30%. These nodes remain visible for context but fade into the background so active elements command attention.

Show Vertex Names as Labels

Set a label template of {name} on all vertices where the name property is not empty. This replaces generic vertex IDs with human-readable names directly on the canvas, making exploration far more productive.

Size Nodes by Importance

If your vertices have a property that reflects importance, such as a degree count, revenue value, or rank, use a Greater Than condition to create tiered sizing. For example, vertices with connections greater than 50 get size large, those greater than 10 get medium, and the rest stay at small.

Import and Export JSON Format

Style rule sets can be shared across team members using the import/export feature.

• Export — Click the export icon to download rules as a JSON file
• Import — Click the import icon to load a JSON rule set

The exported JSON file contains an array of rule objects. Here is an example of the structure:

[
  {
    "target": "vertex",
    "condition": {
      "property": "label",
      "operator": "equals",
      "value": "person"
    },
    "style": {
      "color": "#60a5fa",
      "size": "large",
      "labelTemplate": "{name}",
      "opacity": 100
    },
    "enabled": true
  },
  {
    "target": "edge",
    "condition": {
      "property": "weight",
      "operator": "greaterThan",
      "value": "10"
    },
    "style": {
      "color": "#f87171",
      "size": "medium",
      "labelTemplate": null,
      "opacity": 100
    },
    "enabled": true
  }
]

You can edit the JSON file directly in any text editor before importing it, which is convenient for bulk rule creation or for adapting a shared rule set to a slightly different schema.

Per-Connection Styles

Style rules are saved per connection profile. This means each database you connect to can have its own independent visual theme. When you switch between connection profiles, the graph canvas automatically applies the style rules associated with that profile. This is especially useful when working with multiple graph databases that have different schemas and property names.

Priority

When multiple rules match the same element, the last rule in the list wins. Drag rules to reorder their priority. Place general rules (like label-based coloring) at the top and specific rules (like anomaly highlighting) at the bottom so that specific overrides always take precedence.

Tips

• Start with labels, then refine. Begin by creating one color rule per vertex label to establish a baseline visual theme. Once you can see entity types clearly, add property-based conditions for finer detail.
• Use the Schema panel to discover properties. Open the Schema panel to see every vertex label, edge label, and property name in your database. This saves you from guessing property names when writing conditions.
• Toggle rules to compare views. Disable a rule temporarily to see the graph without it. This helps you judge whether a particular style adds clarity or clutter.
• Export before experimenting. If you have a working rule set, export it first. That way you can freely experiment and import the backup if you want to revert.