CKEditor 生态系统文档
Search
Contribute to this guide
首页/CKEditor 5/功能

指南使用 Mermaid 创建流程图和图表

您可以在 CKEditor 5 中创建流程图和图表，这要归功于与 Mermaid 库的实验性集成。Mermaid 使用受 Markdown 启发的语法来创建和动态修改流程图、甘特图、饼图或象限图、图表、思维导图等等。

这是一个 **实验性功能**，因此不建议用于生产环境。有关更多信息、评论和功能请求，请参考 GitHub 上的软件包存储库。

# 演示

下面的示例允许您在内容创建过程中测试创建图表和流程图，不再需要每次更改时都重新创建和重新上传截图！您也可以在 GitHub Writer 中查看实时实现。

CKEditor 时间线图表


    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

# 使用 Mermaid 语法

Mermaid 提供了广泛且灵活的语法，允许用户创建各种图表、图表和图形。在 Mermaid.js 上找到完整的语法参考。您也可以在 Mermaid Live Editor 中在线查看更多示例。

在我们的公司博客上，您可以在一篇 专门的文章 中详细了解 Mermaid 语法和用法。

# 安装

请注意，此插件不是从主 CKEditor 5 文件导入的，而是从它自己的软件包导入的。

在 安装编辑器 后，将该功能添加到您的插件列表和工具栏配置中。请注意，与原生 CKEditor 5 插件不同，此插件是从它自己的软件包导入的。此外，这种导入方式与标准 CKEditor 5 插件的导入方式不同

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