D2 diagram scripting language

D2?

D2는 다이어그램과 ERD 등을 코드로 그릴 수 있는 새로운 스크립트 언어이다. Notion에서 최근에 D2와 비슷한 Mermaid를 제공하고 있는데 둘이 문법은 다르지만 배우기 어려운 언어는 아니라 둘 중 하나를 알아두면 유용할 것 같다.

이게 Mermaid이다. Mermaid --> Diagram으로 다이어그램을 표시했다.

D2는 좀 더 간단하게 표시가 된다. 지금 보여지는 사이트는 D2를 쉽게 컴파일 할 수 있는 사이트인데 D2에서 제공하고 있는 것 같다. 자세한 내용은 링크를 참고한다.

활용

D2는 이렇게 간단하게 시퀸스 다이어그램을 그릴 수 있고

이렇게 간단하게 ERD를 설계할 수도 있다. 문법을 보면 위에 테이블을 정의하고 아래서 연관관계를 표시하는 만큼 유지보수 하기도 편리해 보인다는 장점이 있다.

공식문서이 있는 내용이다. D2에 익숙해지면 위와 같은 작업도 가능하다. 도형의 모양을 바꿀 수도 있고 이미지를 넣어 줄 수도 있다. 도형의 색상을 변경할 수도 있고 도형 안에 도형을 넣어 컨테이너를 표시할 수도 있다.(클라우드 다이이어그램을 그릴 때 유용하다.)

또, 이렇게 그린 다이어그램들을 png나 svg로 뽑을 수도 있다. 매우 유용하다. 블로그에 올리거나 개인적인 정리를 할 때 혹은 다이어그램을 공유할 때 캡쳐하지 않고 깔끔하게 따와서 공유할 수 있다. 즉, 코드를 공유해도 되고, 아웃풋만 따서 공유해도 된다.

결론

D2를 어제 알아서 오늘 간단하게 공식문서를 참고해서 공부해 봤는데 금방 익힐 수 있고 며칠 사용하면 금방 익숙해 질 수 있을 것 같다. vim이나 vsc의 플러그인으로 받아서 활용도 가능한데 vsc는 익숙하지 않고 vim으로 사용해 볼 생각이다. 실시간 서버도 열 수 있다. 변경 후 저장하면 즉시 보이게 된다.

앞으로 많이 활용해 볼 예정이다.