hexo博客中引入图表

hexo博客框架的特色就是支持markdown语法写作，而要在hexo中引入图表，意味着图表最好能用markdown语法拟写和制作。这里记录下我的理解和做法。

插入图表

最简单粗暴的办法就是制作好图表，然后通过图片格式直接插入到markdown文档里。

我经常用百度脑图来制作读书笔记的思维导图。百度脑图大约在2015年推出（当然，目前已经有3年多时间没更新了，背靠百度，不太担心会突然不能用。），通过浏览器访问，制作思维脑图（唯一的方法，没有客户端，这点很符合我的口味）。制作过程中内容会自动保存在云端。思维导图制作好以后，可以导出为多种格式，比如png，svg，方便当图片插入。也支持导出为mm，xmind等格式，方便与Freemind，XMind等软件兼容。还支持直接导出为txt，md等格式。

我时常导出为svg矢量格式，上传到图床，然后当图片插入到markdown笔记中。因为支持历史版本，可以比较方便的修改制作好的思维导图，唯一不便是需要重新上传新的svg图片。

当然类似的图表制作工具，软件很多，文末是我尝试过的一些，可以参考。

插件方式

插件方式能使图表与markdown语法相兼容，直接使用markdown语法编写诸如思维脑图之类的图表。很多markdown编辑工具，支持图表插件，添加即可。hexo博客框架也一样，可以安装相应的图表插件，然后直接在markdown笔记里拟写图表。文末附有一些hexo的图表插件，可以参考。

我不太习惯使用插件的方式。一是插件的核心是在hexo博客里引入相应的js库，然后渲染成图表，这个违背了我使用hexo博客的初衷–轻量，极简，况且不是每篇文章都会写入图表。二则我用图表主要是展示一些读书笔记的思维脑图，一般都是提前完成的，不会和hexo笔记一起拟写。

图表工具

1. 百度脑图
   这个是我目前常用的，仅直接浏览器访问使用，很符合我的偏好。
   百度的这个思维脑图有开源，可以参考–在 Hexo 中使用思维导图。
   有人制作了相应的插件–hexo-simple-mindmap，可以参考。

2. draw.io
   大名鼎鼎的在线图表编辑工具，可以用来编辑工作流, BPM, org charts, UML, ER图, 网络拓朴图等等。使用过一段时间，用来代替visio。只要你愿意花费时间，可以制作出异常精美的图表。

3. 笔记软件
   有道云笔记，可以制作思维导图，导出功能开通会员才支持。
   语雀，阿里的笔记软件，支持制作图表，目前轻度使用，没尝试过其图表功能。

4. markmap
   Markmap是Markdown和mindmap的组合。它解析Markdown内容，提取其内在的层次结构，并呈现一个交互式思维导图。

• 在线制作–(https://markmap.js.org/repl) ，可导出为html或者svg格式。
• hexo-markmap插件

5. mermaid
   支持制作流程图，时序图，甘特图等。这个使用方便，上手快，支持的图表形式多，极力推荐。

• 在线编辑制作–https://mermaid.live/ ，可导出为png或者svg格式。
• hexo插件。hexo-filter-mermaid-diagrams，hexo-tag-mermaid，hexo-mermaid-diagrams

6. 其他插件

• hexo-tag-plugins
• hexo-filter-flowchart
• hexo-filter-sequence