OpenFLOW - ferramenta para criar rapidamente belos diagramas de infraestrutura localmente

 (github.com/stan-smith)
46 pontos por GN⁺ 2025-07-02 | 1 comentários | Compartilhar no WhatsApp
  • PWA open source para criação de diagramas isométricos (estilo 3D) que funciona no navegador
  • Baseado em React e no motor Isoflow, funciona offline sem instalação e oferece vários recursos, como privacidade, salvamento automático e Import/Export fácil
  • Todos os dados são armazenados no armazenamento local do navegador, e os diagramas podem ser compartilhados e copiados livremente como arquivos JSON
  • Suporta hospedagem estática como GitHub Pages e Netlify, e os recursos de PWA podem ser usados totalmente em ambiente HTTPS

Visão geral do OpenFLOW e valor do projeto

  • OpenFLOW é uma PWA gratuita e open source (Progressive Web App) útil para desenvolvedores e profissionais de TI ao visualizar projetos de infraestrutura e estruturas de rede
  • Em comparação com ferramentas concorrentes, permite trabalhar de forma rápida e segura localmente, com uso dos recursos mesmo sem conexão de rede
  • Usando o motor Isoflow, é possível criar belos diagramas em estilo 3D, com forte privacidade, já que todos os dados não são enviados para servidores externos
  • Graças a recursos práticos para o trabalho, como UI intuitiva, salvamento automático e importação/exportação, diversas equipes e indivíduos podem documentar facilmente redes e arquiteturas
  • Os requisitos de ambiente de desenvolvimento são baixos, e é possível começar a trabalhar imediatamente apenas com um navegador, sem instalação especial

Principais recursos

  • Criação de diagramas isométricos: visualização de redes, sistemas, diagramas técnicos etc. com sensação 3D
  • Salvamento automático: o histórico de trabalho é salvo automaticamente a cada 5 segundos
  • Privacidade: os dados são armazenados apenas localmente no navegador (limite de 5 a 10 MB)
  • Import/Export: suporte para compartilhar e fazer backup de diagramas em arquivos JSON
  • Modo offline: todos os recursos podem ser usados sem internet
  • Inicialização rápida: pode ser instalado e executado como PWA

Implantação e hospedagem

  • Hospedagem estática: implante a pasta build em GitHub Pages, Netlify, Vercel, AWS S3 etc.
  • HTTPS obrigatório: HTTPS é necessário para o funcionamento correto da PWA (exceto localmente)
  • Backup regular recomendado: exporte trabalhos importantes em JSON para backup

Stack técnica

  • React, TypeScript, Isoflow, PWA

Navegadores compatíveis

  • Chrome/Edge (recomendado), Firefox, Safari, suporte a PWA móvel

Open source e contribuições

  • Edição Community do Isoflow (licença MIT) + OpenFLOW (Unlicense)
  • Qualquer pessoa pode usar, modificar e distribuir livremente

Leituras relacionadas

1 comentários

 
GN⁺ 2025-07-02
Comentários do Hacker News
  • Explicação de que usa Mermaid.js porque, embora não goste da aparência, ache a sintaxe difícil e considere a ferramenta cheia de bugs, ela ainda é uma das ferramentas de diagramas com melhor suporte em geradores de sites estáticos; também expressa a expectativa de que seria ótimo se diagramas do Isoflow pudessem ser embutidos em Markdown com essa mesma facilidade
    • Agradecimento pelo comentário interessante, com a intenção de adicionar isso à lista de TODO
    • A ideia do Mermaid em si é boa, mas há a crítica de que a sintaxe é complexa demais e a integração com ferramentas como GitLab é instável
    • Opinião de que um recurso de integração com Markdown traria uma vantagem muito maior para os usuários
  • Sugestão de que seria bom usar Isoflow junto com Styus; Stylus é descrito como um servidor leve de estado local que altera automaticamente classes CSS, e também foi compartilhado o link relacionado https://github.com/mmastrac/stylus, com a expectativa de que combinaria bem com a biblioteca Isoflow
  • Compartilha que sempre gostou dos diagramas isométricos que aparecem nos livros de Clive Maxfield, e que muitos esquemas têm estruturas não planares (flip-flops, camadas de semicondutores, arquiteturas de FPGA etc.); acrescentar perspectiva faz com que a informação pareça menos complexa e mais fácil de entender ou lembrar, e avalia que esse formato também combina bem com várias áreas técnicas https://www.clivemaxfield.com
  • Alerta de que a Snowflake lançou recentemente um produto chamado Openflow, o que pode dificultar a descoberta, então talvez seja preciso pensar melhor no nome
  • Pergunta sobre o que exatamente foi colocado por cima do Isoflow, já que parece que o Isoflow é quem faz o papel principal
    • Esclarece com transparência que o Isoflow realmente faz 90% do trabalho, que não há nada sendo escondido, e que apenas foi disponibilizado diretamente porque não havia uma forma pronta de usar o community pack
  • Destaque para o fato de que ele apenas envolveu a edição comunitária do ISOFLOW https://github.com/markmanx/isoflow para permitir configuração e execução de forma muito simples, sem trabalho especial; também oferece a conveniência de exportar backup em JSON dos diagramas e recarregá-los depois, tornando a criação de diagramas praticamente ilimitada e resolvendo na prática as limitações da versão comunitária
    • Pergunta de um usuário não familiarizado com Node.js sobre onde ficam os gráficos dos ícones em estilo 3D no código do Isoflow, se são arquivos SVG e se seria possível adicionar ícones personalizados
  • Elogio à qualidade dos diagramas, junto com a lembrança de que um projeto parecido no passado teve dificuldades para monetizar e acabou encerrado; como este projeto é MIT OSS, passa a impressão de que monetização não é o objetivo principal no momento; também foi notado e informado que o link "Built with the Isoflow library" no rodapé retorna erro 404 https://github.com/isoflow/isoflow
    • Explica que quase todo o mérito de design e ícones é do Isoflow, e que a edição comunitária é estruturada para incentivar upgrade para a versão Pro; não há qualquer plano de monetização, apenas o desejo de que as pessoas usem e se divirtam, e a observação sobre o link incorreto será corrigida imediatamente
  • Pergunta se também pode ser hospedado no GitHub Pages e pede um link de demonstração
  • Avaliação positiva de que é um app interessante, com agradecimento pelo compartilhamento detalhado das informações