drawio

drawio

きっかけ

渡和さんからの情報提供

draw.io とは

drawio
wiki

drawio はフリーかつオープンソースのハイクオリティな図が作成できる作図ツール
クラウドベースでありごくごく簡単に使用できることも大きな利点
ブラウザ上で動作し保存した図をローカルデバイスやクラウドストレージに保存できるため環境に依存せずにどこからでもアクセス可能

ユーザーフロー、ER図、ネットワーク図、UML図など
いろいろな種類の図を作成することができる

drawio を使う

draw.io にアクセスすれば OK

インストールやユーザ登録などが不要
ただし保存場所をどこにするかによって認証が別途必要ではある

• 保存先の指定
  • Google ドライブ
  • OneDrive
  • デバイス
  • Dropbox
  • GitHub
  • GitLab

Google ドライブ

GitHub

ブラウザで使う

例えば Google ドライブ上で利用する を前提にした場合

1. Google ドライブでアプリの追加をします
2. ドライブの画面で「新規」「その他」「アプリを追加」と進みます
3. 検索ボックスで [draw.io](http://draw.io/) と入力して drawio を見つけて インストール をクリックします
4. インストール、Google にログイン、アクセス許可、としてインストール完了
5. drawio ファイルを開く

VSCode で使う

拡張機能 Draw.io Integration をインストールする

• 対応フォーマット
  • drawio
  • dio
  • drawio.svg
  • drawio.png

拡張子が drawio のファイルを作成

テーマのお勧めは

• Kennedy
• atlas

エディタを再度開くアプリケーションの選択… をクリックするとエディタを指定して開くことができる
テキストエディタ を選択すると素の SVG の状態で編集することが可能

作成した図はエクスポートが可能

• svg
• png
• drawio

LiveShare

VSCode 上で複数人で閲覧編集やデバッグ操作等もできる
ペアプログラミング、コードレビューに使える

拡張機能として Live Share のインストール、もろもろ設定をしておくと使えるようになります

Live Share がインストールされていると画面上に表示されるアイコンから share を開始することができる

share 用のリンクがコピーされているのでこれを信頼できる相手に教えて開いてもらう
同じファイルをリアルタイムで同時に編集操作ができるようになる

＃＃ 感想
drawio 便利さの一端を知った程度でまだまだ使いこなせているとは言えないが
上手に使えたら作業の効率化、コミュニケーションをスムーズにする助けになるのでは感じているところ