Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What is going on with this article?
@kabik

まだパワポでアーキテクチャ図描いてるの?

みなさん、アーキテクチャ図を何で描いてますか?
パワポで描いてる人はこの記事を読むと幸せになれますよ。

パワポでアーキテクチャ図を描くことのメリット・デメリット

まずはパワポでアーキテクチャ図を描くことのメリット・デメリットを考えてみましょう。

メリット

  1. 使い方に慣れている人が多いので導入コストがあまりかからない
  2. 既存のものを修正することができ、アーキテクチャの変更が入っても図の修正が可能

デメリット

  1. 元ファイルと画像ファイルの両方を管理しなければいけない
  2. AWSのサービスなど、各種アイコンを探して保存して挿入するのに時間がかかる
  3. 見た目がツールに依存する(パワポ以外のツールで開くと崩れることがある)
  4. PNGなどのファイル形式としてエクスポートする手間がかかる

このデメリット、なかなか辛いですよね...。困ったことある人結構いると思います。今回はそんな人のために良い方法を紹介したいと思います。

VSCode + Drawio拡張機能を使おう

下のgifを見てください。VSCode上で作図をしているのが分かると思います。

UIは https://draw.io のUIをVSCode上で再現したものです。

demo.gif

デメリット解消

これを使うと、パワポのデメリットの2,3は解消できます。

  • 2 AWSのサービスなど、各種アイコンを探して保存して挿入するのに時間がかかる
    • => 上のgifのように、検索すれば大抵のアイコンはヒットするので解消
  • 3 見た目がツールに依存する(パワポ以外のツールで開くと崩れることがある)
    • => 画像として保存されるため基本的に崩れることはない

VSCodeにDrawio拡張機能をインストールする

使いたくなった人のために導入方法を説明します。

VSCodeがPCにインストールされてない人は公式ページからインストールしてください。

1. VSCodeの左のメニューバーにあるこのアイコンをクリック

1.png

2. 検索窓に drawio と入力して検索

2.png

3. Draw.io Integration のインストールボタンをクリックしてインストール

3.png

これでVSCode上でDrawio拡張機能が使えます。

デフォルトでは .drawio, .dio, .drawio.png, .drawio.svg などの拡張子のファイルを開く時にDrawioのUIで開いてくれます。

SVGを使おう

SVGとは

Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG、日: 変倍ベクタ図形[2][3])は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。
引用: https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics

要はXMLで表現されている画像のことです。ベクター画像と呼ばれるもので、拡大しても画質が粗くなりません。

SVGの例

test.png

このような矢印の画像は、下記のように表現されます。(実際はpng形式にエクスポートしたものなので「このような」という表現を使っています。)


<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="66px" height="66px" viewBox="-0.5 -0.5 66 66" content="&lt;mxfile host=&quot;1c8c5549-898c-462f-ae0d-8838554af75e&quot; modified=&quot;2020-12-07T08:49:14.991Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.51.1 Chrome/83.0.4103.122 Electron/9.3.3 Safari/537.36&quot; etag=&quot;6NIIQ2QJ-vfhFPl3OS8x&quot; version=&quot;13.10.0&quot; type=&quot;embed&quot;&gt;&lt;diagram id=&quot;E1QHq5dM9lbZslo9pDEB&quot; name=&quot;Page-1&quot;&gt;jZNNT8QgEIZ/DXdaVlePWle9mJjswTPCbEuWdjaU7oe/XrZAKduYyKGBh5l3hhdKWNWe3ww/NB8oQZOSyjNhL6Qs1+zefa/g4gFbUw9qo6RHRQJb9QMBxrBBSeizQIuorTrkUGDXgbAZ48bgKQ/boc6rHngNC7AVXC/pl5K28fThjib+DqpuYuWChp1vLva1waEL9UjJduPw2y2PWiG+b7jE0wyxDWGVQbR+1p4r0Fdro20+7/WP3alvA539T0LpE45cDxA7Hvuyl+gFdPLpaqlbCc37XgnCnhvbagcKN+2twT1UqNGMCYyOw+14KZALr1N3xXRm95QAW7Dm4kJOyfToeTPzOzIDmlt1zOV5uPt6kpsqfKJyhUsanimLOuGVFo80l+hxMAJC1tzFG6EVvRFa3QhZbmqwCyE3mR07ofGS4jI9Bh+efji2+QU=&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);">
    <defs/>
    <g>
        <path d="M 7 57 L 52.5 11.5" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 56.21 7.79 L 53.73 15.22 L 52.5 11.5 L 48.78 10.27 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
    </g>
</svg>

SVGはオブジェクトの情報(ここでは矢印)を保持しているので、後から画像を自由に修正できます。

デメリット解消

SVGを使うことでパワポのデメリットの1,4は解消できます。

  • 1. 元ファイルと画像ファイルの両方を管理しなければいけない
    • => SVGファイルのみ管理すれば良いため解消
  • 4. PNGなどのファイル形式としてエクスポートする手間がかかる
    • => SVGファイルがそのまま画像として使用できるため解消

Drawio拡張機能でSVGファイルを開こう

デフォルトだとSVGファイルはDrawioのUIで開いてくれないので設定を変更する必要があります。

settings.json に以下を追加します。

"workbench.editorAssociations": [
    {
        "viewType": "hediet.vscode-drawio-text",
        "filenamePattern": "*.svg"
    }
]

参考: https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio#associate.svg-files-with-the-draw.io-editor

パワポのメリットは損なわれてないか

  1. 使い方に慣れている人が多いので導入コストがあまりかからない
    • => 新しいツールを使うので導入コストはどうしてもかかってしまいます。ただ、DrawioのUIは直感的に使用できるのでそこまで大きいコストではないと思います。それよりもメリットの方が大きいと思っています。
  2. 既存のものを修正することができ、アーキテクチャの変更が入っても図の修正が可能
    • => Drawio拡張機能で開ける形式(SVGなど)なら図の修正が可能です。今までパワポなどで作った画像は再作成する必要がありますが、移行した方がメリットが大きいと思ってます。

おわりに

みなさん、ぜひVSCode+Drawio拡張機能+SVGで快適なアーキテクチャ図作成生活を送りましょう。

補足・訂正あればコメントで教えていただけたら幸いです。

おまけ

  • PNGだとオブジェクトの情報を保持せず、出来上がった画像の情報しかないため、後から画像を修正する時にできることが限られています。(実は .drawio.png 拡張子を使えばできちゃいますが、おそらくDrawio系のツールでしか開けないのであまりオススメしません)
19
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
works-hi
「はたらく」を楽しく!に向けて大手企業の人事業務から変えていく HR業界のリーディングカンパニー

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
19
Help us understand the problem. What is going on with this article?