개발자용 다이어그램 언어, D2(Declarative Diagramming)
Diagramming Language
노마드 코더 니꼴라스 형님 영상으로 D2를 접하게 됐다.
기존의 방법과 문제점
기존에 다이어그램이 필요할 때는 draw.io 등 온라인 툴로 그렸었는데, 요소가 추가될 때마다 새로 배치를 하고, 복사 붙여넣기를 하는 등의 행위가 매우 번거로웠다.
그래서 이런 플로우 차트를 자동으로 만들어주는 프로그램을 만들어볼까 시도를 했다가 실력 부족으로 포기한 경험이 있다.
장점: 언어를 통한 자동 배치
D2는 정확히 이러한 문제를 해결하고자 개발된 언어이다. 간단한 예로
 |
| 간단하게 차트 그리기 |
x->y 만 써주면 저렇게 차트를 그려준다. 배치는 겹치지 않게 알아서 해준다.
디자이너라면 저런 배치를 마음에 들 때까지 고치겠지만, 수정이 빈번한 개발과정에서는 낭비일 뿐이다. 적당히 오브젝트끼리 겹치지 않게 배치를 해준다면 완성하고 나서 디자인을 손보는 것이 좋을 것이다.
기능 소개
여러가지 기능들이 있지만 가장 마음에 든 것은 'SQL UML' 과 'Sequence diagram'이다.
SQL UML
 |
| 간단하게 SQL UML 그리기 |
위처럼 깔끔한 UML을 그리기 위한 코드는 아래와 같다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | costumes: { shape: sql_table id: int {constraint: primary_key} silliness: int monster: int last_updated: timestamp } monsters: { shape: sql_table id: int {constraint: primary_key} movie: string weight: int last_updated: timestamp } costumes.monster -> monsters.id |
Sequence diagram
복잡한 프로그래밍을 할 때 미리 그려볼 수 있는 Squence diagram 기능도 있다.
 |
| Sequence diagram |
1 2 3 4 | shape: sequence_diagram alice -> bob: What does it mean\nto be well-adjusted? bob -> alice: The ability to play bridge or\ngolf as if they were games. |
Class UML
 |
| class UML |
Class UML 도 물론 가능하다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | D2 Parser: { shape: class +reader: io.RuneReader # Default visibility is + so no need to specify. readerPos: d2ast.Position # Private field. -lookahead: "[]rune" # Escape the # to prevent being parsed as comment # lookaheadPos: d2ast.Position # Or just wrap in quotes "#peekn(n int)": (s string, eof bool) +peek(): (r rune, eof bool) rewind() commit() |
장점: 빠른 학습
D2 Playgraound가 따로 있어 바로 실행해볼 수 있고, 아래에 Cheatsheet가 학습에 도움을 준다.
Document도 잘되어 있는 편이지만, 그냥 언어 자체가 쉽다. 이 포스팅을 하려고 들어가서 학습한지 1시간 정도 밖에 안 되어 전체 페이지를 읽을 수 있었고, 이해가 됐다.
다른 제품들
D2 페이지를 가보니 Diagram 을 위한 언어로써 최초는 아닌 모양이다. 이미 Mermaid같은 언어들도 나와있는데, 내가 간단하게 쓰려고 배우기는 조금 진입장벽이 있어 보인다.
나는 필요할 경우 D2를 사용할 것 같다. 간단한 프로젝트는 다운도 안 받고 playground활용할 듯
댓글
댓글 쓰기