はじめに
先日github上にあるwikiにネットワーク図を書く必要が出てきました
しかし、ただの画像をアップロードするのでは今後編集する際に大変になるとわかりきっていたため、何か別の方法がないのかを調べてたらAAで表現することにたどり着きました
また、これから紹介する方法ではネットワーク図以外にも応用できると思いqiitaに投稿することにしました。
メリット
- 文字列で表現されているのでIPアドレスなどの簡単な変更は誰でもですぐできる
- 変更の差分が取れる
- gitで管理していると図の変化を文字列で見ながら戻したり、過去の状態を確認できる(checkoutして戻る必要がない)
やり方
asciiflowというサイトを利用します
これは簡単に図をAAでかけるサイトとなっています
左上に以下の図のようなアイコンが出てくると思います
左から
四角形を書く
線を描画
矢印好きの線を描画
自由にXの文字をかける
選択範囲を消す
四角形の大きさ変更
文字を書く
選択範囲を移動
ができるアイコンになっています
また右には
これもgoogleドライブに保存
エクスポート(chromeだとうまくいかない)
インポート
戻る
進む
となっています
例
内容とかは適当ですw
ネットワーク図
+----------+
192.168.0.200 | |192.168.1.200
+--------------------------+ router +--------------------------+
| | | |
| +----------+ |
| |
| |
| |
+--------------+------------------+ +----------------+----------------+
| network1 | | network2 |
| | | |
| IP Addres 192.168.0.0 | | IP Addres 192.168.1.0 |
| Subnet mask 255.255.255.0 | | Subnet mask 255.255.255.0 |
| | | |
| | | |
| | | |
+---------------------------------+ +---------------------------------+
フローチャート
+------------+
| start |
+-----+------+
|
+------v-------+
| a←3 |
| b←2 |
+------+-------+
|
|
+------v--------+
| |
| result←a + b |
| |
+------+--------+
|
|
+------v--------+
| |
| print result |
| |
+------+--------+
|
+-------v--------+
| end |
| |
+----------------+
差分を取ると...
例えばフローチャートのaの初期値を3から4に変えたとします
これの差分を取ると
こんな感じで文字列として表示されます
もっとasciiflowの使い方
図に大きな変更したい時はインポートも対応しているので、図をコピーして変更すればいいだけです