設計 開発環境/ツール

【VSCode】テキストでシーケンス図を書いてみよう

ソフトウェアのドキュメントを書くとき、シーケンス図とか必要じゃないですか。皆さんどんなツール使ってます?Excel、Word、Visioあたりが定番ですかね?

商用アプリを作るときは、その辺りが定番ですよね。でも図形をメンテナンスするのって大変じゃないですか?

そうなんですよね。1個図形を足すと全部ズラなきゃいけないし。無駄だなって思います。

テキスト(マークアップ言語)でシーケンス図を書くMermaidやMscgenというツールがあるんですけど、これが超便利。普通はツール単体でインストールするんですがVSCodeのプラグインがあるので、ご紹介します。

この記事で解決できること

  • Mermaid、MscgenをVSCodeから使ってテキストでシーケンス図を書くことができる。

Preview Sequence Diagramsとは?

MermaidMscgenというテキストでシーケンス図、フローチャート、ガントチャートなどを書けるツールがあります。MermaidやMscgenはもともとコマンドベースのツールでしたが、JavaScript化されてWebブラウザで表示したりVSCodeに組み込んだりができるようになりました。MscgenをWebブラウザ上で実行するサンプルをご紹介します。

このページに行って「PKI」というサンプルを表示するとこうなります。

さて、本題ですがarichika.taniguchi氏が作成されたVSCode用のPreview Sequence Diagrams(拡張機能)をインストールすることで、Mermaid、Mscgenのプレビュー機能をVSCodeに組み込めます。具体的な方法は順次説明していきます。

インストール

①VSCODEを初めてインストールする人

(VSCODE)日本語化とHTML+CSS+JavaScript開発環境構築ノウハウを参考にVSCodeのインストール日本語化を済ませてください。

②Preview Sequence Diagrams(拡張機能)のインストール

VSCodeを起動して一番左の拡張機能アイコン(赤枠)をクリックし、検索ボックスに「Preview Sequence Diagrams」と入力しリターン押下。するとPreview Sequence Diagramsのプラグインが出てくるので「インストール」をクリックします。

これで終わりです。オフラインでインストールする方法もあるそうなので、興味がある方は参照してみてください。

Mermaid

①VSCodeでファイルを新規作成します

メニューから「ファイル」→「新規ファイル」を選ぶと「Untitled - 1」というファイルが生成されます。

②以下の内容を打ち込みます

 

③「test.mmd」という名前をつけて保存する。

メニューから「ファイル」→「名前をつけて保存」を選択し「test.mmd」というファイル名で保存。

④「Preview」ボタンを押す

赤枠の「Preview」ボタンをクリックします。

⑤プレビューが表示されました

A,B,Cのコンポーネントが定義され、AからBにcmdが投げられ、BからAにresponseが返るシーケンスです。

Mscgen

①VSCodeでファイルを新規作成します

メニューから「ファイル」→「新規ファイル」を選ぶと「Untitled - 1」というファイルが生成されます。

②以下の内容を打ち込みます

 

③「test.msc」という名前をつけて保存する。

メニューから「ファイル」→「名前をつけて保存」を選択し「test.msc」というファイル名で保存。

④「Preview」ボタンを押す

赤枠の「Preview」ボタンをクリックします。

⑤プレビューが表示されました

a,b,cのコンポーネントが定義され、aからbにcmdが投げられ、bからaにresponseが返るシーケンスです。

まとめ

VSCodeにMermaidとMscgenをプレビューするプラグインを導入してみました。意外とカンタンですよね。これのメリットは書くのがカンタンということと図をテキストで書けるため、設計の差分が明確になる(diffを取れる)ことと思います。逆にデメリットは凝った図を書けない(ルールに忠実)ということと思います。ほかにも色々な図がかけるので興味があれば調べてみてください。

【参考ページ】

Mermaid

Mscgen

  • この記事を書いた人
  • 最新記事

ペイヴメント

ペイヴメントのエンジニア塾(当ブログ)では20年以上の経験から得られたプログラミング系ノウハウについてベテランにも満足して頂けるような内容の濃いコンテンツを初心者にも分かりやすい形で日々発信しています。【経歴】ベンチャーのソフトハウスで4年勤務後、精密機器メーカーのソフト開発部門に勤務し今に至ります。

-設計, 開発環境/ツール

Copyright© ペイヴメントのエンジニア塾 , 2020 All Rights Reserved.