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内容,提取其内在的层次结构,并呈现一个交互式思维导图。

  1. mermaid
    支持制作流程图,时序图,甘特图等。这个使用方便,上手快,支持的图表形式多,极力推荐。
  • 在线编辑制作–https://mermaid.live/ ,可导出为png或者svg格式。
  • hexo插件。hexo-filter-mermaid-diagrams,hexo-tag-mermaid,hexo-mermaid-diagrams
  1. 其他插件
新冠三年 《中国艺术史》读书笔记

  评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×