はじめに
Visual Studio CodeでMarkdownを作成するときに、内部にdraw.ioで作成したAWS構成図やシーケンス図などを簡単に埋め込む方法をメモしておきます。最終的なイメージは以下のようになります。
前提条件
- Visual Studio Codeをインストールしていること。
- Javaをインストールしていること。
事前準備
Visual Studio Codeで以下の拡張機能をインストールします。
- Markdown All in One
- Markdown Preview Enhanced
- Draw.io Integration
- PlantUML
(2023/11/07追記)
Markdown Preview Enhancedのアップデートに伴い、追加作業が必要になりました。
以下の記事を参考に対応ください。
https://qiita.com/kaz-matsubara/items/375e4481da5b83309125
記載方法
まずは適当にMarkdownファイルを作成します。ここではtest.mdとします。
Markdownの基本的な記載方法については割愛します。
# サンプル資料
## AWS構成図
## シーケンス図
AWS構成図
続いてAWS構成図を作成します。test.mdと同じディレクトリにtest.drawio.svgというファイルを作成します。
ファイル名に*.drawio.svgという拡張子を付けることでsvg画像として取り扱うこともでき、draw.ioで編集することもできます。
test.drawio.svgをVisual Studio Code上で開くと、draw.ioの作図画面が表示されます。適当にAWS構成図を作成します。
前述の通り、svg画像として取り扱うことができるため、test.mdに以下のように記載することで、Markdownの中にAWS構成図を埋め込むことができます。
# サンプル資料
## AWS構成図
![test.drawio.svg](./test.drawio.svg)
## シーケンス図
draw.ioで作図できるものであれば、AWS構成図に限らずMarkdownの中に埋め込むことができます。
シーケンス図
続いてシーケンス図を作成します。シーケンス図は別ファイルではなくMarkdownの中に直接記載することができます。
Markdownに以下のように記載することで、Markdownの中にシーケンス図を埋め込むことができます。
# サンプル資料
## AWS構成図
![test.drawio.svg](./test.drawio.svg)
## シーケンス図
```plantuml
title サーバーレス環境でのAWSリソースアクセスフロー
actor Users
Users -> CloudFront: 1. Webサイトにアクセス
CloudFront -> S3: 2. 静的コンテンツ取得
S3 --> CloudFront: 3. HTML, Javascriptなどの静的コンテンツ
CloudFront --> Users: 4. ユーザー登録画面表示
Users -> APIGateway: 5. ユーザー登録ボタンクリック
APIGateway -> Lambda: 6. ユーザー処理呼び出し
Lambda -> DynamoDB: 7. ユーザーデータ登録
DynamoDB --> Lambda: 8. レスポンス
Lambda --> APIGateway: 9. レスポンス
APIGateway --> Users: 10. 登録完了メッセージ表示
```
上記のようにコードブロックで指定するやり方と、@startumlと@endumlで囲むやり方があります。
PlantUMLで表現できるものであれば、シーケンス図に限らずMarkdownの中に埋め込むことができます。
おわりに
Visual Studio Code上でMarkdownの資料を作成することで、様々な拡張機能を利用することができます。他にも様々な拡張機能がありそうなので、便利なものは今後も追記していきたいと思います。