Diagrama como código con Mermaid en Lucidchart

Accede al menú diagrama como código

Para acceder al menú de diagrama como código en Lucidchart, sigue estos pasos:

1. Selecciona el ícono de Diagrama como código en la barra de herramientas principal en el extremo izquierdo del espacio de trabajo.

Genera un diagrama

Familiarízate con el proceso de negocio de diagrama como código usando uno de nuestros ejemplos para cada tipo de diagrama compatible. Cuando estés listo, genera un diagrama escribiendo tu propio código de Mermaid.

Usa un ejemplo proporcionado

Para crear un diagrama usando los ejemplos proporcionados, sigue estos pasos del menú diagrama como código:

1. Selecciona +Nuevo diagrama de Mermaid
2. En la parte inferior del editor proporcionado, haz clic en una de las opciones de ejemplo.
3. El código se agregará automáticamente al editor para el tipo de ejemplo seleccionado.
4. Edita el código de ejemplo según sea necesario.

El diagrama se generará en el lienzo a medida que agregues y edites el código.

Crea desde cero con Mermaid

Para crear un nuevo diagrama desde cero empleando el código de Mermaid, sigue estos pasos desde el menú diagrama como código:

1. Selecciona +Nuevo diagrama de Mermaid
2. Escribe tu código en el editor proporcionado.
3. Haz clic en Generar.

El diagrama se generará en el lienzo a medida que agregues y edites el código.

Edita un diagrama

Un diagrama generado a partir del código debe actualizarse abriendo y editando el código. Para ello:

1. Abre el editor de código asociado de una de las siguientes maneras:
   • Haz clic en el diagrama en el lienzo.
   • Navega al menú de diagrama como código, desplázate y selecciona el diagrama que deseas editar.
2. Haz clic en el editor y realiza tus cambios.
   • A medida que editas, el diagrama en el lienzo se actualizará en tiempo real.

El diagrama se actualizará en el lienzo.

Tipos de diagramas admitidos

Los siguientes tipos de diagrama son compatibles con el código de Mermaid:

• Clase: traza la estructura de un sistema en particular al modelar sus clases, atributos, operaciones y relaciones entre objetos.
• C4: Aprovecha los cuatro niveles de modelos (contexto, contenedores, componentes y código) en función de tu audiencia.
• Entidad-relación: representa visualmente una base de datos para mostrar relaciones entre campos.
• Diagrama de flujo: crea diagramas de flujo fáciles de seguir que cubran sistemas y procesos de negocio complejos.
• Diagrama de Gantt: Representa visualmente el cronograma y el progreso en la gestión de un proyecto.
• Ishikawa: crea diagramas de espina de pescado para mapear visualmente las relaciones de causa y efecto durante el análisis de causa raíz.
• Mapa de árbol anidado: visualiza estructuras de datos jerárquicas mediante rectángulos anidados.
• Gráfico de radar: crea un gráfico para comparar múltiples variables cuantitativas en una cuadrícula radial.
• Secuencia: representa los procesos de negocio y objetos que viven simultáneamente, y los mensajes intercambiados entre ellos para realizar una función, antes de que finalice la línea de vida.
• Estado: construye un diagrama de comportamiento para mostrar las transiciones entre diferentes objetos.
• Gráfico XY: crea gráficos completos de líneas, barras o dispersión para visualizar relaciones entre puntos de datos.

Preguntas frecuentes

¿Qué versión de Mermaid tiene soporte en Lucidchart? 
Lucidchart está optimizado para brindar soporte a la versión 11.14 de Mermaid. 

Da tu opinión sobre este artículo