結論

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でしょう）

画像の保存

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

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

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

おわりに

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

参考

• PlantUML: シンプルなテキストファイルで UML が書ける、オープンソースのツール
• MacでVSCode+PlantUMLを用意する