Dev Tool

System Flow Designer

Next.jsReactTypeScriptTailwind CSSCanvas API

Ferramenta visual para desenhar arquiteturas — serviços, APIs, bases de dados e filas — ligados por fluxos num canvas, com zoom, layout automático e exportação em JSON.

Percurso

Nasceu de uma frustração pessoal: cada vez que precisava documentar uma arquitetura nova, acabava em diagramas descartáveis no Excalidraw ou slides. Construí um canvas em React que trata cada componente como uma unidade reutilizável, com metadados estruturados em vez de formas soltas.

O que me ensinou

A diferença entre uma ferramenta que parece útil e uma que é realmente usada está nos detalhes — latência da interação, atalhos de teclado e compatibilidade com dados em JSON importam mais que qualquer feature grande.

Arquitetura de sistemas num canvas interativo.

Explora o projeto em produção ou contacta-me para saber mais.