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

> Clean Markdown view of GeekNews topic #22623. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=22623](https://news.hada.io/topic?id=22623)
- GeekNews Markdown: [https://news.hada.io/topic/22623.md](https://news.hada.io/topic/22623.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-08-20T16:33:39+09:00
- Updated: 2025-08-20T16:33:39+09:00
- Original source: [d2lang.com](https://d2lang.com/blog/ascii/)
- Points: 4
- Comments: 1

## Topic Body

- **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 렌더링을 체험할 수 있음

## Comments



### Comment 42707

- Author: neo
- Created: 2025-08-20T16:33:40+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=44954524) 
- 안녕하세요, 개발자 여러분. 오늘 아침에 추가한 새로운 기능을 공유하고 싶음. 아직 알파 단계이고 벌써 github issue가 하나 올라왔음. 블로그 글을 건너뛰고 바로 확인해보고 싶으면 [여기](https://play.d2lang.com/?script=qlDQtVOotFLIyFTwSEzOTi1S8EstL-YCBAAA__8%3D&ascii=1&)에서 확인 가능함. 좀 더 큰 예시도 [이 링크](https://play.d2lang.com/?script=rJJBjtswDEX3OgWBrm2kzU4FeoruC8JibSG0KIj0pMHAdy9kW00yU2A2s6RI_8__6Bcs6uHVAYRv3SDpdxz3EoDxJot1lMaYyAPxZXv-Aj-pzDEhg000EwwSaOtsZReDh_Pp5ABWt7pEdpVy2TUHYgaTK5XmoWjEHI20vQDohJk8qEmh8CugYWvYjamfF7aYmTxYWXbj1e3-BZPO0YyKe6MO3Y_HtgelFD5xZttAEsdEkKUYcsuzRA-vR6SJ_uAoaW0f1GyQiwykKncmJgVHegdkuHFMgcrHNA75O-7-Yeca4dm4_-eYJ0kELKO61blF26GODTIVleQArjHY5OHr-dTmqupx6_7xzDNeCAZkfjf1RKuvmHCo--yGWzi1IhfqAurk4VytMEdQKi8fSYWomfH2Zr4G21NENbdX7TYZR_r-X6ira39x_8ytSt4N3N8AAAD__w%3D%3D&ascii=1&)에서 확인 가능함
  - playground에서 검은 배경에 검은 글씨로 렌더링되어서 작동 안 하는 줄 알았음. 아마 내가 다크모드를 활성화했기 때문인 것 같음. 다른 렌더러는 잘 되는데 ascii는 안 보임
  - TFA에서는 단순히 ELK에서 다운스케일된다는 뜻인가 궁금함. 이 기능을 사용하려면 ELK를 명시적으로 설정해야 하는지, 아니면 .txt로 출력하면 자동으로 활성화되는지 궁금함. 주로 내 d2 다이어그램을 위해 이미 ELK를 쓰고 있음

- mermaid와 비교했을 때 어떤 점에서 가치가 있는지 궁금함. 디자인과 작동 방식이 마음에 들지만 mermaid에서 넘어올 실질적인 이유가 있는지 묻고 싶음. 또한 이런 도구들이 대체로 자동으로 생성된 결과물에서 박스의 위치와 크기를 x/y 값으로 수동 조정할 수 있는 기능이 부족하다고 생각함
  - 어떤 가치를 중시하느냐에 따라 다름. 당신이 언급한 두 가지로 충분한 사람도 있고, 우리처럼 CLI에서 SVG 렌더링할 때 chromium 브라우저가 필요 없는 점이 중요한 사람도 있음([관련 사례](https://news.ycombinator.com/item?id=31275754) 참고). 전체 차이를 보여주진 않지만 [간략 비교 사이트](https://text-to-diagram.com)도 있음. 그리고, 유료 제품 광고는 하고 싶지 않지만 위치와 크기를 고정할 수 있는 manual 조정 기능이 필요한 경우 [IDE](https://docs.terrastruct.com/tour/freehand)에서 제공함

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

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

- D2가 mermaid보다 항상 더 마음에 들었는데, 내 생각에는 다음 이슈 때문에 grid layout이 사실상 쓸모가 없어짐([관련 이슈](https://github.com/terrastruct/d2/issues/1164)). 픽셀 단위를 직접 맞춰야 한다면 이런 도구의 목적이 사라지는 것과 같음
  - 고마움! 알려줘서 좋음. 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로 짜여있다는 점이 이상하고 좀 아쉬움