hnwの日記

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

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

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

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

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

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

f:id:hnw:20200922195631p:plain
テンプレートのネットワーク図

diagrams.netとは

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

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

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

f:id:hnw:20200922201444p:plain
diagrams.netをブラウザから利用しているところ

GitHubとの連携

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

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

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

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

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

ネットワーク図に書くべきこと

ネットワーク図に何を書くべきかについても紹介します。この手のものは記述者が「何が必要か、何を書きたいか」を表現すべきものであって正解はないのですが、参考までに私の基準を紹介します。

  • 書くべきもの
    • ネットワーク機器の物理的な場所
    • 機器の識別名(機種名など)
    • 物理配線とポート番号
  • 必要に応じて書くもの
    • 機器の固定IP
    • 無線ネットワークが複数ある場合、それぞれ利用している端末
    • VLANの情報(簡単な場合のみ、複雑なら論理配線のネットワーク図を起こす)

私個人の落としどころとしては、物理的な作業の際に有用な情報を書き、論理的な情報はできるだけ書かない工夫をする、という感じになりました。逆に言えば、メッシュネットワークなどで有線接続がほとんどないネットワーク構成にした場合はネットワーク図が極端にシンプルになる(場合によっては不要になる)と思います。

まとめ

diagrams.netの図をGitHubで管理すれば閲覧・編集の心理的ハードルが下がってメンテナンスされやすくなる、という体験談を紹介しました。

この手のものはカッコいいテンプレートがあるとやる気が湧いてくる側面もあると思うので、他の方も手元の図をテンプレートとして公開して頂けたら嬉しいです。

FAQ

Q1. なんでネットワーク図にバスルームが登場するの?

A1. ユニットバスの天井裏に備え付けのL2スイッチを発見した話 - hnwの日記