NotionでMermaidを使える？簡単にフローチャートやシーケンス図を書こう！

NotionでMermaidを使って図表を表示できる？

Notionは、プロジェクト管理や情報共有などに活用できる豊富な機能を持ったクラウドワークスペースです。チームやプロジェクトのドキュメントをNotionでつないで、多くのワークフローを一元管理することができます。

Notionでは、Mermaidを使用することで簡単にフローチャートやシーケンス図を書くこともできます。この記事では、NotionでMermaidを使う方法と、様々な種類の図を描く方法を説明します。

Notionとは？基本的な使い方やEvernoteとの違いを解説

【初心者向け】Notionの基本的な使い方を7ステップで分かりやすく解説！

Mermaidとは？

まずは、Mermaidがどのようなものかについて説明します。Mermaidは、ダイアグラムやチャート作図ができるマークダウン構文のJavaScriptライブラリです。

Notionをはじめ、GitLabやZennやなどにも対応しており、Visual Studio Codeのように拡張機能の追加でMermaidに対応しているソフトウェアもあります。

【参考】：mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,gantt charts and git graphs.

マークダウン構文とは、文章を記述するための記述方法の1つです。一定のルールに従ってテキストを作成することで、プレビュー画面で見出しや強調、引用などの文字装飾を簡単に行うことができます。

例えば一般的なマークダウン構文では、「*」で文章の前後を挟むと文字が強調されたり、文頭に「>」を書くことでインデントが下がって引用の体裁になったりして、視覚的に読みやすい文書をすぐに作成できます。

Mermaidは図表の作成に特化したマークダウン構文であり、ルールに従ってテキストを作成することで、宣言や内容に応じた種類の図表を簡単に表示させることができます。

仕事中に簡単な業務フローや進捗管理表を作るのに、思いのほか手間取った経験はないでしょうか。

フローチャートやガントチャートの作成ツールを探すと、種類が色々あって選ぶのに時間を取られてしまい、ExcelやWordなど普段使っているソフトで作成しようとすると、どの形の枠をどのように配置すれば良いのかわからずに作業が進まないこともあります。

そんな時には、手軽に必要な図表を作成できるMermaidが活躍します。Mermaidでは、作りたい図の種類をテキストの冒頭で宣言し、決められた要素をテキスト入力していくことで、ビジネスでよく使われるダイアグラムやチャート図を表示してくれます。

WBSとガンチャートの違いは？メリットや活用法、作成時のポイント

ワークフローを一元管理するNotionとMermaidの相性も抜群です。Mermaidで作成する図表を共有することで、チームメンバーと必要な情報を分かりやすく共有することができます。

例えば、チーム内の業務フローの確認や改善を検討する際に、Notionでドキュメントを作成してMermaidのフローチャートを共有することで、認識の相違や誤解を避けて効率的に検討を進めることができるでしょう。

NotionでMermaidの図を表示させる方法

ここからは、NotionでMermaidの図表を表示させる手順を解説します。どの種類の図も最初の手順は同じです。

Notionでドキュメントを開き、ブロックエディタに入力していきます。

「/mermaid」と入力すると、Mermaidのコードブロックを呼び出すことができます。

「コード：Mermaid」をクリックすると、下図の初期画面が表示されます。

初期画面のコードを削除して、書きたい図の種類の宣言を入力します。宣言は定型です。正確に入力しましょう。 利用できる宣言は、以下の通りです。

• flowchart（フローチャート）

• sequenceDiagram（シーケンス図）

• classDiagram（クラス図）

• stateDiagram-v2（状態遷移図）

• erDiagram（ER図）

• journey（ジャーニーマップ）

• gantt（ガントチャート）

• pie（パイチャート）

• requirementDiagram（要件図）　　　　　　　　　　　　　　　　　　

宣言の入力が認識されれば、青い文字になります。

宣言が定型通りでないと、青い文字になりません。このまま書き進めてもエラーになります。大文字と小文字の違いや、綴りの間違いがないかを確認してください。 下図は、1文字目の「f」が大文字の「F」になっているため認識されていません。

宣言の後は、それぞれの図の種類に応じたコードを入力していきます。 コードを書き進めている間、プレビューできるところまで書かないとエラーメッセージが出ます。

プレビューできるところまでコードが入力されたら、エラーメッセージが消えてプレビュー表示されます。

ほとんどの図の種類では、コード内の要素を日本語で入力できますが、一部の図の種類では日本語を入力するとエラーが出ます。その場合は英語で入力する必要があります。

図の種類や要素、日本語入力の可否などの仕様は変更される可能性がありますので、最新情報については、NotionとMermaidの公式Webサイトをチェックしてください。

【参考】：Notion 新着情報 【参考】：mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,gantt charts and git graphs.

表示方法は、コードのみを表示する「コード」、図表のみを表示する「プレビュー」、両方を表示する「分割」の中から選べます。画面に現在選択されている表示方法が出ますので、ここをクリックすると選択することができます。

NotionでMermaidを使って書ける図の種類

それでは、NotionでMermaidを使ってどのような種類の図が書けるのか確認していきましょう。 それぞれの図の概要を説明し、実際のコードとプレビューを示して解説します。

フローチャートは、業務におけるプロセスや作業の流れの手順を、長方形や円形、ひし形などの多様な図形を使用して表す図のことです。

フローチャートでは、手順の途中で必要となる「判断」も図に含めることができます。複雑な判断が必要とされるプロセスやアルゴリズムなどの流れを定義し、その手順の全体像から、判断ごとの詳細なケースまでを理解するために役立ちます。

コード： flowchart LR A(開始) --> B{今日は月曜か} B --> |はい| C[在庫チェック] B --> |いいえ| C2(在庫チェックなし) C --> D{在庫は足りるか} D --> |足りる|E(発注なし) D --> |足りない|F(発注)

上図の例では、在庫チェックの手順を示しています。

今日が月曜日であれば在庫チェックを行い、在庫が足りなければ発注を行います。

シーケンス図とは、システムで利用されるオブジェクト間のメッセージのやり取りを時系列で表すものです。システム開発の設計や保守・運用など、多くの場面で活用されています。

シーケンス図では時間の流れに従って、視覚的に分かりやすくシステム処理の手順を整理できることがメリットです。

コード： sequenceDiagram autonumber Aさん->>Bさん: こんにちは! Bさん-->>Aさん: こんにちは! Aさん->>Cさん: お久しぶり! loop 記憶確認 Cさん->>Cさん: Aさんのことを思い出す end Cさん-->>Aさん: お久しぶり!

上図の例では、AさんがBさんに挨拶して返事を受け取った後、Cさんに挨拶して返事を受け取る処理の流れを示しています。

クラス図はUML（統一モデリング言語）の基本的な図の1つです。クラスの定義と、クラス間の関係性を記述したもので、オブジェクト指向プロブラムやモデリングでよく使われます。

コード： classDiagram 車両 <|-- バス 車両 <|-- トラック 車両 : -重量 車両 : -ナンバー 車両 : +走る() 車両 : +停止する() 車両 : +曲がる() class バス{ +路線 -定員数 +乗降口開閉() +行き先表示() } class トラック{ +配送先 -最大積載量 +荷積み() +荷下ろし() }

上図の例では、バスクラス・トラッククラスが車両クラスを継承する関係性であることを表しています。

状態遷移図とは、ソフトウェアやシステムの状態が遷移する様子を図形や矢印で表現したものです。 四角で表される「状態名」、矢印で表される「遷移」を書き、矢印のそばには状態遷移のために行う動作の「イベント（アクション）」を書きます。

状態遷移図を活用することで直感的に仕様を理解することができ、必要な項目の脱落を防いだり、変更や修正を容易にしたりすることができます。

コード： stateDiagram-v2 待機中 --> 計測中: STARTボタン押下 計測中 --> 一時停止中 : STOPボタン押下 一時停止中 --> 待機中 : RESETボタン押下 一時停止中 --> 計測中 : STARTボタン押下

上図の例は、ストップウォッチの「待機中」「計測中」「一時停止中」の状態遷移を示しています。

ER図とは、データベース設計の基本となる手法で、「Entity Relationship Diagram」とも呼ばれます。

データベース設計において必要となる「エンティティ=モノ」と「リレーションシップ=関係」を中心としてシステムのデータ間の構造を表すものです。

コード： erDiagram MEMBER||--o{ ORDER : "" MEMBER { string name string memberID string mailAddress } ORDER { int orderID string memberID int productID }

上図の例は、会員（MEMBER）エンティティと、注文（ORDER）エンティティの属性と関連性を表しています。

ジャーニーマップとは、ユーザが自社製品やサービスを購入するに至るまでの過程を旅になぞらえて、その「顧客体験」を視覚化したものです。ユーザの行動を時系列にまとめ、ユーザの思考や感情をキーに整理して商品を購入するまでの流れを示します。

ジャーニーマップを作ることで、顧客が期待する体験と現状の体験の乖離に気づくことができ、改善して商品やサービスの体験価値を高めることができます。

コード： journey title 商品の購入 section 商品選び 店内を見て回る: 1: 私 素敵な商品発見: 4: 私 予算オーバー: 3: 私 section 支払い クーポン券利用可: 4: 私,店員 良い接客: 5: 私,店員

上図の例は、店内で気に入った商品が予算オーバーではあったけれど、クーポン券の利用と店員の良い接客で満足を得る顧客体験を表したジャーニーマップです。

ガントチャートは、プロジェクトの作業工程やスケジュール、作業の進捗を管理するために使用される図です。

縦軸で開始日や完了日の日付を表し、進捗や予定を横棒の伸びで表して、プロジェクトのタイムラインを視覚的に把握することができます。

コード： gantt dateFormat YYYY-MM-DD title プロジェクト状況 section 進捗 設計書作成 :done, task1, 2022-10-18,2022-10-20 コーディング :active, task2, 2022-10-20, 2d 結合テスト :task3, after task2, 2d

上図の例は、プロジェクトの進捗において「設計書作成」が完了、「コーディング」が進行中、「結合テスト」が未来のタスクであることを示しています。

パイチャート（円グラフ）は、円を数値の割合に応じて扇状に区切ったグラフのことです。 パイチャートを利用することで、全体の総量に対する各項目の割合を分かりやすく見比べることができます。

コード： pie showData title 社員の通勤手段 "電車" : 53 "バス" : 31 "車" : 10 "自転車" : 7

上図の例では、自社の社員の通勤手段をパイチャートで表しています。

要件図（要求図）は、システムが要求する要件と要素の関係を視覚化したものです。Mermaidの要件図は、要件定義や方式設計で使用されるモデリング図法のSysMLの仕様に従っています。

コード： requirementDiagram requirement test_requirement1 { id: REQ1 text: the test text1. Risk: Medium verifymethod: Analysis } requirement test_requirement2 { ID: REQ2 text: the test text2. Risk: High verifymethod: Inspection } test_requirement2 - derives -> test_requirement1

上図の例では、test_requirement2が元の要求であるtest_requirement1から派生して発生した要求であることを表しています。

Notionで使えるMermaidを活用して業務の効率と質を向上させよう

ここまで、Notionで使えるMermaidの様々な図表について説明してきました。業務手順の確認や、成果物の品質向上に役立つものばかりであることがお分かりいただけると思います。

Notionでチームメンバーに分かりやすく視覚化した業務フローなどの情報を共有し、業務のさらなる効率化、クオリティの向上を目指すため、Mermaidの活用をぜひ検討してみてください。