Mermaid-Diagramme

Schreiben Sie Flussdiagramme, Sequenzdiagramme, Kreisdiagramme und Gantt-Diagramme als Mermaid-Text, und der Editor zeichnet sie als Block im Dokument. Mermaid selbst ist nicht Teil des Editors: Ihre Seite lädt es oder Ihr Server rendert das Diagramm.

Schalten Sie es ein

Die Funktion ist das Plugin mermaiddiagram.js (auch in plugins/all_plugins.js). Das Symbolleistenelement ist insertdiagram (Tooltip "Diagram"). In der Standardsymbolleiste befindet es sich im Menü "More" (⋮). Fügen Sie in Ihrer eigenen Symbolleiste insertdiagram hinzu. Um Diagramme im Browser zu zeichnen, laden Sie Mermaid, bevor Sie den Editor erstellen:

<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>

Woher die Zeichnung kommt

Das Plugin lädt nichts aus dem Netzwerk. Für jedes Diagramm wird das erste verfügbare Diagramm verwendet:

1. diagramResolver, Ihre Funktion. Es ruft die Mermaid-Quelle ab und gibt ein Versprechen von { svg: "<svg…" } oder { imageUrl: "…" } zurück. Verwenden Sie es zum Rendern auf Ihrem Server (zum Beispiel mit Kroki oder mermaid-cli).
2. window.mermaid auf der Seite (oder dem übergeordneten Fenster). Das Plugin verarbeitet sowohl den älteren mermaid.render, der einen String zurückgibt (Versionen 8 und 9), als auch den, der ein Promise zurückgibt (10 und höher); Diese Seiten wurden mit 11.4.1 getestet.
3. Weder noch: Der Block zeigt die Quelle als Code an und im Dialog steht "No Mermaid renderer detected on the page" . Die Quelle bleibt erhalten, sodass das Diagramm später gezeichnet werden kann.

Optionen

Option	Standard	Was es bewirkt
diagramResolver	null	Ihr zuvor verwendeter Rendererwindow.mermaid. Bei Ablehnung wird die Quelle mit der Fehlermeldung angezeigt.
diagramSamples	Vier Beispiele: ein Flussdiagramm (graph TD), AsequenceDiagram, Apieund agantt	Die Beispielschaltflächen im Dialog. Jede Schaltfläche zeigt die erste Zeile ihres Beispiels an.
text_insertdiagram, text_insertdiagramtitle, text_insertdiagramlabel, text_insertdiagrampreview	"Diagram", "Insert / edit diagram", "Mermaid", "Preview"	Schaltflächen-Tooltip, Dialogtitel und Beschriftungen.

Ein serverseitiger Resolver sieht so aus (die URL gehört Ihnen):

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

Benutze es

• Klicken Sie auf die Schaltfläche und rufen Sie aneditor1.execCommand("insertdiagram"), oder auswählen"Diagram"imSlash-Menü. Geben Sie ein Beispiel ein oder wählen Sie es aus und fügen Sie es dann ein.
• Bearbeitung.Doppelklicken Sie auf ein Diagramm, um den Dialog mit seiner Quelle erneut zu öffnen. Auf der Schaltfläche steht dann „Aktualisieren“.
• Entfernen.Bewegen Sie den Mauszeiger über den Block und klicken Sie auf das runde × in seiner Ecke oder drücken Sie die Entf- oder Rücktaste, während sich die Einfügemarke im Block befindet.
• Fehler.WennMermaidDie Quelle kann nicht analysiert werden, die Vorschau zeigt die Quelle undMermaid's Nachricht in Rot ("Parse error on line 3 …" ).
• editor1.renderDiagrams()zeichnet jeden Diagrammblock erneut und gibt zurück, wie viele er gefunden hat. Rufen Sie es danach ansetHTMLCodemit Inhalten, die noch keine Zeichnung haben.

Wissenswertes

• Der gespeicherte Block behält die Quelle beidata-diagramund die Zeichnung darin (hier gekürzt):

  <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>

  MitMermaiddie Zeichnung ist Inline-SVG (ca. 4 KB für das obige Flussdiagramm); ohne es, a<pre class="rte-mermaid-src">.
• Der ×-Entfernen-Button wird mit dem Inhalt gespeichert. Verstecken Sie es dort, wo Sie den HTML-Code anzeigen, oder es wird als angezeigt"x"auf Ihrer Seite.
• Nachdem ein Diagramm mit Update bearbeitet wurde, wird sein data-diagram zweimal HTML-kodiert (--> wird als --> gespeichert). Der Editor liest beide Formen, aber Ihr eigener Code muss den Wert noch einmal dekodieren.
• Der Rahmenstil des Blocks existiert nur innerhalb des Editors. Um gespeicherte Diagramme anzuzeigen, blenden Sie die Schaltfläche aus und zeichnen Sie aus der Quelle. Dies funktionierte sowohl für neue als auch für bearbeitete Blöcke:

  <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>

• Sanitizer müssen die oben genannten div-Attribute beibehalten und entweder Inline-SVG zulassen oder es entfernen und erneut aus data-diagram zeichnen, wie gezeigt.
• mermaid.min.js 11.4.1 ist etwa 2,6 MB groß. Laden Sie es nur auf Seiten, die Diagramme bearbeiten oder anzeigen, und hosten Sie es selbst, wenn die Seite offline funktionieren muss.

Verwandt: Diagrammdemo, Referenz zu Symbolleistenelementen.