ブログでチャートを書くMermaid記法

ブログやホームページでフローチャートを比較的簡単に作成する方法を調べました。Mermaid（マーメイド）記法と言います。箇条書きのテキストをハイフン---や-->でつなげたりすることでフローチャートなどの図が作成できます。

シーケンス図やガントチャートなども書けるようです。今のところフローチャートを書いて練習しています。慣れれば手間が減りそうです。

実例
はてなブログ公式のリファレンス
- ヘッダーに入れるコード
Mermaid記法でかけるチャートの例
- シーケンス図の例
- ガントチャートの例
参考にさせていただいたリンク
まとめ

実例

Mermaid記法でチャートを書く段取りをフローチャートにしてみました。出来上がり図、コードの文字列、書き方の順に説明をします。

実際の表示がこちら

flowchart TD
    A[Mermaidを使うのは？] --(はじめて！)--> B[ヘッダにMermaidのコードを記入]
    B  --> D[Meamaid記法のテキストを書く]
    A --(2回目以降) --> D
    D --- E[```mermaid のコードブロックにテキストを挿入]
    E --- F[完成]

    classDef someclass fill:#f96;
    class F someclass

書き方

```mermaid ～```
上記の様に、Marmaidと明記したバッククオート3つで前後を囲んでコードブロックを作ります。その中にMermaid記法で文字列を書いてチャートを作成します。

```mermaid

flowchart TD
    A[Mermaidを使うのは？] --(はじめて！)--> B[ヘッダにMermaidのコードを記入]
    B --> D[Meamaid記法のテキストを書く]
    A -- (2回目以降) --> D
    D --- E[```mermaid のコードブロックにテキストを挿入]
    E --- F[完成]

    classDef someclass fill:#f96;
    class F someclass

```

フローチャートの書き方

flowchart：フローチャートを書くことを明示
TDは上→下、LRは左→右
アルファベットは関数、分岐する時は必須？
[]はタイトル、（）は分岐条件など？
--はライン、-->矢印
classを指定することで色を変えることができる

Mermaid記法を確認しながらかけるサイト

ライブプレビューが可能なMermaid記法のエディタサイトです。

サンプルを編集しながら、試すことができます。

はてなブログ公式のリファレンス

はてなブログはJavaScriptやCSSなどをご自身で記載し、自由にカスタムできるプラットフォームです。Mermaidの対応も、少し設定を加えることでご自身のブログに導入することが可能です。
現在のところ、はてなブログとしてMermaid記法に対応する予定はございません。これはMermaid記法が主に技術者に向けた機能であり、一般に広く使われることを想定しないこと、利用ライブラリの変更、バージョンを指定したいなどの事情を考慮したものです。

技術者向けの機能なので公式対応はしていないが、カスタマイズの範囲でできるので、やれる人はやってくださいとのことですね。

ヘッダーに入れるコード

はてなブログのブログの詳細設定要素にメタデータを追加で下記のコードをコピーペーストします。

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

Mermaid記法でかけるチャートの例

シーケンス図とガントチャートのサンプルを表示します。

シーケンス図の例

シーケンス図は、異なるオブジェクトがどのようにやり取りを行うか、またそれが時間に沿ってどのように進むかを、図を使って見やすく示すのに適しています。

下図ではレストランで注文してから料理が出てくるまでの店内の作業過程をシーケンス図で表したものです。

sequenceDiagram
    actor 顧客
    participant ウェイター
    participant キッチン

    顧客->>ウェイター: 注文する
    ウェイター->>キッチン: 注文を伝える
    loop 料理の準備
        キッチン->>キッチン: 料理を作る
    end
    キッチン->>ウェイター: 料理を提供
    ウェイター->>顧客: 料理を提供

sequenceDiagram
    actor 顧客
    participant ウェイター
    participant キッチン

    顧客->>ウェイター: 注文する
    ウェイター->>キッチン: 注文を伝える
    loop 料理の準備
        キッチン->>キッチン: 料理を作る
    end
    キッチン->>ウェイター: 料理を提供
    ウェイター->>顧客: 料理を提供

ガントチャートの例

ガントチャートとは、プロジェクト管理における視覚的ツールで、のスケジュールと進捗を横棒で表示します。プロジェクトが予定通りに進んでいるかどうかを簡単に判断できるようになっているチャートです。

gantt
    title プロジェクトガントチャート
    dateFormat  YYYY-MM-DD
    section 調査
    市場調査           :done,    des1, 2023-01-01, 2023-01-08
    製品調査          :active,  des2, 2023-01-09, 2023-01-15
    section 設計
    製品設計          :         des3, after des2, 5d
    試作品設計         :         des4, after des3, 5d
    section 実装
    試作品製造         :         des5, after des4, 7d
    製品テスト         :         des6, after des5, 5d
    section 完成
    レビュー           :         des7, after des6, 3d
    製品発売           :         des8, after des7, 5d

gantt
    title プロジェクトガントチャート
    dateFormat  YYYY-MM-DD
    section 調査
    市場調査           :done,    des1, 2023-01-01, 2023-01-08
    製品調査          :active,  des2, 2023-01-09, 2023-01-15
    section 設計
    製品設計          :         des3, after des2, 5d
    試作品設計         :         des4, after des3, 5d
    section 実装
    試作品製造         :         des5, after des4, 7d
    製品テスト         :         des6, after des5, 5d
    section 完成
    レビュー           :         des7, after des6, 3d
    製品発売           :         des8, after des7, 5d