Organization chart export

What it does

Saves the visible (expanded) part of an Organization Chart as a standalone SVG document or a PNG image. A separate subpath, so charts that never export do not ship it (as chart-export for charts, engineering decision 29).

Behavior

• The whole visible chart is exported at 100 % regardless of the current pan and zoom; collapsed teams are not included.
• Colors, fonts, radii, and border widths are read from the rendered cards, connectors, and theme custom properties, and written as presentation attributes: the file needs no stylesheet and contains no class or style attributes.
• The highlighted path (reveal()) is exported with thicker, accent-colored borders and connectors.
• Cards are redrawn with the node’s label and title (shortened with an ellipsis to fit); custom renderNode content is not exported.
• Nothing is uploaded; PNG rasterizing loads the SVG from a blob: URL, so pages with a CSP need img-src blob:.

Errors

Code	Cause
ORG_CHART_EXPORT_OPTIONS	Invalid title, background, scale, format, or fileName (empty or with path separators); a chart that is not connected.
ORG_CHART_EXPORT_UNAVAILABLE	No window, or Canvas 2D is not available (PNG).
ORG_CHART_EXPORT_FAILED	The browser could not encode the PNG.

Example

import { OrgChart } from '@absoluteui/components/org-chart';
import { downloadOrgChart, orgChartToSvg } from '@absoluteui/components/org-chart-export';

const host = document.createElement('div');
document.body.append(host);
const chart = OrgChart.create(host, { label: 'Company', nodes: [{ id: 'ceo', parentId: null, label: 'Ada Lovelace', title: 'CEO' }] });
const svg = orgChartToSvg(chart, { background: 'transparent' });
void downloadOrgChart(chart, { format: 'png', fileName: 'company', scale: 3 });

API reference

Functions

downloadOrgChart

Export and save the organization chart as a file (<a download>).

function downloadOrgChart(chart: OrgChart, options: OrgChartDownloadOptions): Promise<void>;

orgChartToPng

Rasterize the visible organization chart to a PNG Blob (needs img-src blob: under a CSP).

function orgChartToPng(chart: OrgChart, options?: OrgChartExportOptions): Promise<Blob>;

orgChartToSvg

Serialize the visible organization chart to a standalone SVG document string.

function orgChartToSvg(chart: OrgChart, options?: OrgChartExportOptions): string;

Interfaces

OrgChartDownloadOptions

interface OrgChartDownloadOptions extends OrgChartExportOptions {
  format: OrgChartExportFormat;
  fileName: string;
}

OrgChartExportOptions

interface OrgChartExportOptions {
  title?: boolean;
  background?: 'surface' | 'transparent';
  scale?: number;
}

Types

OrgChartExportFormat

type OrgChartExportFormat = 'svg' | 'png';