Zenn
🔍

Notion × Mermaid：見やすいガントチャートの作り方

2025/02/12に公開
Notion
Mermaid
gantt
tech

はじめに

こんにちは或いはこんばんは。Ryuzakiです。

私は個人タスクやドキュメントの管理のためにNotionを4年ほど利用しているのですが、最近はMermaid記法を活用して図表をドキュメントに埋め込むことが多くなってきました。なかでも「3/31までにZennへの記事投稿数8本を達成」のように期日が明確な目標を設定する場合は、タスクの詳細化の前にざっくりとしたスケジュール感を見る目的でガントチャートを多用しています。

ただし、デフォルトの設定ではフォントサイズやバーの高さなどが小さくて見づらいという課題があります。そこで今回は、Notionでの見やすいガントチャートの作り方に関して共有させていただきます。

ガントチャートとは

ガントチャートは、プロジェクトの各タスクの開始日・終了日を横軸に時間をとった棒グラフで表現することで、プロジェクト全体のスケジュールを可視化するためのツールです。

ガントチャートの詳細に関しては以下のサイトで分かりやすく説明されていますので、ご参照ください。
https://www.jooto.com/contents/what-is-ganttchart/
https://www.profuture.co.jp/mk/column/what-is-ganttchart

Notionでのガントチャートの作成方法

冒頭で触れたように、Mermaid記法を用いることでNotion上で表示可能なガントチャートを作成することができます。

Mermaid記法とは、テキストベースで図表を記述するための記法の1つで、フローチャートやシーケンス図、そして今回ご紹介するガントチャートなどを作成することができます。記法の詳細については、以下のサイトをご参照ください。
https://mermaid.js.org/intro/

具体的なガントチャートの記述方法については、以下のサイトが参考になります。
https://mermaid.js.org/syntax/gantt.html
https://dev.classmethod.jp/articles/notion-mermaid-js-gantt/
https://miya-moto-memo.hatenablog.com/entry/2024/07/01/183000

見た目の調整方法

Mermaidの各種図はinitディレクティブをコードの初めに設定することで見た目を調整することが可能です。以下に、見やすくするための設定例を紹介します。

デフォルト表示（「左右の余白を縮小」無効化時）の場合

%%{init:{'themeCSS':"text {font-size: 32px !important;}", 'gantt': {'barHeight': 80, 'barGap': 24, 'leftPadding': 250}}}%%

フルページ表示（「左右の余白を縮小」有効化時）の場合

%%{init:{'themeCSS':"text {font-size: 16px !important;}", 'gantt': {'barHeight': 40, 'barGap': 12, 'leftPadding': 200}}}%%

各パラメータの説明：

  • font-size: 図内のテキストのフォントサイズを設定
    （Notionでのデフォルトは恐らくタイトルが18px、それ以外が12px）
  • barHeight: ガントチャート内のバーの高さを設定
    （Notionでのデフォルトは恐らく20程度）
  • barGap: ガントチャート内のバー同士のスキマを設定
    （Notionでのデフォルトは恐らく6程度）
  • leftPadding: 各セクションタイトルの表示欄の幅を設定
    （Notionでのデフォルトは恐らく80程度）

見た目の比較

Before

After

おわりに

今回はNotionでの見やすいガントチャートの作り方について共有させていただきました。
同様の課題に直面している方の参考になれば幸いです。

ここまでお読みいただき、ありがとうございました。

参考リンク

https://mrkm.netlify.app/220129_inkdrop_mermaid/
https://mermaid.js.org/config/theming.html

Discussion