Saltar al contenido

¿Cómo instalar Mermaid para renderizar diagramas de flujo en Markdown?

Hacemos una revisión completa cada uno de los tutoriales en nuestro sitio web con el objetivo de enseñarte siempre información certera y certera.

Solución:

Desafortunadamente, el markdown con sabor a github no admite la representación de gráficos de sirena. Consulte este número para obtener más información y encontrar consuelo en la búsqueda de esta función por parte de otras personas;)

Si está usando VS Code, puede usar esta extensión para obtener una vista previa de sus bloques de código de sirena dentro de Markdown, pero tenga en cuenta que esto no se procesa una vez que lo coloca en github. Para incluir el gráfico en github, deberá representarlo en un archivo, aunque alguien sugirió de alguna manera usar el editor de sirenas en línea para representarlo y recuperar una URL a una versión representada.

En realidad, déjame intentar insertar el gráfico de ejemplo del enlace en la página mencionada anteriormente… y no. obtenemos un Failed to upload image; the format is not supported-error.

Por lo tanto, primero deberá guardarlo como una imagen.

Creé una extensión de Firefox y Chrome que no estaba disponible en el momento de la primera respuesta: Github + Mermaid

Para usarlo necesitarás especificar mermaid como lengua:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Esto funciona en:

  • relaciones públicas y problemas
  • Comentarios
  • esencias

(tanto en vista previa como en guardar)

PD: No estoy seguro de si es correcto o no anunciar mi propio trabajo aquí, pero siento que responde las preguntas.

Puede usar mermaid-cli https://github.com/mermaidjs/mermaid.cli para generar diagramas. puede producir archivos .svg, .png o .pdf lo que quiera.

Ejecute el siguiente comando después de instalar mermaid-cli

mmdc -i input.mmd -o output.png

aquí input.mmd es su archivo de sirena que contiene

 graph TD;
        A-->B;
        A-->C;
        B-->D;
        C-->D;

en tu caso.

Comentarios y calificaciones

Agradecemos que quieras estimular nuestro quehacer exponiendo un comentario o puntuándolo te lo agradecemos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *