kinkozi マークダウンエディタープラグインでのmermaidを用いたフロー図の書き方について、説明していきます。

もくじ

1. markdown中にmermaidを書くための宣言

```mermaid
---
title: あいうえおかきっくけこさしすせそ
---
flowchart LR
    id
```

バッククォート3つにつづけてmermaidと記載し、次に来るバッククォート3つまでがmermaidとして評価されます。
ハイフン3つで囲んだフロントマター（Frontmatter）に title を定義できます。

mermaid自体の記法はこちらのマニュアルにある通りですが、要約してサンプルと合わせて掲載いたします。

なお、フローチャートのためのキーワード flowchart と graph はどちらも同じ動きをします。

2. チャートの方向

チャートの方向性を flowchartキーワードの後にセットします。
 

• TB - 上から下へ
• TD - トップダウン/上から下と同じ
• BT - 下から上へ
• RL - 右から左
• LR - 左から右

3. ノードの表記方法

```mermaid
flowchart LR
  開始  --> 処理 --> 終了
  
  開始@{ shape: rect }
  処理@{ shape: rect }
  終了@{ shape: rect }
```

ノードを線で結ぶことでフローチャートを作成します。ノード名がそのまま表示文言になります。
四角形や三角形など自由に選ぶことができます。

「開始  --> 処理 --> 終了」 は名前の定義と紐づけ定義部分になり、図形の形は別途、以下のように行います。
ノード名とは別の表示をしたい場合、labelを定義すると上書きできます。

ノード名@{ shape: 形, label: "ラベル"}

この、形の定義は45種類（2025/6/20現在）あるためここでは代表的なものを上げておきます。
詳細はこちらをご覧ください。

4.ノード間のリンクの種類

4.1. リンクの種類

1,2,3と文字数を増やしていくことで線を長くすることができます。

```mermaid
flowchart LR
  開始 ---------> 処理 -......-> 終了
  
  開始@{ shape: rect }
  処理@{ shape: rect }
  終了@{ shape: rect }

 %% リンクの色の定義
  linkStyle 0,1 stroke:#ffffff,stroke-width:2px
```

サンプルのlinkStyleは5.2で追って説明しますが、矢印の色がデフォルトで黒で見にくいため修正しています。

4.2. リンクの文字

文字付きのリンクの場合、以下のように中間に文字を入れます。

flowchart LR
   A == text ==> B
   B ==> |OK| C
   B ==> |NG| D

4.3. リンクの終端の種類

終端を矢印ではなく〇や×にすることができます。

flowchart LR
  A o--o B
  B <--> C
  C x--x D
linkStyle 0,1,2 stroke:#ffffff,stroke-width:2px

4.4 リンクの終端に名前を付ける

終端(edge)に以下のように名前を付けることができます。edge に対してアニメーションの定義を加えることができます。

flowchart LR
  A e1@--> B

以下のように、ノードのshapeやlabelを定義したようにedgeのアニメーションを有効化できます。

flowchart LR
  A e1@==> B
  e1@{ animate: true }
linkStyle 0 stroke:#ffffff,stroke-width:2px

5. ノードとリンクの修飾

5.1. ノードの装飾

ノードは style にて色や線の太さを変更することができます。
複数のノードに同じスタイルを適用したい場合は classDef にてスタイルを定義したうえで、 class でカンマ区切りでノード名を指定しクラス定義を適用してください。

flowchart LR
    start --> process --> stop

    %% 単体のスタイルの定義
    style process fill:#f8f8f8,stroke:#666,stroke-width:2px,font-weight:bold
    %% 複数に同じスタイルの定義を適用する場合
    classDef startStop fill:#ffcf33,stroke:#cc9900,stroke-width:3px,rx:8,ry:8
    class start,stop startStop

linkStyle 0,1 stroke:#ffffff,stroke-width:2px

5.2. リンクの装飾

リンクの色や太さを linkStyle で指定することができます。linkStyleで指定するリンクは定義された順番で連番で0から指定することができます。またはすべて同じ場合はdefaultを指定することができます。
 

linkStyle 0,1 stroke:#ffffff,stroke-width:2px

linkStyle default stroke:#ffffff,stroke-width:2px

6. サンプル

以下、サンプルとそのキャプチャー画像となります。

```mermaid
graph TD
 A e1@-->B
 B e2@-->C
 C e3@-->|OK| D
 C-->|NG| E
 D-.->|Reference| F
 D e4@--->|メール送信| End
 E -->|電話| H
 
A@{ shape: braces, label: "アプリ起動" }
B@{ shape: manual-input, label: "レコード入力"}
C@{ shape: docs, label: "作業報告アプリ"}
D@{ shape: procs, label: "レポートPDF生成"}
E@{ shape: paper-tape, label: "現場担当者に確認" }
F@{ shape: lin-cyl, label: "PDF保存"}
End@{ shape: cross-circ, label: "End"}
H@{ shape: bolt, label: "Communication link" }

%% 矢印（リンク）スタイルの指定（indexは0から）
linkStyle 0,1,4,5 stroke:#ffffff,stroke-width:2px
linkStyle 2 stroke:#8f8
linkStyle 3 stroke:#f88

%% アニメーションの定義
e1@{ animate: true }
e2@{ animate: true }
e3@{ animate: true }
e4@{ animate: true }

%% ノードの色の定義
classDef className fill :#ffff33 ;
class A,B className
style D fill:#ffaf
```