Hackers' PubでのDOT言語(Graphviz)によるダイアグラム作成

洪 民憙 (Hong Minhee) @hongminhee@hackers.pub
Hackers' Pubの隠れた機能の一つに、GraphvizのDOT言語をサポートしていることがあります。例えば、次のようなダイアグラムを描くことができます:
Graphvizの使い方は簡単です。Markdownのコードブロック構文内にDOT言語でダイアグラムを記述し、コードブロックの言語タグにgraphviz
を付けるだけです。上記の例で示したダイアグラムは、Markdownで以下のように書くことができます:
```graphviz
digraph SimpleActivityPub {
graph [rankdir=LR, fontname="sans-serif", bgcolor="white"];
node [fontname="sans-serif", shape=box, style="rounded,filled"];
edge [fontname="sans-serif"];
server_a [label="サーバーA\n(Mastodon)", fillcolor="#AED6F1"];
server_b [label="サーバーB\n(Hackers' Pub)", fillcolor="#A3E4D7"];
server_a -> server_b [label="ActivityStreamsデータ送信\n(HTTP POST)", color="red"];
server_b -> server_a [label="応答と相互作用\n(HTTP POST)", color="blue"];
}
```
なお、Graphvizは長い投稿だけでなく、短文投稿でも同様にサポートされています。