24종 Edge 작성 문법 카드(선 패턴 · 화살표 단자 · 방위 포트) + 실시간 Edge 빌더 + 8종 라우팅 기하학 + 6대 상황별 레시피
원하는 선 패턴, 화살표 단자, 출입구 방위 포트(:n/:s/:e/:w), 정렬 옵션을 선택하면 즉시 시각 프리뷰와 DOT/CLI 코드가 생성됩니다.
--routing <mode> 및 --line-jump 옵션으로 테마와 독립적으로 제어 가능한 8가지 전체 다이어그램 라우팅 디자인입니다.
90° 수평·수직 직각 경로 + 반경 8pt 베지어 라운딩 코너
--routing ortho-rounded
직각(90°) 라우팅의 정돈된 기하학적 질서를 유지하면서, 꺾이는 꼭짓점(L-corner)에 반경 8pt의 부드러운 2차 베지어 곡선(Q)을 부여한 모던 아키텍처 표준 스타일입니다. High Contrast(흑백)와 Cloud Light 모두에서 시선 추적이 가장 편안합니다.
노드 간 간격이 극도로 좁은(10px 미만) 초고밀도 메시 그래프
graph [splines=ortho, nodesep=0.65, ranksep=0.85]; // SVG 파이프라인이 직각 꼭짓점을 r=8pt Q-커브로 라운딩 처리
graphiforge style arch.dot -o arch.svg -t high-contrast --routing ortho-rounded
완벽한 수평(0°)·수직(90°) 칼각 계단식 라우팅
--routing ortho
모든 연결선이 오직 수평선과 수직선으로만 구성되며 모서리가 90° 직각으로 꺾이는 정통 엔지니어링 도면(Manhattan Routing) 스타일입니다. 클러스터(VPC/Subnet)의 사각 프레임과 완벽한 평행/수직 조화를 이룹니다.
양방향 순환 루프가 한 노드에 3개 이상 겹치는 상태 머신
graph [splines=ortho, nodesep=0.65, ranksep=0.85]; edge [penwidth=1.5];
graphiforge style arch.dot -o arch.svg -t high-contrast --routing ortho
둥근 직각 라우팅 + 선 교차 지점 반원 점프 브릿지(Arc Jump)
--routing ortho-rounded --line-jump
단색(High Contrast / Monochrome) 도면에서 직각 선 두 개가 십자(+)로 교차할 때, 두 선이 연결(Junction)된 것인지 단순 통과(Crossing)하는 것인지 혼동되지 않도록 수평선에 반경 5.5pt 반원 브릿지(⌒)를 자동 삽입합니다.
선 교차가 전혀 없는 단순 트리 구조 (불필요한 옵션)
// CLI --line-jump 옵션 활성화 시 수평×수직 교차점에 // A 5.5,5.5 0 0 1 반원 브릿지 아크 자동 생성
graphiforge style arch.dot -o arch.svg -t high-contrast --routing ortho-rounded --line-jump
1:N 다중 분기 시 단일 수평/수직 트렁크 레일 공유 후 직각 분기
--routing bus
하나의 상위 노드(Gateway, Event Bus, Load Balancer)에서 여러 하위 노드로 선이 나갈 때, 각자 다른 높이에서 꺾이지 않고 하나의 공통 수평/수직 줄기(Trunk Rail)로 합류한 뒤 각 노드로 수직 분기하는 클린 버스 디자인입니다.
출발 노드가 모두 다른 1:1 개별 연결 위주의 그래프
dispatcher:s -> w1:n [sametail="bus"]; dispatcher:s -> w2:n [sametail="bus"]; dispatcher:s -> w3:n [sametail="bus"];
graphiforge style fanout.dot -o fanout.svg -t high-contrast --routing bus
HTML <TABLE> 좌/우 외곽 포트(:w/:e) 추출 + 평행 수직선 자동 간격 분리
--routing erd-step --line-jump
Graphviz 기본 ortho 엔진이 HTML <TABLE>의 행 포트(PORT)를 무시하는 한계를 해결한 ERD 전용 라우팅입니다. 테이블 좌/우 외곽 테두리에서 수평으로 빠져나온 뒤, 여러 외래키(FK) 선이 겹치지 않도록 수직 레일을 8pt 간격(Multi-Track Offset)으로 자동 분리합니다.
포트가 없는 일반 도형 다이어그램 (일반 도형은 ortho-rounded 사용)
orders:buyer_id:w -> users:id:e [ dir=both, arrowtail=crowodot, arrowhead=teetee, taillabel="0..*", headlabel="1" ];
graphiforge style erd.dot -o erd.svg -t high-contrast --routing erd-step --line-jump
장애물 노드를 부드러운 곡률로 우회하는 연속 플로우 곡선
--routing spline
시작점과 끝점을 잇는 3차 베지어 곡선(Cubic Bézier)으로, 중간에 있는 노드나 클러스터를 유연하게 돌아나갑니다. Cloud Light 테마의 기본값이며 데이터 스트리밍이나 상태 전이 다이어그램에서 흐름의 방향성을 자연스럽게 전달합니다.
격자형 칼각 정렬이 요구되는 엄격한 인프라/회로 도면
graph [splines=spline, nodesep=0.65, ranksep=0.85];
graphiforge style arch.dot -o arch.svg -t cloud-light --routing spline
곡선 없이 직선 선분들의 꺾임만으로 우회하는 샤프한 테크니컬 라인
--routing polyline
베지어 곡선 대신 직선 선분(Polygonal Segment)들이 각도를 이루며 꺾이는 스타일입니다. 곡선보다 시작점·끝점의 지향성이 뚜렷하고, 직각(ortho)보다 경로 길이가 짧아 의사결정 트리나 알고리즘 플로우차트에 적합합니다.
수평·수직 90° 각도만 허용되는 CAD 스타일 도면
graph [splines=polyline, nodesep=0.65, ranksep=0.85];
graphiforge style arch.dot -o arch.svg -t high-contrast --routing polyline
중간 꺾임 없이 두 노드를 최단 일직선으로 직접 연결
--routing straight
중간 경유점(Waypoint) 없이 출발 포트와 도착 포트를 단일 직선(L 커맨드)으로 곧장 연결합니다. 인접 계층 간의 단순 토폴로지나 방사형(Star/Hub-and-Spoke) 네트워크에서 가장 간결한 형태를 만듭니다.
중간에 다른 노드가 가로막고 있는 다계층(Multi-Tier) 다이어그램
graph [splines=line];
graphiforge style arch.dot -o arch.svg -t high-contrast --routing straight
메인 축 일직선 고정(group + weight), 역방향 피드백 루프(constraint=false), 동일 계층 수평 정렬(rank=same), 단색 5단계 선 위계 정의법입니다.
핵심 트랜잭션 경로(Client → Gateway → Order Engine → Primary DB) 주변에 보조 노드(Auth, Cache, DLQ, Audit)가 붙으면서 정작 가장 중요한 메인 연결선이 옆으로 밀려 구부러질 때 사용합니다.
Graphviz가 모든 간선의 가중치를 동일(weight=1)하게 취급하여, 보조 노드가 추가될 때마다 메인 경로가 대각선이나 S자로 휘어져 아키텍처의 중심축이 무너집니다.
// 1) 메인 축 노드에 동일한 group 부여 client [group="main_spine", label="Client App"]; gateway [group="main_spine", label="API Gateway"]; order [group="main_spine", label="Order Engine"]; db [group="main_spine", label="Primary DB"]; // 2) 메인 간선: 높은 weight + 상하 정중앙 포트(:s -> :n) 고정 client:s -> gateway:n [weight=10, penwidth=2.4, label="1. HTTPS"]; gateway:s -> order:n [weight=10, penwidth=2.4, label="2. gRPC"]; order:s -> db:n [weight=10, penwidth=2.4, label="3. Commit"]; // 3) 보조 분기선: 측면 포트(:w / :e)로 빼서 메인 축 보호 gateway:w -> auth:n [weight=1, style="dashed", label="JWT"]; order:e -> cache:n [weight=1, style="dotted", label="Cache"];
graphiforge style spine.dot -o spine.svg -t high-contrast --routing ortho-rounded
하위 단계(Worker / Payment Gateway)에서 상위 단계(Queue / Order Service)로 실패 재시도(Retry)나 상태 업데이트(Webhook Callback) 선을 연결할 때, 기존 위→아래 계층 배치가 흐트러지지 않게 고정하는 방법입니다.
역방향 간선을 그대로 추가하면 Graphviz가 하위 노드를 상위 노드보다 위쪽 줄(Rank)로 끌어올려 전체 다이어그램의 상하 순서가 뒤죽박죽됩니다.
// 정방향 파이프라인 (계층 결정) ingest:s -> queue:n [weight=10, penwidth=2.0, label="Enqueue"]; queue:s -> worker:n [weight=10, penwidth=2.0, label="Consume"]; worker:s -> storage:n [weight=10, penwidth=2.0, label="Persist"]; // 역방향 재시도 & 콜백 루프 (계층 비간섭 + 우측/좌측 외곽 채널) worker:e -> queue:e [constraint=false, style="dashed", arrowhead="onormal", label="Backoff Retry"]; storage:w -> ingest:w [constraint=false, style="dotted", arrowhead="vee", label="ACK Webhook"];
graphiforge style feedback.dot -o feedback.svg -t high-contrast --routing ortho-rounded
Active-Standby DB 복제, Multi-AZ 대칭 서버 쌍, 혹은 마이크로서비스 간 동등한 피어(Peer-to-Peer) 통신을 수평 일직선상에 나란히 정렬하고 싶을 때 사용합니다.
두 노드 사이에 간선(primary -> replica)을 그으면 기본적으로 replica가 아래쪽 층(다음 Rank)으로 밀려나 수평 대칭 구조가 깨집니다.
// 동일 층 수평 고정 블록
{
rank=same;
primary_db [label="Primary DB (AZ-a)"];
replica_db [label="Hot Standby (AZ-c)"];
}
// 마주 보는 동-서 포트(:e -> :w) 수평 연결 + minlen 간격 확보
primary_db:e -> replica_db:w [
dir=both, style="dashed", minlen=2,
arrowtail="odot", arrowhead="normal",
label="Sync WAL Replication"
];
graphiforge style peer.dot -o peer.svg -t high-contrast --routing ortho-rounded
흑백 인쇄물, 논문, 기술 서적, 또는 High Contrast / Monochrome 테마에서는 파란선·빨간선·초록선으로 의미를 구분할 수 없습니다. 선의 굵기(Weight), 패턴(Pattern), 양끝 단자(Marker) 조합만으로 5가지 아키텍처 의미를 명확히 정의하는 표준 규격입니다.
모든 선이 똑같은 1.5px 실선 화살표로 그려지면 동기 트랜잭션과 비동기 이벤트, 단순 메트릭 수집 경로가 구분되지 않아 도면 독해력이 떨어집니다.
// 1. Primary Sync (핵심 동기 호출) gw -> order [penwidth=2.5, style="solid", arrowhead="normal", label="1. Sync RPC"]; // 2. Strict / Dual Channel (강한 결합 · 이중선) order -> ledger [color="#000000:#ffffff:#000000", penwidth=1.2, arrowhead="diamond", label="2. XA 2PC"]; // 3. Async Event (비동기 메시지 발행) order -> broker [penwidth=1.6, style="dashed", arrowhead="onormal", label="3. Async Event"]; // 4. Telemetry / Cache Read (관측 · 약한 참조) order -> metrics [penwidth=1.4, style="dotted", arrowhead="vee", label="4. Telemetry"]; // 5. Socket / Port Binding (포트 바인딩) plugin -> gw [dir=both, arrowtail="odot", arrowhead="tee", label="5. Plugin Hook"];
graphiforge style semantics.dot -o semantics.svg -t high-contrast --routing ortho-rounded
하나의 게이트웨이·로드밸런서·상위 모듈에서 4개 이상의 하위 서비스로 선이 분기할 때, 각 선이 서로 다른 각도로 뻗어나가며 라벨과 선이 엉키는 문제를 해결합니다.
출발 노드의 하단 테두리 여러 지점에서 대각선이 부채꼴로 퍼져나가면서 하위 노드 상단에서 선과 텍스트가 밀집·충돌합니다.
// 상위 라우터에서 단일 하단 포트(:s) + sametail="bus"로 출발 ingress:s -> svc_auth:n [sametail="bus", penwidth=1.8]; ingress:s -> svc_catalog:n [sametail="bus", penwidth=1.8]; ingress:s -> svc_cart:n [sametail="bus", penwidth=1.8]; ingress:s -> svc_pay:n [sametail="bus", penwidth=1.8];
graphiforge style fanout.dot -o fanout.svg -t high-contrast --routing bus
데이터베이스 ERD에서 한 테이블이 다른 테이블을 2번 이상 참조(예: orders.buyer_id → users.id 및 orders.approver_id → users.id)하거나 테이블 간 관계선이 복잡하게 얽힐 때 사용합니다.
중앙 컬럼(PORT="buyer_id")에서 선이 곧장 출발하면 오른쪽 타입 컬럼("uuid") 글씨를 선이 관통하고, 두 외래키의 수직 구간이 완전히 한 선으로 겹쳐 어느 컬럼에서 온 선인지 구분할 수 없습니다.
// 외래키(:w 좌측 외곽) -> 기본키(:e 우측 외곽) + 까마귀발 카디널리티 orders:buyer_id:w -> users:id:e [ dir=both, arrowtail=crowodot, arrowhead=teetee, taillabel="0..*", headlabel="1", label="buyer" ]; orders:approver_id:w -> users:id:e [ dir=both, style="dashed", arrowtail=crowodot, arrowhead=odottee, taillabel="0..*", headlabel="0..1", label="approver" ];
graphiforge style erd.dot -o erd.svg -t high-contrast --routing erd-step --line-jump
24종 모든 Edge 작성 스타일을 한눈에 비교하는 요약 테이블입니다.
| 구분 | 디자인 명칭 | 시각적 형태 (Monochrome) | DOT 속성 정의 | 의미론적 역할 (Semantic Role) | 권장 사용 상황 |
|---|---|---|---|---|---|
| 선 패턴 (Stroke) | Primary Bold Solid (굵은 실선 · 2.5px) | A -> B [style="solid", penwidth=2.5, arrowhead="normal"]; |
핵심 동기 트랜잭션 / 메인 실행 축 (Primary Sync Call / Critical Path) | API Gateway → 핵심 서비스, 서비스 → Primary DB 쓰기 트랜잭션 | |
| 선 패턴 (Stroke) | Standard Solid (표준 실선 · 1.5px) | A -> B [style="solid", penwidth=1.5, arrowhead="normal"]; |
일반 동기 호출 / 직접 의존성 (Standard Dependency) | 내부 모듈 간 일반 함수·HTTP·gRPC 호출, 컴포넌트 간 기본 연결 | |
| 선 패턴 (Stroke) | Dashed Line (파선 · 비동기 이벤트) | A -> B [style="dashed", penwidth=1.6, arrowhead="onormal"]; |
비동기 이벤트 발행 / 메시지 큐 / 재시도 루프 (Async Event / Pub-Sub / Retry) | Kafka·SQS·EventBridge 메시지 발행, Webhook 콜백, Standby DB 비동기 복제 | |
| 선 패턴 (Stroke) | Dotted Line (점선 · 조회/관측) | A -> B [style="dotted", penwidth=1.4, arrowhead="vee"]; |
읽기 전용 조회 / 캐시 참조 / 메트릭·로그 수집 (Read-Only / Telemetry) | Redis 캐시 조회, Prometheus 메트릭 스크래핑, ConfigMap/Secret 참조 | |
| 선 패턴 (Stroke) | Double Parallel Line (이중 평행선) | A -> B [color="#000000:#ffffff:#000000", penwidth=1.2, arrowhead="diamond"]; |
강한 결합 / 분산 트랜잭션(2PC) / 전용 고대역폭 채널 (Strict Coupling / HA Trunk) | Direct Connect 전용선, 2-Phase Commit 원장 동기화, 강한 포함(Composition) | |
| 선 패턴 (Stroke) | Tapered Flow (방향성 테이퍼 웨지) | A -> B [style="tapered", penwidth=5.0, arrowhead="none"]; |
트래픽 볼륨 / 대역폭 흐름 표현 (High-Volume Stream / Sankey-Style Flow) | 데이터 파이프라인 처리량 시각화, 네트워크 인그레스 집중 구간 | |
| 선 패턴 (Stroke) | Invisible Alignment Guide (투명 정렬 가이드) | A -> B [style="invis", weight=20]; |
화면에 선을 그리지 않고 두 노드의 좌우/상하 순서만 강제 고정 | { rank=same; A; B; C; A -> B -> C [style=invis, weight=20]; } 수평 순서 고정 | |
| 양끝 단자 (Marker) | Normal Filled Arrow (기본 채움 화살표) | A -> B [arrowhead="normal"]; |
직접 호출 / 제어 흐름 이동 / 강한 방향성 (Direct Call / Control Flow) | HTTP/gRPC API 요청, 상태 전이(State Transition), 명령(Command) 전달 | |
| 양끝 단자 (Marker) | Hollow Triangle (속 빈 삼각형 · onormal) | A -> B [arrowhead="onormal", style="dashed"]; |
인터페이스 구현(Realization) / 상속(Inheritance) / 비동기 이벤트 전달 | UML 클래스 상속·구현, 비동기 이벤트 컨슈머 구독 | |
| 양끝 단자 (Marker) | Open Vee Arrow (열린 V자 화살표 · vee) | A -> B [arrowhead="vee", style="dotted"]; |
약한 의존(Dependency) / 단순 참조 / 읽기 전용 조회 | 캐시/설정 조회, 유틸리티 모듈 참조, 메트릭 폴링 | |
| 양끝 단자 (Marker) | Filled Diamond (채워진 다이아몬드 · Composition) | Parent -> Child [dir=both, arrowtail="diamond", arrowhead="normal"]; |
강한 생명주기 포함 (Composition — 부모 삭제 시 자식도 함께 소멸) | VPC → Subnet 포함 관계, Aggregate Root → Value Object 생명주기 결합 | |
| 양끝 단자 (Marker) | Hollow Diamond (속 빈 다이아몬드 · Aggregation) | Group -> Member [dir=both, arrowtail="odiamond", arrowhead="vee"]; |
느슨한 집합 (Aggregation — 독립적인 생명주기를 가진 구성원 묶음) | Load Balancer → Target Group 인스턴스 풀, 클러스터 노드 그룹 | |
| 양끝 단자 (Marker) | Bidirectional Sync (양방향 화살표 · dir=both) | NodeA -> NodeB [dir=both, arrowtail="normal", arrowhead="normal"]; |
양방향 실시간 통신 / Active-Active 상태 동기화 (Peer Gossip / Bi-Sync) | WebSocket 양방향 스트림, Multi-Master DB 복제, 클러스터 Gossip 프로토콜 | |
| 양끝 단자 (Marker) | Socket / Plug Terminal (odot → tee) | Plugin -> Host [dir=both, arrowtail="odot", arrowhead="tee"]; |
인터페이스 소켓 결합 / 포트-어댑터 바인딩 (Port & Adapter Binding) | Hexagonal Architecture 포트-어댑터 결합, 사이드카 프록시(Envoy) 바인딩 | |
| 양끝 단자 (Marker) | ERD Zero-or-Many (0..* 까마귀발 + 링 → 1 바) | orders:buyer_id:e -> users:id:w [dir=both, arrowtail="crowodot", arrowhead="teetee"]; |
선택적 다대일 관계 (0..* Optional Many → 1 Mandatory One) | ERD 외래키(FK) 자식 테이블(0..*건) → 부모 마스터 테이블(정확히 1건) | |
| 양끝 단자 (Marker) | ERD One-or-Many (1..* 까마귀발 + 바 → 1 바) | items:order_id:e -> orders:id:w [dir=both, arrowtail="crowtee", arrowhead="teetee"]; |
필수 다대일 관계 (1..* Mandatory Many → 1 Mandatory One) | 주문 상세(order_items 최소 1건 이상) → 주문 마스터(orders 정확히 1건) | |
| 방위 포트 (Port) | Vertical Spine Port (:s → :n 상하 정중앙 직결) | gateway:s -> order:n [weight=10, penwidth=2.4]; |
상위 노드 하단 정중앙(:s)에서 하위 노드 상단 정중앙(:n)으로 수직 일직선 연결 | group="spine" + weight=10과 함께 사용하여 메인 처리 축을 일직선으로 고정할 때 | |
| 방위 포트 (Port) | Horizontal Peer Port (:e → :w 좌우 정중앙 직결) | primary:e -> standby:w [dir=both, style="dashed", minlen=2]; |
동일 계층(rank=same) 두 노드의 마주 보는 동(:e) ↔ 서(:w) 측면 수평 연결 | Primary ↔ Standby DB WAL 복제, Multi-AZ 서버 간 상태 동기화 | |
| 방위 포트 (Port) | Side-to-Top L-Bend (:e → :n / :w → :n 측면 L자 분기) | order:e -> cache:n [style="dotted", label="Read-Through"]; |
메인 노드의 좌/우 측면(:w/:e)에서 수평으로 빠져나와 보조 노드의 상단(:n)으로 90° 진입 | 메인 수직 스파인(Spine)을 방해하지 않고 사이드카·캐시·DLQ로 분기할 때 | |
| 방위 포트 (Port) | Outer East Feedback Loop (:e → :e 우측 ㄷ자 루프) | worker:e -> queue:e [constraint=false, style="dashed", arrowhead="onormal"]; |
계층 순서를 바꾸지 않고(constraint=false) 우측 외곽 채널로 돌아 올라가는 재시도 루프 | Worker → Queue 재시도(Retry), Consumer → Broker DLQ 리트라이 | |
| 방위 포트 (Port) | Outer West ACK Loop (:w → :w 좌측 ㄷ자 루프) | storage:w -> ingest:w [constraint=false, style="dotted", arrowhead="vee"]; |
좌측 외곽 채널(:w → :w)을 따라 최하단에서 최상단으로 올라가는 비동기 응답 루프 | 우측에 Retry 루프가 있을 때 좌측 채널로 ACK/Webhook 콜백을 분리할 때 | |
| 방위 포트 (Port) | Shared Bus Trunk (sametail="bus" 공통 줄기 분기) | router:s -> svc_1:n [sametail="bus"]; router:s -> svc_2:n [sametail="bus"]; |
1:N 다중 분기 시 단일 수평 버스 바(Trunk Bar)를 공유한 뒤 각 하위 노드로 수직 드롭 | --routing bus와 함께 API Gateway / EventBridge → 다중 워커 팬아웃 표현 | |
| 방위 포트 (Port) | ERD Row Cell Port (table:col:e → target:id:w) | orders:buyer_id:e -> users:id:w [dir=both, arrowtail="crowodot", arrowhead="teetee"]; |
HTML <TABLE>의 특정 행(PORT="col") 외곽 테두리에서 텍스트 침범 없이 계단식 직각 연결 | --routing erd-step과 함께 사용하여 복수 FK 관계선을 8pt 간격 레일로 분리할 때 | |
| 방위 포트 (Port) | Multi-Label Pill & Cardinality (중앙 + 양끝 라벨) | A -> B [label="owns", taillabel="0..*", headlabel="1", labeldistance=2.0]; |
선 중앙에는 관계명 캡슐 배지(label), 양끝 포트에는 카디널리티(taillabel/headlabel) 동시 표기 | ERD 관계선 및 포트 번호(taillabel=":443", headlabel=":8080") 명시 |