【PlantUMLの使い方】PlantUML WBSのVisual Studio Codeスニペット

前回、PlantUMLのWBSについての記事を書きました。

otepipi.hatenablog.com

今回はこのPlantUML WBSのVisual Studio Codeのスニペットを作成していきます。

Visual Studio Codeは軽量多機能のエディターで、開発環境としては最もシェアがあります。

insights.stackoverflow.com

私自身もVisual Studio Codeを愛用しています。

その中でもスニペットは登録した複数行にわたるコードをショートカットキーで呼び出す機能で、スニペットの名称+Ctrl + Spaceキーで登録した各スニペットを呼び出すことができます。

参考サイト mseeeen.msen.jp

WBSのスニペット

PlantUMLのコードを記述する環境はMarkdown Preview Enhancedの使用を前提としています。つまりMarkdwonファイルのスニペットに登録することになります。

ファイル→基本設定→ユーザースニペット→markdown.jsonに以下のコードを記述します。

"PlantUML WBS":{
        "prefix": "plantuml_wbs",
        "body" :[
            "```plantuml",
            "@startwbs",
            "title",
            "WBSサンプル",
            "",
            "end title",
            "* 忘年会",
            "** 企画",
            "*** 内容企画",
            "***> 内容1",
            "***< 内容2",
            "++ 準備",
            "+++ 日程調整",
            "++- 会場予約",
            "+-- 事前出欠",
            "--- 連絡",
            "** 実行",
            "*** 当日出欠",
            "+++_ 会計",
            "@endwbs",
            "```"
        ],
        "description": "PlantUML WBS"
    },

markdown.jsonを保存した後、適当なMarkdownファイルを作成し, wbsと入力した後でCtrl + Spaceすると、以下のコードが挿入されるようになります。(先頭と最後の\は本来だと存在しませんので無視してください）

\```plantuml
@startwbs
title
WBSサンプル

end title
* 忘年会
** 企画
*** 内容企画
***> 内容1
***< 内容2
++ 準備
+++ 日程調整
++- 会場予約
+-- 事前出欠
--- 連絡
** 実行
*** 当日出欠
+++_ 会計
@endwbs
\```

これはPreview画面で次のように表示されます。

f:id:Otepipi:20190422065826p:plain