Um roadmap de produto interativo, visual e totalmente independente, construído em um único arquivo HTML.
A ferramenta combina a visualização de um Gantt Chart com recursos de planejamento e acompanhamento de produtos, permitindo organizar tarefas, sprints e iniciativas diretamente no navegador — sem instalação, servidor, banco de dados ou processo de build.
Basta abrir o arquivo HTML no navegador e começar a planejar.
- Mova tarefas diretamente no roadmap para replanejar atividades.
- Redimensione a duração de cada tarefa arrastando suas extremidades.
- Posicionamento com snap automático em incrementos de meio sprint, facilitando o planejamento visual.
- Organize o roadmap por equipe, produto, área ou tema.
- Utilize cores diferentes para cada categoria.
- Clique na legenda para filtrar visualmente as categorias exibidas.
Acompanhe o progresso de cada iniciativa utilizando diferentes status:
- Completed — Concluído
- In Progress — Em andamento
- Delayed — Atrasado
- Not Started — Não iniciado
Cada status possui uma representação visual própria para facilitar a leitura do roadmap.
Adicione marcadores diretamente às atividades para destacar:
- T&V (Test & Validation) — períodos de teste e validação.
- Discovery — atividades de descoberta e definição realizadas antes ou durante o desenvolvimento.
Isso permite visualizar não apenas o desenvolvimento, mas também o trabalho necessário para validar e descobrir o que deve ser construído.
Alterne instantaneamente entre os modos Dark e Light utilizando o botão disponível na barra superior.
Copie uma imagem limpa do roadmap atual diretamente para a área de transferência.
Ideal para colar rapidamente em:
- E-mails
- Apresentações
- Reuniões
- Documentos
- Atualizações de status
Faça backup dos seus dados ou transfira o roadmap entre diferentes computadores utilizando arquivos JSON.
Desfaça alterações recentes sem precisar reconstruir o planejamento manualmente.
Selecione múltiplos itens simultaneamente para facilitar alterações e movimentações em lote.
Selecione vários itens desenhando uma área sobre eles, tornando mais rápido o gerenciamento de roadmaps maiores.
Baixe o arquivo:
roadmap_V15.html
Abra o arquivo utilizando preferencialmente:
- Google Chrome
- Microsoft Edge
Esses navegadores oferecem a melhor experiência, incluindo a possibilidade de salvar alterações diretamente no arquivo.
Clique em:
+ Add Item
para criar uma nova atividade.
Ou clique em qualquer barra existente para editar uma atividade.
- Arraste a barra para alterar sua posição no roadmap.
- Arraste as extremidades esquerda ou direita para alterar sua duração.
- Utilize o snap automático para manter o planejamento alinhado aos incrementos de sprint.
Clique em:
💾 Save
para salvar suas alterações.
Observação: em outros navegadores, o arquivo atualizado poderá ser baixado como uma nova cópia em vez de ser salvo diretamente no arquivo original.
Construído utilizando apenas:
- HTML
- CSS
- JavaScript
Sem frameworks.
Sem dependências externas.
Sem processo de build.
Sem npm install.
Sem servidor.
Sem banco de dados.
A aplicação inteira está contida em um único arquivo HTML, tornando o projeto fácil de:
- Copiar
- Compartilhar
- Enviar por e-mail
- Versionar no GitHub
- Hospedar em qualquer serviço de arquivos estáticos
Roadmaps de produto frequentemente precisam ser atualizados, apresentados e compartilhados entre diferentes pessoas e equipes.
A ideia deste projeto foi criar uma ferramenta que combinasse:
Simplicidade + Flexibilidade + Visualização + Portabilidade
O resultado é uma ferramenta leve que permite criar e apresentar roadmaps de forma visual, sem depender de uma infraestrutura complexa ou de uma plataforma específica.
Sinta-se à vontade para utilizar, adaptar e reutilizar este projeto nos seus próprios roadmaps e necessidades de planejamento.