【Notion】Mermaidのガントチャートが正しく表示されない

私は学業をはじめ日常生活でNotionを多用している大学院生です。

プロジェクト管理のためMermaid記法でガントチャートを書くことが良くあります。

しかし、日付やsectionの表示が正しく出力されないことがありました。

結論、タスクの終了日を日付で指定すると正しく出力されず、開始日からの日数で指定すると正しく出力されました。

Mermaid記法とは

Mermaid記法とはマークダウン式のスクリプト言語のひとつで、

• ガントチャート
• フローチャート
• シーケンス図
• クラス図

などを簡単に作成できるツールです。

Notionにも実装されており、ショートカットキーを用いて素早く呼び出して図を作成することができます。

（参考）ガントチャートのサンプルコード

gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d

About Mermaid

About Mermaid | Mermaid

Create diagrams and visualizations using text and code.

mermaid.js.org

症状

コード

gantt
    title プロジェクト1
    axisFormat %m/%d
    section セクション1
        アクション1 : t1-1, 2023-05-31, 2023-07-01

出力結果

正しく期間が出力されない。

原因と対処

タスクの終了日を日付で指定していたが、開始日からの日数で指定すると治った。

コード

gantt
    title プロジェクト1
    axisFormat %m/%d
    section セクション1
        アクション1 : t1-1, 2023-05-31, 31d

出力結果

正しく期間が出力されるようになった。

参考文献

About Mermaid – Mermaid

About Mermaid | Mermaid

Create diagrams and visualizations using text and code.

mermaid.js.org