스포일러: Vizdom.dev를 사용하여 DOT 언어로 작성된 DAG를 렌더링합니다.

소프트웨어 개발자로서 저는 가끔 DAG를 사용해 작업했는데, 대부분 시각화 작업이 포함되었습니다. 많은 경우 빠른 렌더링이 어려워 툴링을 찾게 되었습니다.

다행히도 믿을 만한 사람이 있어 그래프비즈 DOT 언어로 작성된 그래프를 렌더링할 수 있는 도구 — 완벽합니다!

제외하고…

• 웹에서는 잘 작동하지 않습니다*
• 설치해야 해요
• 온라인으로 DOT/GV 파일을 관리하지 않습니다.

고려사항

*좋습니다. 기술적으로 Graphviz는 WebAssembly로 컴파일될 수 있으며 몇몇 재능 있는 사람들은 dreampuf와 같은 몇 가지 깔끔한 프로젝트를 구축했습니다. 편집자 , 나이키의 edotor.net , 그리고 마작의 편집자 - 각각 고유한 트위스트가 있습니다. 나는 여전히 이러한 렌더링을 SVG(또는 다른 매체)로 내보내지 않고 삽입하는 데 어려움을 겪고 있습니다.

예를 들어, 그래프를 다음 위치에 저장하고 싶습니다. 노션.so 그래프를 자동으로 렌더링하는 링크를 붙여넣기만 하면 됩니다.

나는 사용할 수 있었다 인어JS 그래프를 꽤 깔끔하게 렌더링하고 놀라울 정도로 잘 작동합니다. 이것이 바로 그래프를 만든 많은 이유 중 하나입니다. 64k+는 GitHub에서 시작됩니다 . 마크다운을 사용하여 Notion/GitHub에 그래프를 삽입할 수도 있습니다.

아쉽게도 DOT를 Mermaid가 요구하는 마크다운의 맛으로 번역해야 합니다. 더 작은 텍스트 표현의 경우 ChatGPT를 사용하여 변환할 수 있지만 문법 오류가 자주 발생하고 그래프 렌더링이 거부되므로 자동화 소스로서 신뢰할 수 없습니다.

그럼 거기에 Terrastruct.com 손으로 만든 다이어그램을 관리하는 데는 놀라운 일이지만 인어 문제처럼 DOT를 D2로 안정적으로 변환할 수 없습니다. 나는 당신이 손으로 다이어그램을 작성한다면 이것은 허용 가능한 일회성 비용이라고 생각합니다. 일반적으로 이는 환상적인 도구입니다. 명성!

문제

• 프로그래밍 방식으로 생성된 DOT 출력을 렌더링하고 싶습니다. 어떤 도구도 해당 목표를 달성하는 데 도움이 되지 않는 것 같습니다.

• 그래프를 렌더링하는 링크를 삽입하고 싶습니다.

• 업데이트를 위해 렌더링을 온라인에 저장하거나 다른 그래프와 시각적으로 비교하고 싶습니다.

해결책

응 — 내가 만들었어 앱 그러기 위해서 🎉

…그리고 완전히 Rust로 제작되었습니다 🦀 렙토스

tl;dr — DAG를 온라인으로 빠르게 렌더링하기 위해 특별히 제작된 간단한 앱

그래프 생성 시 가장자리 교차를 최소화하는 것은 시각적으로 매력적인 그래프를 만드는 핵심인 NP 하드 과제입니다. Terrastruct 팀은 뛰어난 결과를 발표했습니다. 블로그 게시물 이 주제를 탐구합니다. DagreJS 레이아웃 알고리즘과 통찰력 있는 논문 " A Technique for Drawing Directed Graphs 1"에서 큰 영감을 받아 Rust에서 변형을 개발했습니다.

이 버전은 이 문제의 복잡한 복잡성을 활용하여 계층적 그래프를 렌더링하는 데 특히 효과적입니다.

Graphviz에서는 대규모 DAG(500개 이상의 노드/에지) 렌더링이 다소 느린 경향이 있습니다. 다그레 + D3 ( d3-graphviz 및 파생물)은 훨씬 더 빨라지고 훌륭한 애니메이션/스타일링 사용자 정의를 제공합니다. 그러나 나는 그들이 DOT 언어가 제공하는 기능을 놓치고 있다고 느꼈습니다. 즉, 스타일 속성은 Graphviz로 렌더링하는 경우에만 존중되는 경우가 많습니다.

비즈돔 Dagre와 매우 유사한 결과를 생성하지만 Graphviz의 DOT 사양 및 스타일 동작에 더 부합합니다. 그러나 Graphviz와 기능 패리티가 없으며 지원되지 않는 명령문/속성은 단순히 무시됩니다.

저는 이것이 프로그래밍 방식으로 생성된 DOT가 소비할 속성 종류에 대한 좋은 절충안이라고 믿습니다.

비즈돔 기능

• 🚀 엄청나게 빠른 렌더링
• 💾 링크에 그래프 저장
• 0️⃣ 종속성이 없으며 설치가 필요하지 않습니다.

렌더링 속도

글쎄, 그것은 사과 대 오렌지 비교입니다. Graphviz는 여전히 훌륭한 시각화를 생성하고 더 많은 것을 지원합니다. 레이아웃 엔진 , 그래서 주관적으로 비교하고 있습니다 비즈돔 Graphviz의 DOT 엔진에 대해 DAG로 범위를 좁히고 더 나아가 DOT 언어의 좁은 기능 목록으로 범위를 좁힙니다.

예, 30년 이상의 연속 Graphviz에 대한 수년간의 경험과 도구를 비교하는 것이 끔찍하다는 것을 알고 있지만 좁은 사용 사례에서는 엄청나게 빠릅니다. 내 M1 Macbook Pro의 렌더링 시간은 다음과 같습니다. 꽤 큰 그래프 ~400개 노드 포함:

• 기본 Graphviz: ~30초
• Chrome(WASM) Graphviz: 충돌*
• Chrome(자바스크립트) DagreJS: ~10초
• 크롬(WASM) 비즈돔 : ~1초**

* emscripten 플래그인 ALLOW_MEMORY_GROWTH=1 설정되지 않아 총 메모리가 16MB로 제한되어 충돌이 발생합니다. 이 문제는 해결할 수 있지만 문제의 그래프를 처리할 수 있는 온라인 프로젝트를 찾지 못했습니다.

** 예제 그래프는 편집기 보기에서 Example 14 선택하여 렌더링됩니다. 그래프에 유지되는 URI가 너무 크기 때문에 페이지를 새로 고치면 페이지가 새로 고쳐지고 414가 표시됩니다. 더 큰 그래프를 저장하기 위한 더 나은 솔루션을 개발 중입니다.

링크에 그래프 저장

DOT 파일을 변경하면 URL이 몇 가지 쿼리 매개변수를 즉시 업데이트하여 그래프와 레이아웃 옵션을 저장하므로 링크를 저장하는 것만으로 항상 데이터 복사본을 참조할 수 있습니다.

문제가 있습니다. 큰 그래프는 AWS에 비해 URI를 너무 크게 만드는 경향이 있습니다(여기서 비즈돔 현재 호스팅됨) 및 기타 로드 밸런서.

저는 현재 더 큰 그래프를 처리하기 위한 솔루션을 개발 중이지만 그동안 그래프를 유지하고 저장하는 몇 가지 방법을 포함시켰습니다.

• 그래프를 최대화하는 뷰를 자동으로 렌더링하는 포함 가능한 링크를 복사합니다.

• iframe 스니펫을 복사하여 렌더링을 지원하는 모든 애플리케이션에 포함하세요.

• 아니면 렌더링된 SVG를 다운로드하세요.

다음은 편집기 보기의 모양에 대한 예입니다. 수축을 위한 pprof 추적 :

Editor View 로 이동하여 Example 42 로드합니다.

차이점 보기

때때로 나는 내가 생성한 두 개의 그래프를 비교하려고 시도하는 것을 발견했습니다. 그래서 그 동안 나는 다음을 추가했습니다. 차이점 뷰어 서로 다른 두 그래프 사이의 변화를 시각적으로 확인합니다.

색상 범례:

• 빨간색: 삭제됨
• 주황색: 수정됨
• 녹색: 추가됨

다음은 몇 가지 스냅샷입니다.

Click me: 노드 ID를 "e"에서 "f"로 변경

나를 클릭하세요: "cluster=true" 추가

미래 방향

비즈돔 은 여전히 진행 중인 작업이며 계속해서 발전함에 따라 이 도구를 완성하는 여정이 그래프 시각화 분야 자체만큼 역동적이라는 것을 알고 있습니다. 나는 무엇을 자랑스러워하면서도 비즈돔 지금까지 달성한 성과가 있기 때문에 그 잠재력이 더욱 기대됩니다. 그것이 바로 독자이자 잠재적인 사용자인 당신이 참여하는 곳입니다.

의견이 있으시면 언제든지 저에게 메시지를 보내주세요. 거터 또는 불화 .

읽어주셔서 감사합니다. 이 기사가 마음에 드셨다면 팔로우해주세요 !

[1]: ER Gansner, E. Koutsofios, SC North 및 K. -피. Vo, "유향 그래프를 그리는 기술", IEEE Transactions on Software Engineering, vol. 19, 아니. 3, pp. 214–230, 1993년 3월, doi: 10.1109/32.221135.

여기에도 게시됨