Org charts

The orgchart header (alias org) lays out a strict hierarchy. Each parent is centred over the horizontal span of its direct reports, joined by classic elbow bracket connectors with no arrowheads: the reporting-tree look.

orgchart
CEO -> CTO
CEO -> CFO
CTO -> Platform
CTO -> Product
CFO -> Finance
DiagramPlatformProductCTOFinanceCFOCEO
Every edge is a reports-to line; the layout centres each manager over their reports.

Building the tree#

An org chart is just edges: Manager -> Report. Fan-out puts several reports under one manager on a single line.

orgchart
CEO -> VP Eng, VP Sales, VP Ops
VP Eng -> Backend, Frontend, Mobile
VP Sales -> Enterprise, SMB
VP Ops -> People, Finance
DiagramBackendFrontendMobileVP EngEnterpriseSMBVP SalesPeopleFinanceVP OpsCEO
Fan-out gives a manager several reports in one statement.

Styling roles#

Nodes still take attributes, so you can colour a department, add an icon, or attach a photo-like avatar glyph.

orgchart
CEO [user, violet] -> CTO [user, blue]
CEO -> COO [user, blue]
CTO -> Engineering [green]
CTO -> Design [green]
COO -> Support [orange]
COO -> Success [orange]
DiagramEngineeringDesignCTOSupportSuccessCOOCEO
Colour by function and mark people with the user glyph.

A product organisation with icons per discipline and coloured pillars.

orgchart
title: Product org

Founder [user] -> Head of Product [user, violet]
Founder -> Head of Eng [user, blue]
Founder -> Head of GTM [user, green]

Head of Product -> PM Growth
Head of Product -> PM Core
Head of Eng -> Web [blue]
Head of Eng -> Platform [blue]
Head of Eng -> Data [blue]
Head of GTM -> Marketing [green]
Head of GTM -> Sales [green]
Product orgPM GrowthPM CoreHead of ProductWebPlatformDataHead of EngMarketingSalesHead of GTMFounder
Every diagram on these pages is compiled live from the code above it, through the same pipeline the app uses. Open the canvas to try it.