Graphviz — DOT로 다이어그램 그리기
Graphviz DOT Renderer
DOT 언어를 입력하면 브라우저에서 바로 다이어그램 SVG를 그려 줍니다. dot·neato·fdp·circo·twopi·osage·patchwork 레이아웃 엔진, 상태 머신·조직도·쿠버네티스·마이크로서비스 등 샘플 갤러리, SVG/PNG 내보내기와 클립보드 복사를 지원합니다. 백엔드 없이 WASM으로 동작하고 한글 라벨도 지원합니다.
입력하면 엔진을 로드합니다
미리보기
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 | 왼쪽·오른쪽·가운데 줄바꿈 |