En este artículo:
Los diagramas son herramientas poderosas que pueden ayudar a los equipos a mapear sistemas complejos, ilustrar jerarquías complicadas, organizar ideas, estructurar sitios web, planificar implementaciones y diseñar flujos de usuario.
Son esenciales para el éxito de cualquier proyecto – y una parte clave del ritmo y flujo de un proyecto en cada etapa del desarrollo y la implementación. Y, a medida que los proyectos evolucionan, los equipos necesitan diagramas y diagramas de flujo actualizados siempre a mano – para referencia, orientación y documentación.
En la Biblioteca de Stencils, encontrarás una amplia gama de stencils de diagramas Diagrama de Flujo, UML, Caso de Uso y Modelo ERD, todos diseñados para conectarse rápidamente a nuestros Conectores inteligentes.
En este artículo, explicaremos cada una de nuestras categorías de stencils de Diagrama. También te mostraremos cómo añadir stencils de diagrama a la página, y cómo adjuntar, dar formato y etiquetar sus Conectores.
Finalmente, aprenderás algunos consejos y trucos, como intercambiar un stencil de diagrama por otro, o expandir flujos con un rápido clic en las flechas de extensión.
Categorías de stencils de diagrama
En la Biblioteca de Stencils, encontrarás cuatro categorías de stencils de diagrama. Con ellos, tu equipo puede crear e improvisar cualquier tipo de diagrama:
Diagramas de Flujo
Los Diagramas de Flujo son los stencils de diagrama más flexibles y adaptables. Se utilizan típicamente para lluvia de ideas e ideación, arquitectura de información, gestión de datos, modelado de procesos de negocio, análisis estructural, ingeniería de procesos y más.
UML
Los diagramas UML utilizan el Lenguaje de Modelado Unificado para ayudar a los equipos a entender la estructura y el comportamiento de las soluciones de software. Visualizan los componentes e interacciones de un sistema documentando sus objetos, actores, atributos, operaciones y relaciones.
Para más información sobre los 14 tipos diferentes de diagramas UML – y plantillas prefabricadas para cada tipo – consulta nuestra página de creador de diagramas UML.
Caso de Uso
Los diagramas de Caso de Uso modelan el conjunto de acciones, servicios y funciones que un sistema necesita realizar. Al ilustrar los casos de uso específicos, actores y objetivos de un escenario, estos diagramas de comportamiento ayudan a los equipos a comprender los requisitos funcionales y el alcance de un sistema.
Modelo ERD
Un Diagrama de Relaciones de Entidades representa la estructura de una base de datos mostrando cómo las entidades dentro de ella – personas, roles, objetos, productos o conceptos – se relacionan entre sí. El diagrama representa las entidades, atributos y relaciones interconectadas dentro del alcance de ese sistema.
Para ver ejemplos de todos estos tipos de diagramas, consulta nuestra colección de Plantillas de Diagramas y Flujos gratuitas y seleccionadas. Usa estos ejemplos para impulsar tu proyecto, entender las mejores prácticas o simplemente experimentar.
Añadir, estilizar y nombrar stencils de diagrama
Al igual que todos los stencils de Moqups, puedes añadir stencils de diagrama a la página, como objetos, con un solo clic o arrastrando y soltando. Y, al igual que con otros tipos de objetos, puedes estilizarlos usando el Panel de Formato.
Cuando escribes texto en cualquier stencil de diagrama, esos stencils adoptan automáticamente el texto como su nombre. Esto facilita la identificación de elementos de diagrama específicos en el Panel de Esquema, especialmente en diagramas de flujo y proceso complejos.
Adjuntar conectores en modo Diagrama
Nuestros Conectores inteligentes se pueden usar para conectar cualquier objeto, stencil o imagen de Moqups – ¡no solo nuestros stencils de diagrama dedicados!
Para conectar dos objetos cualesquiera en la página:
- Entra en modo Diagrama haciendo clic en el botón Diagrama en la barra de herramientas superior o presiona
D. - Inmediatamente verás grupos de puntos azules pálidos (puntos de conexión) aparecer alrededor de los bordes de los objetos en la página.
- Haz clic en uno de estos puntos y arrastra el cursor hacia el segundo objeto.
- A medida que el conector se acerque al segundo objeto, se ajustará y "pegará" – mostrando que está adjunto. Puedes conectarte a uno de los puntos de conexión, o a cualquier otro lugar en el borde del objeto. Los conectores permanecen adjuntos, incluso cuando mueves, redimensionas o rotas objetos.
- Para salir del modo Diagrama, simplemente haz clic en cualquier superficie vacía de la página, o presiona
DoEsc.
El menú desplegable del Botón Diagrama revela el kit de herramientas Quick Draw para mockups y anotaciones rápidas. Estas herramientas – incluyendo un nuevo Lápiz – vienen con atajos de teclado ágiles y una sección de estilos dedicada en el Panel de Formato.
Dar formato a los conectores
Los Conectores se pueden usar para conectar cualquier objeto de Moqups, pero están diseñados para funcionar – y ser estilizados – en combinación con nuestros stencils de diagrama. Los nuevos conectores heredan el estilo del último conector utilizado en esa página.
Puedes dar formato a los conectores en modo de Edición, ya sea individualmente o como una selección. Al hacer clic en cualquier conector se abrirá la sección Estilo de Conector del Panel de Formato.
Cuando seleccionas un único conector, el nombre de ese conector se muestra en la parte superior del panel. Esto facilita localizar e identificar ese conector en el Panel de Esquema.
Cuando seleccionas múltiples conectores, el panel muestra el número de conectores en ese grupo, para ayudarte a confirmar tu selección antes de aplicar cualquier cambio de estilo o transformación.
Puedes establecer el color, el ancho, el estilo de trazo del conector y elegir entre una gama de estilos de línea (ortogonal, ortogonal redondeado, curvo o recto). También puedes elegir entre una gama de marcadores de inicio y fin, ajustar la opacidad del conector y añadir tanto Sombra como Desenfoque.
A menos que realices un cambio, todos los conectores que dibujes en adelante adoptarán estos ajustes de estilo.
Intercambiar marcadores de inicio y fin: Mantén presionado Shift + X para invertir los marcadores de inicio y fin de cualquier conector; esta es la misma tecla que invierte el estilo de Relleno y Trazo cuando se selecciona un objeto.
Etiquetar conectores
Un componente esencial para la diagramación es la capacidad de añadir etiquetas directamente a las líneas de conector. Esto es especialmente importante para los diagramas de flujo de trabajo, donde puede necesitar indicar decisiones de Sí o No. Las etiquetas también son útiles para delimitar las líneas de conector en diagramas complejos, facilitando su identificación y navegación.
Para añadir una o más etiquetas a cualquier conector, simplemente haz doble clic en la línea del conector. Y, una vez que añades una etiqueta a un conector, permanecerá adjunta automáticamente a esa línea – y se ajustará inteligentemente a medida que modifiques y actualices tu diagrama.
Y puedes reutilizar rápidamente tus etiquetas clonándolas. Copia y pega, o simplemente arrastra una etiqueta mientras mantienes presionada la tecla Alt/Option – tal como lo harías con cualquier otro objeto de Moqups.
También hemos diseñado una característica fantástica para acelerar tu flujo de trabajo: La capacidad de desconectar y reconectar etiquetas. Simplemente haz clic y extrae cualquier etiqueta de una línea; la etiqueta se desconectará automáticamente y, cuando la arrastres hacia una línea diferente, se encajará de forma fluida e inteligente en su lugar.
Extensores de diagrama
Los Extensores de Diagrama hacen que expandir tus flujos sea tan simple como una pulsación de tecla, y funcionan en todos los stencils de diagrama.
Al seleccionar cualquier stencil de diagrama en la página se revelarán flechas en los cuatro lados de esos objetos. Al hacer clic en cualquier flecha se duplicará ese objeto, se conectarán automáticamente y luego se abrirá el modo de edición de texto del nuevo objeto para renombrarlo rápidamente.
Cuando hay un stencil de diagrama desbloqueado inmediatamente adyacente al que estás 'extendiendo', hacer clic en los extensores conectará automáticamente esos dos objetos. De lo contrario, el extensor creará un nuevo objeto de diagramación.
Para un trabajo omnidireccional ultrarrápido, las teclas Shift + Alt/Option + Flecha también añaden y conectan objetos.
Contenedores adhesivos
Dentro de la categoría Diagramas de Flujo, el stencil de Contenedor se usa para crear tanto diagramas de proceso como de carriles de natación, y para agrupar objetos en diagramas de red.
Debido a sus casos de uso específicos, el contenedor tiene algunas características de formato únicas: adhesividad y orientación.
Adhesividad del contenedor
El stencil de contenedor es adhesivo de forma predeterminada – ¡de tres maneras diferentes! Puedes...
- Usar el contenedor para capturar objetos ya existentes en la página
- Añadir objetos al contenedor desde la biblioteca de stencils o la página
- Usar el efecto magnético para conectar múltiples contenedores entre sí
Una vez que los objetos son capturados o añadidos a un contenedor, se mueven con ese contenedor. Esto facilita agrupar y organizar el contenido de tu diagrama.
Puedes activar y desactivar la adhesividad de un contenedor en la sección Comportamiento Adhesivo del Panel de Formato.
Nuestros stencils de Notas y Anotaciones también tienen un comportamiento adhesivo que te permite adjuntarlos a cualquier objeto de la página.
Orientación del contenedor
Cuando añades un contenedor a la página, puedes elegir su orientación – vertical u horizontal – en la sección Orientación del Contenedor del Panel de Formato.
Puedes usar contenedores para agrupar y organizar cualquier tipo de objeto, y por cualquier motivo – de hecho, te animamos a improvisar – pero hay tres casos de uso principales que vale la pena mencionar aquí:
Diagramas de proceso
Usa contenedores para crear carriles de natación y grupos para todo tipo de diagramas de proceso – delimitando áreas de responsabilidad y aclarando quién hace qué.
Diagramas de red
Los contenedores permiten a tu equipo identificar, agrupar y etiquetar componentes relacionados mientras mapeas cualquier tipo de red compleja.
Tableros Kanban
Los contenedores son excelentes para construir tableros Kanban que ayudan a los equipos ágiles a visualizar, gestionar, analizar y optimizar su flujo de trabajo.
Eliminar un contenedor no elimina los elementos dentro de él.
Reemplazar stencils de diagrama
Puedes actualizar y reemplazar rápidamente los stencils de diagrama que ya son parte de un diagrama en la página. Para cambiar un stencil, simplemente arrastra el nuevo stencil sobre uno existente y suéltalo cuando aparezca el símbolo 'reemplazar'.
El reemplazo funciona en todos los stencils de Diagrama de Flujo y en stencils de Caso de Uso seleccionados donde corresponda.
Las Imágenes y los Iconos también tienen capacidad de reemplazo.
Al igual que cualquier otro objeto en la página, un Diagrama también puede hacerse interactivo. Ve aquí para leer más sobre Interacciones.
Pegar listas y datos CSV en formato de diagrama
Nuestra función Pegar en Formato facilita la conversión de tus listas y datos en diagramas de flujo con datos al instante:
- Copia una lista o CSV desde tu escritorio
- Usa
Ctrl/Cmd+Vpara pegar esos datos en tu página de Moqups - Haz clic en el botón Diagrama de Flujo en el modal Elegir un Formato