Diagramas Mermaid

Escribe diagramas de flujo, de secuencia, circulares y de Gantt como texto Mermaid, y el editor los dibuja como un bloque en el documento. Mermaid no forma parte del editor: tu página lo carga o tu servidor renderiza el diagrama.

Cómo activarlo

Esta función la ofrece el plugin mermaiddiagram.js (también incluido en plugins/all_plugins.js). El elemento de la barra de herramientas es insertdiagram (texto de ayuda "Diagram"). La barra predeterminada lo incluye en el menú "More" (⋮); para usarlo en tu propia barra, añade insertdiagram. Para dibujar diagramas en el navegador, carga Mermaid antes de crear el editor:

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js"></script>
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/mermaiddiagram.js"></script>

<div id="div_editor1"><p>How a change ships:</p></div>
<script>
mermaid.initialize({ startOnLoad: false });
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{insertdiagram}|{undo,redo}"
});
</script>

De dónde procede el dibujo

El plugin no carga nada de la red. Para cada diagrama usa la primera opción disponible de estas:

1. diagramResolver, tu función. Recibe el código fuente Mermaid y devuelve una Promise de { svg: "<svg…" } o { imageUrl: "…" }. Úsala para renderizar en tu servidor (por ejemplo, con Kroki o mermaid-cli).
2. window.mermaid en la página (o en su ventana superior). El plugin admite tanto el antiguo mermaid.render que devuelve una cadena (versiones 8 y 9) como el que devuelve una Promise (10 y posteriores); estas páginas se probaron con 11.4.1.
3. Ninguno: el bloque muestra el código fuente como código y el cuadro de diálogo indica "No Mermaid renderer detected on the page". Se conserva el código fuente para poder dibujar el diagrama más adelante.

Opciones

Opción	Valor predeterminado	Función
diagramResolver	null	Tu motor de renderizado, que se usa antes de window.mermaid. Si rechaza la solicitud, se muestra el código fuente con el mensaje de error.
diagramSamples	Cuatro ejemplos: un diagrama de flujo (graph TD), a sequenceDiagram, a pie y un gantt	Los botones de ejemplo del cuadro de diálogo. Cada botón muestra la primera línea de su ejemplo.
text_insertdiagram, text_insertdiagramtitle, text_insertdiagramlabel, text_insertdiagrampreview	"Diagram", "Insert / edit diagram", "Mermaid", "Preview"	Texto de ayuda del botón, título y etiquetas del cuadro de diálogo.

Un resolver del lado del servidor tiene este aspecto (la URL es tuya):

diagramResolver: function (source) {
  return fetch("/api/diagram", { method: "POST", body: source })
    .then(function (r) { return r.text(); })
    .then(function (svg) { return { svg: svg }; });
}

Cómo usarlo

• Haz clic en el botón, llama a editor1.execCommand("insertdiagram")o elige "Diagram" en el menú de comandos con barra. Escribe o elige un ejemplo y pulsa Insert.
• Edición. Haz doble clic en un diagrama para volver a abrir el cuadro de diálogo con su código fuente; el botón pasa a decir Update.
• Eliminación. Pasa el puntero sobre el bloque y haz clic en el botón redondo × de la esquina, o pulsa Delete o Backspace con el cursor dentro del bloque.
• Errores. Si Mermaid no puede analizar el código fuente, la vista previa muestra ese código y el mensaje de Mermaid en rojo ("Parse error on line 3 …").
• editor1.renderDiagrams() vuelve a dibujar todos los bloques de diagrama y devuelve cuántos encontró. Llámalo después de setHTMLCode con contenido que aún no tenga dibujo.

Aspectos a tener en cuenta

• El bloque guardado conserva el código fuente en data-diagram y el dibujo dentro (abreviado aquí):

  <div class="rte-mermaid" data-rte-diagram="1" data-diagram="graph LR
    A[Pull request] --&gt; B{Review}
    …" contenteditable="false" style=""><button type="button" class="rte-mermaid-remove" data-rte-mermaid-remove="1" aria-label="Remove diagram" title="Remove diagram">x</button><div class="rte-mermaid-render"><svg …>…</svg></div></div>

  Con Mermaid, el dibujo es SVG en línea (unos 4 KB para el diagrama de flujo anterior); sin él, un <pre class="rte-mermaid-src">.
• El botón × para eliminar se guarda con el contenido. Ocúltalo donde muestres el HTML o aparecerá como una "x" en tu página.
• Después de editar un diagrama con Update, su data-diagram se codifica en HTML dos veces (--> se almacena como -->). El editor lee ambas formas, pero tu propio código debe decodificar el valor una vez más.
• El estilo del marco del bloque solo existe dentro del editor. Para mostrar diagramas guardados, oculta el botón y dibuja a partir del código fuente; esto funcionó tanto con bloques nuevos como editados:

  <style>.rte-mermaid-remove { display: none; }</style>
  <script src="https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js"></script>
  <script>
  mermaid.initialize({ startOnLoad: false });
  function decode(s) {
    return s.replace(/&quot;/g, '"').replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&amp;/g, "&");
  }
  document.querySelectorAll(".rte-mermaid[data-diagram]").forEach(function (block, i) {
    var target = block.querySelector(".rte-mermaid-render") || block;
    mermaid.render("saved-diagram-" + i, decode(block.getAttribute("data-diagram")))
      .then(function (result) { target.innerHTML = result.svg; });
  });
  </script>

• Los sanitizadores deben conservar los atributos div anteriores y permitir SVG en línea o eliminarlo y volver a dibujar a partir de data-diagram como se muestra.
• mermaid.min.js 11.4.1 ocupa unos 2.6 MB. Cárgalo solo en páginas que editen o muestren diagramas y alójalo tú mismo si la página debe funcionar sin conexión.

Relacionado: demo de diagramas, referencia de elementos de la barra de herramientas.