VSCode（Visual Studio Code）では、MarkdownとMermaidを組み合わせることで、ガントチャートを作成・表示できます。
現在のVSCodeではMermaidのサポートが強化されており、VSCode 1.121以降であれば、Markdown内に記述したMermaidの図を標準のMarkdownプレビューで表示できます。
そのため、簡単なプロジェクトスケジュールや開発工程を管理したい場合は、専用のプロジェクト管理ツールを使わなくても、VSCodeだけでガントチャートを扱うことが可能です。
特に、スケジュールをGitで管理したい場合や、README・設計書・仕様書と一緒に工程表を残したい場合には、Markdown＋Mermaidの組み合わせが便利です。
VSCodeでガントチャートを作る主な方法
VSCodeでガントチャートを扱う方法は、大きく分けて次のような種類があります。
MarkdownとMermaidを利用する
最も手軽なのが、Markdownファイル内にMermaid記法でガントチャートを書く方法です。
Mermaidは、テキストからさまざまな図を生成できる記法です。
フローチャートやシーケンス図、ER図、クラス図、マインドマップなどに加えて、ガントチャートにも対応しています。
Mermaidで作成したスケジュールはテキストとして保存されるため、Gitで差分を管理しやすい点もメリットです。
Mermaid用のVSCode拡張機能を利用する
Mermaidをより高度に編集したい場合は、専用のVSCode拡張機能を利用する方法もあります。
リアルタイムプレビューや専用ファイルの編集、画像出力などを行いたい場合に便利です。
ただし、単純にMarkdown内のガントチャートを表示したいだけであれば、VSCode 1.121以降では追加の拡張機能が必須ではありません。
ガントチャート・タスク管理用の拡張機能を利用する
Mermaidではなく、よりプロジェクト管理に近い機能を使いたい場合は、TaskMarkなどの専用拡張機能を利用する方法もあります。
GUIでタスクを確認したい場合や、カレンダー表示、進捗管理などを行いたい場合には、この方法が適しています。
MarkdownとMermaidでガントチャートを作成する方法
VSCodeでガントチャートを作るのであれば、まずはMarkdown＋Mermaidを利用する方法がおすすめです。
Markdownファイルを作成する
最初に、VSCodeでMarkdownファイルを作成します。
たとえば、次のようなファイル名にします。
schedule.mdプロジェクト内では、次のように配置してもよいでしょう。
project/
├─ README.md
├─ docs/
│ ├─ requirements.md
│ └─ schedule.md
└─ src/docs/schedule.mdをスケジュール管理用のファイルとして利用できます。
Mermaidのガントチャートを記述する
Markdownファイル内に、次のようなMermaidコードを記述します。
```mermaid
gantt
title Webサイト制作スケジュール
dateFormat YYYY-MM-DD
section 企画
要件定義 :a1, 2026-10-05, 3d
サイト設計 :a2, after a1, 4d
section 制作
デザイン :a3, after a2, 5d
コーディング :a4, after a3, 7d
section 公開
テスト :a5, after a4, 3d
公開 :milestone, a6, after a5, 0d
Mermaidコードブロックの先頭には、
```text
ganttと記述します。
これによって、Mermaidが内容をガントチャートとして解釈します。
VSCodeでガントチャートを表示する方法
Mermaidで記述しただけでは、エディター上にはテキストとして表示されます。
ガントチャートとして確認するには、Markdownプレビューを開きます。
Markdownプレビューを開く
Windows・Linuxでは、次のショートカットを使用できます。
Ctrl + Shift + VmacOSでは、次のショートカットです。
Shift + Cmd + VMarkdownプレビューが開くと、mermaidコードブロックの内容がガントチャートとしてレンダリングされます。
編集画面とプレビューを横に並べる
ガントチャートを編集しながら確認したい場合は、横にMarkdownプレビューを表示すると便利です。
Windows・Linuxでは、
Ctrl + Kを押した後、
Vを押します。
macOSでは、
Cmd + Kを押した後、
Vを押します。
すると、VSCodeの画面を左右に分けて、左側でMermaidコードを編集し、右側でガントチャートを確認できます。
たとえば、次のような使い方が可能です。
┌──────────────────────┬──────────────────────┐
│ schedule.md │ Markdown Preview │
│ │ │
│ ```mermaid │ 企画 │
│ gantt │ █████ │
│ ... │ ███████ │
│ │ 制作 │
│ │ ████████ │
└──────────────────────┴──────────────────────┘スケジュールを何度も修正する場合は、この表示方法が便利です。
Mermaidガントチャートの基本的な書き方
Mermaidのガントチャートでは、タイトル、日付形式、セクション、タスクなどを組み合わせてスケジュールを作成します。
titleでタイトルを設定する
ガントチャートのタイトルは、titleで指定します。
title Webサイト制作スケジュールタイトルは必須ではありませんが、複数のスケジュールを管理する場合は設定しておくと分かりやすくなります。
dateFormatで日付形式を指定する
ガントチャートで使用する日付形式は、dateFormatで指定します。
たとえば、次のように記述します。
dateFormat YYYY-MM-DDこの場合は、
2026-10-05のような形式で日付を記述します。
日付形式と実際に記述する日付が一致していないと、正常に表示されないことがあるため注意が必要です。
sectionで工程を分ける
sectionを使用すると、タスクを工程やカテゴリーごとに分類できます。
たとえば、Webサイト制作であれば次のように分けられます。
section 企画
要件定義
section デザイン
ワイヤーフレーム
デザイン制作
section 開発
コーディング
CMS実装
section 公開
テスト
本番公開大規模なスケジュールでは、sectionを使うことでガントチャートが見やすくなります。
タスクの開始日と期間を指定する
各タスクには、開始日や作業期間を指定できます。
開始日と期間を指定する
たとえば、次のように記述します。
要件定義 :a1, 2026-10-05, 3dこの記述には、次の情報が含まれています。
タスク名：要件定義
タスクID：a1
開始日：2026-10-05
期間：3日タスクIDは、別のタスクから依存関係を指定するときに使用します。
期間の単位を指定する
Mermaidでは、期間として複数の単位を指定できます。
たとえば、次のような記述が可能です。
500ms
30s
30m
4h
3d
2w
1M
1yそれぞれ、
ms：ミリ秒
s：秒
m：分
h：時間
d：日
w：週
M：月
y：年を表します。
一般的なガントチャートでは、dやwを使うことが多いでしょう。
タスク同士の依存関係を設定する
プロジェクトでは、前の作業が完了してから次の作業を開始するケースがよくあります。
Mermaidでは、afterを使ってタスク間の依存関係を設定できます。
afterを使用する
たとえば、次のように記述します。
要件定義 :a1, 2026-10-05, 3d
サイト設計 :a2, after a1, 4d
デザイン :a3, after a2, 5dこの場合は、
要件定義
↓
サイト設計
↓
デザインという順番になります。
after a1は、「タスクIDがa1の作業が終わった後に開始する」という意味です。
開始日を個別に変更する必要がないため、スケジュール変更にも対応しやすくなります。
タスクの状態を設定する
Mermaidでは、タスクに状態を設定できます。
完了したタスクにはdoneを指定する
完了済みのタスクには、doneを指定できます。
要件定義 :done, a1, 2026-10-05, 3dプロジェクトの進行に合わせてdoneを追加していけば、完了済みの工程をガントチャート上で区別できます。
進行中のタスクにはactiveを指定する
現在作業中のタスクには、activeを利用できます。
デザイン :active, a2, 2026-10-10, 5d完了タスクと進行中タスクを分けることで、現在の進捗状況を把握しやすくなります。
重要なタスクにはcritを指定する
重要なタスクには、critを指定できます。
本番公開前テスト :crit, a3, 2026-10-20, 3dプロジェクトの進行に大きな影響を与える工程を強調したい場合に利用できます。
また、状態を組み合わせることもできます。
最終確認 :crit, active, a4, 2026-10-22, 3dこの場合は、重要かつ進行中のタスクとして扱われます。
マイルストーンを設定する
プロジェクトの重要な節目には、milestoneを設定できます。
公開日や納品日をマイルストーンにする
たとえば、Webサイトの公開日であれば次のように記述します。
サイト公開 :milestone, m1, 2026-10-31, 0dマイルストーンとして設定しやすい項目には、次のようなものがあります。
要件確定
デザイン確定
開発完了
クライアント承認
納品
本番公開通常の作業期間とは別に重要な日付を明示したい場合に便利です。
土日を作業期間から除外する方法
会社のプロジェクトでは、土日を作業日として数えたくないケースも多いでしょう。
Mermaidでは、excludes weekendsを利用できます。
excludes weekendsを指定する
次のように記述します。
```mermaid
gantt
title Web制作プロジェクト
dateFormat YYYY-MM-DD
excludes weekends
section 企画
要件定義 :a1, 2026-10-05, 5d
`excludes weekends`を設定すると、デフォルトでは土曜日と日曜日が作業期間の計算から除外されます。
### 土日の扱いには注意する
`excludes weekends`を設定した場合、単純にタスクのバーの途中に土日の空白が作られるという意味ではありません。
除外された日を考慮して、タスクの終了日が後ろに調整されます。
そのため、営業日ベースのスケジュールを作る場合に便利です。
## 実務で使えるWeb制作ガントチャートの例
Webサイト制作プロジェクトであれば、次のようなガントチャートを作成できます。
```markdown
```mermaid
gantt
title コーポレートサイト制作
dateFormat YYYY-MM-DD
axisFormat %m/%d
excludes weekends
section 企画・設計
要件定義 :done, a1, 2026-10-05, 3d
サイトマップ :done, a2, after a1, 2d
ワイヤー作成 :active, a3, after a2, 4d
section デザイン
TOPデザイン :a4, after a3, 5d
下層デザイン :a5, after a4, 5d
section 開発
HTML/CSS制作 :a6, after a5, 7d
JavaScript実装 :a7, after a6, 4d
CMS実装 :a8, after a7, 5d
section SEO・テスト
SEO設定 :a9, after a8, 2d
動作確認 :crit, a10, after a9, 3d
修正対応 :crit, a11, after a10, 3d
section 公開
最終確認 :a12, after a11, 1d
本番公開 :milestone, m1, after a12, 0d
このようにしておけば、企画からデザイン、開発、SEO、テスト、本番公開までの流れを1つのMarkdownファイルで管理できます。
## VSCodeでMermaidを使うのに拡張機能は必要？
以前のVSCodeでは、MermaidをMarkdownプレビューで表示するために「Markdown Preview Mermaid Support」などの拡張機能を利用する方法が一般的でした。
しかし、現在は状況が変わっています。
### VSCode 1.121以降では追加拡張機能が原則不要
VSCode 1.121では、「Markdown Preview Mermaid Support」の機能がVSCode本体側へ統合されました。
現在は、組み込みの「Mermaid Markdown Features」によってMermaidを表示できます。
そのため、VSCode 1.121以降であれば、基本的には次の流れだけで利用できます。
```text
Markdownファイルを作成
↓
mermaidコードブロックを記述
↓
Ctrl + Shift + Vでプレビュー単純なガントチャートを作成するだけなら、追加拡張機能をインストールする必要はありません。
Markdown Preview Mermaid Supportは非推奨
以前よく利用されていた「Markdown Preview Mermaid Support」は、VSCode 1.121へ機能が統合されたため、現在はDeprecated扱いになっています。
新しいVSCodeを使っている場合は、基本的に新規インストールする必要はありません。
Mermaid公式VSCode拡張機能を利用する方法
標準Markdownプレビュー以上の機能が必要な場合は、Mermaidの公式VSCode拡張機能を利用する選択肢があります。
Mermaid公式拡張機能でできること
公式拡張機能では、環境やバージョンによって異なるものの、主に次のような機能を利用できます。
- Mermaid図の作成
- Mermaid図のプレビュー
.mmdファイルや.mermaidファイルの編集- シンタックスハイライト
- コードスニペット
- PNGやSVGへの出力
- Mermaid関連の高度な編集機能
単純なMarkdownプレビューよりも、本格的にMermaidを使いたい場合に向いています。
現在の公式拡張機能ではサインインが必要
Mermaid公式VSCode拡張機能は、現在のバージョンではMermaidアカウントへのサインインが必要です。
そのため、
「アカウントを作らずにローカル環境だけでガントチャートを表示したい」
という場合は、VSCode標準のMarkdownプレビューを利用する方がシンプルです。
GUIでガントチャートを管理する方法
Mermaidは基本的にテキストベースです。
そのため、
タスクのバーをドラッグする
開始日をマウスで変更する
進捗率をGUIで入力するといった操作を中心にしたい場合には、専用拡張機能を検討できます。
TaskMarkを利用する
TaskMarkは、Markdown風の記法を使ってタスクを管理できるVSCode拡張機能です。
.tmdファイルを使用し、Calendar ViewやTimeline Viewなどでタスクを確認できます。
Timeline Viewはガントチャートに近い表示になっており、プロジェクトの進捗確認に利用できます。
タスク管理を中心にVSCodeを使いたい場合には選択肢の一つです。
Markdown Visual Editorを利用する
MermaidをGUIに近い方法で編集したい場合には、Markdown Visual Editorのようなサードパーティー拡張機能もあります。
ガントチャートについて、
- セクション追加
- タスク追加
- 開始日の変更
- 期間の変更
- ステータス設定
- 依存関係設定
- タスクのドラッグ＆ドロップ
- SVGプレビュー
などに対応しています。
Mermaidのテキスト記法に慣れていない場合には便利です。
ただし、VSCodeの標準機能ではないため、導入時には拡張機能の更新状況や提供元も確認するとよいでしょう。
VSCodeでガントチャートが表示されない場合の対処法
Mermaidを書いてもガントチャートが表示されない場合は、いくつか確認すべきポイントがあります。
VSCodeのバージョンを確認する
まず、VSCodeが古くないか確認します。
Mermaidの標準Markdownプレビュー対応を利用する場合は、VSCode 1.121以降を使用するのが基本です。
古いVSCodeでは、Mermaidコードがそのままテキストとして表示される可能性があります。
コードブロックがmermaidになっているか確認する
Markdownでは、コードブロックの種類としてmermaidを指定する必要があります。
正しい例は次のとおりです。
```mermaid
gantt
次のように`text`を指定すると、単なるコードとして表示されます。
```text
```text
gantt
### ganttの記述を確認する
Mermaidコードブロック内では、ガントチャートの場合に`gantt`を記述する必要があります。
```text
ganttこの指定がないと、ガントチャートとして解析されません。
日付形式を確認する
たとえば、
dateFormat YYYY-MM-DDとしている場合は、
2026-10-05という形式で日付を記述します。
設定した日付フォーマットと実際の日付が一致しているか確認してください。
Mermaidの構文エラーを確認する
カンマの位置やタスクID、開始日などに誤りがあると、ガントチャートが正常にレンダリングされない場合があります。
表示できない場合は、一度シンプルな記述まで減らして動作確認すると原因を特定しやすくなります。
たとえば、次の最小構成から確認できます。
```mermaid
gantt
title テスト
dateFormat YYYY-MM-DD
section 開発
タスクA :a1, 2026-10-05, 3d
これが表示できれば、後からタスクを少しずつ追加していくことで、エラー箇所を探せます。
## Mermaidと専用拡張機能はどちらがおすすめ？
どの方法が適しているかは、目的によって異なります。
### MarkdownやGitと一緒に管理するならMermaid
次のような用途では、Mermaidが向いています。
- READMEにスケジュールを掲載したい
- Gitで変更履歴を管理したい
- 開発プロジェクトの工程を管理したい
- 設計書とスケジュールを一緒に残したい
- テキストベースで管理したい
Mermaidは通常のテキストファイルなので、Gitとの相性が非常に良い点がメリットです。
### GUI操作を重視するなら専用拡張機能
次のような使い方では、専用拡張機能の方が適している場合があります。
- マウス操作でタスクを変更したい
- カレンダー表示も使いたい
- タスクの進捗管理を重視したい
- Mermaid記法を書きたくない
TaskMarkやVisual Editor系の拡張機能を検討するとよいでしょう。
### 本格的なプロジェクト管理には専用ツールを検討する
Mermaidはガントチャートの作成には便利ですが、本格的なプロジェクト管理ツールとは用途が異なります。
たとえば、
- 担当者管理
- 工数管理
- コスト管理
- リソース管理
- チームメンバーへの通知
- コメント・承認フロー
- 詳細な進捗管理
などまで必要な場合は、専用のプロジェクト管理サービスを利用した方が管理しやすいでしょう。
## VSCodeでガントチャートを作るならMarkdown＋Mermaidが手軽
VSCodeで手軽にガントチャートを作りたい場合は、Markdown＋Mermaidを利用する方法がおすすめです。
VSCode 1.121以降であれば、Mermaidの表示機能が標準で用意されているため、基本的には追加の拡張機能をインストールする必要がありません。
基本的な流れは次のとおりです。
```text
Markdownファイルを作成
↓
mermaidコードブロックを作成
↓
ganttを記述
↓
タスクや期間を設定
↓
Ctrl + Shift + Vでプレビューさらに、section、after、done、active、crit、milestoneなどを利用すれば、実務でも使いやすいガントチャートを作成できます。
特に、開発プロジェクトやWebサイト制作、SEO施策、コンテンツ制作などをVSCode内で管理したい場合には、ガントチャートをMarkdownファイルとして保存できるMermaidは便利です。
Gitで変更履歴も追えるため、ドキュメントとスケジュールを一元管理したい場合にも適した方法といえるでしょう。
以上、VSCodeでガントチャートを作成・表示する方法についてでした。
最後までお読みいただき、ありがとうございました。
