ditaaというフリーソフトウェアが公開されています。ditaaというのはDIagrams Through Ascii Artの意でアスキーアートで書いたダイアグラムをグラフィックに変換します。このブログでも過去に何回か使ったことがあります。
lis.cppの構造の解説を書くためにditaaを使おうと思いあらためて同サイトを読みなおしたら、サーバ側にditaaを組み込んでウェブ上でこの変換をしてくれるサイトがあることに気がつきました。
ページを開くと、左のペインにテキストエリアが、右上のペインにそれを変換したグラフィックが、最初からサンプルとして表示されています。
テキストエリアの内容をすべて消して、たとえば次のようなテキストを入力します。
+---+ | | +---+
入力できたら「Update the diagram」ボタンを押します。すると…
…といったグラフィックが右上のペインに表示されます。
ここで左ペインのしたの方をよく読むと、次のような記述があります。
Tips for embedding and revising diagrams:
- To embed a diagram in a webpage, just use the image's URL -- for example, if you see a diagram on the right side of this web page, in some browsers you can right-click on it and select "Copy image location" or "Copy image URL" to get the image's URL, which you can then paste into a link.
さっきの例で実際に右上のペインのURLを取得してみると、こうなっています。
http://ditaa.org/ditaa/render?grid=+%2B---%2B%0D%0A+%7C+++%7C%0D%0A+%2B---%2B%0D%0A&scale=1&background=FFFFFF&E=on&timeout=10
実のところ、上で表示されているグラフィックはimgタグのsrcにこのURLを指定して表示させています。
このぐらいのダイアグラムをわざわざ手元で変換するのはちょっと面倒だなと感じていたのですが、これでそれも解消できそうです。
せっかくなのでditaaの解説も少々。
線と矢印
| | ^ | ---+ /---\ *---*---
--- | --> <-- | | -=- | | | | |
| V | : +---/ \---*
-で横線、|で縦線、横線のばあいは終端に>,<をつけると、縦線のばあいのは終端にV,^を付けると矢印になります。
また、横線のばあいは途中に=を入れると、縦線のばあいは途中に:を入れると破線になります。
縦線と横線の交点に+を入れると角のある線になります。+の代わりに/あるいは\（バックスラッシュ）を入れるとカーブになります。
線の途中に*を入れるとポイントマーカーと呼ばれる点になります。これは交点でも線の途中でも機能します。
閉じた図形
+---+ /---+ +---\ /---\ *---* +---+ +-----------+ | | | | | | | | | | | | | /---\ | | | | | | | | | | | | | | | | | | | | | | | | | | | | +---+ | | | +---+ +---/ \---+ \---/ *---* +-----------/ \---+
線を閉じた場合、閉じた図形として影が描かれます。これは左ペインにある「No Shadows」をチェックするとオフにすることができます。
タグを付けることで特定の形状を指定することができます。主にフローチャートなどで使われる図形です。
+-----+ +-----+ +-----+ +-----+
| | |{d} | |{s} | |{io} |
| | | | | | | |
| | | | | | | |
+-----+ +-----+ +-----+ +-----+
+-----+ +-----+ +-----+ +-----+
|{o} | |{mo} | |{c} | |{tr} |
| | | | | | | |
| | | | | | | |
+-----+ +-----+ +-----+ +-----+
| d | document |
| s | storage |
| io | input/output |
| o | ellipse |
| mo | manual operation |
| c | decision(choice) |
| tr | trapezoid |
下の４つはVersion 0.9になって追加されたものです。ditaaのページは更新されていないようですが、HISTORYファイルに記述がありました。
上底が下底より長い台形の名前が「manual operation」ですが、この図形がフローチャートの「手作業」を表すためのようです（今回しらべていてはじめて知りました）。
+-----+ +-----+ | | | | +-----+ | +--+ | | | | | +-----+ +--+--+
「Don't separate」がオンのばあい
「Don't separate」がオフのばあい
繋がった図形のばあい、「Don't separate」のチェックがオンかオフかで形状が変わります。
テキスト
+--------+ | Sample | | o hoge | | o hoge | | o hoge | +--------+
テキストは普通に入力できます。いまのところ日本語などは使えません。テキストの前に「o 」を書くと点として扱われるようです（どれぐらい便利なのか不明ですが）。
色
+----+ +----+ +----+ +----+ +----+ +----+ |FFF | |888 | |F00 | |0F0 | |00F | |F80 | |cFFF| |c888| |cF00| |c0F0| |c00F| |cF80| +----+ +----+ +----+ +----+ +----+ +----+ +----+ +----+ +----+ +----+ +----+ +----+ |RED | |BLU | |GRE | |PNK | |BLK | |YEL | |cRED| |cBLU| |cGRE| |cPNK| |cBLK| |cYEL| +----+ +----+ +----+ +----+ +----+ +----+
上段はRGBで指定してます。下段の6色に限り名前が付けられているようです。色を指定した図形の中にテキストがあるばあい、テキストの色は識別しやすい色に自動的に設定されるようです。
で、やろうとしていたこと
リストを描こうとしていました。あとでこれを使う予定。
+-----------+ +-----------+ +-----------+ +-----------+
| Node(1) | /->| Node(2) | /->| Node(3) | /->| Node(4) |
+-----+-----+ | +-----+-----+ | +-----+-----+ | +-----+-----+
| car | cdr +-/ | car | cdr +-/ | car | cdr +-/ | 0 | 0 |
+--+--+-----+ +--+--+-----+ +--+--+-----+ +-----+-----+
| | |
V V V
+-----------+ +-----------+ +-----------+
| Symbol | | Integer | | Integer |
+-----------+ +-----------+ +-----------+
| "+" | | 1 | | 2 |
+-----------+ +-----------+ +-----------+
