AWS構成図を無料で描く draw.io

draw.ioというドローイングのWebサービスをご存知でしょうか？

https://www.draw.io/

結構使ってる人も増えているようです。私は今回初めて使ってみました。 個人的な所感を書いた後に、簡単な使い方を書いて終わりにしたいと思います。

所感

いいところ

1. 無料で登録もないから簡単にスタートできる。

2. 操作が簡単。多分10分くらいいじってれば操作できちゃうと思う。

3. PDFや各種画像にエクスポートできる(普通有料だったりする)。

4. Visioであったレイヤーの概念作れる。

5. 素材が豊富。特に今回使いたかったAWS関連素材。PollyやAlexaやPinpointのアイコンもあるぞあるぞ。

新し目のサービスのOrganizationとかもありますね。

Webアイコンなんかあるのはいいですね。

電気図もある！そういえばおれ電気工学科だった。。懐かしい・・

もうちょい

1. ステンシルのレイヤーを"前に"や"後ろに"はあるのですが、"最前面"や"最背面"がないのがちょい辛い。

2. 補正が少し強いように感じた。矢印の調整時に他のステンシルに引っ張られる感覚があった。込み入った図を書く時少し心配。

3. プレゼン用に全画面表示があったらよかった。

4. ん〜、あとはなんだろ、また思いついたら付け足します。

使い方

はじめに

操作は全てブラウザで行います(アプリもあるみたい)。
まずはじめにブラウザでDraw.ioを開くと以下のページになります。
データの保存先はDraw.ioには持ってないのでWebストレージやローカルを選んでください。すでに使ってるWebストレージがあれば連携できて逆にうれしい仕様です。

右下の地球っぽいアイコンをクリックすると言語を日本語にも変更できます。日本語を選んでブラウザをリロードします。

Webストレージは後でも選ぶことができるので後でも構わない場合は"あとで"を選びます。

次の画面になります。

一般のステンシルで書いてみる

ブラウザの画面から左側に各種ステンシルがあります。"一般"の"シリンダ"を画面中央あたりにドラックアンドドロップしてみます。

それ以外のものも同じ要領です。簡単ですね。
テキストも"Text"をドラックアンドドロップで持ってこれます。または何もないところをダブルクリックすることでもテキストステンシルを出現させることができます。
矢印も同じように持ってこれます。矢印を曲げたい場合は画面のように対象の矢印をクリックしたあと、メニューから"カーブ"のタイプを選びます。

自動補正もしてくれます。

AWSの構成図

AWSのステンシル追加

左側のステンシルメニューの一番下の"その他の図形"をクリック。

シェイプが複数出てくるので、"AWS"にチェックを入れて保存する。そうするとAWSのステンシルが追加されます。

あとはこんな風に図が書けます

基本は同じ要領です。好きなステンシルを使って貼っていってください。

例えばこんな感じの図を描くことができます。

ブラウザ上での表示↓

PNG画像↓

AWSステンシル豊富

シートを増やせます

画面下部の"プラスマーク"をクリックすることでシートを増やせます。

ダブルクリックでテキストステンシル出る

ステンシル探すのは検索が便利

検索結構使えます。
pinpoinのアイコンなんかすげー

ステンシルの整列やグループ化

ステンシルをshiftを押しながらクリックで複数選択。 その状態でメニューの"アレンジ"、"整列"できれいに整列させられます。 同じアレンジのメニューにある"グループ化"をすることでステンシルを1つのグループにすることもできます。

テーブル作成

図にテーブルを作れます。画面のルートテーブルとして描いてるものがそれです。
“その他"ステンシルにあります。
対象テーブルをダブルクリックし、行や列の増減などを行えます。操作は画面の右下箇所にあります。

レイヤー構成作れます

メニューの"表示"から"レイヤー"を選択

レイヤー構成を作れます。例えば通信フローの矢印を書いてそれを”通信フロー"レイヤーと定義しておけば、通信フローが見たいときにだけ表示させたり、不要なときは対象のレイヤーを無効にすることで矢印を消すことができます。
見る人によって見やすい図に変更可能な図が一元的に作成できます。Visioなどではよく駆使してました。

“通信フロー"レイヤを表示してる状態です。

”通信フロー”レイヤを非表示にした状態です。

セキュリティグループとかもレイヤ化すると見やすいかもですね

読み取り専用でパブリッシュできます

ファイル->Publish->リンク、これで図をパブリッシュできます。

今回の作成した構成図をパブリッシュします。 リンククリック後、"新しいウィンドウで開く"としてもらえれば編集も可能です。是非お試しを。

https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=sample_cloud.xml#R7V1bc6s4Ev41PMaFJK6Pdm6zVXO2ssepOjvz4sIg21QIeAEn8fn1KwHCRpIdPBZOQshDYjdCl08f3a1Wo2jo%2BvntPvXWqx9JgCMN6sGbhm40CB0dkN9UsC0Fho1KwTINg1IEdoJp%2BBtXQr2SbsIAZ42CeZJEebhuCv0kjrGfN2RemiavzWKLJGq2uvaWWBBMfS8Spb%2FCIF9Vw4LWTv4HDpcr1jKw3PLK3POflmmyiav2NIgWxU95%2BdljdVUDzVZekLzuidCthq7TJMnLT89v1zii0DLYyvvuDlyt%2Bp3lWzaSKPGfML0KNDRhvU9xnLepDpY3vHjRBrPxcPUXY60b8FK%2Fmkwyk2gSeNmqvpblafKEr5MoSYtbkV78kCuLMIqYPE5icvtkmXpBSHrJiWmFD16e4zQuaoX6rmY2UVA60AqZF5zm%2BG1PVA38HifPOE%2B3pMhbk4oVg%2B3q6%2BuODq5ZyVZ7VLCsSuhVFFzWNe%2BAJh8qrOW4m6pw1xXh3gnCRhNhAEWIbUsCsWkogBjpnXL7znRvTOsMbjukK0ZnyPPQmyL0CEARekMFuxH6HvQ2myAjEwggQ9sVQYbAPR9k5xvT227BbihRLErYDYxvwW6gt2C3IwEZ6grYDd3P7ZlQeqPCO6F%2FO5qC2oaxKZD4KLVsfwpqS3vOFFjvz0CDyav8OWJ4r7w1LfL8tqSrh5H3mqHRS5jmGy%2BardPwxcvxzI%2BSTcBNQaF5HBNZx%2BehblMByBanS3QoYGxKDCWyzkfYVoxwGFN24ny2JPi%2BetvTwVWAJ2IWrwLUFTlrSWyiDRVoZmUu35fSzMBx2mlmYKgAGbwP8kmsXeP0OcyyMIkzkbA37tg2wOW0Qa05GbYylSuBFpkKkG2xKuwPsoitEi6ALANSGbJpkM2C%2BSyMs9yLfSyiC29tNHE6VbQAgSagEjVguCNThNRSYLtgizXeOZDO6J9gvp09b6I8nHm%2FPwRji7HvYzBusdI4zQVb%2B7PY%2B1j%2FAOpN2hLzdTEHoQOPq2SrRL8WUBrdQmm9rwFk8TULnQ8lauEG9MDX4mM8Ul9LFuMBSAFfWR399AgMbqVwSV8LqVatnwtZp4nsJX0tpDxu8AmMlmk1Ab2k0UL9MlqGa3FGy7yY0QItguYnQYkjL8tDfxYlXjCbexGBNYyXHxR3MUew6a1CXYTWtmTeqqsA3DY7EieB623yZJb5XnQY0m6pimw0svkFgBgFt6ULgB3QZz38Iqj%2FHj8SwX2lDXmEydDyJrYpzsLf3rwoQGFfJ2GcF10yJ5p5Qz0zAnRWuWb0axQuaYw7wgtaFcUrJLMwrsR5sqYztvYo1R%2Fpl5sro6O1gSR46Eq3HBQgLe449Bhpk1mmD0DaEMO0v%2FCc3DV%2BINIpTskw%2BoU2tJpoG6boPtRRXeVwiyu1nsPNuxiGKdrB7uAW12w%2Fb6ZE8GM7%2Fc%2Bf%2FQKaj%2Bkalgi0fItYAc5itLy3OFsQfhzOqtdz843%2FhHPRobvVTWigTh06h0uLMtlY3lt7ABW%2BnCF6GA%2BbeRT6VA1v5jHOxezOL01boHNLPZYZcgk9bIpeBoe2yOMvjbZhckEfXXTpukNbdDIeyjyP70LuOmn1InCLTgYPd8%2FZbUpy%2FrqDW4wWPyZP24SIfuJlmMR9w7oBtS1RJF2tDU3Rqxv%2F3TPN4XJOiGMI8BpdwSs6c%2BO%2Fe6cpOMUsCTB3hq8Yq5%2FSNNFJ6fP2CmfBmXZFHsuSU5XgLEkPvnU1sgZyx9qtoU3utDHQbpHmIM01qw%2Fjm%2BrD5FocPvMWwyycs%2Bk5%2Fu6UJTqYwgTjOBjTt9XINz%2Fysox4n43pxm9h%2Fl861WR9UX77a%2B%2FKA05DAg1Otf1dcrbDTZdKpPvptqpAh0zwVyFAdQG%2BHnH0DM8s2aR%2B1feKyrmXLjHjSBW2wkHj7TqRIvvJs7IXfCpZiiMvD19wg4EyXlQtPNCnQdsLFzcIKDCrHE110%2F5McvXwrxPYXD0lBEI9BUnrQbfirSW6ySdz5igLoNkgQYNixj7HCGEc5wDP2vGDkWGfICxt%2F5MQxGB9ZAzh3%2F9oy5B6k5JVxO%2BUK6SI6NqroAhjQZMCZxFApiFYZz8NAdyRtfdjGxwfmpf5PebW9GD5FfUuIVW%2Fux%2FIJQMqZEuLNMwz2DJqqgz3kMZovG2zb5SaJsl1D5kkypdp1eUkzVfJMom96HYnnfib9OXIe85SgkIJQdGnIii0wTGCGlDO31MJClx91NRgBtJHluMYiHxAlmvzGQAHKEqIRLdC62KVf3pwfIB3xpF%2BtKMW9zoOV57uWhU9%2BMfPS4u8r7MMsE204h7nr%2FSRrjsHWV8%2FZ5ZrNJ40yzhdN38SShvQkSq%2FWufCf8Zhw%2BXim3yKtUKt2mLP4wyWgKZWdA5rxZOWB53oUPQFjDw6Tjg%2BCa8t4UydI5zdjnCn6kiT67CpH9eRwNGPlT9fR8oSDq2IhhfyIjQB9XmSBrjct7P%2Bt6FnmUzA7mNj5uvrtJdmo5BP2l17QVDkd%2B0VNRqlds8cE1aVj8lFVmupGWt2SS6VXb7ykyjy1hkuy9Tf9hq0ltXfcsTzJNgKwlTar93ZMLQZundJ29Ag8mzfpXkBVVeaF9nxMY1%2BVkNYvxWPY0SmpijrOvMFBEd6u6K8q2I%2Fu2JFcEi46QZneRiTJ4%2FGr8v7CTVoFWdU%2BljqiWP1UWHaFtKz0AiYBNhwhMCIGGPSOLD2exIcvuvPxPeio2VPGsohdmBvAQOkiAB1F%2FWRXo1XbzlcLt1N1bDVDIdJ5kK774zqxBulQ6NCmR6g8lIjMjnnJIgBXi7poXr40SR5wekiKtwJWoRIdm%2FPHHf72kdsr7iIrSFJ%2BpMaaqDi3AxLlh88mJXBrAxmZTArg1n5umbF5N6RrE9ZuoxZEbcCfyabHD9SBD9T5sAiiXP2AqylyqKbXFRPkuncVWIo2yWTAi%2FGS%2FoFvM1nPiNJijnoCnnZLuLgSQ2e1OBJ9dqT%2Bld1vhf1pX4NvlQffSneoIOL%2BlIsUi416XrPTfoVF1YHSIS%2BO5Mu7uNPsb9Jw3x7T1i2FrAXR3x6BpvdYjP0jEM2FwsFh2waGr%2BVRtPc6lPV9YNkECa%2BiVYJ%2BEEyIG5NA2UvU8iO0KgZctbZvrLUwsHB652DV%2BSjQpqtWn4YGyxn1Vbn8O2q5NJgHYe1j9ilifpm95Jud83a2vhOc8hoTc2daBN4vNmdB1Dm%2BDpgL8fX1ByTVvvJnKE%2FHh8fWro%2Fj9d1yZNdJ6et79jW2%2BzauWp30tcpblfntoD7RxHSY6qk%2FylChSUQPbLBRFcmmT9QVOIqI9l7SkDFv5dwhhjMYKIHEz2YaHUmenoPBtN8mg3g1%2BwIXNI2y5bPgwnonQngnsszde5RNXLRugd98q6rLznTQfZKK1KhTWSn%2Fw%2FapIfa5B1XatAmfdEmvHdSx3UvoU5anBr8TQMHgNPySDIt0qNk1MT2hzTYb6Hnh8BBbwMH1QmTd%2BNNmqTe0d6pCSEgpLdNieHciyGI8L494F85BmIqX3cxBMlBNoM16J81mN43tNjg9X8bdWJIjh9T5PSTr2lCZ6%2B%2Bdk%2BP2f2RBJiW%2BD8%3D

スクラッチパッド

ステンシルをコピーしたものを幾つか置いておける場所(パッド)。
例えば下図のルートテーブルの表をドラッグアンドドロップで、画面左側の"スクラッチパッド"に入れる(コピー)。
そしていつでもそこから戻せる(コピー)。
複数ステンシルを"スクラッチパッド"に格納(コピー)できて、同じようにいつでも戻せる(コピー)。(あー、言葉で伝えづらい系だなこれは)
何度もコピペするような時に楽かも。

他にも有用なものがあれば追記できたらと思います

see you..