【Notion×Mermaid】ガントチャートで使える色テーマを全て試してみる（default/neutral/dark/forest/base）

今回はNotionで使えるMermaid記法に関して書いていきます。

以前、Mermaidでガントチャートを書いてみた記事を投稿しました。

miya-moto-memo.hatenablog.com

Mermaidには色テーマが用意されているようです。

用意されている色テーマは、

default
neutral
dark
forest
base

の5種類のようです。

上記5種類の色テーマを全て試してみます。

それでは本題へ。

前提情報
- Mermaidとは？
- ガントチャートとは？
コード
色テーマ指定
- 指定なし
- default
- neutral
- dark
- forest
- base
参考リンク
おわりに
Notion×Mermaid 関連記事

前提情報

Mermaidとは？

まずはMermaidとは？に関して書いておきます。

Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。
出典：グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO

詳しくは以下のリンクを見て頂ければと。
dev.classmethod.jp

ガントチャートとは？

ガントチャートとは？に関しても書いておきます。

ガントチャート（英語：gantt chart、gantt diagramm）は、さまざまなプロジェクトやプログラムに使用され、生産管理・工程管理などに用いられる表の一種です。
「計画表」「スケジュール表」「進行表」「工程表」などと呼ばれることもあります。
ガントチャートは棒グラフを用いたチャートで、縦軸にはWBSを元にしたタスクや担当者を、横軸には日時や進捗率を記します。
各タスクから横長の棒グラフ（ガントバー）が伸びており、作業の進捗や期間を示しています。
出典：ガントチャートの基本やWBSとの違いを解説！【2024年最新版】

詳しくは以下のリンクを見て頂ければと。
www.jooto.comit-trend.jpwww.lucidchart.com

コード

今回はこちらのコードを使います。

%%{init:{'theme':'base'}}%%
gantt
  title 開発スケジュール
  excludes weekends
  tickInterval 1day
  section マイルストーン
    担当者1参画  :milestone, m-1, 2024-06-20, 0d
    担当者2参画  :milestone, m-2, 2024-06-21, 0d
    リリース     :milestone, m-3, 2024-07-03, 0d
  section 機能A
    詳細設計     :done, a-1, 2024-06-20, 3d
    コーディング :done, a-2, after a-1, 5d
    テスト       :active, a-3, after a-2, 3d
  section 機能B
    詳細設計     :done, b-1, 2024-06-21, 1d
    コーディング :done, b-2, after b-1, 3d
    テスト       :done, b-3, after b-2, 1d
  section 機能C
    詳細設計     :done, c-1, after b-3, 1d
    コーディング :done, c-2, after c-1, 2d
    テスト       :done, c-3, after c-2, 1d

1行目で色テーマを指定しています。
この部分です。