AA(アスキーアート)で始める各種図のすヽめ

#はじめに
先日github上にあるwikiにネットワーク図を書く必要が出てきました
しかし、ただの画像をアップロードするのでは今後編集する際に大変になるとわかりきっていたため、何か別の方法がないのかを調べてたらAAで表現することにたどり着きました
また、これから紹介する方法ではネットワーク図以外にも応用できると思いqiitaに投稿することにしました。

#メリット
- 文字列で表現されているのでIPアドレスなどの簡単な変更は誰でもですぐできる
- 変更の差分が取れる
- gitで管理していると図の変化を文字列で見ながら戻したり、過去の状態を確認できる(checkoutして戻る必要がない)

#やり方
[asciiflow](http://asciiflow.com)というサイトを利用します
これは簡単に図をAAでかけるサイトとなっています
左上に以下の図のようなアイコンが出てくると思います
<img width="353" alt="スクリーンショット 2017-02-02 22.18.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/96484/71c717c7-def4-2f63-bf1e-b35279bdd089.png">

左から
四角形を書く
線を描画
矢印好きの線を描画
自由に*X*の文字をかける
選択範囲を消す
四角形の大きさ変更
文字を書く
選択範囲を移動
ができるアイコンになっています

また右には
<img width="251" alt="スクリーンショット 2017-02-02 22.21.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/96484/417aa95a-1229-16d6-6128-5262fea31cc3.png">
これもgoogleドライブに保存
エクスポート(chromeだとうまくいかない)
インポート
戻る
進む
となっています

#例
内容とかは適当ですw

##ネットワーク図
```text
                                          +----------+
                            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    |
|                                 |                            |                                 |
|                                 |                            |                                 |
|                                 |                            |                                 |
+---------------------------------+                            +---------------------------------+

```

##フローチャート
```text
  +------------+
  |    start   |
  +-----+------+
        |
 +------v-------+
 |      a←3     |
 |      b←2     |
 +------+-------+
        |
        |
 +------v--------+
 |               |
 | result←a + b  |
 |               |
 +------+--------+
        |
        |
 +------v--------+
 |               |
 |  print result |
 |               |
 +------+--------+
        |
+-------v--------+
|      end       |
|                |
+----------------+

```

#差分を取ると...
例えばフローチャートのaの初期値を3から4に変えたとします
これの差分を取ると
<img width="134" alt="スクリーンショット 2017-02-02 22.39.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/96484/5f50ed6a-174d-0065-c2bc-eb3d84ecb7a7.png">

こんな感じで文字列として表示されます

#もっと[asciiflow](http://asciiflow.com)の使い方
図に大きな変更したい時はインポートも対応しているので、図をコピーして変更すればいいだけです