読者です 読者をやめる 読者になる 読者になる

ゆるふわカウンターアタック

Qiitaっぽい時はQiitaで、slideshareっぽい時はslideshareで、preziっぽい時はpreziで、ブログっぽい時はここで

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

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

https://www.draw.io/

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

所感

いいところ

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

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

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

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

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

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

f:id:pioho:20170323110155p:plain

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

f:id:pioho:20170323103119p:plain

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

f:id:pioho:20170323102140p:plain

もうちょい

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

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

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

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

使い方

はじめに

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

f:id:pioho:20170323094204p:plain

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

f:id:pioho:20170323094616p:plain

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

f:id:pioho:20170323094801p:plain

次の画面になります。

f:id:pioho:20170323094924p:plain

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

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

f:id:pioho:20170323100646p:plain

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

f:id:pioho:20170323101111p:plain

f:id:pioho:20170323101414p:plain

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

f:id:pioho:20170323103506p:plain

f:id:pioho:20170323103513p:plain

AWSの構成図

AWSのステンシル追加

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

f:id:pioho:20170323102637p:plain

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

f:id:pioho:20170323102847p:plain

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

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

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

ブラウザ上での表示↓

f:id:pioho:20170323101831p:plain

PNG画像↓

f:id:pioho:20170323101735p:plain

AWSステンシル豊富

f:id:pioho:20170323103719p:plain

シートを増やせます

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

f:id:pioho:20170323102331p:plain

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

f:id:pioho:20170323103619p:plain

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

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

f:id:pioho:20170323103936p:plain

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

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

f:id:pioho:20170323104510p:plain

テーブル作成

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

f:id:pioho:20170323120731p:plain

レイヤー構成作れます

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

f:id:pioho:20170323104108p:plain

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

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

f:id:pioho:20170323120534p:plain

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

f:id:pioho:20170323115237p:plain

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

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

f:id:pioho:20170323124228p:plain

今回の作成した構成図です。

Flowchart Maker & Online Diagram Software

クラッチパッド

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

f:id:pioho:20170323211429p:plain

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

see you..