GraphiForge Studiodata-first diagram editor · WASM renderer POC · v0.24

Architecture Preview

Interactive diagram canvas

100%
Graphviz 초기화 중
선택 없음 Expanded · all layers

Schema 추가

FK Relation 추가

Architecture Container 추가

Architecture Resource 추가

Shape

Architecture Connection 추가

Semantic Kind 추가

Default Shape
Fill Color
Border / Stroke Color

Architecture Layer 필터 구성

레이어의 이름, 색상, 아이콘, 뱃지 및 매핑된 Resource Kind를 맞춤 설정합니다.

ID Label Icon Color Badge 매핑된 Resource Kinds 삭제

GraphiForge 진단 및 린터 리포트

CST 파서 오류, 속성/도메인 오타 경고 및 Viz.js WASM 런타임 진단을 종합 확인합니다.

0 errors 0 warnings
위치 구분 진단 코드 메시지 및 설명 수정 조치

다양한 데이터베이스 스키마 테마 프리셋을 미리보고 실시간으로 적용합니다.

시퀀스, UML 클래스, 계층 서브그래프, FSM 상태 머신, ERD, 데이터 파이프라인, C4 모델(Context/Container/Component), STRIDE 위협 모델링 등 다양한 표준 포맷을 즉시 불러옵니다.

GraphiForge 다이어그램 가이드 & 온보딩

DOT 다이어그램에 스킨을 입히고 미리보기·편집·내보내기까지 이어지는 사용 안내

GraphiForge의 핵심 목적

Canonical DOT 다이어그램에 스킨을 입혀 완성하세요

GraphiForge는 DOT 구조와 내용을 유지한 채 색상, 글꼴, 간격, 테두리, 배경, ERD 스타일을 적용해 다이어그램의 시각적 표현을 바꾸는 스튜디오입니다.

1. DOT 선택기존 소스를 열거나 템플릿을 선택합니다.
2. 스킨 적용Themes 또는 ERD Gallery에서 프리셋을 고릅니다.
3. 확인·내보내기미리보기 후 SVG/PNG로 저장합니다.

스킨 변경은 원본 DOT을 기준으로 처리되며, 필요한 경우 인스펙터에서 선택한 객체의 스타일만 세밀하게 조정할 수 있습니다.

✏️

에디터 모드 (Editor Mode)

  • 속성 인스펙터 (Properties): 선택한 노드/엣지/클러스터의 Data 및 Style 실시간 시각적 편집
  • 레이어 및 계층 탐색기: Outline 계층 트리, 레이어별 필터링 (Ghost, Hide, Glow)
  • 구조 조작 버튼: Container, Resource, Connection 1-Click 추가
  • Canonical DOT 동기화: Contextual DOT 및 전체 소스 코드 양방향 편집
상단 헤더의 ✏️ Editor 버튼 클릭 또는 Alt+1
👁️

뷰어 모드 (Viewer Mode)

  • 방해 없는 전체 화면: 인스펙터와 사이드바가 자동 숨김 처리되어 캔버스 100% 활용
  • 프레젠테이션 최적화: 회의, 문서 공유, 시스템 아키텍처 리뷰에 이상적
  • 부드러운 탐색: 트랙패드 줌/팬, 검색 하이라이트, 타임라인 단계 재생 지원
  • 직접 공유 URL: ?mode=viewer 파라미터로 공유 시 바로 뷰어 모드로 진입
상단 헤더의 👁️ Viewer 버튼 클릭 또는 Alt+2
🤏

트랙패드 핀치 줌

마우스 포인터가 위치한 좌표를 중심으로 20%~300%까지 부드럽게 확대/축소됩니다.

✌️

두 손가락 패닝

트랙패드 두 손가락 스크롤 또는 마우스 휠/우클릭 드래그로 캔버스를 자유롭게 이동합니다.

🎯

더블클릭 화면 맞춤 (Fit)

캔버스 빈 공간을 더블클릭하거나 '맞춤' 버튼을 누르면 다이어그램이 뷰포트 중앙에 꽉 찹니다.

🔍

실시간 검색 & 하이라이트

상단 검색창에 이름이나 Kind를 입력하면 일치하는 객체만 네온으로 즉시 강조됩니다.

독립 실행형(Standalone) 고화질 SVG 내보내기

GraphiForge에서 내보낸 SVG는 시스템 폰트 스택, 텍스트 가독성 헤일로, 루트 배경색 사각형이 포함되어 있어 Figma, Adobe Illustrator, 웹 브라우저 등 어떤 외부 도구에서 열어도 100% 동일하게 렌더링됩니다.

CLI 템플릿 도구 연동

# 전체 템플릿 목록 조회
npx graphiforge template list

# 특정 카테고리 템플릿 내보내기
npx graphiforge template export c4-container -o ./my-system.dot
npx graphiforge template export threat-model-stride -o ./my-threat-model.dot