Modern typescript organisational chart in pure SVG.
Currently there is no documentation or API reference. Sorry for that. The documentation will be provided as soon as possible. Now I'm really busy with pure development of this component.
You can check the working DEMO example.
- Demo has a custom templates created in Adobe Illustrator - a green personal two-sided card
- Cards can be flipped horizontally by clicking the arrow in the right upper corner
- By cliking the node box you can expand/collapse child nodes if some
If you want to build it yourself use the steps below:
- Download the whole repo
- Install required packages and toolset
- install node packages first
npm install
- install JSPM, typings, gulp
npm install -g jspm typings gulp
- install gulp locally
npm install gulp
- install packages and DefinitelyTyped
jspm install typings install
- Run
gulp watch
orgulp serve
Enjoy!
Library supports a very useful feature, custom SVG string templates. You can create your own design in Adobe Illustrator or other vector tool, export your node box to SVG and after slight changes adopt it as a template to the OrgChart.svg.
I have ambitious plan, to support more complicated trees, where each node in tip-over subtree (those stacked) can have its own subtree. This is possible but not trivial.
Below you can find some example layouts created using OrgChart.svg.
Currently known problems regard performance and browsers support for SVG engine and Snap.svg library.