ZenUML: Creación de diagramas de secuencia y diagramas de flujo basados en código de texto simple

Introducción general

ZenUML es una solución de diagramas como código multiplataforma centrada en la creación de diagramas de secuencia y diagramas de flujo. Evita retrasos en las interacciones del lado del servidor mediante la renderización de diagramas en tiempo real en el navegador, de modo que el proceso de pensamiento del usuario no se ve interrumpido por ineficientes operaciones de arrastrar y soltar o lentas animaciones de carga.Los diagramas de ZenUML no son sólo imágenes estáticas, sino que el usuario puede interactuar con los diagramas, por ejemplo, resaltando el mensaje en el diagrama en modo de edición seleccionará automáticamente el código correspondiente.ZenUML hace hincapié en la privacidad y la seguridad, nunca enviando datos al servidor para su renderización. Los datos nunca se envían al servidor para su renderización, lo que garantiza la seguridad de los datos del usuario. La herramienta es compatible con OMG UML 2.5.1 y ofrece ricas extensiones, como iconos en la nube, para hacer los diagramas más legibles.ZenUML se utiliza en una amplia gama de industrias tales como fintech, telecomunicaciones y venta al por menor, y es compatible con una variedad de plataformas, incluyendo Confluence, aplicaciones web, extensiones de navegador, plug-ins IDE y aplicaciones de escritorio.

Lista de funciones

• Representación en tiempo real: representa gráficos en tiempo real en el navegador sin interacción con el servidor.
• Gráficos interactivos: los usuarios pueden interactuar con los gráficos y navegar rápidamente por gráficos complejos.
• Privacidad y seguridad: no se envía ningún dato al servidor para su procesamiento, lo que garantiza la seguridad de los datos.
• Conformidad con las normas: Cumple con OMG UML 2.5.1 y proporciona amplias extensiones.
• Compatibilidad multiplataforma: Confluence, las aplicaciones web, las extensiones de navegador, los complementos IDE y las aplicaciones de escritorio son compatibles.
• DSL más sencillo: utilice un lenguaje DSL más sencillo para reducir las líneas de código y mejorar la legibilidad y la capacidad de mantenimiento.
• Asistencia profesional: se proporciona asistencia para la instalación, la formación y las averías, y la mayoría de los problemas se resuelven en 8 horas.
• Extensiones enriquecidas: por ejemplo, iconos de nubes para hacer más legibles los gráficos.

Utilizar la ayuda

Proceso de instalación

1. Uso de aplicaciones web::
   • Visite el sitio web de ZenUML (https://zenuml.com/).
   • Regístrese e inicie sesión en su cuenta.
   • Entra en el espacio de trabajo y empieza a crear el gráfico.
2. Instalación del plugin de Confluence::
   • En el backend de administración de Confluence, seleccione Aplicar.
   • Busque "ZenUML" y haga clic en "Instalar".
   • Una vez completada la instalación, añada la macro ZenUML a la página y comience a crear el diagrama.
3. Instalación de extensiones del navegador::
   • Busque "ZenUML" en la tienda de extensiones de su navegador.
   • Haga clic en "Añadir al navegador" y siga las instrucciones para completar la instalación.
   • Una vez finalizada la instalación, haga clic en el icono ZenUML de la barra de herramientas del navegador para empezar a crear el diagrama.
4. Instalación del plug-in IDE::
   • Busque "ZenUML" en el mercado de plugins del IDE.
   • Haga clic en "Instalar" y siga las instrucciones para completar la instalación.
   • Una vez instalado, abra el plugin ZenUML en el IDE y comience a crear diagramas.

Proceso de utilización

1. Creación de diagramas de secuencia::
   • Seleccione "Nuevo gráfico" en el área de trabajo.
   • Seleccione la plantilla Diagrama de secuencia.
   • Escriba código utilizando el lenguaje DSL de ZenUML, por ejemplo:

    Alice -> Bob: Hello Bob, how are you?
   Bob --> Alice: I am good thanks!
   

   • Previsualice los gráficos en tiempo real, realice ajustes y optimícelos.
2. Creación de organigramas::
   • Seleccione "Nuevo gráfico" en el área de trabajo.
   • Seleccione la plantilla Diagrama de flujo.
   • Escriba código utilizando el lenguaje DSL de ZenUML, por ejemplo:

    start
   :Step 1;
   :Step 2;
   :Step 3;
   end
   

   • Previsualice los gráficos en tiempo real, realice ajustes y optimícelos.
3. Exportar y compartir gráficos::
   • Cuando hayas terminado de crear el diagrama, haz clic en el botón "Exportar" y selecciona el formato de exportación (PNG, SVG, etc.).
   • Comparta los gráficos mediante un enlace o un código incrustado.
4. Funciones avanzadas::
   • Mejora la legibilidad de los gráficos con iconos de nubes y otras extensiones.
   • Resalte los mensajes en el gráfico en modo de edición para navegar rápidamente por el código.
   • Visite el Centro de ayuda de ZenUML para obtener más consejos y asistencia.

problemas comunes

• ¿Cómo se garantiza la seguridad de los datos? ZenUML no envía datos al servidor para su renderización, todas las operaciones se realizan localmente para garantizar la seguridad de los datos.
• ¿Cómo puedo obtener asistencia técnica? Visite el Centro de ayuda de ZenUML para enviar una solicitud de asistencia; la mayoría de los problemas se resuelven en 8 horas.
• ¿Apoya el trabajo en equipo? ZenUML admite la colaboración en equipo, donde los usuarios pueden compartir enlaces de diagramas y editar y ver diagramas juntos.

Afilador de esquemas D2

Hay muchas herramientas para hacer esquemas.

Me gusta usar herramientas de diagramación basadas en código de texto para diagramas wireframe como Mermaid, Plantuml, Graphviz.

Todos ellos generan imágenes, basadas en el código, y son perfectos para poner en repositorios de código para el versionado.

Hace poco descubrí una herramienta de este tipo mucho más fácil de usar D2A continuación le presentamos una herramienta sencilla, intuitiva y potente.

D2 puede utilizarse en la línea de comandos o en el navegador. Supongamos que tiene un archivo de código de imagenexample.d2A continuación, el comando para generar la imagen es el siguiente.

$ d2 ejemplo.d2

La mayor parte del tiempo lo utilizo a través del navegador. Tiene un generador en línea play.d2lang.com(Abajo), pegue el código, pulse el botón "compilar" y la imagen se generará inmediatamente.

Si quieres el nodo A (el nombre del nodo es A), simplemente escribe A.

A

A es sólo el nombre del nodo, si desea personalizar el contenido del nodo, escríbalo como a continuación.

A: A

A continuación, añade un nodo.

A: A
B: B

Conéctalos.

A: A
B: B
A -> B

La conexión puede hacerse con una flecha positiva (->), o puede utilizar la flecha inversa (<-), e incluso flechas bidireccionales (<->). Si no necesitas flechas, basta con conectar las líneas (--).

También se puede añadir texto a las flechas.

A: A
B: B
A -> B: Conexión

Puede haber múltiples conexiones entre nodos.

A: A
B: B
A -> B: Solicitud
A <- B: Respuesta

Las conexiones entre nodos también pueden escribirse en una línea.

A -> C <- B: Conexiones

Fase 1 -> Fase 2 -> Fase 3 -> Fase 4
Etapa 4 -> Etapa 1: Feedback

Esta sintaxis es suficiente para dibujar un diagrama de alambre básico, ¿no es bastante simple.

D2 puede dibujar diagramas muy complejos, para más sintaxis véaseArchivo (informático).

Como mención final, si desea cambiar la forma del nodo, la caja se cambia a un círculo, como se escribe a continuación.

A: A
A.forma: círculo

La forma puede cambiar incluso a una nube para indicar un servicio en la nube.

A: A
A.forma: nube

También se puede cambiar el color de las líneas.

A: A
A.style.stroke: rojo