organigram v1.0.2

organigram

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

Install

npm install organigram

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 />