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

# Demo

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.

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

        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.

Learn more about Mermaid syntax and usage in a dedicated article on our company blog.

# Installation

After installing the editor, add the feature to your plugin list and toolbar configuration:

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

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Mermaid, /* ... */ ],
        toolbar: [ 'mermaid', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );