[Pitch] Criei o Floani para animar diagramas e explicar sistemas
Pessoal, sou o Elber. Trabalho com tecnologia há mais de 20 anos, construindo aplicações e sistemas customizados para empresas.
Quem já apresentou uma arquitetura para um cliente provavelmente conhece a cena: você aponta para uma seta e fala “agora imagina isso indo daqui pra cá”. Resolvi dar movimento às setinhas. 😅
Daí nasceu o Floani. Eu precisava de uma ferramenta para explicar sistemas aos meus clientes e criar conteúdo para o YouTube. Comecei resolvendo essa necessidade e acabei transformando o projeto em um SaaS.
O problema que eu queria resolver
Um diagrama mostra os componentes e as conexões de um sistema. Na hora de explicar o comportamento, também entram a ordem dos acontecimentos, o caminho de uma mensagem e o que depende de quê.
Pensem neste fluxo simplificado:
Cliente → API → Fila → Worker → Banco
Numa apresentação sobre processamento assíncrono, eu dividiria a explicação em três momentos:
- O cliente faz uma requisição e a API recebe o pedido.
- A API coloca uma mensagem na fila e confirma o recebimento ao cliente. O trabalho ainda está pendente.
- O worker consome a mensagem, processa o pedido e grava o resultado no banco.
A ideia é destacar as conexões de cada etapa e guiar o olhar de quem está assistindo. Isso ajuda a explicar, por exemplo, por que receber uma resposta da API não significa que o processamento terminou.
Meu critério para a animação é esse: ela precisa ajudar a entender o fluxo. Se tudo se mexe ao mesmo tempo, a arquitetura vira uma árvore de Natal e a explicação se perde.
Como isso aparece no Floani
O editor reúne a criação do diagrama e a apresentação em um mesmo canvas. Hoje dá para:
- Criar e refinar diagramas com a IA integrada, ou conectar ferramentas como Claude, Codex e Cursor via MCP.
- Importar diagramas em Mermaid para usar como ponto de partida.
- Animar conexões e organizar a explicação em cenas, com movimentos de câmera.
- Apresentar, compartilhar um diagrama interativo, incorporar em outra página ou exportar em MP4 e GIF.
Abaixo está um exemplo no editor, com o fluxo de atendimento de um restaurante. Até o jantar tem suas dependências.
Queria ouvir quem também precisa explicar sistemas
Vocês usariam algo assim em apresentações para clientes, onboarding de devs ou aulas? Em que situação a animação ajudaria de verdade, e em qual seria só enfeite?
Também tenho curiosidade sobre o fluxo de vocês hoje: Mermaid, draw.io, Miro, slides ou outra ferramenta? O que daria trabalho demais migrar?
Para conhecer: floani.com.
É um SaaS com plano gratuito e planos pagos. Recursos avançados de compartilhamento, exportação e MCP ficam nos planos pagos.
Gravei também uma demonstração do funcionamento no YouTube, para quem quiser ver os diagramas em movimento.
Críticas ao editor, à proposta e aos exemplos são bem-vindas. Se algo estiver confuso, quero saber também.