素生
·
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的资源包括官方文档和在线编辑器。
❓
延伸问答
如何在Hexo中安装Mermaid插件？
在Hexo所在路径下运行命令：npm install hexo-filter-mermaid-diagrams --save。
在Hexo中配置Mermaid需要修改哪些文件？
需要修改Hexo主题的配置文件_config.yml和after_footer.pug文件。
Mermaid图表的插入格式是什么？
插入Mermaid代码的格式为<div class="mermaid">和```mermaid。
为什么选择Mermaid而不是其他图表工具？
选择Mermaid是因为它可以在浏览器中渲染，无需本地渲染。
如何查看Mermaid的最新版本？
可以在Mermaid - UNPKG查看最新版本并进行更新。
学习Mermaid的资源有哪些？
学习Mermaid的资源包括官方文档和在线编辑器。
➡️
