让你的hexo支持mermaid

mermaid配置方法

Mermaid是一个用于生成流程图、时序图等图表的JavaScript库。要在Hexo中使用它,需要以下步骤:

  1. npm安装mermaid渲染插件:
1
npm install hexo-filter-mermaid-diagrams --save
  1. 在Hexo博客的根目录下,修改_config.yml文件,添加以下配置:
1
2
3
mermaid:
enable: true
theme: default
  1. 在需要插入图表的Markdown文件中,使用Mermaid语法插入图表。例如:
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

参考文章:

https://www.liuyude.com/How_to_make_your_HEXO_blog_support_handwriting_flowchart.html
https://github.com/webappdevelp/hexo-filter-mermaid-diagrams

hexo绘制脑图

参考文章:

https://qsli.github.io/2017/01/01/markdown-mindmap/
https://github.com/HunterXuan/hexo-simple-mindmap

配置完成后,使用mermaid语法

流程图
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
时序图
sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good!
甘特图
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d
脑图
文章目录
  1. 1. mermaid配置方法
  2. 2. hexo绘制脑图
  3. 3. 配置完成后,使用mermaid语法
    1. 3.1. 流程图
    2. 3.2. 时序图
    3. 3.3. 甘特图
    4. 3.4. 脑图
|