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 comment

If you have a fediverse account, you can comment on this article from your own instance. Search https://hackers.pub/ap/articles/01959550-9b73-722a-a46a-4f3044cebfa9 on your instance and reply to it.

1