Demo Markdown Mermaid

goat示例

Hugo 原生支持 GoAT。下面的GoAT示例：

Mermaid支持

Hugo 目前没有提供 Mermaid 图表的默认模板。但你可以轻松添加自己的模板。一种方法是创建 layouts/_default/_markup/render-codeblock-mermaid.html：

<pre class="mermaid">
  {{- .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

然后在foot.html中根据条件导入script：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{/* Mermaid */}}
{{ if or (.Page.Store.Get "hasMermaid" ) ( .Page.HasShortcode "mermaid" ) }}
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  const mermaidAPI = mermaid.mermaidAPI;
  mermaidAPI.initialize({
    securityLevel: 'loose',
    theme: 'dark',
  });
</script>
{{ end }}

这样，我们就可以直接使用mermaid支持的语法编写自己的流程图了。

sequenceDiagram

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: 你好 John，你好吗？
    loop 健康检查
        John->>John: 对抗疑病症
    end
    Note right of John: 理智的想法
占上风！
    John-->>Alice: 太好了！
    John->>Bob: 你呢？
    Bob-->>John: 非常好！

sequenceDiagram2

%% Example of sequence diagram
  sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
    Bob->>Alice: Not so good :(
    else is well
    Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
    Bob->>Alice: Thanks for asking
    end

graph

图:

graph LR
A[Hard edge] -->B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

GanttCharts

%% Example with selection of syntaxes
        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

        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h

        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h

Class Diagrams

classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }

状态图State Diagrams

stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

饼状图Pie Charts

pie
    title Pie Chart
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 150 

需求图Requirement Diagram

需求图提供了需求及其相互之间以及其他记录元素之间的联系的可视化。建模规范遵循 SysML v1.6 定义的规范。

requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

Gitgraph Diagrams

Git 图表是各个分支上 git 提交和 git 操作（命令）的图形表示。

gitGraph
       commit
       commit
       branch develop
       checkout develop
       commit
       commit
       checkout main
       merge develop
       commit
       commit

C4 Diagrams (plantUML compatible)

Mermaid 的 c4 图语法与 plantUML 兼容。

（此功能需要 Typora ≥ 1.5.0）思维导图是一种图表，用于将信息直观地组织成层次结构，显示整体各个部分之间的关​​系。它通常是围绕一个概念创建的，在空白页面的中心绘制为图像，并在其中添加相关的想法表示，例如图像、单词和单词的一部分。主要思想与中心概念直接相关，而其他思想则从这些主要思想中分支出来。

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness
and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

最后

更多文档参考Mermaid文档