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

琉大 Advent Calendar 2019 12日目の記事です

スライド発表とかでグラフ書くの面倒

draw.ioは描画ツールです.

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

グラフ三分クッキング

論文に出てくるようなグラフ、図はほぼ全てGraphvizで書けます。

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

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;
}

NN

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

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};
}

その他のグラフの書き方

この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

その他

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

参考文献