Cherry-Markdown 中 ECharts 和 PlantUML 插件的正确引入方式

背景介绍

Cherry-Markdown 是一款功能强大的 Markdown 编辑器，支持多种扩展功能，包括图表绘制和 UML 图生成。在实际使用中，开发者经常会遇到如何正确引入 ECharts 和 PlantUML 插件的问题，特别是在 Vue 等现代前端框架中的集成方式。

ECharts 插件的引入方法

在 Vue 项目中引入 ECharts 插件时，需要注意以下几点：

1. 安装依赖：首先确保已经通过 npm 或 yarn 安装了 echarts 和 cherry-markdown

2. 正确导入方式：在 Vue 组件中，应该使用以下方式导入和配置 ECharts 插件：

import Cherry from 'cherry-markdown';
import echarts from 'echarts';
import EChartsTableEngine from 'cherry-markdown/dist/addons/advance/cherry-table-echarts-plugin';

// 方式一：通过 usePlugin 方法注册插件
Cherry.usePlugin(EChartsTableEngine, { echarts });

3. 编辑器配置：在创建 Cherry 编辑器实例时，确保启用了表格图表功能：

new Cherry({
  // 其他配置...
  table: {
    enableChart: true
  }
});

PlantUML 插件的注意事项

与 ECharts 不同，PlantUML 插件在 Cherry-Markdown 中是默认支持的，不需要额外配置。开发者可以直接使用 PlantUML 语法来绘制 UML 图，而无需担心引入问题。

常见问题解决方案

1. Vue 项目中图表不显示：确保 ECharts 插件已正确注册，并且编辑器配置中启用了图表功能。如果使用 CDN 方式引入，需要确认脚本加载顺序正确。

2. 控制台警告信息：关于 subMenu 配置类型的警告，建议按照提示更新配置格式，使用 {subMenu: ['menuName']} 的形式。

3. 构建工具相关问题：如果遇到类似 "process is not defined" 的错误，可能是因为某些依赖需要 Node.js 环境，在前端项目中需要特殊处理或寻找替代方案。

最佳实践建议

1. 对于 Vue 项目，推荐使用 npm 包的形式引入依赖，而不是 CDN 方式。

2. 在开发过程中，密切关注控制台输出，及时处理警告和错误信息。

3. 对于复杂的配置，建议参考官方示例代码，但要注意适应项目特定的技术栈。

通过正确理解和应用这些配置方法，开发者可以充分利用 Cherry-Markdown 的强大功能，在项目中实现丰富的图表和 UML 图展示效果。