draw.ioで作成した図をGitHubに同期させる手順をまとめました。
ドローイングツールとは
簡単に言うと図を書くためのツールのことです。
顧客への説明や、プレゼンテーション時の資料、設計時などに様々な図を書きますが、一から作成するとかなり大変です。あらかじめ用意された素材やレイアウト、テンプレートを使用することで簡単に作成することができます。
今回使用したdraw.ioではクラス図、フローチャート図、ER図、UML図、各種クラウド構成図(AWS、Azure、GCP)をツールを使って書くことができます。
Flowchart Maker & Online Diagram Software
draw.io is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams
ドローイング
まずはdraw.io (diagrams.net)にアクセスします。
今回はGitHubと同期させるためファイルの保存先をGitHubとします。
「GitHub」を選択する。

「新規ファイルを作成する」を選択。

ファイル名とテンプレートを選択したら「作成する」を押下する。

「認証する」を選択する。

GitHubが立ち上がるのでサインインします。

GitHub認証を行います。「認証する」を選択する。

GitHubにdraw.ioをインストールします。

インストール場所を選択する。

「Only select repositories」を選択してrepositoryを選択する。「All repositories」なら全てを対象にできる。

設定が完了しました!

repositoryを選択します。※任意のrepository

ブランチを選択します。※任意のブランチ

「OK」を選択します。

問題無ければ「OK」を選択します。

GitHubを見てみましょう。
router.drawioが追加されました。

簡単な図を書いてみました。

保存するとGitHubに保存される。
