今回はNotionのマークダウンから図解を記述する方法を紹介します。Notionではマーメイド記法（Mermaid）が対応しています。
マーメイド記法（正式名は「Mermaid」）は、ソフトウェア開発において、可視的な図表を使ってプロジェクトを設計するための便利なツールです。このガイドでは、マーメイド記法の基本的な概念や書き方、例題の解説、そしてビジネスやプログラミングにおける活用方法などについて紹介していきます。マーメイド記法を使いこなすことで、プロジェクトの進行状況を可視化することができ、開発者やクライアントとのコミュニケーションもスムーズに進むでしょう。是非、このガイドを参考にして、マーメイド記法を活用してみてください。
Notionで使えるマーメイド記法
Notionアプリで使用できるマーメイド記法は、基本的には標準のマーメイド記法と同じ構文を使います。ただし、Notionの場合、マーメイド記法をブロックとして扱うため、以下のようにブロックのタイプを指定する必要があります。（ショートカット ”/mermaind”）
以下は、Mermaid記法で作成された簡単な図の例です。
この例では、4つのノード（A、B、C、D）とそれらをつなぐ矢印が描かれています。AからB、AからC、BからD、CからDに矢印が伸びています。
これにより、マーメイド記法が「Code」ブロックではなく「Mermaid」ブロックとして解釈され、フローチャートが表示されます。また、Notionの場合、Mermaidブロックはインラインで使用できないため、必ずブロック内に記述する必要があります。
Notionでマーメイド記法を使うメリットとは？
次のチャートグラフ等はクリエイターページの参考の元Notionで動作テストをおこなったものです（参照元HP）
フローチャート Flowchart
フローチャートは、プロセスの手順を図示するために使用される図表です。フローチャートを使用することで、プロセスの各段階がどのように関連し、どのように進んでいくかを明確に理解することができます。これにより、プロセスを改善し、効率を高めることができます。フローチャートは、ビジネスプロセスの改善、システム開発、手順書の作成など、多くの分野で使用されます。
シーケンス図 Sequence diagram
シーケンス図は、オブジェクト間の相互作用を表すために使用される図表です。シーケンス図を使用することで、オブジェクト間の相互作用がどのように行われるかを明確に理解することができます。これにより、ソフトウェアの開発やシステムの設計において、オブジェクト間の相互作用を詳細に定義し、問題を解決することができます。
クラス図 Class Diagram
クラス図は、オブジェクトのクラス、属性、メソッドを表すために使用される図表です。クラス図を使用することで、オブジェクトの構造がどのようになっているかを明確に理解することができます。これにより、ソフトウェアの開発やシステムの設計において、オブジェクトの構造を詳細に定義し、問題を解決することができます。
状態図 State Diagram
状態図は、オブジェクトの状態遷移を表すために使用される図表です。状態図を使用することで、オブジェクトがどのように状態遷移するかを明確に理解することができます。これにより、ソフトウェアの開発やシステムの設計において、オブジェクトの状態遷移を詳細に定義し、問題を解決することができます。
Ganttチャート
Ganttチャートは、プロジェクトの進捗を管理するための非常に便利なツールです。以下は、Ganttチャートの主な利点です。
- 進捗状況の可視化：Ganttチャートは、プロジェクトの全体像を一目で把握できるようにします。各タスクの進捗状況を示すバーがタイムライン上に表示されるため、プロジェクトの進捗状況を簡単に確認できます。
- タスクの依存関係の明確化：Ganttチャートは、各タスクの依存関係を明確に示すことができます。依存関係がわかれば、タスクのスケジュールを調整することができます。
- リソースの割り当て：Ganttチャートは、プロジェクトで使用されるリソース（人員、予算、材料など）を明確に示すことができます。これにより、必要なリソースの数とスケジュールを調整することができます。
- スケジュールの調整：Ganttチャートは、タスクのスケジュールを調整するためのフレキシブルなツールです。スケジュールが遅れた場合、チャートを調整して全体のスケジュールを再評価することができます。
- コミュニケーションの向上：Ganttチャートは、プロジェクトの全体像を明確にすることにより、プロジェクトに関わるすべての人々のコミュニケーションを向上させることができます。プロジェクトの進捗状況を共有することができ、問題が発生した場合には、対処方法をすばやく議論することができます。
マーメイド記法の書き方とコツ
フローチャートの場合 Flowchart (flowchart)
フローチャートを作成するためのマーメイド記法では、次のような構文が使われます。
上記の例では、flowchart TDという行で、図の向きが上から下（TD）であることを指定しています。A[開始]は、フローチャートの始まりを表す「開始」ノードで、B[処理1]、C[処理2]、D[処理3]、E[終了]は、それぞれ処理を表すノードです。-->は、ノード間をつなぐ矢印を表します。
フローチャートには、様々なノードや矢印の形状、色、テキストスタイルなどを設定することができます。また、分岐やループ、条件分岐、サブプロセスなどの複雑なフローを表現するための構文も存在します。
| 記述 | 意味 |
|---|---|
| TD | 上から下へ |
| TB | 上から下へ（上下同じ） |
| BT | 下から上へ |
| RL | 右から左へ |
| LR | 左から右へ |
シーケンス図の場合• Sequence diagram (sequenceDiagram)
マーメイド記法では以下のような構文を使用します。
これはAとBという2つの参加者が存在し、Aがメッセージを送信してBが受信するというシーケンスを表しています。->>
という矢印を使用して、送信されたメッセージの方向を示しています。
クラス図の場合 Class Diagram (classDiagram)
以下のような構文が使用されます。
ここでは、クラスが定義されており、そのクラスが持つ属性や操作が記述されています。+
はパブリックな属性や操作を、-
はプライベートな属性や操作を表しています。
状態図の場合 State Diagram (stateDiagram)
以下のような構文が使用されます。
‘[*]’は開始状態を表し、各状態は-->を使用して遷移を表します。イベントは遷移線上に記述され、コロンを使用して状態名と区切ります。
Ganttチャートの場合 (gantt)
以下のような構文が使用されます。
titleはGanttチャートのタイトル、dateFormatは日付の表示形式を指定します。
sectionでセクションを作成し、その中にタスクを記述します。
タスクは:でラベル名と期間を指定します。期間は日付と期間を示す数字、例えば3dなどで指定します。
フローチャート以外にも使える！マーメイド記法の例
RE図• Entity Relationship Diagram (erDiagram)
ジャーニーマップ User Journey (journey)
パイチャート Pie （pie）
要件図• Requirement Diagram (requirementDiagram)
Gitグラフ
よく使うフローチャートの記述の仕方
ノードの形や色の変更方法
要素やクラスは別途記述することで形やカラーも指示することができます
フローチャートは、プロセスや手順の流れを図解化するための図表で、様々な業界や分野で利用されています。フローチャートには、以下のような要素があります。
ノード（図形）：作業や判断の状態を表す図形で、主に以下の種類があります。
- 矩形：処理を表す。
- 菱形：判断を表す。
- 角丸矩形：文書や資料を表す。
- 楕円形：開始・終了を表す。
- 矢印（フロー線）：作業や判断の状態の間の流れを表す線で、以下の種類があります。
- 直線：状態の順序を表す。
- 矢印：方向を表す。
- 点線：ループや条件分岐を表す。
テキスト：ノードや矢印に記述される説明文。
以上のように、フローチャートは、業務の効率化や品質向上、コミュニケーションの円滑化などに役立つツールです。
色々なスタイルの記述例・Style
マーメイド記法とはどのような用途に使われるのか？
マーメイド記法は、主に以下のような用途に使われます。
- ソフトウェアの設計図の作成
- プロジェクト管理やワークフローの可視化
- ドキュメントの作成や説明資料の作成
- アルゴリズムの可視化
また、ビジネス分野でも、マーメイド記法を使ったプレゼンテーションやプロジェクト管理が行われています。
マーメイド記法の活用方法
マーメイド記述は、多岐に渡る分野で活用されています。プログラミングやビジネスシーンに利用されています。
プログラミングにおける利用方法
マーメイド記法は、主にソフトウェア開発の分野で使われることが多いです。しかし、マーメイド記法はそのシンプルな構文から、プログラミング以外の分野でも広く使われるようになってきています。ビジネスやプロジェクト管理など、様々な分野で活用されています。
ビジネスにおける利用方法
マーメイド記述はビジネス分野でも有用です。例えば、会議やプレゼンテーションで、複雑なアイデアやフローを分かりやすく説明することができます。また、マーメイド記述を利用することで、プロジェクトの進捗状況を可視化し、ステークホルダーと共有することも可能です。
誤解を招かないように注意すること
マーメイド記述は、正確な情報を伝えるためには注意が必要です。誤解を招かないように、ノードや矢印の記述には正確さが求められます。また、図中のテキストやラベルにも十分な注意を払う必要があります。
フローチャートを作成する際には、以下のポイントに注意することが重要です。
- 矢印の方向は常に左から右、上から下に向かうようにする。
- 同じ意味を持つノードは同じ形状で表し、色などで区別する。
- 無駄な矢印を省くことで、フローチャートの見やすさを向上させる。
- 複雑なフローを表現する場合は、サブフローチャートを使用する。
適切なツール選びと併用すること
マーメイド記述を効果的に活用するためには、適切なツール選びが重要です。テキストエディターやオンラインツールを使う場合、シンタックスハイライトや自動補完機能など、使いやすい環境を選ぶことが大切です。また、マーメイド記述を他のツールやフレームワークと組み合わせて利用することもできます。たとえば、UML図やフローチャートと組み合わせて利用することで、より豊富な表現力を持った図を作成することができます。
マーメイド記法の利用価値と将来性
マーメイド記法は、情報システム開発やプロジェクト管理などの分野で幅広く活用されており、その利用価値は高いと言えます。マーメイド記法は直感的な図示表現ができるため、要件定義やシステム設計の段階で非常に有用です。また、Markdown形式で書かれるため、簡単に文書化できるという利点もあります。
現在は情報システム開発などの分野で主に使用されていますが、今後はビジネスプロセスの可視化や教育分野など、様々な分野での活用が期待されています。
私は関係性やフローチャートなどがNotionで簡単にまとめられて考えがまとまるので皆さんもぜひ使ってみて下さい。
