Mermaidでブロック図を書いてみる（作成手順も記載）

今回はMermaidに関して書いていきます。

Notion×Mermaidの記事はこれまで何度か投稿しています（詳細は以下リンクにて）。

前提情報

Mermaidとは？

まずはMermaidとは？に関して書いておきます。

Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。
出典：グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO

詳しくは以下のリンクを見て頂ければと。
dev.classmethod.jp

ブロック図とは？

ブロック図とは？に関しても書いておきます。

ブロック図（Block diagram）またはブロック線図は、何らかのシステムを図示したダイアグラムで、基本構成要素や機能をブロックで表し、それらを線で繋いでブロック間の関係を示したものである
出典：ブロック図とは何？わかりやすく解説 Weblio辞書

機能ブロック図とフローチャートの違いは何ですか？
ブロック図は、システムの構成要素をブロックで表し、その関係や動作を示すもので、フローチャートは、情報やデータの流れを示すものとして広く使われています。両者は非常によく似ていますが、その目的は異なります。
出典：機能ブロック図作成ツールでシステムを簡単に見える化 - Miro

詳しくは以下のリンクを見て頂ければと。
www.weblio.jpmiro.com

今回はMermaid Live Editorを使用

ブロック図は比較的最近リリースされた機能のようです（2024年2月2日）。

github.com
Notion上のMermaidバージョンは少し古く、まだ書けないようです。
※Notion（Mermaid）上で”info”と入力するとバージョンが確認できます。

バージョンを比べると、

ブロック図がリリースされたバージョン：v10.8.0
Notion（Mermaid）のバージョン：v10.6.1

です。
※Notion（Mermaid）のバージョンは、この記事を書いている時点のものです。

そのうちNotion（Mermaid）でもブロック図を書けるようになるかなと。

ということで、今回はMermaid Live Editorを使うことにします。

作成したブロック図

まずは手っ取り早く、今回作成したブロック図の画像を貼ります。
ただその前に、ブロック図の元ネタとなった処理に関して触れておきます。

ブロック図の元ネタ

今回作成したブロック図の元ネタは以下の記事からです。
miya-moto-memo.hatenablog.com
「GAS」を使用して「Notion」「LINE」と連携しています。
各サービスの関係をブロック図で表現してみます。

ブロック図（画像）

「GAS」「Notion」「LINE」の関係をブロック図にしたのが以下画像です。

「GAS」で「Notion」からデータ取得し、取得したデータを「LINE」に通知します。

上記のブロック図は色合いが地味ですが、テーマを追加設定することで色にメリハリがつきます（詳細は後述）。
各ブロックに色指定することもできます（こちらも詳細は後述）。

ブロック図（コード）

上記のブロック図を生成するコードは以下の通りです。

block-beta
  columns 3
  Database[("Notion")] space:2
  space:3
  Database -- "データ取得" --> GAS
  GAS space LINE
  GAS -- "通知" --> LINE

追加設定

色々と追加設定できるので、いくつかピックアップして紹介します。

テーマ（色合い）を変更する

Mermaidではテーマ（色合い）を変更することもできます。
テーマは5種類ほどあるのですが、そこから「base」を指定してみます。

テーマはconfigタブで指定できます。

{
  "theme": "base"
}

テーマ（色合い）変更に関しては、以下記事にて詳しく書いています。
こちらも良ければぜひ。

miya-moto-memo.hatenablog.com

各ブロックの色を変更する

ブロックの色を変更できます。
各ブロック（サービス）のイメージに合う色を指定してみました。

コードは以下の通りです。
最後の3行を追加しています。

block-beta
  columns 3
  Database[("Notion")] space:2
  space:3
  Database -- "データ取得" --> GAS
  GAS space LINE
  GAS -- "通知" --> LINE
  style GAS fill:#4285f4,color:#fff,stroke:#111
  style Database fill:#fff,stroke:#111
  style LINE fill:#00B900,color:#fff,stroke:#111