편집형 다이어그램 디자인
깔끔하고 출판 수준의 다이어그램을 단일 자체 포함 HTML 파일(인라인 SVG + CSS)로 생성합니다. 일반적인 짙은 청록색 글로우, 기본 Mermaid 레이아웃 또는 대각선 커넥터 선을 사용하지 마십시오.
시각적 DNA 및 색상 팔레트
- 종이(배경):
#f5f5f5(평평한 캔버스). - 잉크(텍스트 및 주요 선):
#2d3142. - 뮤트(보조 텍스트 및 표준선):
#4f5d75. - 테두리 및 구분선:
rgba(45, 49, 66, 0.12). - 강조(병목/중요 지점):
#eb6c36(코럴/테라코타; 다이어그램당 최대 1–2개 초점 노드). - 외부/느슨한 경계: 점선 (
stroke-dasharray="4,4").
타이포그래피 (Google Fonts)
HTML 헤더에 포함:
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
- 다이어그램 제목:
Instrument Serif, 28px, 일반 두께. - 노드 이름:
Geist(산세리프), 12px, 두께 600. - 하위 레이블 및 메타데이터:
Geist Mono, 9px (포트, 프로토콜, 배치 간격). - 커넥터 배지/아이브로우:
Geist Mono, 7–8px, 대문자, 자간 (letter-spacing: 0.08em).
SVG 지오메트리 및 레이아웃 표준
- 4px 그리드 규율: 모든 좌표(
x,y), 치수(width,height), 패딩 및 간격은 4의 배수여야 합니다. - 직각 커넥터만 사용: 축이 다른 노드 사이에 대각선 사선을 절대 그리지 마십시오. 모든 굽힘은 모서리가 둥근(
r=8) 직각 팔꿈치여야 합니다.<line>은 동일한 축을 공유하는 노드에만 사용하십시오. - 마스킹된 커넥터 배지: 프로토콜/데이터 레이블(예:
CSV,XLSX,LOAD)을#f5f5f5(rx=2)로 채워진 불투명<rect>안에 배치합니다. 레이블이 화살표 선을 절단하지 않도록 선 스트로크에서 6px–10px의 가시 간격을 유지하십시오. - 영역 및 기능 컨테이너: 단계를 넓은 열/영역(예:
수집,처리,배포)으로 그룹화합니다. 1px 테두리(rgba(45,49,66,0.12)), 둥근 모서리(rx=8) 및 왼쪽 상단에 대문자 고정폭 제목 탭을 사용합니다. - 노드 계층 구조:
- 표준:
#ffffff채움, 1px#2d3142선, 6px 반경(rx=6). - 병목/문제점:
#fbeee8채움(rgba(235,108,54,0.08)),#eb6c36선. - 외부: 투명 또는 흰색 채움, 점선 테두리(
stroke-dasharray="4,4").
- 표준:
- 수평 하단 범례: 다이어그램 노드 아래에 전체 너비의 가는 구분선으로 분리된 수평 범례 스트립을 배치합니다.
구조적 SVG 템플릿
SVG를 작성하기 전에 references/template.md를 로드하십시오 (마커, 영역, 커넥터, 마스킹된 배지, 노드 상자 포함).