Please enable JavaScript to view the comments powered by Disqus.

Añadiendo soporte para Mermaid en Writefreely

#writefreely #mermaid

Desde que empecé con la idea de crear mi propio blog tuve dos cosas claras:

Aunque Writefreely trae soporte de serie para las matemáticas gracias a MathJax, no pasa lo mismo con los esquemas. Dado que tenía experiencia usando Mermaid, decidí investigar sobre como integrarlo dentro de la herramienta.

Tal vez exista otra forma más fácil, pero tras buscar por internet no la di encontrado, así que aquí os dejo el truco con el que lo he conseguido.

Parcheando Writefreely

  1. Inicia sesión en la instancia de Writefreely en la que tienes tu blog

  2. Despliega el menú y selecciona el comando Customize

  3. Baja hasta el apartado Custom CSS y añade el siguiente código (en caso de que tengas más contenido, hazlo justo al principio o al final de todo):

    </style>
<script type="module">
import mermaid from     'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true});
</script>
<style>

  4. Baja hasta el final y pulsa el botón Save changes. Desde este momento ya podrás insertar diagramas y esquemas Mermaid en los posts de tu blog

Insertando diagramas

  1. Vete a la sección del post donde quieras incluir el diagrama

  2. Escribe el código de tu esquema Mermaid entre un par de tags pre

    <pre class="mermaid">
    flowchart LR
       a --> b & c--> d
</pre>

    Así quedará la salida:

    flowchart LR
   a --> b & c--> d

Enlaces y fuentes

Aquí os dejo las fuentes externas que encontré y que me sirvieron para poder implementar este pequeño truco.