> For the complete documentation index, see [llms.txt](https://docs.ins-pi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ins-pi.com/models/work-in-the-app/editor/relationships.md).

# 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="https://2110136944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOS5XKTz5WlrX4s5rESlH%2Fuploads%2FBHIcWOjWiRpZlN7JwTy6%2FScreenshot%202026-04-27%20at%2009.51.53.png?alt=media&amp;token=e9938ded-5400-4119-9da3-634b3b2f1fd8" 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="https://2110136944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOS5XKTz5WlrX4s5rESlH%2Fuploads%2FLPy4PlMG6WpukaizPP77%2FScreenshot%202026-04-27%20at%2009.54.56.png?alt=media&amp;token=fcfa5d34-c587-40a5-9ab9-482aff79d458" 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

### Arrowheads

Two separate controls style each end of the line independently:

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

Clicking either opens the arrowhead popover:

<figure><img src="https://2110136944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOS5XKTz5WlrX4s5rESlH%2Fuploads%2Fgit-blob-3bdb44e46f036d69ceb85bf86a6ba140c91db32d%2Fv26.1-arrowheads.gif?alt=media" alt=""><figcaption><p>Pick a shape, set the size, switch the fill off for a hollow arrowhead</p></figcaption></figure>

| Control        | What it does                                                                                                                                                                                                                                    |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Shape grid** | Pick the arrowhead: **Block**, **Circle**, **Diamond**, **Feather**, **Fork**, **Triangle**, **Line**, **Boomerang**, **X**, **Slash**, compound shapes such as **CircleFork** and **LineFork**, the UML **Collection** connector, or **None**. |
| **Size**       | A factor relative to the line thickness, from 25% to 300%. Thicker lines get proportionally larger arrowheads.                                                                                                                                  |
| **Border**     | The outline colour of the arrowhead. Defaults to the line colour.                                                                                                                                                                               |
| **Fill**       | Shown for closed shapes only. Switch it off for a hollow arrowhead, or pick a fill colour that differs from the line.                                                                                                                           |

Filled and outlined variants of the same shape are therefore one shape with the fill toggled, so existing boards keep their look.

### 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

## Links on Relationships

Data-bound relationships (CI relationships and related-list connections) have their own **Links** tab in the [Data Panel](/models/work-in-the-app/editor/data-inspector.md), just like shapes. A **Form** link to the relationship's ServiceNow record is there by default; relationships without a form link show an **Add Link** button. The toolbar's link button opens the same form directly. See [Shape Links](/models/work-in-the-app/editor/shape-links.md).

## 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.