技术文档►工具►markdown

mermaid笔记

安装

安装 VSCode

安装插件

Hexo支持mermaid

  1. yarn add hexo-filter-mermaid-diagrams

  2. 在主题中的_config.yml中添加

1
2
3
4
mermaid:
    enable: true # Available themes: default | dark | forest | neutral
    theme: forest
    cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
  1. 在主题找到资源加载文件layout/_partial/head.ejs添加代码
1
2
3
4
5
6
7
8
<% if (theme.mermaid.enable) { %>
<script src="<%= theme.mermaid.cdn %>"></script>
<script>
    if (window.mermaid) {
        mermaid.initialize({ theme: '<%= theme.mermaid.theme %>' })
    }
</script>
<% } %>

类图

1
2
3
4
5
6
7
8
9
10
11
12
classDiagram
    class 动物{
        特点1：能动
        特点2：能叫
    }
    class 狗{
        特点1：4条腿
        特点2：会汪汪叫
        特点3：可爱至极
        汪汪叫(陌生人)
    }
    动物 <|-- 狗

参考资料：

http://lightzhan.xyz/index.php/2020/05/10/markdown-mermaid-tutorial-2/

http://lightzhan.xyz/index.php/2020/04/06/markdown-mermaid-tutorial/