VSCodeを使ってシーケンス図をMarkdownで書いてみた

Markdownでシーケンス図を描くメリット

• astahやdraw.ioが使えなくても描ける
• テキスト形式のファイルならGITやSVNのマージを楽にできる
• テキスト形式のため差分比較がしやすい
• htmlにmermaid.jsを読み込ませるとhtmlでも表示ができるらしい

VSCodeのインストール

VSCodeのダウンロードはこちら

VSCodeのインストール手順は下記サイトを参考にさせていただいた。

VSCodeの拡張機能(プラグイン)をインストール

VSCodeに下記の拡張機能(プラグイン)をインストールする。

1. Markdown Preview Enhanced
2. Markdown PDF
3. Markdown All in One
4. Marp for VS Code
5. markdownlint

---

1. Markdown Preview Enhanced
   公式ドキュメント
   markdownでシーケンス図を書くときにmermaidとういライブラリを使えるようにする

2. Markdown PDF
   https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf
   Markdownファイルをpdf、html、png、またはjpegファイルに変換する

3. Markdown All in One
   https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
   Markdownを書くのが便利になる
   (参考：https://zenn.dev/ctrlkeykoyubi/articles/vscode-markdown-all-in-one)

4. Marp for VS Code
   https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
   VSCodeのMarpMarkdownで記述されたスライドデッキを作成できる
   https://github.com/marp-team/marp-vscode
   https://marpit.marp.app/markdown

5. markdownlint
   https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint
   Markdownの構文やスタイルをチェックしてくれる(フォーマッタ的な？)
   (参考：https://tonari-it.com/vscode-markdownlint/)

---

左の拡張機能(プラグイン)ボタンを押下し、出てきた検索BOXで追加したい拡張機能を検索する。
検索で出てきたら「インストール」ボタン押下。

以上で準備完了！！(^^)/

シーケンス図を書いてみた

markdownでのシーケンス図の書き方は下記サイトを参考にさせていただいた。

★シーケンス図を作成する際のファイルの拡張子は .md(Markdown)。

書いてみたmarkdown

sample.md

```mermaid
sequenceDiagram
participant goodsController as 商品表示画面Controller
participant goodsService as 商品表示画面Service
participant goodsRepository as 商品表示画面Repository

goodsController ->>+ goodsService: 文房具検索メソッド(種類, 色, メーカー)
    goodsService ->>+ goodsRepository : 文房具DBデータ検索メソッド(種類, 色, メーカー)
    goodsRepository　-->>- goodsService : 文房具データ
    goodsService　->> goodsService : 在庫数チェックメソッド
goodsService　-->>- goodsController : 画面表示用文房具データ
```

結果

以上！！　(￣∀￣)ﾃﾞｷﾀｾﾞ!!　ｳﾚｼｲﾃﾞｽ!!

上記に記載されている以外で参考にさせていただいたサイト