2015年7月29日水曜日

TiddlyWikiでGravizoを使ってグラフを書く

Gravizo はグラフのレンダリングエンジン Graphviz を使った Web サービスです。 DOT 言語で記述したテキストを渡すと画像データを返してくれます。



HTML イメージタグで使う場合

Gravizo のサンプル HTML によると、イメージタグの中に DOT テキストを記述して使います。

このように記述すると

<img src='https://g.gravizo.com/g?
 digraph G {
   main -> parse -> execute;
   main -> init;
   main -> cleanup;
   execute -> make_string;
   execute -> printf
   init -> make_string;
   main -> printf;
   execute -> compare;
 }
'/>

このようにグラフが表示されます。



TiddlyWiki で使う場合

Gravizo を TiddlyWiki で使う場合はどうでしょうか。 Tiddly 記法でグラフを書く場合はイメージ書式を使って、このように記述します。

[img[https://g.gravizo.com/g?
 digraph G {
   main -> parse -> execute;
   main -> init;
   main -> cleanup;
   execute -> make_string;
   execute -> printf
   init -> make_string;
   main -> printf;
   execute -> compare;
 }
]]

実際の実行画面は icm7216.github.io/MyTiddlyWiki/ - Gravizo on tiddler で確認できます。

ところが DOT テキストの内容によってはイメージ書式として正しく認識できない場合があります。これは TiddlyWiki のイメージ書式のパーサーが、クエリ文字列のパースに失敗するのが原因のようです。

例えばこのような DOT テキストです

[img[https://g.gravizo.com/g?
digraph G {
  node [shape=plaintext]
  a [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2" ROWSPAN="2">two</TD></TR>
              <TR><TD PORT="3">three</TD></TR>
            </TABLE>>];
  b [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2">two</TD></TR>
              <TR><TD PORT="3" COLSPAN="2">three</TD></TR>
            </TABLE>>];
  a:1 -> b:2;
  b:1 -> a:2;
  b:3 -> a:3;
}
]]

クエリ文字列のパースに失敗した出力

こんな場合は html タグを使うとうまくいきます。 html タグを使えば tiddler の中に生HTMLを記述することができます。

このように記述します

<html>
<img src='https://g.gravizo.com/g?
digraph G {
  node [shape=plaintext]
  a [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2" ROWSPAN="2">two</TD></TR>
              <TR><TD PORT="3">three</TD></TR>
            </TABLE>>];
  b [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2">two</TD></TR>
              <TR><TD PORT="3" COLSPAN="2">three</TD></TR>
            </TABLE>>];
  a:1 -> b:2;
  b:1 -> a:2;
  b:3 -> a:3;
}
'/>
</html>

このようなグラフが tiddler に表示されます。



tiddler マクロと組み合わせる

以前の投稿 で紹介した便利機能、 tiddler トランスクルージョンを使ってみましょう。

Graphviz 用の tiddler トランスクルージョンを "embed" tiddler に記述します。

!graphviz
<html>
<img src='https://g.gravizo.com/g?$1'/>
</html>
!end


Graphviz 用の tiddler トランスクルージョンの使い方

マクロの引数の DOT テキストを、シングルクオートで囲んで渡してやります。

<<tiddler [[embed##graphviz]] with:'
  ここにDOTテキストを記述します
'>>

記述例

<<tiddler [[embed##graphviz]] with:'
digraph G {
  node [shape=plaintext]
  a [label=< <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2" ROWSPAN="2">two</TD></TR>
              <TR><TD PORT="3">three</TD></TR>
            </TABLE> >];
  b [label=< <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2">two</TD></TR>
              <TR><TD PORT="3" COLSPAN="2">three</TD></TR>
            </TABLE> >];
  a:1 -> b:2;
  b:1 -> a:2;
  b:3 -> a:3;
}'>>


tiddler マクロで graphviz を使う場合の注意点

マクロ引数の DOT テキストの中に<< ... >>の記述があるとパースに失敗します。

このように表示されます

Tiddly 記法では、例えば<<TABLE ... >>の記述があると TABLE マクロの呼び出しと解釈してしまいます。そこで、このような場合はスペースを追加して< <TABLE ... > >のように記述するとうまくいきます。

0 件のコメント :