draw.ioはいいけれど、Graphviz + dot記法もいいぞ！あとNN-SVGも！

[琉大 Advent Calendar 2019](https://adventar.org/calendars/4060) 12日目の記事です

# スライド発表とかでグラフ書くの面倒
[draw.io](https://www.draw.io)は描画ツールです.

webアプリでGUIでGoogleDriveとの連携もできていいのですが、TeXとWordが違うように、コマンドによる描画のほうが手軽で堅実（なときがあります。）





# グラフ三分クッキング
論文に出てくるようなグラフ、図はほぼ全てGraphvizで書けます。

https://www.graphviz.org

dot記法という簡単なものが用意されているのでそれを使います。

```zsh

brew install graphviz
touch hoge.dot < echo "digraph graph_name {alpha;}"
dot -Tpdf -O hoge.dot
open -a Preview hoge.dot.pdf
```


## テンプレート例
何でもできるので、必要最低限だけ書きます。

* **node [shape = 形]** (box,circle,ellipse(楕円)だけ覚えればOK)
    * ノードの形
* **ノード名 -> ノード名**
    * 矢印をノードIDの間に書くことで,矢印が書ける！

```hoge.dot
digraph graph_name {
  node [shape = box]
  alpha;
  beta;
  alpha -> beta -> delta;
}
```
<img width="282" alt="スクリーンショット 2019-12-04 0.43.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152284/bc22677e-b307-9c0d-6615-1864a23d03c2.png">

## NN
NNのグラフを書くとこうなります。
(参考 https://zhu45.org/posts/2017/May/25/draw-a-neural-network-through-graphviz/#fn:2)

```dot
digraph G {
    rankdir = LR;
    splines=false;
    edge[style=invis];
    ranksep= 1.4;
    {
    node [shape=circle, color=chartreuse, style=filled, fillcolor=chartreuse];
    x1 [label=<x<sub>1</sub>>];
    x2 [label=<x<sub>2</sub>>]; 
    x3 [label=<x<sub>3</sub>>];
}
{
    node [shape=circle, color=dodgerblue, style=filled, fillcolor=dodgerblue];
    a12 [label=<a<sub>1</sub><sup>(2)</sup>>];
    a22 [label=<a<sub>2</sub><sup>(2)</sup>>];
    a32 [label=<a<sub>3</sub><sup>(2)</sup>>];
    a42 [label=<a<sub>4</sub><sup>(2)</sup>>];
    a52 [label=<a<sub>5</sub><sup>(2)</sup>>];
    a13 [label=<a<sub>1</sub><sup>(3)</sup>>];
    a23 [label=<a<sub>2</sub><sup>(3)</sup>>];
    a33 [label=<a<sub>3</sub><sup>(3)</sup>>];
    a43 [label=<a<sub>4</sub><sup>(3)</sup>>];
    a53 [label=<a<sub>5</sub><sup>(3)</sup>>];
}
{
    node [shape=circle, color=coral1, style=filled, fillcolor=coral1];
    O1 [label=<a<sub>1</sub><sup>(4)</sup>>];
    O2 [label=<a<sub>2</sub><sup>(4)</sup>>]; 
    O3 [label=<a<sub>3</sub><sup>(4)</sup>>]; 
    O4 [label=<a<sub>4</sub><sup>(4)</sup>>];
}
    {
        rank=same;
        x1->x2->x3;
    }
    {
        rank=same;
        a12->a22->a32->a42->a52;
    }
    {
        rank=same;
        a13->a23->a33->a43->a53;
    }
    {
        rank=same;
        O1->O2->O3->O4;
    }
    l0 [shape=plaintext, label="layer 1 (input layer)"];
    l0->x1;
    {rank=same; l0;x1};
    l1 [shape=plaintext, label="layer 2 (hidden layer)"];
    l1->a12;
    {rank=same; l1;a12};
    l2 [shape=plaintext, label="layer 3 (hidden layer)"];
    l2->a13;
    {rank=same; l2;a13};
    l3 [shape=plaintext, label="layer 4 (output layer)"];
    l3->O1;
    {rank=same; l3;O1};
    edge[style=solid, tailport=e, headport=w];
    {x1; x2; x3} -> {a12;a22;a32;a42;a52};
    {a12;a22;a32;a42;a52} -> {a13;a23;a33;a43;a53};
    {a13;a23;a33;a43;a53} -> {O1,O2,O3,O4};
}
```

<img width="1186" alt="スクリーンショット 2019-12-10 9.39.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152284/6adc5224-e2cc-4b57-0feb-a164f572a9fd.png">




# その他のグラフの書き方
このgraphvizではないやり方もあります。

1. draw.io
2. matplotlib
3. tensorboard
4. NN-SVGという有志のグラフ作成ソフト

## NN-SVG
NNのグラフ（diagram）はそれでも書くのが面倒です。

NN-SVGというwebアプリケーションがあるそうです。

http://alexlenail.me/NN-SVG/LeNet.html
<img width="1109" alt="スクリーンショット 2019-12-10 8.36.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152284/e7061786-93ad-5b20-3e0f-c5667d0ca270.png">
<img width="1125" alt="スクリーンショット 2019-12-10 8.40.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152284/8a55b9cc-d8e3-e702-88c6-02ebfc6d1588.png">




# その他
HackMDというwebエディタではdot記法でグラフが書けます。すごい！



# 参考文献

https://qiita.com/rubytomato@github/items/51779135bc4b77c8c20d


https://qiita.com/EjiriAkira/items/ee5ad4b67f7caa161a61


https://renenyffenegger.ch/notes/tools/Graphviz/examples/index


https://datascience.stackexchange.com/questions/14899/how-to-draw-deep-learning-network-architecture-diagrams/14900#14900


http://alexlenail.me/NN-SVG/LeNet.html

https://zhu45.org/posts/2017/May/25/draw-a-neural-network-through-graphviz/#fn:2