Cherry Markdown 浏览器模式下引入 Mermaid 和 ECharts 库指南

在 Cherry Markdown 编辑器的浏览器环境中，开发者经常需要集成图表渲染功能。本文将详细介绍如何在纯 JavaScript 环境下引入 Mermaid 和 ECharts 这两个流行的可视化库，而无需依赖 npm 等包管理工具。

直接引入 CDN 资源

最简单的方式是通过内容分发网络(CDN)直接引入这两个库的压缩版本：

<!-- 引入 Mermaid 图表库 -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>

<!-- 引入 ECharts 图表库 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.js"></script>

版本选择建议

1. Mermaid 版本：推荐使用 10.x 及以上版本，这些版本提供了更丰富的图表类型和更稳定的渲染效果

2. ECharts 版本：4.6.0 是一个稳定版本，但也可以考虑使用 5.x 系列以获得更多新特性

初始化配置

引入库后，通常需要进行一些初始化配置：

// Mermaid 初始化
mermaid.initialize({
  startOnLoad: true,
  theme: 'default'
});

// ECharts 使用示例
var chartDom = document.getElementById('chart-container');
var myChart = echarts.init(chartDom);
var option = {
  // 图表配置项
};
myChart.setOption(option);

集成到 Cherry Markdown

当与 Cherry Markdown 集成时，可以通过以下方式增强编辑器的图表功能：

1. Mermaid 支持：Cherry Markdown 内置了对 Mermaid 的基本支持，引入库后即可直接使用代码块渲染流程图等

2. ECharts 集成：可以通过自定义渲染器或插件的方式将 ECharts 集成到编辑器中，实现复杂数据可视化

性能优化建议

1. 按需加载：如果页面中不一定使用图表功能，可以考虑动态加载这些库

2. 版本锁定：生产环境中建议锁定具体版本号，避免因自动更新导致兼容性问题

3. 本地缓存：对于长期稳定的项目，可以考虑下载这些库文件到本地服务器

通过以上方式，开发者可以轻松地在浏览器环境中为 Cherry Markdown 编辑器添加强大的图表渲染能力，而无需复杂的构建工具配置。