VSCodeでフローチャートを書く！PlantUMLを使った書き方を紹介！

VSCodeはプラグインが充実しており、エンジニアにあった環境を構築できるので、開発作業の大半をVSCodeで行なっている方も多いと思います。

しかし、設計のためのフローチャートはExcelや他のツールを使って作成している方が多い印象を受けます。

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

そこでこの記事では、VSCodeでフローチャートを作成する方法を紹介します！

フローチャートを書くための環境構築方法から、フローチャート作成の手順まで解説しています。

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

この記事でわかること

VSCodeでフローチャートを作成するためのプラグイン
VSCodeでフローチャートを作成する手順

リンク

VSCodeに導入するプラグイン
1. PlantUMLプラグインの導入手順
VSCodeでフローチャートの作成手順
VSCodeでフローチャート作成方法：まとめ

VSCodeに導入するプラグイン

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

PlantUMLとは

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

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

java -version

PlantUMLプラグインの導入手順

PlantUMLプラグインの導入手順はこちらです。

PlantUMLプラグインの導入手順

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

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

Javaのダウンロードサイト

VSCodeでフローチャートの作成手順

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

@startuml フローチャートサンプル
<style>
activityDiagram{
    diamond {
        BackgroundColor #add8e6
    }
    partition {
        RoundCorner 5
        BackgroundColor #fffafa
    }
    document {
        BackgroundColor transparent
    }
}
</style>

title VSCodeでフローチャートサンプル
start
:処理開始;
partition 初期処理 {
    :各種変数の初期化;
}
partition メイン処理 {
    if (変数＝〇〇) then (yes)
        :処理A;
    elseif (変数＝××) then (yes)
    else (no)
        :処理B;
    endif

    ' ループ処理
    while (変数.完了フラグがfalse) is (true)
        :処理を実行;
        :変数.完了フラグをtureに設定;
    endwhile
    if (処理がすべて正常終了) then (yes)
    else (no)
        :ロールバックなどの例外発生処理;
        #pink:(B)
        detach        
    endif
}
partition 後処理 {
    :トランザクションをコミットなどの処理;
}
#LightBlue:(A)
detach

#LightBlue:(A)
partition 正常終了 {
    #LightBlue:正常終了
    ステータスコード200を返却;
    -> this is the end;
    end
}

#pink:(B)
partition 異常終了 {
    #pink:異常終了
    ステータスコード500を返却;
    -> this is the end;
    end
}

@enduml

一見難しく見えますが、実は慣れるとあまり難しくありません。コードを読むとなんとなくどうやって書くのか分かる方も多いのではないでしょうか。

上のコードを「フローチャート.puml」など、拡張子を「puml」にして保存して、VSCodeのプレビューボタンをクリックします。