스포일러:   사용하여 DOT 언어로 작성된 DAG를 렌더링합니다. Vizdom.dev를  소프트웨어 개발자로서 저는 가끔 DAG를 사용해 작업했는데, 대부분 시각화 작업이 포함되었습니다. 많은 경우 빠른 렌더링이 어려워 툴링을 찾게 되었습니다.  다행히도 믿을 만한 사람이 있어  DOT 언어로 작성된 그래프를 렌더링할 수 있는 도구 — 완벽합니다!   그래프비즈  제외하고…  웹에서는 잘 작동하지 않습니다*  설치해야 해요  온라인으로 DOT/GV 파일을 관리하지 않습니다.  고려사항  *좋습니다.   Graphviz는 WebAssembly로 컴파일될 수 있으며 몇몇 재능 있는 사람들은 dreampuf와 같은 몇 가지 깔끔한 프로젝트를 구축했습니다.  , 나이키의  , 그리고 마작의  - 각각 고유한 트위스트가 있습니다. 나는 여전히 이러한 렌더링을 SVG(또는 다른 매체)로 내보내지 않고 삽입하는 데 어려움을 겪고 있습니다. 기술적으로   편집자   edotor.net   편집자  예를 들어, 그래프를 다음 위치에 저장하고 싶습니다.  그래프를 자동으로 렌더링하는 링크를 붙여넣기만 하면 됩니다.   노션.so  나는 사용할 수 있었다  그래프를 꽤 깔끔하게 렌더링하고 놀라울 정도로 잘 작동합니다. 이것이 바로 그래프를 만든 많은 이유 중 하나입니다.  . 마크다운을 사용하여 Notion/GitHub에 그래프를 삽입할 수도 있습니다.   인어JS   64k+는 GitHub에서 시작됩니다  아쉽게도 DOT를 Mermaid가 요구하는 마크다운의 맛으로 번역해야 합니다. 더 작은 텍스트 표현의 경우 ChatGPT를 사용하여 변환할 수 있지만 문법 오류가 자주 발생하고 그래프 렌더링이 거부되므로 자동화 소스로서 신뢰할 수 없습니다.  그럼 거기에    다이어그램을 관리하는 데는 놀라운 일이지만 인어 문제처럼 DOT를 D2로 안정적으로 변환할 수 없습니다. 나는 당신이 손으로 다이어그램을 작성한다면 이것은 허용 가능한 일회성 비용이라고 생각합니다. 일반적으로 이는 환상적인 도구입니다. 명성!   Terrastruct.com 손으로 만든  문제    생성된 DOT 출력을 렌더링하고 싶습니다. 어떤 도구도 해당 목표를 달성하는 데 도움이 되지 않는 것 같습니다. 프로그래밍 방식으로  그래프를 렌더링하는 링크를 삽입하고 싶습니다.  업데이트를 위해 렌더링을 온라인에 저장하거나 다른 그래프와 시각적으로 비교하고 싶습니다.  해결책  응 — 내가 만들었어  그러기 위해서 🎉   앱  …그리고 완전히 Rust로 제작되었습니다 🦀   렙토스     tl;dr — DAG를 온라인으로 빠르게 렌더링하기 위해 특별히 제작된 간단한 앱  그래프 생성 시 가장자리 교차를 최소화하는 것은 시각적으로 매력적인 그래프를 만드는 핵심인 NP 하드 과제입니다. Terrastruct 팀은 뛰어난 결과를 발표했습니다.  이 주제를 탐구합니다. DagreJS 레이아웃 알고리즘과 통찰력 있는 논문 "   1"에서 큰 영감을 받아 Rust에서 변형을 개발했습니다.   블로그 게시물 A Technique for Drawing Directed Graphs  이 버전은 이 문제의 복잡한 복잡성을 활용하여 계층적 그래프를 렌더링하는 데 특히 효과적입니다.  Graphviz에서는 대규모 DAG(500개 이상의 노드/에지) 렌더링이 다소 느린 경향이 있습니다. 다그레 + D3 (  및 파생물)은 훨씬 더 빨라지고 훌륭한 애니메이션/스타일링 사용자 정의를 제공합니다. 그러나 나는 그들이 DOT 언어가 제공하는 기능을 놓치고 있다고 느꼈습니다. 즉, 스타일 속성은 Graphviz로 렌더링하는 경우에만 존중되는 경우가 많습니다.   d3-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.    게시됨 여기에도

This post provides insights into new product. 

This story contains new, firsthand information uncovered by the writer.

Render DAGs with Vizdom

Read My Stories

이 오디오는 이야기의 원래 언어로 제작되었습니다!

DAG에 Graphviz를 사용하면 안되는 이유: 대신 사용해야 할 사항

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

텔레그램: 크립토 아일랜드에서 본토로 연결되는 다리

디지털 유목민 들어보기: 태국의 새로운 DTV 비자에 대해 알아야 할 사항

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

포럼에서 피드까지: 소셜 미디어 알고리즘이 디지털 상호작용을 형성하는 방식

텔레그램: 크립토 아일랜드에서 본토로 연결되는 다리

디지털 유목민 들어보기: 태국의 새로운 DTV 비자에 대해 알아야 할 사항

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

포럼에서 피드까지: 소셜 미디어 알고리즘이 디지털 상호작용을 형성하는 방식

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps