organigram

Declaratively generate visual child-parent relationships in an organised tree-shape diagram.

Install

npm install organigram

create this:

like this:

import Organigram from 'organigram'

const
  blueElement = <div className={'blue'} />,
  yellowElement = <div className={'yellow'} />,
  redElement = <div className={'red'} />,
  greenElement = <div className={'green'} />

const organisationalDiagram = (
  <Organigram element={blueElement}>
    <Organigram element={yellowElement} />
    <Organigram element={yellowElement} />
    <Organigram element={yellowElement}>
      <Organigram element={redElement}>
        <Organigram element={greenElement} />
        <Organigram element={greenElement} />
      </Organigram>
      <Organigram element={redElement} />
    </Organigram>
  </Organigram>
)

Declare a hierarchy by nesting Organigram elements into eachother and you get an organised diagram (tree-shape) that visually represents the parent-child relationship of your data/elements.

Organigram takes care of layout + linkage (white lines) while still leaving you with full control over what to render where in the generated tree.

Wording

Organigram is an abbreviated composition of the two words Organisational and Diagram.

Api

<Organigram />

prop	type	description
element	React.Node	The top level element you want to render for this particular node in your organigram
children	React.Node	The children of the node specified in element (semantic not technical, the rendered output is not nested into the element passed in the element prop)