# Creating flowcharts and diagrams using Mermaid

You can create flowcharts and diagrams in CKEditor 5 thanks to the experimental integration with the [Mermaid](https://mermaid.js.org/) 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](https://github.com/ckeditor/ckeditor5-mermaid).

<a id="demo">

## 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!

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="using-mermaid-syntax">

## 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](https://mermaid.js.org/intro/). You can also check out more examples online in [Mermaid Live Editor](https://mermaid.live/).

Learn more about Mermaid syntax and usage in a [dedicated article](https://ckeditor.com/blog/basic-overview-of-creating-flowcharts-using-mermaid/) on our company blog.

<a id="installation">

## Installation

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

After [installing the editor](../getting-started/installation/cloud/quick-start.md), 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:

```js
import { ClassicEditor } from 'ckeditor5';
import { Mermaid } from '@ckeditor/ckeditor5-mermaid';

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

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Mermaid, /* ... */ ],
		toolbar: [ 'mermaid', /* ... */ ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

---

Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)