# Relationships

In YouDesign Models, connections between elements are called **Dependencies**. Dependencies can represent visual guides, CMDB relationships, reference fields, hierarchies, or related lists — and each one carries real meaning back to the underlying ServiceNow data model.

[Watch: Relationships in YouDesign Models](https://www.youtube.com/watch?v=xhfQ04L8r_Q)

## Relationship Types

| Type             | Symbol | Description                                                                   |
| ---------------- | :----: | ----------------------------------------------------------------------------- |
| **Visual**       |   n/a  | Visual-only guides between shapes. No data or logic; not saved to ServiceNow. |
| **Relationship** |    ⇆   | CMDB CI-to-CI relationship (`cmdb_rel_ci`). Used for Configuration Items.     |
| **Reference**    |    ⟶   | One-to-many link via a Reference or Document ID field.                        |
| **Hierarchy**    |    ↳   | Parent/child relationship via a self-referencing field (e.g., `parent`).      |
| **Related List** |   𝍌   | Many-to-many relationship, navigable from both sides.                         |

## Creating Dependencies

### The Click-and-Drag Method

1. **Select a shape** — connectors appear on its edges.
2. **Click and drag** a connector outward to a target shape.
3. **Drop** on the target using one of two modes below.

**Floating connector** — drag near the center of the target until a **green outline** appears around the whole shape. The link will attach to whichever edge is nearest as the shape moves.

**Anchored connector** — drag onto a specific **diamond-shaped anchor** on the target's edge. The link stays pinned to that anchor even when the shape moves.

> **Not every shape accepts relationships.** If no connectors appear, the shape type doesn't support outbound links.

### Quickdrop

For the fastest creation: drag one Data Hub element directly onto another. A prompt lets you pick which type of relationship to create.

## The Relationship Toolbar

Selecting a dependency opens a toolbar dedicated to styling it:

<figure><img src="/files/aFIumcmrFzg6rQohxhr3" alt=""><figcaption></figcaption></figure>

### Line Type

The **Line Type Selection** tool gives you four routing styles:

* **Straight** — direct line between endpoints
* **Orthogonal** — 90° turns following the shortest grid path
* **Curved** — smooth arc
* **Avoids Nodes** — routes around other shapes on the canvas (recomputes when shapes move; can affect performance with many links)

<figure><img src="/files/FUYJMKaplHzHLHmtkWD8" alt=""><figcaption></figcaption></figure>

Plus three stroke patterns (selectable alongside line type):

* **Normal** (solid)
* **Dashed**
* **Dotted**

### Thickness

A slider labeled **Thickness** (range **1–10**, step 1) sets the line weight.

### Corner Radius

For **Orthogonal** and **Avoids Nodes** routes only, a **Corner Radius** slider (0–100, step 10) rounds the corners where the line changes direction.

### Color

* **Color** — extended color picker with palette + custom values (HEX, RGB, HSL)
* **Opacity** — slider from 0 to 1 (step 0.1) for transparency

### Arrow Endpoints

Two separate controls set the arrow/shape at each end of the line:

* **Line Start** — the arrow on the "from" end
* **Line End** — the arrow on the "to" end

Over 90 arrow variants are available, including: **Block**, **Circle**, **Diamond**, **Feather**, **Fork**, **Triangle** (open / filled / outlined), **Line**, **Boomerang**, **X**, **Slash**, **Kite**, and many compound shapes (e.g., **CircleFork**, **CircleLineFork**, **LineFork**). **None** / blank is also supported for either end.

### Flip Direction

The **Flip Direction** tool swaps the two endpoints in a single click:

* Swaps `from` ↔ `to` nodes
* Swaps the Line Start arrow with the Line End arrow (with auto-reversal mapping)
* Reverses any custom routing points

Use this when you realize a dependency is pointing the wrong way.

### Text on Relationships

Add a text label with the **Text** tool. Formatting options mirror shape text:

* **Font** — font family dropdown
* **Font Size** — preset sizes, custom value, or up/down arrows
* **Font Style** — Bold / Italic / Underline / Strikethrough
* **Text Color** — extended color picker
* **Text Background & Opacity** — highlight color behind the text, with opacity slider

### Text Position

The **Text Position** tool controls where on the line the label sits and how it's oriented:

**Horizontal**

* **Left** (placed at \~20% along the line)
* **Center** (50%)
* **Right** (80%)

**Vertical**

* **Top** (above the line, −15 px)
* **Middle** (on the line)
* **Bottom** (below the line, +15 px)

**Orientation**

* **On The Line** — text stays horizontal regardless of the line angle
* **Follow The Line** — text rotates to match the line's angle or curve

### Lock & More Options

* **Lock** — prevents accidental edits to the relationship
* **More Options** — copy link URL, bring to front / send to back, delete

## Current State vs. Future State

| State             | Meaning                                                                                               |
| ----------------- | ----------------------------------------------------------------------------------------------------- |
| **Current State** | Dependencies that already exist in ServiceNow.                                                        |
| **Future State**  | Proposed dependencies in YouDesign Models. They must be committed (or approved) before becoming live. |

Future-state relationships can be committed via the [Commit](/models/work-in-the-app/editor/commit.md) workflow.

## Related

* [Shapes](/models/work-in-the-app/editor/shapes.md) — the endpoints of every relationship
* [Text Formatting](/models/work-in-the-app/editor/text-formatting.md) — the parallel text-styling options for shape text
* [Load Dependencies](/models/work-in-the-app/editor/load-dependencies.md) — bulk-load relationships around a shape
* [Commit](/models/work-in-the-app/editor/commit.md) — committing future-state relationships to ServiceNow


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ins-pi.com/models/work-in-the-app/editor/relationships.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.