Graphviz가 필요할까? 직접 만들면 되는데?

• SpiderMonkey 엔진의 JavaScript·WebAssembly 컴파일 과정을 시각화하기 위해 내부 도구를 전면 개편, 인터랙티브 그래프를 생성하는 기능 구현
• 기존 Graphviz 기반 iongraph는 불안정한 레이아웃과 비직관적 구조로 인해 디버깅 효율이 낮았으며, 이를 대체하기 위해 새로운 레이아웃 알고리듬을 직접 설계
• 새 알고리듬은 Sugiyama 방식을 단순화해 루프 구조를 명확히 표현하고, 안정적·고속 레이아웃을 1000줄 미만의 JavaScript 코드로 구현
• 그래프는 철도 다이어그램 스타일의 직선 엣지를 사용해 가독성을 높이고, Graphviz 대비 수천 배 빠른 렌더링 속도 달성
• 이 도구는 Firefox 프로파일러에 통합되어 있으며, 향후 검색·레지스터 시각화 기능 등 확장 계획 존재

SpiderMonkey의 시각화 도구 개편

• SpiderMonkey의 Ion 최적화 컴파일러가 생성하는 내부 그래프를 시각화하기 위해 도구를 새로 구축
  • 사용자는 웹 페이지에서 JavaScript 코드를 입력해 함수 최적화 과정을 실시간 그래프로 탐색 가능
  • 그래프는 드래그·줌·슬라이더 조작으로 단계별 변화를 확인할 수 있음
• 기존 Graphviz 기반 iongraph는 PDF 출력을 생성했으나, 소스 코드 구조와 불일치하고 출력 불안정성이 심각했음
  • 작은 코드 변경에도 노드 위치가 크게 바뀌어 패스 간 비교가 어려움
  • 루프·조건문 구조가 시각적으로 왜곡되어 제어 흐름 파악이 어려움

Graphviz 한계와 새로운 접근

• Graphviz의 Sugiyama 알고리듬은 일반 그래프 최적화에 적합하지만, 제어 흐름 그래프(CFG) 의 특성을 반영하지 못함
  • JavaScript·WebAssembly의 루프는 단일 진입점만 가지며, 감소 가능한(reducible) 제어 흐름을 가짐
• SpiderMonkey 팀은 이러한 제약을 활용해 단순화된 전용 알고리듬을 설계
  • 사이클 제거: 루프 백엣지를 무시
  • 계층화(Leveling) : 루프 이후 블록을 아래로 배치해 코드 흐름을 반영
  • 교차 최소화 생략: 안정성을 우선시해 true/false 분기 순서를 고정
  • 루프 트리 구조 보존: 중첩 루프를 시각적으로 명확히 표현
• 결과적으로 간결·고속·안정적 레이아웃을 달성, 초기 구현은 약 1000줄의 JavaScript로 구성

iongraph 레이아웃 알고리듬 단계

• 1단계: Layering
  • 블록을 계층별로 정렬하고, 루프 내부·외부 관계를 반영
  • 루프 종료 후 블록은 루프 전체 높이만큼 아래로 배치
• 2단계: 더미 노드 생성
  • 여러 계층을 가로지르는 엣지에 더미 노드를 추가해 시각적 충돌 방지
  • 동일 목적지로 향하는 엣지는 병합해 시각적 노이즈 감소
• 3단계: 엣지 정렬(Straighten)
  • 부모·자식 노드를 정렬해 수직선 형태 유지, 루프 들여쓰기 적용
  • 더미 노드도 정렬 과정에 참여해 겹침 방지 및 구조 보존
• 4단계: 수평 엣지 트래킹
  • 수평 엣지가 겹치지 않도록 트랙(track) 단위로 정렬
  • 엣지 방향에 따라 상·하로 분리하고, 병합 가능한 엣지는 하나로 묶음
• 5단계: 수직 배치(Verticalize)
  • 각 계층에 Y좌표를 부여해 균일한 높이 배치, 가독성 향상
• 6단계: 렌더링(Render)
  • 철도 다이어그램 스타일의 직선 엣지를 사용
  • 엣지는 수직·수평으로만 교차하며, 방향성과 구조가 명확

단순 알고리듬의 효과

• 복잡한 최적화 대신 예측 가능한 규칙 기반 배치로 가독성과 안정성 확보
  • 노드 순서 고정, 엣지 단순화로 패스 간 일관성 유지
• 제약 해석기(Constraint Solver) 를 배제함으로써 사람이 이해하기 쉬운 구조 구현
  • 루프 내부 배치나 후속 블록 하향 배치 등 의미 중심 설계 가능
• 성능 향상: Graphviz가 10분 걸리던 zlib 함수 그래프를 20밀리초에 렌더링
  • 수천 배 빠른 속도와 더 나은 탐색성 확보

향후 계획

• Firefox 프로파일러에 iongraph 통합 완료, 성능 분석 시 그래프 확인 가능
  • 현재는 SpiderMonkey 셸 빌드에서만 사용 가능, 브라우저 빌드에는 미포함
• 향후 기능 제안
  • 고급 탐색 기능, 검색, 레지스터 할당 시각화 등
  • 명확한 로드맵은 없으며, 오픈소스 기여를 환영
• 로컬 실험은 IONFLAGS=logs 설정으로 /tmp/ion.json 생성 후
  독립 배포판에서 로드 가능
• 소스코드는 GitHub에 공개되어 있으며,
  Matrix 채팅방을 통해 개발자와 직접 소통 가능