Cloudアーキテクチャ図を描こうtechblogはじめにこんにちは、エンジニアの佐藤です。久しぶりのTechBlog投稿になります。Cloudのアーキテクチャ図を描く方法をご紹介したいと思います。※説明はいいからすぐに使いたい!という方は、こちらdraw.ioって??draw.ioとは、英JGraph社が提供するオープンソースのオンライン作画ツールです。フローチャートやUML図等を無料で、綺麗に、そして簡単に作成することが出来ます。以下のような画像をオンライン上で作成可能です。サンプル画像1サンプル画像2特徴draw.ioをオススメする理由は大きく3つあります。Graphics)という形式で作成されています。そのため、画像を拡大してもボヤけたり劣化を起こすことなく、綺麗な構成図を作成することが出来ます。Cloudアイコン画像をそれぞれ拡大し、画質を比較したものです。PNGファイルの方は文字の輪郭がボヤけてしまっていますが、SVGファイルの方はシャープなまま拡大されていることがわかるかと思います。SVG-PNG比較画像コネクタが自由自在!!エクセルやパワーポイントを使ってネットワーク構成図などを作成する際、カギ線コネクタや結合点が思ったような動作をせず、イライラした経験がある方も多いのではないでしょうか。カギ線コネクタあるあるdraw.ioでは、結合点によらずコネクタをジョイントすることができ、また、コネクタ自体を自在に屈折させることが出来るので、以下のような複雑な図形も簡単に描画することが出来ます。draw.ioのコネクタテンプレートが豊富!!!draw.ioでは、様々なテンプレートとShapes(アイコン集)を提供しています。Cloudにも対応しており、様々なパブリッククラウドのアーキテクチャ図を描くことが出来ます。Cloud対応版draw.ioにアクセス出来ます。URL:https://sbc-satou.github.io/drawio/src/main/webapp/index.htmlREADME:https://sbc-satou.github.io使い方ブラウザで上記URLにアクセスします。Diagram(新規作成)を選択します。Cloudテンプレート(cloud/aliyun_xxx.xml)を選択し、Createボタンを押下します。※空のテンプレートから作成する場合でも、blankDiagramではなくcloud/aliyun_blank_template.xmlを選択してください。・本ツールはdraw.ioを元に作成されています。License2.0に準拠します。Pages機能を用いてホスティングしています。Drive連携/Github連携等)を制限しています。CloudのShapes(アイコン集)が表示されます。CloudのShapesを読み込むことは出来ません。・本ツールは予告なく仕様変更、または公開を終了する可能性があります。以降の記事では、開発者向けにdraw.ioのカスタム方法をご紹介します。いう方法で既存draw.ioをカスタマイズしていきます。この方法では、殆どソースコードを修正する必要がないため、非プログラマの方でも簡単にテンプレートやライブラリの追加が可能です。※ちなみに一番面倒なのはアイコン収集だったりします。前提Githubアカウントを所持している前提となります。大まかな手順は以下の通りです。Cloudのアイコンを収集していきます。ファイル形式はSVGを指定します。必要に応じて色やサイズを変更してください。※本例では、サイズを128px、色を#00C1DEに変更してダウンロードしています。前手順で収集したアイコンを適度な粒度でまとめ、カスタムライブラリ(Shapes)を作成します。カスタムライブラリの作成には、本家draw.ioを用います。draw.ioにアクセスします。空のダイアグラムを作成します。・保存先にDeviceを選択します。Diagramを選択し、ダイアグラムを新規作成します。Createを選択し、空のダイアグラムを作成します。Deviceを選択し、インポート画面に遷移します。インポート画面へ遷移インポート画面が表示されます。Filenameに任意のファイル名を入力し、前手順で収集したアイコンをドラックしていきます。アイコンをドラッグすべてのアイコンをインポートし終えたら、Saveボタンを押下してカスタムライブラリファイル(xml)をダウンロードします。xmlファイルをダウンロード上記3-5の手順を、作成するカスタムライブラリの数だけ繰り返します。※本手順では、プロダクトの分類毎に8つのカスタムライブラリ(Aliyun_xxx.xml)を作成していますが、1つのファイルにまとめても問題ありません。以上でカスタムライブラリの作成は完了となります。テンプレート作成ダイアグラム新規作成時に選択するテンプレートファイルを作成します。こちらもカスタムライブラリと同様、本家draw.ioを利用します。draw.ioにて、任意の構成を作図します。テンプレート作図テンプレートをxmlファイルとして出力します。XMLを選択Exportボタンを押下します。エクスポートFilenameに任意のファイル名を入力し、保存先にDeviceを選択してテンプレートファイルをローカル端末にダウンロードします。出力先を選択テンプレート選択時に表示されるサムネイル画像を出力します。xmlファイルと同様の手順でPNGファイルとしてローカル端末に保存します。PNGファイルとしてエクスポート上記1-4の手順を必要なテンプレート数だけ繰り返します。※本手順では、以下の4つのテンプレートファイルを作成しています。・空のテンプレート(aliyun_blank_template.xml)・標準Webアーキテクチャ(aliyun_basic_web.xml)・マイグレーションアーキテクチャ(aliyun_cloudnative_migration.xml)・エンタープライズECアーキテクチャ(aliyun_enterprise_e-commerce.xml)以上でテンプレートファイルの作成は完了となります。GitHubリポジトリ作成GitHubに公開用のリポジトリを新規作成します。Githubにログインし、Newボタンよりリポジトリを新規作成します。リポジトリ作成リポジトリの設定を行います。.github.ioに設定します。・同様の理由で、スコープをPublicに設定します。・※その他templateの選択やREADMEの作成等は任意です。repositoryボタンを押下し、リポジトリを作成します。Pagesの設定を行います。themeボタンを押下します。themeボタンを押下します。テーマを選択https://<リポジトリ名>(https://<ユーザ名>.github.io)にアクセスし、以下のように選択したテーマが表示されることを確認します。Pagesの設定は完了です。ソースコード入手カスタマイズ元のdraw.ioのソースコードを入手します。前手順で作成した公開用のリポジトリをクローンしておきます。本家draw.ioのGithubより、ソースコードをクローンします。ダウンロードしたソースコードを公開用リポジトリにコピーします。カスタムライブラリアップロード先程作成したカスタムライブラリのファイルを公開用リポジトリにアップロードします。公開用リポジトリに任意の名前でディレクトリを作成し、カスタムライブラリファイル(.xml)を配置します。※本例では、drawio配下にlibs/aliyunディレクトリを作成し、ファイルを配置しています。配置したカスタムライブラリをリポジトリにpushします。Pagesで正常に公開されていることを確認します。先程作成したテンプレートファイルをソースコードに追加していきます。.png)を、drawio/src/main/webapp/templates/cloud配下に配置します。drawio/src/main/webapp/templates/index.xmlを下記のように編集し、カスタムライブラリの定義をテンプレートの追加を行います。--></templates>1カスタムライブラリclibsタグでカスタムライブラリを定義します。このように記述することで、後述のテンプレートからカスタムライブラリの利用が可能になります。PagesのURLを追加します。2テンプレートファイルtemplateタグでテンプレートを定義します。このように記述することで、新規ダイアグラム作成時にテンプレートとして選択可能となります。urlにはテンプレートファイルの相対パスを記述します。libsには、テンプレート生成時に読み込む組み込みライブラリを指定します。clibsに前手順で定義したカスタムライブラリを指定します。変更内容をリポジトリにpushします。Drive連携/Github連携等)を制限します。drawio/src/main/webapp/index.htmlの49行目付近を下記のとおり修正し、オフラインを強制させます。変更内容をリポジトリにpushします。確認ブラウザでindex.htmlにアクセスし、draw.ioがカスタマイズされていることを確認します。Cloud版対応draw.io以上がdraw.ioのカスマイズ方法になります。Cloudのアーキテクチャ図を作成するツールを紹介させていただきました。ブログ等に構成図を載せる際などに、是非利用していただければと思います。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。