Hugo-用Mermaid显示流程图、甘特图

Shortcodes

Shortcodes是Hugo里面非常强大的一个功能，实现插件使用非常简洁。Hugo里面引入mermaid以支持流程图、甘特图等的最简单方式便是是Shortcodes。

Mermaid

可以在在线编辑器里面编辑，并下载图片。

我选择了七牛云CDN

1

<script src="https://cdn.staticfile.org/mermaid/8.5.0/mermaid.min.js"></script>

怎么添加Shortcode

在layouts/shortcodes/目录下添加mermaid.html文件，内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<div class="mermaid" align="{{ if .Get " align" }} {{ .Get "align" }} {{ else }} center {{ end }}">
    {{ safeHTML .Inner }}
</div>
  
<script src="https://cdn.staticfile.org/mermaid/8.5.0/mermaid.min.js"></script>
 
<script>
var config = {
    startOnLoad:true,
    flowchart:{
        useMaxWidth:false,
        htmlLabels:true
    },
    sequence: { 
        showSequenceNumbers: true,
        actorMargin: 50, 
        diagramMarginX:10, 
        diagramMarginY:10 
    },
};
mermaid.initialize(config);
</script>

文章中怎么使用

{{< mermaid >}}
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!
{{< /mermaid >}}

上面的代码显示效果如下图：

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!

扩展

更多Shortcodes扩展
 Music支持官方mermaid在线编辑器