Re:VIEW文書中でblockdiagを使ってサクサクと図を描く

2015年10月17日土曜日

文書になるべく図を入れたいけれど

Re:VIEWで文章を書いていてサッと図を入れたい場面、結構ありますよね。
けれど{Photoshop|Illustrator|GIMP}を開くのが面倒で、結局文字だけでの説明をしてわかりづらくなる場合も多いのではないでしょうか。
図1

Re:VIEWよくできてんな

Re:VIEWはビルトインでgraphという記法をサポートしています。
グラフ表現ツールを使った図に記載のとおりgraphvis、gnuplot、blockdiagをサポートしています。
ここではプレーンテキストでブロック図を作成できるblockdiagを使ってみました。

blockdiagのインストール

Re:VIEW側は環境にインストールされたblockdiagコマンドを叩くだけなので、予めこれをインストールしておく必要があります。
OS Xでのインストール方法はhttp://blockdiag.com/ja/blockdiag/introduction.html#macosx-homebrewのとおりです。
基本的に
$ brew install freetype
$ sudo easy_install blockdiag
で終わります。

Re:VIEW上でのblockdiagの基本

//graph[図ID][blockdiag]{}の間にblockdiag本来の記述をおこないます。
作図で使える記法はhttp://blockdiag.com/ja/blockdiag/examples.htmlに記載されていますので参照ください。
冒頭の図は、次のようにさまざまな要素てんこ盛りで作ってみました。
blockdiag {
  default_shape = roundedbox;
  default_fontsize = 12;
  ちょっと図が欲しい -> Photoshopを開くのが面倒, Illustratorを開くのが面倒, GIMPを開くのが面倒 -> 図を端折る -> 分かりづらい説明 -> 分からない!;
  図を端折る -> 分かりづらい説明 [folded];
  group {
    分からない!
    label = "危険があぶない";
  }
}
基本的には要素間を->でつないでいくだけです。
図への参照は通常どおり@<img>{...}でおこなうと 図1 というように変換されます。

便利!

これは標準ワークフローに組み込んでもいい感じの便利さですね。

かなしさ

Atom+language-review環境はgraphを今のところサポートしていないので、図2という悲しい感じになります。文法エラー扱いということはもちろんプレビューも全体的に効かなくなるので、ふんわりとどうにかしたいところです。


図2 language-reviewでgraph要素を書くと

0 件のコメント:

コメントを投稿