Sistema de diagrama

4 min read

Crear diagramas de flujo, diagramas UML, diagramas de red y conectar cualquier elemento visual con conectores inteligentes.

Diagram Flowchart

Sinopsis

El Sistema de Diagramas proporciona:

  • Formas de diagrama — Flowchart, UML y símbolos de red
  • Conectores inteligentes — flechas de navegación automática que se actualizan cuando las formas se mueven
  • Connectar cualquier cosa — Link any lienzo items (images, texto, formas, SVGs)
  • Auto-Layout — Organizar automáticamente los diagramas

Acceso al Panel de Diagramas

  1. Haga clic en el botón Diagrama en la barra de herramientas izquierda
  2. El panel Diagrama abre mostrando formas disponibles

Diagram Panel

Crear formas de diagrama

Del Grupo

  1. Abra el panel Diagrama
  2. Seleccione una categoría de forma (Flowchart, UML, Network, Basic)
  3. Haga clic en una forma para añadirla al lienzo
  4. Arrastre a la posición

Shape Categories

Categoría Formas Uso para
Flowchart Proceso, decisión, terminal, datos, documento, base de datos Flotas, flujos de trabajo
UML Clase, Caso de uso, Actor Diagramas de software
Red Cloud, Server Diagramas de arquitectura
Básica Rectángulo, Círculo, Triángulo, Estrella Con fines generales

Artículos de conexión

Conexión rápida (Cualquier elemento)

  1. Seleccione el elemento fuente
  2. Sostenga Shift y haga clic en el elemento de destino
  3. Un conector se crea automáticamente

Usando el modo Connect

  1. Haga clic en Connect en el panel de Diagramas (o pulse C)
  2. Haga clic en el puerto del elemento fuente (círculo azul)
  3. Arrastre al puerto del objeto objetivo
  4. Lanzamiento para crear la conexión

Conectar cualquier cosa

Funciona con cualquier elemento

Los conectores no se limitan a las formas de diagrama. Conectar:

  • Imágenes y SVG importados
  • Elementos de texto
  • Formas personalizadas (circles, estrellas, rectángulos)
  • Elementos generadores

Estilos de conexión

Estilos de rutina

Estilo Descripción Mejor
Direct Línea recta Conexión simple
Ortogonal Caminos del triángulo derecho Diagramas técnicos
Curva Curvas de perezoso Diseños orgánicos

Arrowhead Styles

Estilo Apariencia
Clásico Triángulo lleno
Stealth Diamante con nuca
Sharp Punto elevado
Abierto Esbozo de composición V
Diamante Forma de diamante
Circle Círculo lleno
Ninguno Sin cabeza de flecha

Connector Styles

Auto-Layout

Organiza tu diagrama automáticamente:

  1. Seleccione las formas para organizar (o seleccione ninguna para todos)
  2. Haga clic en Auto-Layout en el panel Diagrama
  3. Elija un algoritmo de diseño

Tipos de diseño

A ti Descripción Mejor
Hierarchical Capa de arriba a abajo Gráficos de flujo, gráficos de org
Árbol Jerarquía para niños Árboles familiares, estructuras de archivos
Radial Círculos concentrados Mapas mentales
Grid Cuadrícula regular Inventarios, galerías
Fuerza Direcida Física-basada Diagramas de red

Auto Layout

Ejemplos de diagrama

Flowchart

Flowchart

Un simple diagrama de flujo de proceso con:

  • Formas terminales para Inicio/End
  • Formas de proceso para acciones
  • Diamante de decisión para las condiciones
  • Conectores ortogonales

Diagrama de red

Diágrama de red

Una arquitectura de red que muestra:

  • Forma de nube para internet
  • Formas de servidor para infraestructura
  • Conectores abatibles para enlaces internos

Caso de uso UML

! Diagrama delUML

Un diagrama de caso de uso con:

  • Actor stick figure
  • Use elips de caso
  • Conectores de asociación

Conectores animados

Añadir el efecto “bolt” para el flujo animado:

  1. Seleccione un conector
  2. Activar Efecto de boto en propiedades
  3. Ajuste de la configuración:
    • Color Color
    • Hablado - Velocidad de animación
    • Tamaño - Talla de Bolt

El perno viaja a lo largo del conector, mostrando la dirección de flujo de datos.

Consejos

Consejos de diagrama:

  • Usar la ruta ortogonal para diagramas técnicos
  • Usar el enrutamiento curvado para los estilos orgánicos, mental-mapa
  • Aplicar Auto-Layout después de añadir todas las formas
  • Sostenga Shift mientras se arrastra para el rápido-a-grid

Atajos de teclado

Clave Medida
C Introducir modo de conexión
Escape Modo de conexión
Delete Eliminar el conector seleccionado / forma

Relacionados

  • [Arrows & Connectors] (/features/arrows) — Herramienta de flecha Legacy
  • Animaciones — Elementos del diagrama de Animate
  • Keyframe Editor — secuencias de animación complejas