DemoOrg chart

Organization Chart

The worksheet is the source of truth: people, photos, roles, departments and managers. JointJS lays out the chart from it. Edit a cell and the chart follows; drag a card onto another card to change the manager, and the sheet follows, with undo.

How it works

• The cards are HTML inside SVG foreignObject elements, so the photo, the name, the role and the department stripe are plain CSS.
• The Photo column is an image column, the Department a coloured dropdown, and the Manager a dropdown whose values are the person ids, so renaming someone needs no other change.
• filterOptions removes a person and their reports from the manager choices, and onbeforechanges refuses a pasted loop.
• Dropping a card on another one calls setValueFromCoords: the change goes through the sheet, so it redraws the chart and undo restores it.
• Clicking a card selects the row, and selecting a row highlights the card.

The diagrams use JointJS (MPL 2.0) with its directed graph layout.