Draw.io é um poderoso editor de diagramas baseado em navegador que transforma ideias em visualizações claras: fluxogramas, organogramas, diagramas de rede, UML, mapas mentais e muito mais. Sem instalações, sem complicações: arraste formas, conecte elementos, estilize com gradientes e ícones e exporte como PNG, SVG ou PDF. Perfeito para brainstorming rápido, recursos visuais para sala de aula, documentação técnica ou protótipos de design de jogos.

Criado para velocidade e clareza: encaixe inteligente, modelos reutilizáveis, atalhos de teclado e roteamento intuitivo de conectores tornam a criação de diagramas complexos fácil. Colabore exportando, importando ou salvando no armazenamento em nuvem. Seja para esboçar um mapa de níveis, planejar a arquitetura de um sistema ou criar um guia de referência rápida. Desenhe.io Resolve o problema.

Como jogar

1. Começar: Clique Criar novo diagrama ou abra um modelo (Fluxograma, UML, Mapa Mental, Rede).
2. Adicionar formas: Arraste as formas do painel esquerdo para a tela.
3. Conectar: Posicione o cursor sobre a alça de uma forma e arraste-a para outra forma para criar conectores automaticamente.
4. Editar texto: Clique duas vezes em qualquer forma para editar os rótulos.
5. Estilo: Use o painel direito para alterar o preenchimento, o contorno, a fonte, o tamanho, o alinhamento e a sombra.
6. Arranjo: Utilize guias de alinhamento, distribua ferramentas e camadas para organizar seu layout.
7. Exportar/Salvar: Arquivo → Exportar como PNG / SVG / PDF ou salvar no disco local / Google Drive / OneDrive.

Controles

• Clique com o botão esquerdo do mouse e arraste: Mover formas
• Clique duas vezes: Editar texto
• Arraste a partir da alça da forma: Criar conector
• Ctrl/Cmd + Z: Desfazer
• Ctrl/Cmd + Y / Shift + Ctrl/Cmd + Z: Refazer
• Ctrl/Cmd + C/V: Copiar/Colar
• Apagar/Retroceder: Remover item selecionado
• Ctrl/Cmd + A: Selecionar tudo
• Ctrl/Cmd + G / Shift + Ctrl/Cmd + G: Agrupar / Desagrupar
• Teclas de seta: Seleção por incentivo
• Roda do rato: Zoom (ou Ctrl/Cmd + roda do mouse)
• Espaço + arrastar: Tela Pan

Características

• Modelos: fluxogramas, UML, diagramas ER, mapas mentais, mapas de rede
• Conectores inteligentes com roteamento ortogonal
• Suporte para camadas e agrupamento em diagramas complexos.
• Exportar PNG, SVG, PDF com opção de fundo transparente
• Fluxo de trabalho com foco no teclado, rápido para usuários avançados.
• Salve e carregue arquivos do seu disco local, Google Drive, OneDrive ou Dropbox.
• O modo offline (cache do navegador) continua funcionando mesmo sem internet.

Dicas e truques

• Use modelos para iniciar diagramas complexos.
• Segurar Mudança ao redimensionar para manter as proporções.
• Use as opções de grade + alinhamento para um alinhamento perfeito em pixels.
• Duplicar formas com Ctrl/Cmd + D para acelerar elementos repetidos.
• Utilize camadas para ocultar anotações ou exportar visualizações simplificadas.
• Para apresentações, exporte em SVG para obter um dimensionamento preciso.