@hongminhee@hollo.social

hackers.pub

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

Hackers' Pub의 숨겨진 기능 중 하나는 Graphviz의 DOT 언어 지원입니다. DOT 언어를 사용하면 복잡한 다이어그램을 간단하게 표현할 수 있으며, Hackers' Pub에서는 Markdown 코드 블록 내에 `graphviz` 태그를 사용하여 이를 구현할 수 있습니다. 예를 들어, ActivityPub 프로토콜에서 서버 간의 데이터 흐름을 시각적으로 표현하는 다이어그램을 DOT 언어로 작성하고, 이를 Hackers' Pub 게시물에 삽입할 수 있습니다. 이 기능은 긴 게시물뿐만 아니라 짧은 단문에서도 활용 가능하며, 기술적인 내용을 시각적으로 명확하게 전달하는 데 유용합니다. Graphviz를 활용하면 복잡한 시스템 구조나 데이터 흐름을 효과적으로 설명하여 독자의 이해도를 높일 수 있습니다.

@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는 긴 게시글 뿐만 아니라 단문에서도 똑같이 지원합니다.

graphviz.org

Graphviz

Please join the Graphviz forum to ask questions and discuss Graphviz. What is Graphviz? Graphviz is open source graph visualization software. Graph visualization is a way of representing structural information as diagrams of abstract graphs and networks. It has important applications in networking, bioinformatics, software engineering, database and web design, machine learning, and in visual interfaces for other technical domains.