xurxia

Reader

Read the latest posts from xurxia.

from xurxia

#writefreely #mermaid #diagramas #selfhosted

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

  • Quería usar Writefreely como gestor de contenido.
  • Quería poder incluir fórmulas matemáticas y diagramas (algoritmos, UML, etc.).

Por suerte Writefreely ya trae soporte para matemáticas gracias a MathJax, pero no pasa lo mismo con los esquemas. Como ya había trabajado con Mermaid, me puse a investigar cómo integrarlo dentro del editor.

Tal vez exista una forma más sencilla (si la hay que alguien me lo diga 😅), pero después de buscar por Internet sin éxito, acabé dando con una solución que funciona. Aquí la comparto por si a alguien más le sirve.

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 este bloque de código (si ya tienes más contenido, colócalo al principio o al final):

    </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 Save changes. Desde este momento, podrás insertar diagramas y esquemas Mermaid en tus posts.

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>

    El resultado se renderizará automáticamente como un gráfico Mermaid cuando se cargue el post.

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

Enlaces y fuentes

Dejo por aquí los recursos que me sirvieron para montar este pequeño truco.

 
Leer más...