• mermaid作戦

文書に図を入れると内容が把握しやすくなることがある。こうした場合、図は、文書で解説したものと等価なものになる。このため、図を書けば、文章が書きやすくなるし、逆に文章で表現できたなら図も書きやすい。理解したことを図にして確認することで、理解の不足を確認できる。図にしたときに描かれた要素同士の関係や位置づけがはっきりしないのは、そもそも、理解が不足しているからだ。そういうわけで、ある程度理解が進んだときに、短時間でラフな図を描けると、対象の理解が進む。とはいえ、いまさら紙と鉛筆の世界にはあんまり戻りたくない(机の上に紙を広げるようなスペースがないという問題もある)。

テキストから自動的に簡単な図を作るプログラムやサービスがある。矩形や円などの図形で要素を表わし、矢印などのその関係を示す図をテキストから作ることができる。テキストといっても、普通の文章というよりは、プログラムや論理式に近い(写真01)。

  • 写真01: mermaidでは、ノードの定義とノード間の接続線を定義して図を作成する。この程度の簡単な図であれば、あまり苦労せず作成できる

筆者は、mermaidと呼ばれる記法とそのサービスを利用している。

・Mermaid “Diagramming and charting tool”
https://mermaid.js.org/
・GitHub Mermaid
https://github.com/mermaid-js/mermaid

これはJavaScriptで作られたオープンソースプログラムである。比較的文法が簡単なのと、フローチャートやプロトコル解説などで使われるシーケンスダイアグラム、状態遷移を表現するステートダイアグラム、ガントチャート、MindMapなどのパターンが最初から用意されている。このため、パターンに合致する定型的な画像であれば簡単に作成できる。

このうち最も自由度が高いのがフローチャートだ。このパターンでは、矩形や円などで囲まれたノードと、ノード間の接続線(矢印線も可能)を付けることができる。逆にいうと他のパターンは、さまざまな制約を付けることで、特定のパターンの図を書きやすくしている反面、自由度が少ない。たとえば、フローチャートでは、矢印を両端に付けることができるが、状態遷移図(ステートダイアグラム)では、矢印は終端のみ。そもそも、状態遷移図では、逆方向の遷移があるなら別の矢印にするからだ。

作図は、mermaidのLive Editorで行える(写真02)。前述のホームページの上部にリンクがある。左側の領域に、正しいmermaidのテキストを記述すれば、右側にプレビューが表示される。作成した図は、PNGやSVGとして保存でき、作図途中の状態を記憶させておくこともできる。

  • 写真02: Live Editorを使えば、図をプレビューしながらmermaid記法を編集できる

mermaidは、JavaScriptで記述されているため、これをHTMLやMarkdownに埋め込んで、Webページに表示させることが可能だ。Visual Studio Codeなどのエディタ、Google Docsなどのクラウド系ドキュメント作成サービスなどでも利用できる。Windows用のコマンドラインプログラムもあり、mermaidテキストを記述したファイルからSVGやPDFファイルを作成できる。JavaScriptを動かすことができる環境なら、ローカルでもクラウドでも、どこでも利用できる。

ただし、ちょっと複雑なチャートを作るとねじれた感じのレイアウトになることも多い。ノードや矢印は、プログラム的に記述するので間違える心配はない。しかし、できあがった図は、なんだか矢印が遠回りしていたり、文字の上を横切ったりすることがある。しかし、これは直さないで我慢することが肝心。これを直し出すといくら時間があっても足りなくなる(だったら、描画ツールでゼロから書いた方が早い)。基本的には、自分の理解を簡易に画像化して確認するものと割り切ろう。細かな問題には目をつぶる「無視力」が問われる場面だ。作図に限らず、細かなことに執着しないスタンスを維持できないと、パソコンを使って効率的な仕事は不可能と思うべき。

最初は、あまり要素(ノード)を増やさず、小さなブロック単位で図を作る。ノードが増えるほど、あるいは、接続関係がループするような複雑なグラフになるほど、奇妙なレイアウトになりやすい。なお、ノード間の接続線は、ハイフンやピリオドの数を増やすとより長い線として描画され、これによりレイアウトが変わることがある。配置方向(directionで上下、左右方向を切り替えることができる)を切り替えてレイアウトを変えることもできるが、線を長くしてレイアウトを変えるほうが効果が大きい。

今回のタイトルネタは、1966年の米国映画「マーメイド作戦」(原題The Glass Bottom Boat)。コメディタッチのスパイ映画で主演はDoris Day。ヒッチコックの「知りすぎていた男」でDoris Dayが唄った『ケ・セラ・セラ』は誰でも一度は耳にしたことがあるはずだ。原題からみると、奇妙な邦題だが、劇中、Doris Dayが グラスボートの下を人魚の格好をして泳ぐ。映画は「The Spy in Lace Panties」のタイトルでも公開されていたため、これを原題とする映画データベースも多い。ちょっと品のないタイトルなので、あとから名前を変えたのか。