downrunner

OrgChart

Interactive org charts directly in your Markdown with options to edit the chart data and show or hide the Markdown.

Open the optional editor below and edit the people or reporting structure. Then, click on the chart. Double-click/tap on a node to expand/contract the node. Mouseover Jim to see additional detail (tap and hold for mobile).

{
	org: [
		{name: Mike, title: 'The President'},
		{name: Jim, manager: Mike, title: 'Vice President', tooltip: 'interim'},
		{name: Alice, manager: Mike},
		{name: Bob,  manager: Jim},
		{name: Carol, manager: Bob}
	],
	options: {
		title: NewCo,
		format: '${name}<div style=\'color:red; font-style:italic\'>${title}</div>'
	}
}

Below is the source:

Note the require="orgchart" attribute. For each type of display, e.g. chart, question, etc. there is a named require.

If you can remember the order of the people data in the chart, name, manager, title, tooltip and awlays provide values for the first three, you can use a shorthand method to specify them using [] instead of {}. This is useful for large org charts.

{
	org: [
		[Mike, 'The President'],
		[Jim, Mike, 'Vice President', 'interim'],
		[Alice, Mike],
		[Bob,  Jim],
		[Carol, Bob]
	],
	options: {
		title: NewCo,
		format: '${name}<div style=\'color:red; font-style:italic\'>${title}</div>'
	}
}