【Notion】初心者向けにmermaidの書き方を解説してみた

この記事では、Notionのmermaidの書き方を紹介します。

普段、データを見やすく整理したい時、どんなツールを使っていますか？
もし、この記事を読んでいるあなたが、Notionユーザーなら、mermaidという選択肢があります！

mermaidを使って、フローチャートやダイアグラムを作ることで、データや作業を整理するできます。

具体例から分かりやすく解説しているので、mermaidの存在を知っている人はもちろん、知らない人でも理解できる内容です。

この記事を読んで、Notionをもっともっと活用しましょう！

Contents

mermaidとは

mermaidでは、図や矢印をつかって、データを分かりやすく説得力のある形式に整理して、可視化することが出来ます。

そして、図や矢印は、JavaScriptというプログラミング言語を使って表現します。

mermaidで作れる図

mermaidの使い方や書き方の説明に入る前に、mermaidで書ける図の種類や特徴について、紹介します。

まず、mermaidで作れる図は以下の通りです

フローチャート
シーケンス図
クラス図
状態遷移図
ER図
ジャーニーマップ
ガントチャート
パイチャート

次に、それぞれの図が「どんな時に使えるのか」分かりやすく解説していきます。

フローチャート

コードはこちら

フローチャートは、流れ線図とも言います。

プロセスの各ステップを箱で表し、流れをそれらの箱の間の矢印で表すことで、アルゴリズムやプロセスの流れを表現する図です。

フローチャートは、プロセスを明確にしたり、処理の流れを可視化したりする時に使われます。

シーケンス図

コードはこちら

シーケンス図とは、システムの概要・仕様・処理の流れを記載した図のことで、クラス・オブジェクト間のやり取りを図で表します。

設計時のみならず、開発・保守・運用フェーズにおいても使用される図です。

クラス図

コードはこちら

クラス図は、システムの静的な構造・関係性を視覚的に表現するための図です。

オブジェクト指向のプログラミング言語（JavaScript、PHPなど）で開発をする時に、クラスの定義や関連付けをする事で、開発に役立てます。

状態遷移図

コードはこちら

状態遷移図とは状態が遷移する様子を図に書いて図形や矢印などで表現したものです。

状態遷移図では四角で表現された「状態名」、矢印で表現された「遷移」、その矢印のそばにどういう動作を行ったのか記入する「イベント（アクション）」で構成されます。

ER図

コードはこちら

ER図は、モノ（エンティティ）と関係（リレーションシップ）の組み合わせでシステムのデータやデータ間の処理構造を設計します。

箱に囲まれてる部分がモノ、線の上にある部分が関係を表わします。

もっと簡単に言うと、表と表の関係を表わしたモノです。

ジャーニーマップ

コードはこちら

ジャーニーマップは、ユーザーがサービスの購入や登録と言った行動を「旅」のように、まとめた図のことです。

例えば、上の図では、ユーザーが買い物をする時の商品に対する関心の高さを表してます。
時計を見ている時は関心が低いですが、時間が経つにつれ、商品に対する関心が高くなっていきます。

しかし、値段を知り財布の中身を確かめ、関心が無くなっていっています。

ガントチャート

コードはこちら

プロジェクト管理や生産管理などで、工程管理に用いられる表のことです。

主に、進捗状況を管理するために使われます。

パイチャート

コードはこちら

一言で言うと、円グラフです。
小学校や中学校で習ってきた円グラフと同じだと捉えて間違いないです。

mermaidの呼び出し方

notionでmermaidを呼び出して、使えるようにするまでのやり方を説明します。

1．「/（半角スラッシュ）」で一覧を表示する。ローマ字日本語入力の場合は、「；（全角セミコロン）」です。

2．「コード：Mermaid」を選ぶ

3．表示形式を選ぶ。初期状態では、分割形式で表示されています。

赤丸の所をクリックすると、表示形式を選べるようになっています。
分割形式のほかに、コードだけを表示したり、プレビューだけを表示したりできます。

慣れるまでは両方表示して、慣れてきたら書いてる間はコードだけ、などができるので、お好みで変更してみてください。

mermaidの記述方法

mermaidの書き方に入る前に、この記事での呼び方の確認をします。

図＝フローチャート・ガンドチャートのような図全体のこと
記号＝文字やそれを囲む四角とかのこと
矢印＝関係を表わす「→」のこと

具体例を上げて、その中で使われているコードを解説するという流れで、説明しています。
参考にしたサイトも書いているので、興味がある方は、ぜひ読んでみてください。

書く図の宣言

まず、書く図の宣言をします。
矢印や記号だけ記述しても、どんな図を書きたいのか記述してないとエラーになってしまうので気をつけましょう。

宣言は1行目に書きたい図を表す言葉を書くことでできます。

宣言一覧は以下の通りです。

宣言一覧

フローチャート　＝　graph TD
シーケンス図　＝　sequenceDiagram
クラス図　＝　classDiagram
状態遷移図　＝　stateDiagram
ER図　＝　erDiagram
ジャーニーマップ　＝　journey
ガントチャート　＝　gantt
パイチャート　＝　pie

フローチャートでは、「graph」の後の文時を変えると、矢印の方向を変えることができます。

フローチャートの宣言の仕方

TB：上から下
TD：上から下
BT：下から上
RL：右から左
LR：左から右

では、実際に宣言をしていきましょう。
mermaidを呼び出したら、一旦全部消します。

そして、書きたい図に合う宣言を一番最初の行に記述すると、宣言は完了です。

宣言が終わったら、実際にコードを書いて、図を作る作業です。
つぎの見出しから、それぞれの図の書き方を説明しています。

フローチャートの書き方

図はこちら

graph TB

	sample1(top) --> |お問い合わせ|form
	form --> |リダイレクト|sample1
	sample1 --> |商品ページ|product
	product --> |お支払い|sample2{bill}
%%%これはメモです%%

記号と記号をつなぐ矢印は、「–>（ハイフン2つと不等号）」で表わします。「｜（バーティカルバー）」で囲むと線の途中に文字を書くことが出来ます。

また、記号の形は、色々変えられます。
記号の形を変えるときは、変数名（何でも良し）+ 以下のいずれかと書きましょう。

([テキスト])：両サイドが円
[[テキスト]]：両サイドが2重線
[(テキスト)]：円柱型
((テキスト))：完全な円
テキスト]：短冊形
[/テキスト/]：平行四辺形
[\テキスト\]：逆向きの平行四辺形
[/テキスト\]：台形
[\テキスト/]：上下逆向きの台形

これは、フローチャートに限らずですが、「%%」で囲んだ部分はコメントアウトとして残しておくことが出来ます。

記号にリンクを張る

応用的な使い方になりますが、フローチャートでは、記号にリンクを張ることができます。
リンクを張る方法は、「click 記号名 “リンク”」とすると出来ます。
このとき、まだ、宣言してない記号にはリンクを張ることが出来ないので、記号の下にclick構文を書きましょう。

参考にしたサイトはこちらです。

シーケンス図の書き方

図はこちら

sequenceDiagram

		autonumber
		actor 人間
    participant スマートフォン
		人間 ->> スマートフォン : 電源を入れる
    Note over スマートフォン: 電源が付く
   　スマートフォン-->>人間:Hello World

まず、「autonumber」で矢印の自動採番をしています。

次に、「actor」で人を、「participant」で人以外を表現します。

そして、人間とスマートフォンの関係を、矢印と点線で表現しています。
フローチャートとの違いは、普通の矢印を「->>」で表現し、点の矢印を「–>>」で表わしていることです。
「–>」で矢印なしの点線を書くこともできます。

また、途中にある「Note right of スマートフォン:電源がつく」で注釈をつけることができます。
書き方は「Note (位置) of (記号名):説明」で、記号名の上下左右に説明を入れれます。
Noteで指定できる位置は、以下の通りです。

Note left of ○○：「○○の左」
Note right of ○○：「××の右」
Note over △△：「△△の上」

overを指定すると、線の上に注釈を書けます。

参考にしたサイトはこちらです。

クラス図の書き方

図はこちら

classDiagram
	class 動物 {
	  属性：生物
		var(鳴き声)
		var(仕草)
	}
	
    class 猫 {
        属性：哺乳類
        var(ニャーオ)
        var(体を舐める)
    }
    class セミ {
        属性：昆虫
	      var(ミーン)
				var(飛ぶ)
    }
    class 人間 {
        属性：哺乳類
				var(ウエーン)
				var(ダラダラ)
    }
		class 餌{
			属性：食料
			var(食べられる)
		}
%%クラス間の関係を表現します%%

%%関連%%
動物<--猫
動物<--セミ
動物<--人間
%%依存%%
動物..>餌
%%線%%
人間--猫
%%破線%%
セミ..猫

クラス図は、クラスを作り、関係に合った線でクラスを繋げていくものです。

そのため、まずは、クラスを定義します。
上の例の場合、「動物クラス」を作り、関連する「人間・セミ・猫クラス」を定義し、さらに、動物は餌が無いと生きていけないので、依存関係にある餌クラスを定義しました。

次に、関係を現す矢印を書いていきます。

普通の矢印：「–>」
点線の矢印：「..>」
実線：「 –」
点線：「..」

これでクラス図は完成です。

参考にしたサイトはこちらとこちらの2つです。

状態遷移図の書き方

図はこちら

stateDiagram
  [*] --> ページ1
	ページ1 --> 質問
	質問 --> YES
	質問 --> NO
	YES --> [*]
  NO --> ページ2

状態遷移図でも、矢印は「–>」で表現します。

最初と最後は、[*]と入力すれば、表示出来ます。この2つの点は、一つの図に2つまでしか表示出来ないので、気をつけましょう。

参考にしたサイトはこちらです。

ER図の書き方

図はこちら

erDiagram

users }|--|{ sports: ""
%%1対1の場合～「||--||」%%
%%1対多の場合～「||--|{」%%

users {
	bigint id
	integer age
	string tea
	string water
}
sports{
	bigint user_id
  string name
  intefer time
}

ER図は、リレーションとテーブルを定義します。
リレーションには、「1対1、1対多、多対多」の3つがあります。

IE記法の場合、テーブル同士の関係を「○対○の関係」として表わします。
○に入るのは、1，0，多のいずれかです。

1：｜を使う
0：oを使う
多：｝または｛を使う

リレーションについて知りたい方はこちらをどうぞ。

例えば、上の図で説明します。

ユーザーは、複数のスポーツをする事が出来るとします。
ユーザー1人に対して、スポーツは複数の種類があります。
同様に、ある1つのスポーツをするユーザーも沢山います。

そのため、テーブルのリレーションは多対多となります。

次に、テーブルの定義です。
テーブル名｛データ型カラム名｝という形で定義していきます。

参考にしたサイトはこちらです。

ジャーニーマップの書き方

図はこちら

journey

    title お買い物
    section 立ち見する
      see nice clock: 1
      walk around clock: 3
      listen explanation: 7
    section 話を聞く
      know prices: 3
      check wallet: 1

まず、titleでタイトルを指定します。

次は、sectionです。
sectionは下の画像のように、セクションで区切るために使います。
これは、無くても大丈夫なので、用途に合わせて使ってください。

そして、ユーザーの関心度を、「イベント：数値」で表現します。
数値は「-2~10」までは、見える範囲に絵文字がありますが、綺麗に表示するなら、「0~10」の間で指定すると良いでしょう。

ガントチャートの書き方

図はこちら

gantt
dateFormat  YYYY-MM-DD
title 進捗管理

section 10月のタスク
完了タスク :done,    task1, 2022-10-18,2022-10-21
未完了のタスク :active,  task2, 2022-10-21, 3d
今後のタスク :task3, after task2, 5d

まず、dataformatで、日付のフォーマットを設定します。
デフォルトは、YYYY-MM-DDです。
日付のフォーマットを変えたい方は、こちらの記事をご覧下さい。

次に、sectionでセクションを設定します。
セクションは複数書けます。

最後に、タスクを設定します。
タスクの設定は、「タスク名 : ステータス, タスクID,開始日,終了日」と入力するとできます。

ステータスには、「active」か「done」を指定します。
まだ、開始日になっていないタスクには、ステータスは不要です。

タスクIDを付けておけば、画像の様に、記述する内容を省略することが出来ます。

参考にしたサイトはこちらです。

パイチャートの書き方

図はこちら

gantt
dateFormat  YYYY-MM-DD
title 進捗管理

section 10月のタスク
完了タスク :done,    task1, 2022-10-18,2022-10-21
未完了のタスク :active,  task2, 2022-10-21, 3d
今後のタスク :task3, after task2, 5d

まず、showDataで、詳細な数値をラベルの隣に表示します。
これは、書かなくても大丈夫です。

titleで円グラフのタイトルを表示します。

「”」で挟んだ文字が要素の名前になり、その後ろに「：〜〜％」で表した数字が割合となります。

たったこれだけでパイチャートは完成です。
数値が分かっている場合は、Excelを使わなくてもいいので少し楽かもですね。

表示の装飾

mermaidで出来るスタイルの主な設定は以下の通りです。

文字や図の色の変更
矢印の色の変更
記号にリンクを貼る

記号にリンクを張るのは、フローチャートの所で説明しました。

図の種類	文字のカラー変更	図のカラー変更	矢印のカラー変更	記号にリンク貼る
フローチャート	○	○	○	○
シーケンス図	○	○	○	×
クラス図	○	○	○	×
状態遷移図	○	○	○	×
ER図	○	○	○	×
ジャーニーマップ	○	○	×	×
ガントチャート	○	○	×	×
パイチャート	○	○	×	×

図ごとに出来る装飾一覧

mermaidには、既に用意されている5つのテーマがあります。
それを使って、文字・図・矢印のカラーを変更します。

5つのテーマ

base
default
forest
neutral
dark

これらのテーマを指定する方法は、「%%{init:{‘theme’:’テーマ名’}}%%」と書くだけです。

gantt
%%{init:{'theme':'forest'}}%%
dateFormat  YYYY-MM-DD
title 進捗管理

section 10月のタスク
完了タスク :done,    task1, 2022-10-18,2022-10-21
未完了のタスク :active,  task2, 2022-10-21, 3d
今後のタスク :task3, after task2, 5d

さらに、themeVariablesを使うと、細かいスタイルの指定を出来ます。

gantt
%%{init:{'theme':'forest','themeVariables':{'primaryColor':'#ffffff','textColor':'#000000'}}%%
dateFormat  YYYY-MM-DD
title 進捗管理

section 10月のタスク
完了タスク :done,    task1, 2022-10-18,2022-10-21
未完了のタスク :active,  task2, 2022-10-21, 3d
今後のタスク :task3, after task2, 5d

primaryColorで図のカラー設定、textColorで文字のカラー設定ができます。