🧠 MindFlow — Mapa Mental Online

MindFlow é uma ferramenta web completa e interativa para criação de mapas mentais, construída com HTML, CSS, JavaScript e Bootstrap. Funciona 100% no navegador, sem necessidade de servidor ou instalação.

---

🚀 Como Usar

1. Descompacte o arquivo mindmap-tool.zip
2. Abra o arquivo index.html no seu navegador
3. Pronto! Comece a criar seus mapas mentais

Requisito: Navegador moderno (Chrome, Firefox, Edge, Safari)

---

✨ Funcionalidades

Nós & Conexões

• ✅ Criar, mover, editar e excluir nós
• ✅ Conectar nós com linhas curvas (Bézier), retas ou tracejadas
• ✅ Nó raiz com destaque visual diferenciado
• ✅ Recolher/expandir ramos (collapse/expand)
• ✅ Duplicar nós

Personalização

• 🎨 5 temas de cor: Índigo, Esmeralda, Rosa, Âmbar, Celeste
• 📐 4 formas de nó: Arredondado, Pílula, Losango, Hexágono
• 🖌️ Cor personalizada por nó
• 🔤 Tamanho de fonte ajustável
• ✏️ Espessura, cor e estilo da linha de conexão

Navegação

• 🔍 Zoom com scroll do mouse (zoom direcionado ao cursor)
• 🖱️ Pan (arrastar canvas) com clique e arraste
• 🗺️ Minimapa interativo no canto inferior direito
• 📐 Ajustar visão (fit view) e centralizar

Arquivos

• 💾 Salvar no localStorage do navegador
• 📂 Carregar mapas salvos automaticamente
• 📥 Importar arquivo JSON
• 📤 Exportar mapa como JSON
• 📸 Exportar mapa como PNG (alta resolução)

Produtividade

• ↩️ Undo / Redo (Ctrl+Z / Ctrl+Y)
• ⌨️ Atalhos de teclado completos
• 🖱️ Menu de contexto (clique direito)
• 📋 Painel de propriedades lateral

---

⌨️ Atalhos de Teclado

Atalho	Ação
V	Ferramenta Selecionar
A	Ferramenta Adicionar Nó
C	Ferramenta Conectar
D	Ferramenta Excluir
Delete / Backspace	Excluir nó selecionado
Ctrl + Z	Desfazer
Ctrl + Y	Refazer
Ctrl + S	Salvar mapa
+ / =	Zoom in
-	Zoom out
Escape	Desselecionar / Cancelar
Duplo clique	Editar texto do nó

---

🖱️ Interações com o Mouse

Ação	Resultado
Clique no nó	Selecionar nó
Clique + arraste no nó	Mover nó
Clique + arraste no canvas	Pan (mover visão)
Scroll do mouse	Zoom in/out
Duplo clique no nó	Editar texto
Clique direito no nó	Menu de contexto
Clique direito no canvas	Cancelar seleção

---

📁 Estrutura do Projeto

mindmap-tool/
├── index.html          # Página principal
├── README.md           # Este arquivo
├── css/
│   └── style.css       # Estilos e tema visual
├── js/
│   └── app.js          # Engine completa do mapa mental
└── icons/
    └── favicon.svg     # Ícone/Logo SVG

---

🛠️ Tecnologias

Tecnologia	Uso
HTML5	Estrutura da aplicação
CSS3	Estilos, animações, variáveis CSS, responsividade
JavaScript (ES6+)	Lógica, interatividade, SVG, Canvas
Bootstrap 5.3	Layout, componentes UI, responsividade
Bootstrap Icons	Ícones da interface
Inter (Google Fonts)	Tipografia
SVG	Conexões entre nós e favicon
Canvas API	Minimapa e exportação PNG

---

📦 Formato de Exportação JSON

O arquivo JSON exportado segue esta estrutura:

{