VSCodeでMarkDownとPlantUMLを使う

MarkDownの中に、PlantUMLで作成した図を挿入する方法を紹介します。

今回の記事でわかること
  • PlantUMLとは何か
  • PlantUMLをMarkDownの中で使用する方法
  • PlantUMLとVSCodeの環境構築方法
目次

PlantUMLとは

UML描画用のオープンソースのツールです。
シーケンスなどUMLを書くことに特化したツールです。
テキストベースなので非常に軽量です。
astahの有料化に伴ってPlantUMLを使い始めた人も多いと思います。
astahと違って、コードベースで書く必要があるので、最初は戸惑うかもしれません。

PlantUMLの良い点

バージョン管理に向いている

テキストベースのため、マージ・差分の比較が簡単に行えます。
SVN/Gitといったバージョン管理のソフトでの履歴管理もテキストベースのため、履歴管理と変更点の確認が容易に行なえます。
Excelなどのバイナリベースのだと、単純な比較ツールでは変更点の確認が難しいです。
Excelでも比較可能ですが、Excelを立ち上げて比較する必要があるなど、簡単には確認できません。
それに比べて、PlantUMLはテキストベースのため簡単に把握できます。
コードと設計書の管理が容易になります。

無料

astahの無料版がなくなったことで難民となった人の受け皿になっています。

急に有料化なることも気にせずに使用することができます。

描画が簡単

astahでシーケンスを書く場合に、意図したところに線がかけないことがあります。
PlantUMLの場合、線の場所を明示的に書くことができます。
レイアウトも自動でやってくれるので、位置の調整をする必要がありません。

ファイルサイズが小さい

テキストベースのため、ファイルサイズが小さいです。
テキストエディタで編集できるため、起動も早いです。

PlantUMLの悪い点

描画がしにくい

良い点の反対となってしまいますが、astahのようなGUIで書けるソフトは、とても直感的に使用できます。
単純な線に線をつなげるだけなら、astahの方が簡単に書ける場合があります。
描画に関しては、一長一短があります。

PlantUML+VScodeがおすすめの理由

設計書に落とし込む前に、考えをまとめるため、Markdownの中にPlantUMLを使っています。
VSCodeとPlantUMLが使いやすいです。

PlantUMLをMarkDownの中に書くことができる

設計書に落とし込む前の考えをまとめるために、Markdownの中にPlantUMLを使っています。
設計書として書くなら、コメントも挿入できるので、PlantUMLのみで書く方がいいですが、設計書に落とし込む前の考えをまとめるために、Markdownの中にPlantUMLを使っています。
MarkDown内で内容をまとめつつ、簡単なシーケンスであったり、MindMapを書くために、PlantUMLをMarkDownの中に使っています。

エディタとして優秀

プラグインが豊富なため、入力補助も多く、MarkDownで文章が書きやすいです。

また、Pythonなどのプログラム言語のエディタとしても優秀です。
多彩な言語に対応していて、シンタックハイライトもデフォルトで備わっています。


MacとWidnowsの両方に対応

OSに依存せずに同じ使い方ができます。

Excelなどでは、OSの違いによって、使い勝手がわかることがありますが、VsCodeは全く同じ使い方ができます。

インストール方法

PlantUMLのインストール方法

今回はMacOSのインストール方法を紹介します。

ここでインストールするのは以下のソフトです。

インストールするソフト
  • graphviz
    OSSのグラフ描画ツールです。PlantUMLはこのツールによって描画されます。
  • Java

Homebrewを使用して、以下のコマンドでインストールします。

brew install graphviz adoptopenjdk

adoptopenjdk:簡単に言うとJavaのことです。

PlantUMLをVSCodeにインストール

以下のプラグインをインストールします。

インストールするプラグイン
  • PlantUML
    PlantUMLを扱えるようにするプラグインです。
  • Markdown Preview Enhanced
    MarkDown上でPlantUMLを描画できるようにするViewです。

プラグインのインストール方法は簡単です。
プラグインから検索するして、「Install」をクリックするだけです。

拡張子インストール

トラブルシュート

「Error found in diagram test …」というエラーが出たることがあります。

これはフリーフォントの”Times”がないことを示すエラーです。

フォントをインストールすれば、解決します。

対応方法は以下のとおりです。

フォントをダウンロード

こちらのサイトからフォントをダウンロードしてください。

フォントをインストール

フォントのインストールはAppleの公式を参考に実施します。

「+」を押します。

ダウンロードしたファイルを選択すれば完了です。

これでエラーが出なくなります。

コメント

コメントする

CAPTCHA


目次