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!

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: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
        plugins: [ Mermaid, /* ... */ ],
        toolbar: [ 'mermaid', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );