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

洪 民憙 (Hong Minhee) @hongminhee@hackers.pub

Hackers' Pubの隠れた機能の一つに、GraphvizのDOT言語をサポートしていることがあります。例えば、次のようなダイアグラムを描くことができます:

SimpleActivityPub server_a サーバーA (Mastodon) server_b サーバーB (Hackers' Pub) server_a->server_b ActivityStreamsデータ送信 (HTTP POST) server_b->server_a 応答と相互作用 (HTTP POST)

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は長い投稿だけでなく、短文投稿でも同様にサポートされています。

2

1件のコメント

フェディバース(fediverse)アカウントをお持ちの場合、この記事にコメントを残すことができます。ご利用のインスタンスの検索バーにhttps://hackers.pub/ap/articles/01959550-9b73-722a-a46a-4f3044cebfa9を検索し、該当記事にコメントを残してください。

1