に投稿に更新Tools / Hexo

add-mermaind

環境セットアップ

hexo-filter-mermaid-diagramsのインストール

1
npm install hexo-filter-mermaid-diagrams --save

Mermaidの_config.ymlの設定

1
2
3
4
5
mermaid:
    enable: true
    version: "7.1.2"
    # Available themes: default | dark | forest | neutral
    theme: default

Mermaidの読み込み

hexo-theme-icarus/layout/common/scripts.jsxに以下を追加する

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js"></script>

ダイアグラム図作成

フローチャート図

1
2
3
4
5
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
    click D "https://google.com";

シーケンス図

1
2
3
4
5
6
7
8
9
10
11
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 <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
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!

ガンチャート図

1
2
3
4
5
6
7
8
9
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram 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
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram 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

クラス図

1
2
3
4
5
6
7
8
9
10
11
12
13
14
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

Gitグラフ

1
2
3
4
5
6
7
8
9
10
gitGraph
   commit
   commit
   branch develop
   commit
   commit
   commit
   checkout main
   commit
   commit
gitGraph
   commit
   commit
   branch develop
   commit
   commit
   commit
   checkout main
   commit
   commit

Quadrant Chart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

Pie chart diagrams

1
2
3
4
5
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

フローチャート

flowchart 

A(開始)
B(終了)
処理1
C[処理2]
D{判断}
E[処理2-2]
F{{準備}}
G1[/外部データ<上にあると入力>/]
G2[/外部データ<下にあると出力>/]
H[[定義<マクロ>]]
I[(データベース)]
J1((結合子A))
J2((結合子A'))
K1[/ループ開始\]
K2[\ループ終了条件式/]

A --> F
F --> K1
K1 --> 処理1
処理1 --> D
D --> E & G1
E --> H
G1 --> C --> G2
G2 & H --> K2 --> B

H　-.- J1
J2 --> マクロ内容開始　--- I --- マクロ内容終了 --> J2

カテゴリ

×