# Dependency map

> What a service relies on, and what is failing. Sample data: clients, runtime, five models and four tools, Orion XL degraded at P95 7.9 s.

- Type 115 · Flow between steps
- Component: `<DependencyMap>`, the same name as the Figma component
- Install: `npx shadcn add @chartory/dependency-map` (Code and Complete plans)
- Type page: https://usechartory.com/charts/dependency-map

## Installation

1. **Set up the registry once.** Your token in .env and @chartory in components.json. Skip this when another chart is already installed. [Installation guide](https://usechartory.com/docs/installation)

2. **Add the chart.** One command adds the Dependency map component to your project.

```bash
npx shadcn add @chartory/dependency-map
```

3. **Use it.** Pass your rows. The props are the Figma properties.

usage.tsx:

```tsx
import { DependencyMap }
  from "@/components/chartory/dependency-map"

<DependencyMap
  data={platformHealth}
  size="m"
  legend
/>
```

## Props

### `<DependencyMap>`

Every prop but data is a Figma property with the same name and values.

| Prop | Type | Default | Note |
| --- | --- | --- | --- |
| data | DependencyMapData | Required | The chart's data. The tables below list every field. |
| size | "xs" \| "s" \| "m" \| "l" | "m" | The size class. Each one is laid out again from the data. |
| legend | boolean | true | Shows the legend row under the plot. |

### DependencyMapData

The data prop: one object for the whole chart.

| Prop | Type | Default | Note |
| --- | --- | --- | --- |
| chain | DependencyMapChain[] | Required | One entry per link of the chain. |
| groups | DependencyMapGroup[] | Required | One entry per group. |

### DependencyMapChain

One object per entry in chain.

| Prop | Type | Default | Note |
| --- | --- | --- | --- |
| label | string | Required | The name shown on the chart. |
| sub? | string | — | The second line under the label. |
| tone | "ok" \| "warn" \| "bad" | Required | The tone of the mark (a colour token). |

### DependencyMapGroup

One object per entry in groups.

| Prop | Type | Default | Note |
| --- | --- | --- | --- |
| label | string | Required | The name shown on the chart. |
| nodes | DependencyMapNode[] | Required | One entry per node. |

### DependencyMapNode

One object per entry in groups.nodes.

| Prop | Type | Default | Note |
| --- | --- | --- | --- |
| label | string | Required | The name shown on the chart. |
| sub? | string | — | The second line under the label. |
| tone | "ok" \| "warn" \| "bad" | Required | The tone of the mark (a colour token). |
| w | number | Required | The link's weight: sets its line width. |

## Dependency map: a React and Figma chart in four sizes

### What does a dependency map show?

A dependency map lays out clients, runtime, models and tools in columns with lines for traffic between them, and colours each by health. A degraded part and everything that uses it show at once. Use it for AI platforms and service maps.

Chartory ships it as a Figma component and a React component with the same name. The code installs from the shadcn registry with one command and lands in your project as a file you own.

### What is the Dependency map component?

It is one **<DependencyMap>** component. Its props are the Figma properties with the same names and values, and the props table above lists them. The data is services in layers, links, health.

Sizes **XS**, **S**, **M** and **L** re-lay the chart out from the data instead of scaling it, so labels stay readable at every size.

### When should I use it?

- **Is health the point?** Yes means the dependency map fits.
- **Are there layers?** Yes means the dependency map fits.
- **Is it now, not over time?** Yes means the dependency map fits.

### When does another type fit better?

- **Plain links and amounts.** Use Network instead.
- **One key and its reach.** Use Reach tree instead.
- **Uptime over weeks.** Use Uptime bars instead.

## Dependency map questions

### Does the Dependency map chart work with shadcn/ui?

Yes. It installs through the shadcn registry with the shadcn CLI, and the file lands in your project.

### How do I install it?

Add your token and the @chartory registry once, then run npx shadcn add @chartory/dependency-map. The Installation guide has the steps.

### Can my coding agent install it?

Yes. Connect the Chartory MCP server and ask for the dependency map chart; the agent runs the same command and you review the diff.

### What data does it expect?

Services in layers, links, health. The sample data comes with the component, and the props table lists every field.

### Which sizes does it ship in?

XS, S, M and L, in Figma and in code. Each size is laid out again from the data, so text and lines keep their size.

### Is it in the Figma file too?

Yes. chart/115-dependency-map has the same properties as the component.

### Does it follow light and dark mode?

Yes. Every paint is a token, so the chart follows light and dark mode and the collection you pick.

### Which plan has the code?

Code and Complete. Figma has the Figma file only.