VSCodeでWBSを作成する！PlantUMLを使った書き方を紹介！

VSCodeはプラグインが充実しており、開発作業の大半をVSCodeで行なっている方も多いと思います。

しかし、プロジェクト管理のためのWBSに関しては、Excelや他のサービスを利用している方が多い印象を受けます。

エンジニアとしては、開発の成果物はすべてVSCodeで作成したいですよね！

そこでこの記事では、VSCodeでWBSを作成するための方法を紹介します。

VSCodeでWBSを作成するための環境の構築方法から、実際にWBSを作成する手順を解説しています。

すぐに現場で使える内容となってますので、ぜひ最後までご覧ください。

この記事でわかること

VSCodeでWBSを書くための必要なプラグイン
VSCodeでWBSを書く手順

リンク

VSCodeに導入するプラグイン
1. PlantUMLプラグインの導入手順
VSCodeでWBSの作成方法
VSCodeでWBSの作成手順：まとめ

VSCodeに導入するプラグイン

VSCodeでWBSを作成するにはPlantUMLというツールを使います。VSCodeでPlantUMLを使うためにプラグインを導入します。

PlantUMLとは

オープンソースのUML描画ツールです。
今回紹介するWBSのほかにシーケンス図などを描くこともできます。

plantumlを実行するためにJava（JRE）が必要になります。こちらのJavaサイトからダウンロードしてインストールしておいてください。Javaがインストールされているかは以下のコマンドで確認できます。

java -version

PlantUMLプラグインの導入手順

PlantUMLの導入手順はこちらの２ステップです。VSCodeはプラグインを簡単に導入できるので便利ですよね。

PlantUMLの導入手順

Sep1
VSCodeの拡張機能で、「plantuml」と検索します。
Step2
「PlantUML」をインストールボタンをクリックします。

※PlantUMLの実行にはJavaが必要です。未導入の方は以下から、Javaを入手してインストールしてください。

Javaのダウンロードサイト

VSCodeでWBSの作成方法

VSCodeでWBSを作成するには、以下のようなコードを書きます。一見すると、難しく見えますが、慣れると簡単にかけます。

@startgantt ガントチャートサンプル

<style>
ganttDiagram{
    timeline{
        LineColor transparent
    }
}
</style>

title ガントチャートのサンプル
language ja

/'
==========
日程
==========
'/
/' プロジェクト開始日 '/
Project starts 2024-11-01

/' 休日は非稼働日にする '/
saturday are closed
sunday are closed
-- 詳細スケジュール -- 
[スケジュール作成] requires 1 days
[スケジュール作成] starts 2024-11-08
[スケジュール作成] is 100% completed

then [環境構築] requires 2 days
[環境構築] is 100% completed

[タスク１] requires 7 days
[タスク１] starts 2024-11-12
[タスク１] is 0% completed
note bottom
メモ
end note

then [タスク２] requires 7 days
[タスク２] is 0% completed
note bottom
設計：0%
実装：0%
単体テスト：0%
end note


[並列タスク] requires 2 days
[並列タスク] starts 2024-12-03
[並列タスク] is 0% completed


then [リリース] requires 1 days
[リリース] starts 2024-12-12
[リリース] is 0% completed

@endgantt

上記コードを記載したファイル名を「WBS.puml」のように、拡張子を「puml」にして保存してください。

保存したファイルを開いた状態で、VSCode上のプレビューボタンをクリックします。