Tools/Graphviz — DOT로 다이어그램 그리기

Graphviz — DOT로 다이어그램 그리기

Graphviz DOT Renderer

DOT 언어를 입력하면 브라우저에서 바로 다이어그램 SVG를 그려 줍니다. dot·neato·fdp·circo·twopi·osage·patchwork 레이아웃 엔진, 상태 머신·조직도·쿠버네티스·마이크로서비스 등 샘플 갤러리, SVG/PNG 내보내기와 클립보드 복사를 지원합니다. 백엔드 없이 WASM으로 동작하고 한글 라벨도 지원합니다.

코딩 실습

입력하면 엔진을 로드합니다

DOT 소스

미리보기

100%

DOT 를 입력하면 여기에 그려집니다

샘플 갤러리

DOT 치트시트

기본 구조

`digraph G { A -> B }`	방향 그래프 (화살표)
`graph G { A -- B }`	무방향 그래프
`rankdir=LR;`	왼→오 배치 (TB·BT·RL 도 가능)
`A -> B [label="x"];`	엣지 라벨

노드 속성

`shape=box`	box·circle·ellipse·diamond·record·cylinder
`style=filled`	filled·rounded·dashed·dotted·bold
`fillcolor="#bfdbfe"`	채우기 색 (style=filled 필요)
`fontname="sans-serif"`	한글은 sans-serif 권장

엣지 속성

`color="#3b82f6"`	선 색
`style=dashed`	dashed·dotted·bold
`arrowhead=none`	none·vee·diamond·dot·open
`dir=both`	양방향 화살표

클러스터 / 서브그래프

`subgraph cluster_x { ... }`	cluster_ 접두사 → 박스로 묶임
`label="그룹명";`	클러스터 제목
`{ rank=same; A; B; }`	같은 랭크(줄)에 정렬

record / HTML-like 라벨

`label="{A\|B\|C}"`	record 세로 칸 (shape=record)
`label="<f0> a\|<f1> b"`	포트 지정 → node:f0 로 연결
`\l \r \n`	왼쪽·오른쪽·가운데 줄바꿈

같은 흐름으로 이어지는 도구를 골라 두었습니다.