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的资源包括官方文档和在线编辑器。
🏷️

标签

➡️

继续阅读