FlowGram.AI: um mecanismo de código aberto para a criação rápida de fluxos de trabalho nodais

Introdução geral

O Flowgram.ai é um mecanismo de criação de processos de código aberto desenvolvido pela ByteDance. Ele se baseia na edição de nós e ajuda os desenvolvedores a criar fluxos de trabalho rapidamente, oferecendo suporte aos modos de layout fixo e de fio livre. Escrito em TypeScript, o código do projeto está hospedado no GitHub, é de código aberto e gratuito, e foi atualizado pela última vez em 26 de março de 2025. O flowgram.ai oferece uma interface intuitiva e uma experiência interativa suave para projetar fluxos de trabalho visuais com entradas e saídas claras. Ele também planeja incorporar recursos de IA para aprimorar a inteligência de processos. Os usuários podem experimentá-lo on-line por meio da demonstração oficial ou instalá-lo localmente.

Lista de funções

• Editor de nósArraste e solte nós e conexões para criar fluxos de trabalho rapidamente.
• Suporte ao modo duploEdição de layout fixo e de link livre: Oferece edição de layout fixo e de link livre.
• experiência interativaSuporte a transições animadas, zoom por gestos, desfazer e refazer, etc.
• Potencial de IAPlano para integrar a IA para aprimorar a análise de inteligência de processos.
• Extensões de código abertoDivulgação do código e suporte para personalização pelo desenvolvedor.
• Opções de exportaçãoFluxos de trabalho: os fluxos de trabalho podem ser exportados como imagens ou código.

Usando a Ajuda

O Flowgram.ai é uma ferramenta de desenvolvedor que os usuários podem experimentar por meio de uma demonstração on-line ou instalar e executar localmente. Veja abaixo um guia detalhado sobre como usá-la.

Como começar

O Flowgram.ai oferece duas maneiras de usá-lo: demonstração on-line e instalação local.

Experiência on-line

1. Abra seu navegador e visite a demonstração oficial:
   • Layout fixo:https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html
   • Conexões gratuitas:https://flowgram.ai/examples/free-layout/free-feature-overview.html
2. Você pode operar diretamente na tela assim que entrar, sem necessidade de instalação.

instalação local

1. Preparação do ambiente::
   • Instale o Node.js 18+ e execute-o:nvm install lts/hydrogen, definir a versão padrão:nvm alias default lts/hydrogenComutação:nvm use lts/hydrogen.
   • Instalar dependências globais:npm i -g pnpm@9.12.0 @microsoft/rush@5.140.0.
2. armazém de clones::
   • Em execução:git clone git@github.com:bytedance/flowgram.ai.git.
3. Instalação de dependências::
   • Vá para a pasta:cd flowgram.ai.
   • Atualizar dependências:rush update.
4. Criar o projeto::
   • Em execução:rush build.
5. Executar a demonstração::
   • Documentação:rush dev:docs.
   • Demonstração de layout fixo:rush dev:demo-fixed-layout.
   • Demonstração de conexões gratuitas:rush dev:demo-free-layout.
6. Acessado em um navegador http://localhost(Porta confirmada pelo registro).

Instalação rápida via npx

• Em execução:npx @flowgram.ai/create-app@latest.
• Selecione Demo:
  • fixed-layoutPráticas recomendadas de layout fixo.
  • free-layoutPráticas recomendadas de layout gratuito.
  • fixed-layout-simpleLayout fixo: Uso básico do layout fixo.
  • free-layout-simpleLayout livre: Uso básico.

Instalação de módulos via npm

• Correção do editor de layout:npm install @flowgram.ai/fixed-layout-editor.
• Editor do Freelink:npm install @flowgram.ai/free-layout-editor.

Funções principais

Criação de fluxos de trabalho

• Ao entrar na interface de edição, a barra de ferramentas à esquerda exibe os tipos de nós (por exemplo, condicional, cíclico).
• Arraste o nó para a tela e clique duas vezes na entrada, por exemplo, "Start".
• Conecte os nós com setas para concluir o processo.

Modo de layout fixo

• Abra a demonstração de layout fixo ou execute fixed-layout.
• A posição do nó é fixa e permite arrastar e soltar para a posição especificada.
• Ramificações e loops podem ser adicionados, e o painel direito ajusta o estilo.

modo freewire

• Abra a demonstração do Free Link ou execute free-layout.
• Os nós podem ser posicionados arbitrariamente e as linhas de conexão são desenhadas livremente.
• Oferece suporte às funções de alinhamento automático de agrupamento e adsorção.

função interativa

• Arrastar o zoomZoom com dois dedos em um trackpad do Mac e pressione espaço para arrastar a tela.
• transição animadaAs linhas mudam suavemente à medida que os nós se movem.
• desfazerCtrl+Z e Ctrl+Y: opere com Ctrl+Z e Ctrl+Y.
• copiar e colarCtrl+C copiar, Ctrl+V colar.

Funções em destaque

design de modo duplo

O layout fixo é adequado para processos estruturados, como o planejamento de projetos, com posições de nós fixas e suporte para ramificação e colapso. A vinculação livre é adequada para projetos flexíveis, como mapas mentais, em que a posição dos nós é arbitrária e a vinculação é livre.

Habilitação de IA

O Flowgram.ai planeja introduzir recursos de IA, como a otimização automática de caminhos de fluxo. Ele está atualmente em desenvolvimento, portanto, fique de olho no GitHub para obter detalhes.

Suporte a código aberto

Os desenvolvedores podem modificar o código. Por exemplo, para adicionar um novo tipo de nó, basta editar o arquivo @flowgram.ai/free-layout-editor e enviá-lo.

advertência

• A demonstração on-line não é compatível com salvamento, você precisa instalá-la localmente para experimentar a funcionalidade completa.
• A primeira instalação da dependência requer uma conexão com a Internet e pode ser lenta.
• Documentação oficial (https://flowgram.ai/) é atualizado continuamente, consulte o GitHub para obter detalhes. README.md.

Com essas etapas, você pode criar rapidamente um fluxo de trabalho com o Flowgram.ai.

cenário do aplicativo

1. gerenciamento de projetos
   Projete o fluxo de tarefas com um layout fixo que mostre claramente as etapas e a divisão do trabalho.
2. desenvolvimento de software
   Desenhe um fluxograma do código usando linhas de conexão livre para marcar o fluxo de dados.
3. Demonstração de ensino
   O professor explica os conceitos usando um fluxo de trabalho baseado em nós, exportado e compartilhado com os alunos.

QA

1. O Flowgram.ai é gratuito?
   Sim, é um projeto de código aberto, o código é de uso gratuito e os recursos precisam ser implantados por conta própria.
2. Ele é compatível com o idioma chinês?
   O conteúdo do nó suporta entrada em chinês e a interface está em inglês.
3. Como faço para salvar um fluxo de trabalho?
   A demonstração on-line não pode ser salva, mas a versão local pode exportar imagens ou códigos.