Hexo 增加 Mermaid 图表渲染
💡
原文中文,约2100字,阅读约需5分钟。
📝
内容提要
文章介绍了如何在Hexo中使用Mermaid插件自动生成图表。通过安装hexo-filter-mermaid-diagrams并修改配置文件,可以在浏览器中渲染Mermaid图表,并提供了插入Mermaid代码的示例和相关文档链接。
🎯
关键要点
- 文章介绍了如何在Hexo中使用Mermaid插件自动生成图表。
- Mermaid、Plantuml、Graphviz等工具可用于文本方式生成图表。
- 选择Mermaid是因为它可以在浏览器中渲染,无需本地渲染。
- 安装插件hexo-filter-mermaid-diagrams的命令为:npm install hexo-filter-mermaid-diagrams --save。
- 在Hexo主题的配置文件中添加Mermaid相关配置。
- 可以在Mermaid - UNPKG查看最新版本并进行更新。
- 在Hexo主题文件夹中修改after_footer.pug文件以引入Mermaid脚本。
- 插入Mermaid代码的格式包括<div class="mermaid">和```mermaid。
- 提供了一个示例quadrantChart以展示如何使用Mermaid。
- 学习Mermaid的资源包括官方文档和在线编辑器。
➡️