▲

D2(텍스트에서 다이어그램 도구)에서 이제 ASCII 렌더링 지원

 (d2lang.com)
2P by GN⁺ 5일전 | ★ favorite | 댓글 1개
  • D2 0.7.1 버전에서 텍스트 다이어그램을 ASCII로 렌더링하는 기능 추가
  • 코드 주석에서 간단한 ASCII 다이어그램을 활용해 함수나 클래스의 흐름 설명 가능
  • 기본적으로 유니코드 문자를 사용하지만, 옵션 플래그로 표준 ASCII 적용 선택 가능
  • 이 기능은 알파 단계로 일부 스타일, 특수 문자, 특정 도형은 지원하지 않음
  • D2 Playground와 Vim 확장 등에서 직접 ASCII 렌더링 체험 가능

D2 ASCII 렌더링 소개

D2의 최신 릴리즈(버전 0.7.1)부터 텍스트 다이어그램의 ASCII 출력 기능이 추가됨.
.txt 확장자를 가진 출력 파일은 자동으로 ASCII 렌더러로 렌더링됨.
예시는 D2 Vim 확장에서 볼 수 있으며, .d2 파일을 열고 프리뷰 창을 통해 저장할 때마다 ASCII 다이어그램 출력 상태를 실시간으로 확인 가능함.

코드 문서화에서의 활용

ASCII 다이어그램은 소스코드 주석에 삽입할 때 가장 실용적임

  • 작은 함수 또는 클래스 옆에 간단한 다이어그램을 추가하면, 흐름 설명보다 더 직관적으로 코드 이해를 돕는 장점 존재
  • Vim 확장에서는 D2 코드를 작성해 선택 영역을 ASCII 다이어그램으로 곧바로 변환 가능함

유니코드와 표준 ASCII의 선택

디폴트 ASCII 렌더링은 유니코드 상자의 그리기 문자를 사용해 더 보기 좋은 출력 제공

  • 만약 최대 이식성을 원한다면, --ascii-mode=standard 옵션 플래그를 통해 일반 ASCII 문자로도 렌더 가능함

현재 한계점

이 ASCII 렌더링 기능은 알파 단계임

  • 코너 케이스, 개선 포인트, 버그가 다수 존재할 수 있음
  • 웹사이트에 버그 리포트 또는 피드백 제출을 장려함

주요 제한 사항

  • 스타일 미지원
    • 애니메이션, 폰트 등은 ASCII에서 의미 없음
    • 향후 터미널 색상 등 일부 제한적 스타일 지원 검토 계획
    • 테마도 지원 대상 아님
    • double-border, multiple 등은 향후 개선 예정 리스트에 포함
  • 불균일한 간격
    • ASCII로 변환 과정에서 박스 배치가 SVG 대비 불규칙해질 수 있음
  • 렌더 불가능 대상
    • 마크다운, Latex, 코드 등의 특수텍스트 지원 미구현
    • 이미지와 아이콘, UML 클래스, SQL 테이블 등 렌더 불가
    • 이러한 항목은 제거 혹은 플레이스홀더 표시 여부를 추후 결정 예정
  • 일부 도형 미지원
    • 클라우드, 원 등 곡선 형태 도형은 ASCII에선 잘 표현되지 않음
    • 해당 도형은 사각형으로 대체 후 좌측 상단에 작은 아이콘 추가로 유형 구분

직접 사용해보기

이 기능은 D2 Playground에서 바로 사용 가능함

  • 제공된 코드블록을 열어 직접 ASCII 렌더링을 체험할 수 있음
▲
GN⁺ 5일전  [-]
Hacker News 의견

  • 안녕하세요, 개발자 여러분. 오늘 아침에 추가한 새로운 기능을 공유하고 싶음. 아직 알파 단계이고 벌써 github issue가 하나 올라왔음. 블로그 글을 건너뛰고 바로 확인해보고 싶으면 여기에서 확인 가능함. 좀 더 큰 예시도 이 링크에서 확인 가능함

    • playground에서 검은 배경에 검은 글씨로 렌더링되어서 작동 안 하는 줄 알았음. 아마 내가 다크모드를 활성화했기 때문인 것 같음. 다른 렌더러는 잘 되는데 ascii는 안 보임
    • TFA에서는 단순히 ELK에서 다운스케일된다는 뜻인가 궁금함. 이 기능을 사용하려면 ELK를 명시적으로 설정해야 하는지, 아니면 .txt로 출력하면 자동으로 활성화되는지 궁금함. 주로 내 d2 다이어그램을 위해 이미 ELK를 쓰고 있음

  • mermaid와 비교했을 때 어떤 점에서 가치가 있는지 궁금함. 디자인과 작동 방식이 마음에 들지만 mermaid에서 넘어올 실질적인 이유가 있는지 묻고 싶음. 또한 이런 도구들이 대체로 자동으로 생성된 결과물에서 박스의 위치와 크기를 x/y 값으로 수동 조정할 수 있는 기능이 부족하다고 생각함

    • 어떤 가치를 중시하느냐에 따라 다름. 당신이 언급한 두 가지로 충분한 사람도 있고, 우리처럼 CLI에서 SVG 렌더링할 때 chromium 브라우저가 필요 없는 점이 중요한 사람도 있음(관련 사례 참고). 전체 차이를 보여주진 않지만 간략 비교 사이트도 있음. 그리고, 유료 제품 광고는 하고 싶지 않지만 위치와 크기를 고정할 수 있는 manual 조정 기능이 필요한 경우 IDE에서 제공함

  • D2 문법이 매우 매력적임에도 불구하고 그간 Mermaid의 툴링 때문에 더 많이 사용했었음. 그러나 이 기능은 메이저하게 새롭고, Mermaid에서는 본 적이 없던 것임. asciiflow.com과의 연결고리도 잘 만들어줌

  • ASCII에서 변환되는 기능이 좋음. 그런데 다이어그램을 업데이트해야 할 때 원래의 D2 소스를 어떻게 얻는지 궁금함

  • D2가 mermaid보다 항상 더 마음에 들었는데, 내 생각에는 다음 이슈 때문에 grid layout이 사실상 쓸모가 없어짐(관련 이슈). 픽셀 단위를 직접 맞춰야 한다면 이런 도구의 목적이 사라지는 것과 같음

    • 고마움! 알려줘서 좋음. 0.7.2(다음 릴리즈)에 반영 예정임

  • 브라우저 기반 텍스트 투 다이어그램 툴 목록을 관리하고 여러 번 공유한 적 있음. 최근에 알게 된 건 D2 온라인 버전은 순수하게 브라우저에서 돌아가는 게 아니라 백엔드 서버가 다이어그램을 생성한다는 점임. D2가 클라이언트(브라우저)에서만 단독으로 동작할 수 있는지, 그리고 이번 글에서 언급한 확장 기능이 오프라인에서도 작동하는지 궁금함

    • 이제 가능해짐! (일주일 전부터) d2 playground의 네트워크 탭을 한번 확인해보면 d2.js라는, D2의 wasm 포트를 감싼 래퍼로 구동되는 걸 볼 수 있음. 아직 공식 출시 전이지만 곧 분리 공지 예정임
    • ~~목록을 볼 수 있을까 했는데~~ 편집: 이미 찾았음! 고마움

  • 공식 파이썬 repository를 마련해주길 바람. notebook에서 쓰고 싶은데, 현재는 databricks만 강제적으로 써야 해서 불편함

  • 보기 정말 멋짐. 예전에 올렸던 C4 지원 글도 봤음! 곧 C4 모델링이 필요해서 확인해볼 예정임

  • 정말 멋진 기능임. D2는 처음 들어봤지만, 터미널에서도 바로 차트를 만들고, 예쁘게 렌더링할 수도 있다는 점이 정말 마음에 듦. 금방 써볼 계획임

    • D2는 이미 실시간 HTTP 서버로 .svg를 live로 업데이트하는 기능도 지원함. 브라우저와 vim을 나란히 띄우면 실시간 업데이트도 볼 수 있음. 1년 전에 D2를 발견했고, 이후 모든 다이어그램에 사용 중임
    • 일반적으로 ascii 다이어그램은 Moondraw를 쓰지만, 이미 vim 환경에 있다면 이 도구가 훨씬 좋음

  • vim extension이 정말 쩌는 기능임

    • 근데 vimscript로 짜여있다는 점이 이상하고 좀 아쉬움
답변달기