Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Visual Studio CodeでAWS構成図やシーケンス図を含めたMarkdownを作成する

Last updated at Posted at 2022-07-04

はじめに

Visual Studio CodeでMarkdownを作成するときに、内部にdraw.ioで作成したAWS構成図やシーケンス図などを簡単に埋め込む方法をメモしておきます。最終的なイメージは以下のようになります。

image.png

前提条件

  • 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の基本的な記載方法については割愛します。

test.md
# サンプル資料

## AWS構成図

## シーケンス図

AWS構成図

続いてAWS構成図を作成します。test.mdと同じディレクトリにtest.drawio.svgというファイルを作成します。
ファイル名に*.drawio.svgという拡張子を付けることでsvg画像として取り扱うこともでき、draw.ioで編集することもできます。

image.png

test.drawio.svgをVisual Studio Code上で開くと、draw.ioの作図画面が表示されます。適当にAWS構成図を作成します。

image.png

前述の通り、svg画像として取り扱うことができるため、test.mdに以下のように記載することで、Markdownの中にAWS構成図を埋め込むことができます。

test.md
# サンプル資料

## AWS構成図

![test.drawio.svg](./test.drawio.svg)

## シーケンス図

draw.ioで作図できるものであれば、AWS構成図に限らずMarkdownの中に埋め込むことができます。

シーケンス図

続いてシーケンス図を作成します。シーケンス図は別ファイルではなくMarkdownの中に直接記載することができます。
Markdownに以下のように記載することで、Markdownの中にシーケンス図を埋め込むことができます。

test.md
# サンプル資料

## 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の資料を作成することで、様々な拡張機能を利用することができます。他にも様々な拡張機能がありそうなので、便利なものは今後も追記していきたいと思います。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?