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

【※ 当記事は2020年6月2日時点の情報です】

ペイヴメント（@pavement1234）です。

エンジニア

シーケンス図を図形で編集するのは大変。

シーケンス図をテキスト（マークアップ言語）で書けないか？

VSCODEと連携できると、なおよい。

こんな悩みを解決します。

バージョン情報

Windows10 Home（64bit）1903

Visual Studio Code 1.47.0

Preview Sequence Diagram 0.2.4（VSCODEプラグイン）

かんたんUML入門改訂2版（プログラミングの教科書） [ 竹政昭利 ]

created by Rinker

ソフトウェアのシーケンス図をどうやって書くか
Preview Sequence Diagramsとは？
インストール
Mermaid
Mscgen
まとめ
ITスキルを身につけると条件の良い転職が可能になる

ソフトウェアのシーケンス図をどうやって書くか

ソフトウェアのドキュメントを書くとき、シーケンス図は必須だと思いますが、Excel、Word、Visioあたりで作るケースが多いと思います。

Excel、Word、Visioあたりで作るのは良いのですが、図形をメンテナンスするのって大変。1個図形を足すと全部ズラなきゃいけないし。無駄が多いと感じます。

テキスト（マークアップ言語）でシーケンス図を書くMermaidやMscgenというツールがあるんですけど、これが超便利。

ツール単体でインストールすることも可能ですが、VSCodeと連携させるとホントに便利　インストール方法と使い方をご紹介します。

Preview Sequence Diagramsとは？

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

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

mscgen.js.org

mscgen_js – turns text into sequence charts

https://mscgen.js.org

mscgen_js – turns text into sequence charts. On line message sequence chart renderer for charts written in mscgen, msgenny or xù.

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

Medium

MermaidとMscgenのシーケンス図をプレビューする VS Code 拡張を作りました（業務…

https://medium.com/@arichika/mermaid-and-mscgen-preview-extenstions-for-visual-studio-code-vscode-12af55e39c15

シーケンス図をテキスト表現する Mermaid や Mscgen を（無理やり）プレビューするための Visual Studio Code Extensionsを作成しました。こんなのです。

インストール

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

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

②Preview Sequence Diagrams（拡張機能）のインストール

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

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

≫MermaidとMscgenのシーケンス図をプレビューするVisual Studio Code拡張を作りました（画像保存機能あり）

Mermaid

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

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

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

sequenceDiagram
    participant A
    participant B
    participant C
    
    A->>B: cmd
    B->>A: response

sequenceDiagram

participant A

participant B

participant C

A->>B: cmd

B->>A: response

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

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

④「Preview」ボタンを押す

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

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

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

Mscgen

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

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

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

msc{
    a,b,c;
    a => b[label="cmd"];
    b => a[label="response"];
}

msc{

a,b,c;

a => b[label="cmd"];

b => a[label="response"];

}

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

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

④「Preview」ボタンを押す

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

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

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

まとめ

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

Mermaid

Mscgen

かんたんUML入門改訂2版（プログラミングの教科書） [ 竹政昭利 ]

created by Rinker