Demos
Browse all demos

Diagrams (Mermaid)

Write flowcharts, sequence diagrams, pie and Gantt charts as text; the editor draws them.

  • The mermaiddiagram plugin ships in all_plugins.js. Authors type Mermaid text and see a live preview in the dialog.
  • The renderer is yours to choose: Mermaid on the page (this demo), a server-side config.diagramResolver, or neither, in which case the source is kept and shown as code.
  • The source travels with the saved HTML in data-diagram, so a diagram stays editable after it is saved and loaded again.

Loading the editor...

<script src="/your-assets/mermaid.min.js"></script>  <!-- optional: renders diagrams in the browser -->
<div id="div_editor1"></div>
<script>
    if (window.mermaid) mermaid.initialize({ startOnLoad: false });

    var config = {};
    // A toolbar of your own with the Diagram button on it (it is also under "More").
    config.toolbar = "mytoolbar";
    config.toolbar_mytoolbar = "{bold,italic,underline}|{paragraphs}|{insertorderedlist,insertunorderedlist}|{insertdiagram}|{undo,redo}";

    // No Mermaid on the page? Render on your server instead (Kroki, mermaid-cli...):
    // config.diagramResolver = function (source) {
    //     return fetch("/render-diagram", { method: "POST", body: source })
    //         .then(function (r) { return r.text(); })
    //         .then(function (svg) { return { svg: svg }; });
    // };

    var editor1 = new RichTextEditor("#div_editor1", config);

    // The Mermaid source is saved with the diagram (data-diagram), so a saved
    // document can be edited again and re-rendered anywhere:
    // editor1.renderDiagrams();
</script>