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.

Warning

This is an experimental feature, and as such it is not recommended for production use. For more information, comments, and feature requests, please refer to the package repository on GitHub.

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.

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.

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

Installation

Please note that this plugin is not imported from the main CKEditor 5 file, but from its own package.

After installing the editor, add the feature to your plugin list and toolbar configuration. Please note, that unlike native CKEditor 5 plugins, this one is imported from its own package. Also, that this import is different than the standard CKEditor 5 plugins import:

import { ClassicEditor } from 'ckeditor5';
import { Mermaid } from '@ckeditor/ckeditor5-mermaid/dist/index.js';

import '@ckeditor/ckeditor5-mermaid/dist/index.css';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        licenseKey: '&lt;YOUR_LICENSE_KEY&gt;', // Or 'GPL'.
        plugins: [ Mermaid, /* ... */ ],
        toolbar: [ 'mermaid', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );