Mermaid ガントチャートエディタ
ガントチャートは作業をカレンダーの上に置きます。何をいつやるのか、どこが重なるのか、何が終わらないと次が始まらないのか。日付と依存関係そのものが論点であるときに使います。順序だけを示したいなら、フローチャートのほうが軽く、日程がずれても腐りません。
依存関係と判定会をもつリリース計画
このチャートを絵ではなく工程表にしているのは `after a1` です。依存が宣言されているので、最初のタスクを動かせば後続がすべて追随します。マイルストーンは期間を持たない一点で、リリース判定会のように日付だけが決まっている事象に使います。
gantt
title 受注管理システム 2.4 リリース
dateFormat YYYY-MM-DD
axisFormat %m/%d
section 開発
要件定義 :done, a1, 2026-01-06, 10d
基本設計 :active, a2, after a1, 15d
実装 : a3, after a2, 20d
section 試験
単体テスト : b1, after a3, 8d
結合テスト :crit, b2, after b1, 10d
section リリース
リリース判定会 :milestone, m1, after b2, 0d
本番リリース :crit, b3, after m1, 2d実例で理解する
1. 最小限のチャート
`dateFormat` は「書いた日付をどう読むか」、`axisFormat` は「軸にどう表示するか」です。別々の設定で、この二つの混同がガントチャートで最もよくある詰まりどころです。
gantt
title スプリント 14
dateFormat YYYY-MM-DD
section 作業
検索機能の実装 :2026-03-02, 10d2. タスク ID と依存関係
タスクに ID を付けると、後続のタスクが `after <ID>` と書けるようになります。ID は半角英数にしておくのが無難です。依存を宣言してしまえば、開始日を一か所直すだけで残りが付いてきます。
gantt
title 顧客データ移行
dateFormat YYYY-MM-DD
section 準備
現行スキーマ調査 :a1, 2026-02-02, 5d
変換マッピング作成 :a2, after a1, 8d
section 実施
リハーサル :a3, after a2, 3d
本番切替 :a4, after a3, 1d3. 状態キーワード
`done`、`active`、`crit` は棒の描かれ方を変えます。「計画はこうです」としか言わないチャートを、「いまどこまで進んでいるか」に答えるチャートに変える、いちばん安上がりな方法です。
gantt
title 第1四半期 基盤整備
dateFormat YYYY-MM-DD
section インフラ
Terraform 整理 :done, t1, 2026-01-05, 12d
Kubernetes 更新 :active, t2, 2026-01-19, 15d
コスト見直し : t3, after t2, 5d
section セキュリティ
依存ライブラリ監査 :crit, s1, 2026-01-12, 6d4. マイルストーン
マイルストーンは期間ではなく点なので `0d` を与えます。展示会、契約上の納期、コードフリーズなど、プロジェクトの外側で日付が決まっている事象に使います。
gantt
title 新サービス公開
dateFormat YYYY-MM-DD
section 開発
機能凍結 :milestone, m1, 2026-04-01, 0d
バグ修正期間 : e1, 2026-04-01, 5d
リリースブランチ作成 :milestone, m2, after e1, 0d
section 広報
プレスリリース解禁 :milestone, m3, 2026-04-15, 0d5. 土日を除外する
`excludes weekends` を書くと、期間の計算から土曜と日曜が外れます。10 日のタスクが週末をまたいで二週間に伸びるようになり、これが「現場が信用するチャート」と「黙って無視されるチャート」の分かれ目になることが多いです。祝日は `excludes 2026-05-04` のように個別に指定できます。
gantt
title 新サービスの引き継ぎ
dateFormat YYYY-MM-DD
excludes weekends
section 構築
環境構築 :p1, 2026-05-07, 5d
CI/CD 整備 :p2, after p1, 5d
section 引き継ぎ
手順書と研修 :p3, after p2, 4dガント構文早見表
ここに挙げた六つの図の中で、ガントはタスク行という一点だけが厳格で、それ以外はどこまでも寛容です。ガントの間違いが静かに通り過ぎてしまうのは、まさにそのためです。
| 構文 | 意味 |
|---|---|
| gantt | 図を開始する。 |
| title 文字 | チャートの表題。 |
| dateFormat YYYY-MM-DD | 書いた日付を読み取る形式。 |
| dateFormat YYYY年MM月DD日 | 和式表記も宣言すれば使える。 |
| axisFormat %m/%d | 軸への表示形式。dateFormat とは別の設定。 |
| excludes weekends | 期間の計算から土日を除く。 |
| excludes 2026-05-04 | 特定の日を除く。祝日はこれで指定する。 |
| section 名前 | タスクを帯にまとめる。 |
| タスク名 :id, 2026-01-01, 10d | 開始日と期間を明示したタスク。 |
| タスク名 :id, after 他のid, 10d | 他のタスクの終了後に始まるタスク。 |
| タスク名 :done, id, ... | 完了——灰色で描かれる。 |
| タスク名 :active, id, ... | 進行中——強調して描かれる。 |
| タスク名 :crit, id, ... | 重要——アクセント色で描かれる。 |
| 名前 :milestone, id, 日付, 0d | 期間ではなく時点。 |
| 10d / 3w / 2h | 日・週・時間。単位は省略できない。 |
ガントの落とし穴 6 つ——エラーになるのは 2 つだけ
ここがガントチャートと他の 5 種類との決定的な違いです。Mermaid 11.12.2 で再現したところ、以下の 6 つのうち描画が止まるのは 2 つだけでした。残りの 4 つは、いかにももっともらしいチャートを描いたうえで間違っています。描画に成功した図を疑う人はいないので、そちらのほうがはるかに危険です。
表示されるもの
Parse error、末尾が: Expecting 'taskData', got 'NL'
原因
タスク行にコロンがありません。コロンは表示名とデータを分ける記号で、これがないと読み取るべきデータが存在しません。この一覧でMermaid が明確に拒否するのは、これと日付形式の 2 つだけです。
対処
タスク名と ID の間に半角コロンを入れます。
gantt
dateFormat YYYY-MM-DD
section 作業
基本設計 a1, 2026-01-06, 5dgantt
dateFormat YYYY-MM-DD
section 作業
基本設計 :a1, 2026-01-06, 5d表示されるもの
Invalid date:2026年03月01日 と表示されて描画されない
原因
和式の日付を書いたのに、`dateFormat` が `YYYY-MM-DD` のままです。Mermaid は宣言された形式でしか日付を解釈しないので、年月日の漢字は読めずに落ちます。日本語で工程表を書き始めたときに最初にぶつかるのがこれです。
対処
日付の書き方に合わせて `dateFormat YYYY年MM月DD日` と宣言します。宣言さえすれば和式表記はそのまま通ります。
gantt
dateFormat YYYY-MM-DD
section 作業
基本設計 :a1, 2026年03月01日, 10dgantt
dateFormat YYYY年MM月DD日
axisFormat %m/%d
section 作業
基本設計 :a1, 2026年03月01日, 10d表示されるもの
描画はされるが、タスク名が途中で切れている
原因
タスク名の中に半角コロンがあります。最初のコロンが区切りなので、そこから後ろはタスクデータとして読まれます。`フェーズ1: 設計` は `フェーズ1` というタスクになり、「設計」は消えます。実測したところ、全角コロンの `フェーズ1：設計` は区切りとして扱われず、そのまま表示されました。
対処
タスク名に半角コロンを入れないこと。全角コロン `：` を使うか、読点や全角ハイフンに置き換えます。
gantt
dateFormat YYYY-MM-DD
section 作業
フェーズ1: 設計 :a1, 2026-01-06, 10dgantt
dateFormat YYYY-MM-DD
section 作業
フェーズ1：設計 :a1, 2026-01-06, 10d表示されるもの
描画はされるが、軸が急に数か月に広がる
原因
`after` が存在しないタスク ID を指しています。ID の打ち間違いか、名前を変えたあとの直し忘れです。Mermaid は警告を出さず、そのタスクを適当な位置に置くため、軸がそこまで届くように引き伸ばされます。10 日のタスクが 2 つあるだけの図が半年分の軸になることがあります。
対処
`after <ID>` が宣言済みの ID と正確に一致しているか確かめます。軸の目盛りが急に粗くなったら、まずこれを疑ってください。
gantt
dateFormat YYYY-MM-DD
section 作業
基本設計 :a1, 2026-03-01, 10d
実装 :a2, after sekkei, 10dgantt
dateFormat YYYY-MM-DD
section 作業
基本設計 :a1, 2026-03-01, 10d
実装 :a2, after a1, 10d表示されるもの
棒が消えて点になる
原因
期間に単位が付いていません。`5` は 5 日ではなく、長さとして解釈されません。それでもチャートは描かれ、時間をまったく使わないタスクがそこにあるように見えます。
対処
単位を必ず書きます。`5d`、`3w`、`2h`。
gantt
dateFormat YYYY-MM-DD
section 作業
基本設計 :a1, 2026-03-01, 5gantt
dateFormat YYYY-MM-DD
section 作業
基本設計 :a1, 2026-03-01, 5d表示されるもの
期間は合っているのに、現実の完了日とずれる
原因
`excludes weekends` を書いていません。既定では 10 日は土日を含む暦日 10 日を意味するので、一週間を超える作業はチャート上で実際より早く終わります。日本の場合はさらに祝日が多く、四半期をまたぐ計画ではずれが無視できない大きさになります。
対処
先頭付近に `excludes weekends` を足し、祝日は `excludes 2026-05-04` のように個別に除外します。
gantt
dateFormat YYYY-MM-DD
section 作業
データ移行 :a1, 2026-06-01, 10dgantt
dateFormat YYYY-MM-DD
excludes weekends
section 作業
データ移行 :a1, 2026-06-01, 10d描画についての覚え書き
いずれもこのサイトが使う Mermaid 11.12.2 で実測したものです。ガントは他のどの図とも違う振る舞いをします。
幅が固定されている唯一の図
他の図はすべて中身が増えた方向に伸びます。ガントチャートだけは viewBox の幅が常に 1264 ピクセルで固定されていて、タスクが 3 つでも 40 つでも変わりません。変わるのは高さだけで、実測では 172 ピクセルから 1060 ピクセルまででした。軸はその固定幅に収まるよう圧縮または引き伸ばされます。2 年分の計画と 2 週間分の計画が同じ密度に見えるのはそのためです。棒が細すぎて読めないときの原因はタスク数ではなく期間の幅です。
和式の日付は宣言さえすれば通る
`dateFormat YYYY年MM月DD日` と書けば `2026年03月01日` はそのまま解釈されます。実測で確認しました。一方で `dateFormat` が `YYYY-MM-DD` のまま和式表記を書くと、静かに間違うのではなく Invalid date で描画自体が止まります。ガントには珍しく、ここは間違いが目に見える箇所です。逆に `2026/03/01` や `2026/3/1` は `YYYY-MM-DD` のままでも正しく 3 月 1 日として読まれました。日付の解釈は宣言した形式より寛容です。
PNG 書き出しが画面と完全に一致する
ガントはラベルを HTML ではなく素の SVG テキストとして描くため、フローチャート・クラス図・状態遷移図・ER 図と違って、そのままラスタライズできます。書き出した PNG は画面と一文字も違いません。再描画が挟まらないぶん、文字組みのずれも起きません。
以前は PNG 書き出しの被害が最も大きかった
Mermaid は `width="100%"` を出力して高さ属性を持ちません。かつてこのサイトの書き出しは、そのサイズを既定の 300×150 の枠に対して解決してしまっていました。横に長く縦に短いガントの縦横比では、これが最悪の形で出ます。1280×148 のチャートが 600×58 の PNG になっていました。現在は viewBox を読むので、同じチャートが 2560×296 で出ます。昔書き出したガントの PNG が手元にあるなら、拡大しても使い物にはなりません。
コロン以外はほとんど何でも通る
section の書き忘れ、知らない状態キーワード、単位のない期間——どれも描画されます。拒否されるのはコロンのないタスク行と、宣言と食い違う日付だけです。この非対称さがガントを書くうえでいちばん役に立つ知識です。描画に成功したという事実は、そのチャートが正しいことをほとんど何も保証しません。
別の図が向いている場合
日付がまだ見積もりでしかないなら、ガントチャートはその見積もりを、それが値しない精度で提示してしまいます。そして誰かがその日付で握ってきます。日付を持たず順序だけを示すフローチャートのほうが正直で、日程が動いても直す必要がありません。
計画が毎週変わる場合、テキストで書いてバージョン管理に置くガントは本当に優れています。差分で何が動いたかが見えるからです。ただし、誰も更新しないチャートは、チャートがないより悪い状態です。自分が作ろうとしているのがどちらなのか、正直に見積もってください。
要員の平準化や工数配分が論点なら、これは道具として間違っています。Mermaid はカレンダーの上に棒を描くだけで、誰がその作業をするのか、その人がすでに埋まっているかどうかを知りません。
他の図の種類
執筆 Dominik Malsch · 最終更新: