root@construct:~/open-source/isoplan$
<-- back to /open-source
isoplan

isoplan

A React component that renders any system architecture as an isometric floor plan, with animated flows along every link.

>What it is

You describe zones, nodes and edges as plain data. isoplan lays the zones out as stacked slabs, puts an isometric building on each node by its kind and animates the path along every link. Hover or focus a piece and it lights up with its links and the pieces it talks to.

I extracted isoplan from the case pages on this site, where it draws the architecture of each project. Besides the React component, it has a framework-free core that returns the SVG as a string, so you can render it on the server or outside React.

It is for anyone writing docs, a case study or a technical post who wants to show an architecture without drawing it by hand. In the playground you paste your graph and copy the SVG.

>Quick start

Not on npm yet (coming soon). For now, install it from the repository:

git clone https://github.com/kayossouza/isoplan.git
cd isoplan && npm install && npm run build && npm pack
cd ../your-app && npm install ../isoplan/isoplan-0.1.0.tgz
import { IsoPlan } from 'isoplan';
import 'isoplan/styles.css';

<IsoPlan graph={graph} title="Architecture" />

>Credits

  • >MIT license.
Book a diagnosis · R$ 500Plans