org-modeとhugoで上手くascii artを扱う方法について考えた。
システムの構成図やシーケンズ図等を記述する方法は、最近だと何が人気なのだろう。Mermaidをよく聞く気がする。以前だと、Draw.io、PlantUML、Graphvizもよく聞く事があったが、最近ではあまり聞かない。それぞれ、長所と短所があるけれど、最終的に何を採用するかは好みの問題だ。
私は何を使用しているかというとDitaaを使っている。これはAscii Artで記述した図が、そのAscii Artのまま画像として出力できる。
この方法の良い所は、それぞれのツールの持つ独自の構文を覚えなくて良い事だ。PlanUMLにはPlanUMLの、MermaidにはMermaidの、それぞれの書き方がある。そのような書き方ははっきり言って頭に入れたくない。覚えても忘れるし、独自の書き方が次々と出てくるからきりがない。
Ditaaにも一応構文はあるんだけれど、そもそもAscii Artだから、覚える事といったら、囲ったら四角とか、矢印の書き方ぐらいだろう。覚える事はとても少ない。またDitaaで画像化しなくても、図として成立しているという所も良い所だ。なんせAscii Artなんだから。
一方、Ascii Artで図を書くのだから、Ascii Artを描き慣れていないと、大変に感じるかもしれない。みんな、どうやってAscii Artを描いているんだろう。もしくは、そんなものは描かないのかもしれないけれど。
私は普段Emacsを使って作業している。EmacsにはAscii Artを描く為の機能がある。それが artist-mode や picture-mode だ。私がAscii Artを描く時は大抵 artist-mode を使用している。私にとってはとても便利なツールで愛用している。
このブログでも、しばしばAscii Artで図を描いているのだが、折角描いたAscii Artが崩れてしまう。これは調べてみると幾つかの原因があった。ブラウザの問題、フォントの問題、Hugoが生成するHTMLで処理しているシンタックスハイライトによる問題、Hugoが使用しているorg-mode(hugoは内部でgo-orgを使用している)の問題などがあり、整理が必要な状態だった。
きちんと直すために使う時間を捻出できなそうなので、一旦記録として残しておく。
+-------------+ +-------------+
| Alice | Key:3 | Bob |
| Key:3 --+---+----------------------|--------->+----------+ |
| | | | | | |
| | +-------------------------------->+ | |
| "Hello" | | "khoor" (ciphertext text) | "khoor" | |
| | | | | | | | | |
| |<----+ | | | | |<-----+ |
| | | | | | | |
| v | +-------------+ | v |
| "khoor" | | | "khoor" |
| | | | |
+-------------+ | +-------------+
|
+-----+-------+
| Eve |
| "khoor" |
| | |
| |<- Key:3 |
| v |
| "hello" |
+-------------+
+-------------+ +-------------+
| Alice | Key:3 | Bob |
| Key:3 --+---+----------------------|--------->+----------+ |
| | | | | | |
| | +-------------------------------->+ | |
| "Hello" | | "khoor" (ciphertext text) | "khoor" | |
| | | | | | | | | |
| |<----+ | | | | |<-----+ |
| | | | | | | |
| v | +-------------+ | v |
| "khoor" | | | "khoor" |
| | | | |
+-------------+ | +-------------+
|
+-----+-------+
| Eve |
| "khoor" |
| | |
| |<- Key:3 |
| v |
| "hello" |
+-------------+
+-------------+ +-------------+
| Alice | Key:3 | Bob |
| Key:3 --+---+----------------------|--------->+----------+ |
| | | | | | |
| | +-------------------------------->+ | |
| "Hello" | | "khoor" (ciphertext text) | "khoor" | |
| | | | | | | | | |
| |<----+ | | | | |<-----+ |
| | | | | | | |
| v | +-------------+ | v |
| "khoor" | | | "khoor" |
| | | | |
+-------------+ | +-------------+
|
+-----+-------+
| Eve |
| "khoor" |
| | |
| |<- Key:3 |
| v |
| "hello" |
+-------------+