Hackers' Pub에서 DOT 언어(Graphviz)로 다이어그램 그리기

Hackers' Pub의 숨겨진 기능 중 하나는 Graphviz의 DOT 언어를 지원한다는 것입니다. 예를 들어, 다음과 같은 다이어그램을 그릴 수 있습니다:SimpleActivityPubserver_a서버 A(Mastodon)server_b서버 B(Hackers' Pub)server_a->server_bActivityStreams 데이터 전송(HTTP POST)server_b->server_a응답 및 상호작용(HTTP POST)<Graphviz를 이용하는 법은 간단합니다. Markdown의 코드 블럭 문법 안에 DOT 언어로 다이어그램을 기술하신 뒤, 코드 블럭의 언어 태그에 graphviz를 붙이시면 됩니다. 위에서 예를 든 다이어그램은 Markdown에서 아래와 같이 쓰면 됩니다:```graphvizdigraph 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는 긴 게시글 뿐만 아니라 단문에서도 똑같이 지원합니다.

hackers.pub · Hackers' Pub