Diagram - Organization Chart

Map a sample staff directory to a reporting tree and arrange it deliberately.

#Refresh the directory, then arrange

Loading Demo...
  1. Find Alex with the searchable Employee field. The canvas selects Alex and opens Directory details with the saved role, manager and direct reports.
  2. Choose a manager or direct report in the panel to inspect that person. Show reporting context fits the selected person, their manager and their direct reports together.
  3. Drag Alex, then choose Refresh sample directory. The refresh changes Alex's role and reporting line between Design and Engineering while preserving local positions.
  4. Choose Arrange reporting lines to place the current tree. Change Direction to Down or Right, then arrange again.
  5. Use Undo to restore the previous arrangement or directory edit. Fit organization shows the complete chart.

Each card shows initials, name, role, team and the current direct-report count. For a shared parent stem and bus that follows reports during dragging, see Shared org chart buses. Directory details starts collapsed. Selecting a person opens it; its chevron closes it without clearing the selection, leaving a reopen icon at the canvas edge. The picker, manager links, report buttons and counts read the current saved graph, so they reflect refreshes and Undo.

At frame widths of 700px or less, open Controls for refresh, arrangement and other secondary commands; the employee picker, zoom and history stay visible. Use Expand workspace for more room. Escape closes it and returns focus to its expansion button; Tab stays within its visible controls. Framing on initial mount and entering or leaving the expanded workspace keeps a fitted selection or initial chart at 90% zoom or higher. If fitting would shrink it further, it uses 100% zoom and centers the selected person or the first employee. Explicit Fit commands still provide the full chart or reporting context.

Refresh and layout are separate operations. Refresh cancels any local arrangement before changing the data. Cancel arrangement releases a running layout request; if the small tree completes first, Undo restores its committed positions instead. Changing Direction invalidates the previous layout options. Status and diagnostics remain below the canvas.

#Usage

import { shallowRef } from 'vue';
import { Diagram } from '@primeui/vue-diagram';
import { DiagramLayout, treeDiagramLayout } from '@primeui/vue-diagram/layout';

const layout = shallowRef<InstanceType<typeof DiagramLayout> | null>(null);
<Diagram.Root :store="store" page-id="page">
    <DiagramLayout ref="layout" :diagram-layout="{}" :provider="treeDiagramLayout" />
    <button type="button" @click="layout?.run()">Arrange directory</button>
    <Diagram.NodeDef node-type="employee" v-slot="{ node }">
        <strong>{{ person(node)?.name }}</strong>
    </Diagram.NodeDef>
    <Diagram.Viewport label="Directory" style="height: 24rem" />
</Diagram.Root>

Map directory records with DiagramDataController using stable employee IDs. Saved connectors must form a directed forest before tree placement runs. The complete source supplies the person helper to read the mapped staff data.

This skeleton assumes an initialized store with page page. Use First Diagram for model creation, style imports and store disposal.

This example combines business-data refresh, local placement and tree layout. Seven sample people form a product team. Names and reporting lines come from a directory snapshot; the chart owns their positions. The example uses local data and makes no network request.

#Separate business data from placement

DiagramDataController maps stable employee business IDs through namespace staff. parentId plus hierarchy: 'connectors' creates manager-to-employee relationships; it does not put employees inside manager containers. Node data is stored under node.data.staff, where the custom employee template reads its name, role and team. Direct reports and the selected person's manager come from the current saved connectors, rather than a second copy of the directory hierarchy.

The mapping omits nodeFields, so initial bounds are creation-only. Later directory refreshes update mapped data and relationships while preserving user placement. treeDiagramLayout requires a directed forest: one parent per employee, with no cycle. A missing manager or invalid topology needs correction in the source data; the chart does not infer a valid reporting structure.

The initial seven-person arrangement is already authored. Layout runs only after the user asks. A committed arrangement changes positions in one history action. Undo affects the diagram; it does not undo changes in an external directory. A later refresh uses the next authoritative source snapshot again.

#Connect your directory

Replace the sample array with the application's complete source snapshot, retain stable IDs, and choose explicitly which fields the source owns. Use the controller's load/cancellation contract for asynchronous transport. The copied shell, canvas, history commands and directory sidebar still share one root.

The example removes its commit subscription and disposes its binding and Store on teardown. DiagramLayout owns its controller when the active Store/Session changes or the component unmounts; the host's request epoch prevents late completion feedback. No positions or directory changes are saved outside this example.

Copy OrganizationChartDemo.vue and every helper in its source tabs, including the editor frame, directory data, and export controls. Place the helpers under your @/ alias using the paths shown on the tabs. Copy the UI files referenced by the imports into your application. The workspace reads the current model and session through useDiagramContext(). The frame handles expansion, responsive controls, and camera framing under the existing root. These view changes leave model history intact.

Read Data Binding, Tree layouts, Layout execution, Drag and Drop and History for the smaller cases. The UI-parts reference explains the shell and sidebar composition.

Opening or closing a sidebar overlays the drawing without resizing or recentering it. Direct canvas selection and container resizing preserve your pan and zoom; use Fit explicitly when you want to frame the drawing again.