hkane8の技術ブログ

主にIT技術系で調査したこと等を備忘として記載します

【技術やってみた】AWSのシステム構成図をVSCodeで書いてみた2

内容

VSCode拡張機能AWSのシステム構成図を作成した。

試した際にできなくて気になった以下のことを試してみた。

  • 図を書く全体エリアはどこまで広くかけるのか
  • 図のアイコンの下にEC2などのラベル追加できるのか
  • 図を変更した際、変更点の確認ができるか

 

前提

  • VSCodeをインストールしていること
  • VSCode拡張機能からDraw.io Integrationをインストールしていること
    本記事の内容を試したDraw.io Integrationのバージョンはv1.6.4

 

やってみた手順

 図を書く全体エリアはどこまで広くかけるのか

  1. 右側のダイアグラムタブにて、「用紙サイズ」が設定できる。
    A4やA3の他、カスタムを選択すれば自分でサイズを入力できる。
    下記はカスタムで、30in ×30in としてみた例。図を記載するのに場所が足りないということはなさそう。

 図のアイコンの下にEC2などのラベル追加できるのか

  1. メニューバーの+を押して「テキスト」を選択するとラベルが作成できる。

  2. EC2の下にWebサーバのラベルを追加してみたのが下記。右側の「テキスト」タブで「フォントの色」を指定できる。

図を変更した際、変更点の確認ができるか

  1. 2つのファイルを選択して右クリックで表示されるメニューから「選択項目の比較」をクリックしてみる。構成図のデータは3種類の拡張子で保存できるので1個ずつ試してみた。

  2. drawioファイル。左右に並んで表示された。下記の画面例で表示されているフォーマットパネルなどを×で閉じると、構成図を並べて表示になる。(次に示すpngの比較表示と同じイメージになる。)

  3. pngファイル。各ファイルの図が左右に並んで表示された。

  4. svgファイル。テキストデータなので差分は表示されるけど、何が図の差分かを把握するのは難しそう。

  5. 比較ではないけど、ファイルを選択して右クリックした際、メニューに「タイムラインの表示」というのがあったのでついでに試してみた。

  6. これまでの保存履歴が確認できそう。ワークスペースの編集として過去の保存が表示された。試しに1週間と表示されてるものを選択してみる。

  7. 比較と同じ感じで左右に表示された。左が1週間のラベル追加前、右がラベル追加後の図として表示された。

 

現時点では図の変更点が視覚的に確認できる良い方法が見つかっていないけど、また時間ある時に調べてみよう。