▲

D2: 다이어그램 스크립팅 언어

 (d2lang.com)
2P by GN⁺ 7일전 | ★ favorite | 댓글 1개
  • D2는 텍스트 기반으로 다이어그램을 작성할 수 있는 스크립팅 언어로, 코드로 시각 자료를 자동 생성하는 방식을 제공
  • 사용자는 간단한 문법으로 노드와 관계를 정의하면, 자동 레이아웃 엔진이 이를 시각적으로 배치
  • 문서 내의 각 코드 스니펫은 Playground에서 직접 실행 및 수정할 수 있어, 즉시 결과를 확인 가능
  • 단, import를 사용하는 일부 예시는 Playground에서 바로 실행되지 않는 예외 존재
  • 개발자에게 시각적 문서화 자동화와 협업 효율성을 높이는 도구로서 의미

D2 개요

  • D2는 다이어그램을 코드로 작성할 수 있는 선언적 스크립팅 언어로, 복잡한 구조를 텍스트로 정의하고 자동으로 시각화하는 기능 제공
    • 사용자는 노드, 엣지, 그룹 등을 간단한 문법으로 기술
    • 결과물은 자동으로 정렬되고, 다양한 스타일을 적용 가능
  • 이 언어는 버전 관리와 협업에 유리하며, 코드 리뷰나 문서 자동화 파이프라인에 쉽게 통합 가능

Playground 기능

  • D2 문서의 각 코드 스니펫은 Playground에서 바로 열어 수정 및 실행할 수 있는 인터랙티브 기능 제공
    • 사용자는 마우스를 스니펫 위에 올리면 Playground 링크가 활성화됨
    • 이를 통해 다이어그램을 실시간으로 조정하고 결과를 시각적으로 확인 가능
  • 단, import 문을 사용하는 스니펫은 외부 리소스를 필요로 하기 때문에 Playground에서 즉시 실행되지 않는 제한 존재

활용 의의

  • D2는 시각적 문서화 자동화를 지원해, 시스템 설계나 데이터 흐름을 코드와 함께 관리할 수 있는 장점 제공
  • 개발자와 디자이너가 동일한 언어로 다이어그램을 정의함으로써 협업 효율성 향상
  • 오픈소스 생태계에서 코드 기반 다이어그램 작성 표준화를 촉진하는 도구로 평가됨
▲
GN⁺ 7일전  [-]
Hacker News 의견

  • D2의 공동 제작자로서 최근 애니메이션 기능 확장 아이디어를 구상 중임
    관련 논의를 GitHub Discussion에 올려두었으니 의견을 듣고 싶음

    • 최근 LLM을 이용해 아키텍처 결정을 빠르게 시각화하고 있음
      주로 mermaid를 쓰지만 D2가 더 유연한 인터페이스를 제공할 수 있을지 궁금함
      LLM과 연동되는 툴 호출 기능이나 MCP 같은 사용자 친화적 인터페이스 계획이 있는지도 알고 싶음
    • D2는 정말 멋진 도구라 생각함. 특히 AWS 네트워크 레이아웃 자동화를 구현할 때 유용했음
      많은 객체를 렌더링할 때도 엔진과 싸우지 않아도 돼서 좋았음
      다만 sdk/d2lib의 문서화가 부족해 처음엔 시행착오가 있었음
    • D2를 몇 달 전부터 사용 중인데 배우기 쉬워서 놀랐음
      하지만 화려한 애니메이션은 꼭 필요하다고 생각하지 않음. 강조가 필요할 땐 단순히 색을 바꾸는 게 더 직관적임
    • 애니메이션의 목적이 궁금함. 프레젠테이션 중 클릭할 때마다 요소가 추가되고 연결이 부드럽게 강조된다면 좋겠음
      하지만 텍스트 변경으로 전체 다이어그램이 흔들리는 건 오히려 산만할 수 있음
      또한 Swimlane 다이어그램을 정식 지원해주면 좋겠음
    • “Level 4 - dramatic mode ;)”라며 드라마틱 SVG 예시를 공유함

  • D2나 Penrose 같은 도구를 Python으로 감싸서 데이터 기반 다이어그램 스크립팅을 시도 중임
    하지만 대부분의 선언형 도구들은 “declare, then tweak” 워크플로를 지원하지 않아 불편함
    Penrose는 수정은 쉽지만 결과가 랜덤하고 예측 불가한 면이 있음

    • D2의 커스텀 레이아웃 조정은 독점 엔진에서만 가능함
      오픈소스 엔진에서는 불가능하지만 Freehand 기능으로 일부 조정 가능함

  • D2의 문법을 일반 프로그래밍 언어로 얼마나 가깝게 구현할 수 있을지 궁금했음
    Python에서는 연산자 오버로딩 제약 때문에 완전히 동일한 DSL은 어렵지만, 문자열 연산자 오버로딩으로 비슷하게 시도 가능함

    • Python에서도 약간의 트릭으로 a <- b | "edge" 같은 문법을 흉내낼 수 있음
      하지만 실제로 쓰면 유령이 되어 괴롭히겠다며 농담함
    • Scala에서는 사용자 정의 연산자가 가능해 "x" --> "y" | "hello world" 같은 DSL을 만들 수 있음
      다만 남용은 좋지 않음
    • Ruby에서도 x >> y << "label" 형태로 간단한 내부 DSL을 구현 가능함
      Diagram 클래스에서 객체 모델을 만들어 렌더러를 붙일 수도 있음

  • mgmt 프로젝트의 메인 작성자로서 DAG를 많이 다룸
    노드와 엣지를 추가·삭제할 때 시각적으로 안정적이고 애니메이션 전환이 가능한 다이어그램이 필요함
    Graphviz는 스냅샷마다 레이아웃이 흔들려 불편함

    • d2의 watch 기능으로 파일을 단계별로 교체하는 간단한 스크립트 해킹으로 비슷한 효과를 낼 수 있음

  • D2의 Sketch 모드와 인터랙티브 기능이 정말 유용함
    툴팁과 링크 덕분에 다이어그램 활용도가 크게 높아짐

  • D2를 오래 사용해왔고 내부에서도 적극 추천 중임
    하지만 엔터프라이즈 라이선스 비용이 너무 높아 개인용으로만 사용 중임
    TALA 라이선스가 연 3000달러, 개인용도 120달러로 부담스러움
    Helm chart나 시스템 설명을 LLM에 넣어 자동 다이어그램 생성하는 기능은 혁신적이라 생각함

    • 개인적으로 TALA의 출력 품질이 가장 별로라고 느낌. 대부분 ELK 엔진을 사용함

  • 최근 D2의 ASCII 렌더링 지원이 화제가 되었음
    관련 토론은 이전 게시글에서 이어짐

  • D2는 꽤 오래됐지만 여전히 mermaid보다 덜 알려진 느낌임
    기능적으로는 훨씬 뛰어나서 더 많은 사람들이 알았으면 함

    • 나도 D2를 더 좋아하지만 mermaid는 여러 플랫폼에서 기본 지원되므로 실용적인 선택임
    • D2를 처음 알았는데 mermaid보다 나은 점이 무엇인지 궁금함

  • 우리 AI 플랫폼 zo.computer에서 다이어그램 생성 도구로 D2를 채택했음
    mermaid보다 표현력이 높아 AI 기반 시각화에 적합함

    • 구현 방식이 궁금함. D2용 MCP 서버를 직접 구축했는지 물어봄
    • “Ben, LinkedIn/X를 견딜 만하게 만들어줘서 고맙다”고 인사함

  • D2는 훌륭하지만 PlantUML이나 mermaid 대비 결정적 차별점이 부족함
    여전히 “다이어그램 코드의 킬러앱”을 기다리고 있음

    • 이런 도구로 대규모 코드베이스를 시각적으로 탐색할 수 있다면 큰 장점이 될 것임
    • D2의 장점은 독립 실행형 컴파일러라는 점과 ASCII 렌더링 지원임
      npm 설치가 필요 없는 것도 마음에 듦
      다만 mermaid는 Obsidian 등과의 통합성이 뛰어남
    • “그 킬러 프로그램이 어떤 기능을 가져야 할까?”라는 질문을 던짐
답변달기