CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Examples

guideCreating flowcharts and diagrams using Mermaid

You can create flowcharts and diagrams in CKEditor 5 thanks to the experimental integration with the Mermaid library. Mermaid uses a Markdown-inspired syntax to create and dynamically modify flowcharts, Gantt diagrams, pie or quadrant charts, graphs, mindmaps, and more.

The example below lets you test creating diagrams and flowcharts right during the content creation – no more screenshots that need to be re-created and re-uploaded each time something needs a change! You can also check out a live implementation in GitHub Writer.

CKEditor timeline diagram


    timeline
    title History of CKEditor
    2003 : FCKeditor
    2009 : CKEditor 3
    2012 : CKEditor 4
    2018 : CKEditor 5

Collaboration features mindmap


        mindmap
        root(CKEditor 5<br>Collaboration)
          Change control
            Track changes
            Revision history
          Comments
            Comments archive
          Other tools
            Mentions
            User list

# Using Mermaid syntax

Mermaid offers an extensive and flexible syntax allowing users to create a variety of diagrams, charts, and graphs. Find the complete syntax reference on Mermaid.js. You can also check out more examples online in Mermaid Live Editor.

# Editor example configuration

This example uses our own Mermaid plugin, available on GitHub. You need to import it before CKEditor 5 can use the Mermaid syntax. Look at the sample configuration to learn how to add the plugin and the toolbar button.

Editor configuration script 
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

import Mermaid from '@ckeditor/ckeditor5-mermaid/src/mermaid';

ClassicEditor
    .create( document.querySelector( '#mermaid' ), {
        plugins: ClassicEditor.builtinPlugins.concat( [
            Mermaid
        ] ),
        toolbar: {
            items: [
                'undo', 'redo', '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'insertImage', 'insertTable', 'blockQuote', 'mediaEmbed', 'mermaid',
                '|', 'bulletedList', 'numberedList', 'todolist', 'outdent', 'indent'
            ]
        },
        ui: {
            viewportOffset: {
                top: window.getViewportTopOffsetConfig()
            }
        },
    } )
    .then( editor => {
        window.editor = editor;
    } )
    .catch( err => {
        console.error( err.stack );
    } );
Editor content listing 
<div id="mermaid">

    <p>Sample editor data</p>
    <pre spellcheck="false"><code class="language-mermaid">
        Sample Mermaid code goes here.
    </code></pre>

</div>