VSCodeでMarkdownでUML(ユースケース図、シーケンス図など)を描く方法

結論

Markdownではないですが、シンプルなテキスト記法で描けるVSCodeの拡張機能 PlantUML を使います。

以下のような図が描けます。

解説

PlantUMLの概要

独自のテキスト記法によって、簡単にUMLを描くことができるツールです。
出力できる図は主に以下の通りです。

  • シーケンス図
  • ユースケース図
  • クラス図
  • オブジェクト図
  • アクティビティ図
  • コンポーネント図
  • 配置図
  • 状態遷移図
  • タイミング図

出力形式は、以下の通りです。

  • PNG
  • SVG
  • LaTeX

以下で利用環境を構築します。

Macにgraphvizをインストール

シーケンス図とアクティビティ図以外のダイアグラムを描く場合は、Graphvizが必要になりますのでインストールします。

$ brew install graphviz

VSCodeにPlantUMLをインストール

VSCodeのExtensionsからplantumlを検索し、インストールします。

画像生成

サンプルとして、以下のようなテキストを作成します。

@startuml admin_flow
  | 管理者 |
  start
    :ログイン
    /login;
    |#AntiqueWhite| システム |
    :予約登録•一覧画面
    /admin;
    :予約登録;
    | 管理者 |
    :ログアウト
    /logout;
  stop
@enduml

markdownで文書を作成するときのように、プレビューを見ることができます。
Option + dで図が生成されれば正しく動いています。

記述したテキストは、ファイルに保存することができます。
ファイルはいくつかの拡張子で保存が可能ですが、.wsdで問題ないと思います。
(中身は単なるテキストなので、実質何でもOKでしょう)

画像の保存

Markdownで生成したUML図を使うには、一旦画像を保存し、それをMarkdownで呼ぶのがシンプルな方法です。

Command + Shift + pでVSCodeのパレットを表示します。
plantumlと打つとアクション候補が出てくるので、PlantUML: Export current diagramを選択すると、しばらくして画像の出力が完了します。

以上でテキストからUML図を出力し、保存することができました。

おわりに

前回紹介したVSCodeでMarkdownでPDFを出力する方法と組み合わせれば、PlantUMLでUML図を添付したPDFを出力することが可能になりますので、仕様書作成が捗るようになりました。
全てテキストで完結するのが気持ちいいですね。ぜひ皆さんもご活用ください。

参考

関連記事

  1. Gitのリモートリポジトリから特定のファイルを削除する方法

  2. VSCodeでMarkdownをPDFに変換する方法

  3. GitHubとSlackを連携: リポジトリの更新情報(issues,…