データをURLに保存する： GraphvizOnlineの方法 - 檜山正幸のキマイラ飼育記 (はてなBlog)

ちょっとだけGraphVizで絵（有向グラフ）を描きたいと思ったのですが、オンライン上のサービスを探してみたら、ありました。

https://dreampuf.github.io/GraphvizOnline/

上記のURLにアクセスると、サンプルのグラフが表示され（上の画面ショット）、ブラウザ・アドレスバーのURLは次のように変わります。

https://dreampuf.github.io/GraphvizOnline/#digraph%20G%20%7B%0A%0A%20%20subgraph%20cluster_0%20%7B%0A%20%20%20%20style%3Dfilled%3B%0A%20%20%20%20color%3Dlightgrey%3B%0A%20%20%20%20node%20%5Bstyle%3Dfilled%2Ccolor%3Dwhite%5D%3B%0A%20%20%20%20a0%20-%3E%20a1%20-%3E%20a2%20-%3E%20a3%3B%0A%20%20%20%20label%20%3D%20%22process%20%231%22%3B%0A%20%20%7D%0A%0A%20%20subgraph%20cluster_1%20%7B%0A%20%20%20%20node%20%5Bstyle%3Dfilled%5D%3B%0A%20%20%20%20b0%20-%3E%20b1%20-%3E%20b2%20-%3E%20b3%3B%0A%20%20%20%20label%20%3D%20%22process%20%232%22%3B%0A%20%20%20%20color%3Dblue%0A%20%20%7D%0A%20%20start%20-%3E%20a0%3B%0A%20%20start%20-%3E%20b0%3B%0A%20%20a1%20-%3E%20b3%3B%0A%20%20b2%20-%3E%20a3%3B%0A%20%20a3%20-%3E%20a0%3B%0A%20%20a3%20-%3E%20end%3B%0A%20%20b3%20-%3E%20end%3B%0A%0A%20%20start%20%5Bshape%3DMdiamond%5D%3B%0A%20%20end%20%5Bshape%3DMsquare%5D%3B%0A%7D

とても長いURLですね。シャープ記号'#'から先はGraphVizのソースコードをクエリ文字列と同じ方式でエンコードしたものです（本来はフラグメントIDです）。デコードすれば次のGraphVizのソースコードになります。

digraph G {

  subgraph cluster_0 {
    style=filled;
    color=lightgrey;
    node [style=filled,color=white];
    a0 -> a1 -> a2 -> a3;
    label = "process #1";
  }

  subgraph cluster_1 {
    node [style=filled];
    b0 -> b1 -> b2 -> b3;
    label = "process #2";
    color=blue
  }
  start -> a0;
  start -> b0;
  a1 -> b3;
  b2 -> a3;
  a3 -> a0;
  a3 -> end;
  b3 -> end;

  start [shape=Mdiamond];
  end [shape=Msquare];
}

ユーザーのデータは、GraphvizOnlineのサーバー側に保存されるわけでもなく、クライアント側ローカルストレージに保存されるわけでもなくて、単にURLに埋め込まれるのです。

絵（GraphVizのグラフ）を保存するためには、ながーいURLをブックマークするのでしょうか？そうしてもいいですが、別な方法があります。画面右上に[Share]ボタンがあります。

[Share]を押すと、bit.ly による短縮URLが表示されます。次のURLです。

https://bit.ly/2S1NLCn

この短いURLを記録するなり伝えるなりすれば、描いた絵を交換・共有できます。絵のデータ（GraphViz ソースコード）を保存しているのは bit.ly サーバーということになります。

作業時の画像フォーマットはデフォルトでSVGです。ブラウザで画像のURLをコピーしてみると、次のような、やはり長いURLが得られます。

data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding ...以下省略...長い

data URL です。これも、SVGのソースコードをURL内に埋め込んでしまう手法です。なんでもURLに保存するのが徹底されてます。

ところで僕は、毎回サンプルが表示されるのが邪魔なので、次のURLをブックマークしてます。

https://dreampuf.github.io/GraphvizOnline/#digraph%20G%20%7B%7D