自宅のネットワーク図をメンテし続ける工夫

みなさん、自宅のネットワーク図って何のツールで書いてますか？私は過去に次のようなツイートをしたところ案外バズったことがありました。

「自宅のネットワーク図って何のツールで書いてます？」
「それ自宅で必要？」

　　　　　　　　　　　終
　　　　　　　　　制作・著作
　　　　　　　　　━━━━━
　　　　　　　　　　ⓃⒽⓀ
— hnw (@hnw) 2019年9月29日

これがバズるのは自宅にヤバいネットワークを組んでいる人が一定数いる証拠と言えるかもしれません。リプライ欄を見ても、みなさんそれぞれ工夫されていることがわかりました。

私個人はネットワーク図を書くのに色々なツールを試してきたのですが、イマイチ定着しないのが悩みでした。最初は頑張って書くのですが、いつの間にかメンテをサボってしまい、いざネットワーク構成をいじる段になると情報が古くて役に立たないことが複数回ありました。悲しいですね。

プロなら仕事で使う定番ツールがあるのかもしれませんが、私のようなアマチュアの立場だと機能云々よりも「いかにメンテナンスコストを下げるか」が一番大事なのかもしれません。そんな私が最近使っているのがdiagrams.net（旧draw.io）です。

diagrams.net自体は有名ツールなので今さらと言われそうですが、GitHubと連携することで閲覧・編集がきわめて簡単にできることは案外知られていないように思います。本稿では私が使っているネットワーク図のテンプレートプロジェクトを紹介します。

diagrams.netとは

diagrams.netはJavaScript製のドローツールで、JGraph LtdによりOSS開発されています。オンライン版は各種ブラウザからすぐ使うことができますし、Electronベースのデスクトップ版もあります。

以前のdraw.ioという名前の方が有名だと思いますが、セキュリティ上の理由でツール名とドメイン名を変更中のようです。

diagrams.netのセーブ先はGitHubやDropboxなど各種オンラインストレージを使うのが普通です。逆に言うとdiagrams.net自体はデータを人質にとっているわけではないので、一般ユーザーからお金を稼ぐチャンスはありません。じゃあ何で稼いでいるのか？というとConfuluenceとJiraのインテグレーションで稼いでいるようです。ConfuluenceとJiraを採用している会社さんは採用を検討してみてください（勝手に宣伝）。

GitHubとの連携

さて、このdiagrams.netはGitHubとの連携が大変優れています。論より証拠、まずは私のテンプレートリポジトリを見てください。

hnw/network-diagram-template: Network diagram template for diagrams.net

見ての通り、ブラウザでリポジトリにアクセスすれば特別なツールがなくてもネットワーク図を確認できます。GitHubなら普段使うはずのサイトなので、心理的な障壁も随分下がります。

diagrams.netのストレージとしてGitHubを使う場合、ファイルフォーマットはSVGにするのがよいでしょう。GitHubのMarkdownはSVGを画像として埋め込めるので特に不便はありません。

また、クリックするとdiagrams.netが起動して編集できるようなリンクもMarkdown中に簡単に作れます（上のリポジトリの「Edit」リンクを試してみて下さい）。編集してセーブするとGitリポジトリにcommitされます。これくらいハードルが下がればズボラな私でもメンテできるというわけです。

このやり方は自宅のネットワーク図以外でも活用できるはずです。業務であればER図やクラス図を同じように管理するとメンテナンスが継続されやすくなるのではないでしょうか。