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.

• Usar Custom CSS para insertar código JavaScript Cactus Comments in WriteFreely

• Incluir soporte para Mermaid en cualquier página web How to embed mermaid in html file?