Sistema de Diagramas
Crie fluxogramas, diagramas UML, diagramas de rede e conecte qualquer elemento visual com conectores inteligentes.
! [Flowchart Diagram] (…/images/diagram-flowchart.png)
Visão geral
O Sistema de Diagramas fornece:
- Formas de Diagrama — Símbolos de fluxograma, UML e rede
- Conectores Inteligentes — Setas de direção automática que atualizam quando as formas se movem
- Conectar qualquer coisa — Link quaisquer itens de tela (imagens, texto, formas, SVGs)
- Auto-Layout — Organizar automaticamente diagramas
Aceder ao Painel de Diagramas
- Clique no botão Diagram na barra de ferramentas esquerda
- O painel de Diagramas abre mostrando formas disponíveis
! [Painel de Diagrama] (…/images/diagram-panel-shapes.png)
Criando Formas de Diagrama
Do Painel
- Abrir o painel do Diagrama
- Selecione uma categoria de forma (Flowchart, UML, Rede, Básico)
- Clique em uma forma para adicioná- la à tela
- Arrastar para a posição
Categorias de Forma
| Categoria | Formas | Utilização |
|---|---|---|
| Fluxograma | Processo, Decisão, Terminal, Dados, Documento, Base de Dados | Fluxogramas, fluxos de trabalho |
| UML | Classe, Caso de Uso, Ator | Diagramas de software |
| Rede | Cloud, Servidor | Diagramas de arquitectura |
| Basic | Retângulo, Círculo, Triângulo, Estrela | Objectivo geral |
Conectando itens
Ligação Rápida (Qualquer Item)
- Selecione o item de origem
- Segure Shift e clique no item alvo
- Um conector é criado automaticamente
Usar o Modo de Ligação
- Clique em Connect no painel Diagrama (ou pressione C)
- Clique na porta do item fonte (círculo azul)
- Arrastar para a porta do item alvo
- Lançar para criar a conexão
[Conectar qualquer coisa] (…/images/diagram-connect-anything.png)
Funciona com qualquer item
Os conectores não se limitam a diagramar formas. Conectar:
- Imagens e SVGs importados
- Elementos de texto
- Formas personalizadas (círculos, estrelas, retângulos)
- Elementos criados por geradores
Estilos do Conector
Estilos de Rota
| Estilo | Designação das mercadorias | Melhor para |
|---|---|---|
| Directo | Linha reta | Conexões simples |
| Orthogonal | Caminhos de ângulo direito | Diagramas técnicos |
| Curvado | Curvas bezier suaves | Disposição orgânica |
Estilos de Cabeça de Seta
| Estilo | Aparência |
|---|---|
| Clássica | Triângulo preenchido |
| Stealth | Diamante com entalhe |
| Sharp | Ponto alongado |
| Abrir | Delineamento em forma de V |
| Diamante | Forma de diamante |
| Círculo | Círculo preenchido |
| Nenhum | Sem ponta de seta |
! [Estilo do Conector] (…/images/diagram-connector-styles.png)
Auto- Layout
Organize automaticamente o seu diagrama:
- Selecione as formas para organizar (ou selecionar nenhuma para todos)
- Clique em Layout automático no painel Diagrama
- Escolha um algoritmo de disposição
Tipos de Disposição
| Disposição | Designação das mercadorias | Melhor para |
|---|---|---|
| Hierárquica | Camadas de cima a baixo | Fluxogramas, gráficos de org |
| Árvore | Hierarquia pai-filho | Árvores familiares, estruturas de arquivos |
| Radial | Círculos concêntricos | Mapas mentais |
| Grade | Grade regular | Inventários, galerias |
| Dirigido à Força | À base de física | Diagramas de rede |
! [Disposição Automática] (…/images/diagram-auto-layout.png)
Exemplos do Diagrama
Fluxograma
! [Flowchart] (…/images/diagram-flowchart.png)
Um fluxograma de processo simples com:
- Formas de terminal para iniciar/terminar
- Formas de processo para ações
- Decisão diamante para as condições
- Conectores ortogonais
Diagrama de Rede
![ Diagrama de Rede] (…/images/diagram-network.png)
Uma arquitetura de rede mostrando:
- Forma de nuvem para internet
- Formas de servidor para infraestrutura
- Conectores enrolados para ligações internas
Caso de Uso de UML
![ Diagrama UML] (…/images/diagram-uml-usecase.png)
Um diagrama de caso de uso com:
- Actor stick figure
- Usar elipses de maiúsculas
- Conectores de associação
Conectores Animados
Adicione o efeito “bolt” para fluxo animado:
- Selecione um conector
- Activar Efeito Bolt nas Propriedades
- Ajuste as configurações:
- Cor — Cor do parafuso
- Velocidade — Velocidade de animação
- Tamanho — Tamanho do parafuso
O parafuso viaja ao longo do conector, mostrando a direção do fluxo de dados.
Dicas
Dicas do Diagrama:
- Usar roteamento ortogonal para diagramas técnicos
- Usar roteamento curvo para os estilos orgânicos e de mapas mentais
- Aplicar o Auto- Layout depois de adicionar todas as formas
- Segurar o Shift enquanto arrasta para snap- to- grid
Atalhos do Teclado
| Chave | Acção |
|---|---|
| C | Digite o modo de conexão |
| Escape | Sair do modo de ligação |
| Delete | Apagar o conector/forma seleccionado |
Relacionado
- [Arrows & Connectors] (/features/arrows) — Ferramenta de seta legada
- Animações — Elementos do diagrama de animação
- Keyframe Editor — Sequências complexas de animação