Visão Geral do LogicFlow

O LogicFlow é uma ferramenta avançada para construção de diagramas de fluxo interativos, projetada para suportar cenários complexos de edição como modelos de fluxo de trabalho, diagramas UML e representações de entidade-relacionamento. Destaca-se por sua arquitetura extensível, permitindo personalização profunda de nós e integração de plugins para atender necessidades esppecíficas de sistemas empresariais.

Instalação e Conifguração Inicial

Para integrar o LogicFlow em um projeto, utilize gerenciadores de pacotes como npm ou yarn:

# Via npm
npm install @logicflow/core @logicflow/extension

# Via yarn
yarn add @logicflow/core @logicflow/extension

Exemplo Básico de Utilização

Configure um contêiner HTML e inicialize o editor com dados estruturados:

<div id="editor-area"></div>

<script type="module">
  import LogicFlow from '@logicflow/core';

  const grafico = {
    nodes: [
      { id: 'a1', type: 'rect', x: 200, y: 300, text: 'Processo A' },
      { id: 'b2', type: 'ellipse', x: 400, y: 300, text: 'Processo B' }
    ],
    edges: [
      { type: 'bezier', sourceNodeId: 'a1', targetNodeId: 'b2' }
    ]
  };

  const instancia = new LogicFlow({
    container: document.getElementById('editor-area'),
    width: 800,
    height: 500
  });
  instancia.render(grafico);
</script>

Casos de Uso Avançados

Diagrmaa de Aprovação

Implemente fluxos de aprovação utilizando extensões específicas:

<div id="aprovacao-area"></div>

<script type="module">
  import LogicFlow from '@logicflow/core';
  import { ApprovalPlugin } from '@logicflow/extension';

  LogicFlow.use(ApprovalPlugin);

  const fluxoAprovacao = {
    nodes: [
      { id: 'inicio', type: 'rect', x: 150, y: 150, text: 'Início' },
      { id: 'verificar', type: 'diamond', x: 350, y: 150, text: 'Verificação' },
      { id: 'final', type: 'rect', x: 550, y: 150, text: 'Conclusão' }
    ],
    edges: [
      { type: 'line', sourceNodeId: 'inicio', targetNodeId: 'verificar' },
      { type: 'line', sourceNodeId: 'verificar', targetNodeId: 'final' }
    ]
  };

  const editorAprovacao = new LogicFlow({
    container: document.getElementById('aprovacao-area'),
    width: 700,
    height: 400
  });
  editorAprovacao.render(fluxoAprovacao);
</script>

Personalização de Componentes

Adapte a aparência e comportamento dos elementos do diagrama:

<div id="personalizado-area"></div>

<script type="module">
  import LogicFlow from '@logicflow/core';

  const editorCustomizado = new LogicFlow({
    container: document.getElementById('personalizado-area'),
    width: 600,
    height: 500
  });

  editorCustomizado.register({
    type: 'no-especial',
    model: {
      getTextStyle() {
        return { fill: '#333', fontSize: 14 };
      }
    },
    view: {}
  });

  const dadosPersonalizados = {
    nodes: [
      { id: 'x1', type: 'no-especial', x: 200, y: 200, text: 'Elemento Customizado' }
    ],
    edges: []
  };

  editorCustomizado.render(dadosPersonalizados);
</script>