# Workflow network
> Read-only process diagram of step cards joined by measured connectors, with decision, human and result kinds, that wraps by width and follows the reading direction.
Source: https://docs.nasaqui.com/components/workflow-network
## Install
```bash
npx shadcn@latest add https://docs.nasaqui.com/r/workflow-network.json
```
A process explained as cards joined by connectors: who does what, where a decision branches, where it ends. It is for showing a workflow, not editing one, so it is light (no graph library), prints well and reads right to left in Arabic. Use it in documentation, onboarding, approval explainers and presentations.
## When to use
- Explaining how a process works to the people who take part in it.
- A workflow summary next to a run or a policy.
## When not to use
- Building or configuring a workflow: use [`WorkflowCanvas`](https://docs.nasaqui.com/components/workflow-canvas).
- A strictly linear list of steps to walk through: use [`Stepper`](https://docs.nasaqui.com/components/stepper).
## Import
```tsx
import { WorkflowNetwork } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```
## Quick start
```tsx
import { WorkflowNetwork } from "@fadymondy/nasaq/web";
export function Refunds() {
return (
);
}
```
## Anatomy
```
WorkflowNetwork data-slot="workflow-network"
├─ heading, caption
├─ svg connectors (aria-hidden), arrowheads, optional draw-in
├─ rows flex rows of cards, wrapped and balanced
│ └─ card data-step="id" data-kind="decision"