root@construct:~/open-source/isoplan$
<-- voltar para /open-source
isoplan

isoplan

Componente React que desenha qualquer arquitetura de sistema como uma planta isométrica, com fluxos animados em cada ligação.

>O que é

Você descreve zonas, peças e ligações como dados simples. O isoplan monta as zonas como lajes empilhadas, põe um prédio isométrico em cada peça conforme o tipo e anima o caminho de cada ligação. Passe o mouse ou foque uma peça e ela acende junto com as ligações e as peças com que conversa.

Tirei o isoplan das páginas de case deste site, onde ele desenha a arquitetura de cada projeto. Além do componente React, ele tem um núcleo sem framework que devolve o SVG como texto, então dá para renderizar no servidor ou fora do React.

Serve para quem escreve documentação, case ou post técnico e quer mostrar uma arquitetura sem desenhar à mão. No playground você cola o seu grafo e copia o SVG.

>Como começar

Ainda não está no npm (em breve). Por enquanto, instale a partir do repositório:

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

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

>Créditos

  • >Licença MIT.
Agendar diagnóstico · R$ 500Planos