[D2Lang] 1. D2를 통한 다이어그램 그리기 시작하기!
D2라는 언어는 텍스트를 다이어그램(Diagram)으로 만들어 주는 다이어그램 스크립팅 언어입니다.
D2라는 이름의 유래는 아래와 같다고 합니다.
Declarative Diagramming -> D2
간단한 언어이기 때문에 공식 문서를 보고 직접 하셔도 된다 생각합니다.
또한 D2는 개발자 친화적으로 만들기 위해 노력했고 가독성을 높였다고 합니다.
D2를 웹에서 사용하기
D2 Playground
An online runner to play, learn, and create with D2, the modern diagram scripting language that turns text to diagrams.
play.d2lang.com
접속해 보시면 아래의 화면이 뜨고 초록색 상자로 표시해둔 compile버튼을 누르시면 우측 화면에 결과가 그려집니다.
우측 상단의 주황색 Export를 누르시면 png와 svg로 결과를 다운 받으실 수 있습니다.
일단 제일 먼저 Hello D2Lang!이라고 출력을 해보겠습니다.
좌측의 Live editor의 내용을 아래와 같이 수정해줍니다.
x -> y: Hello D2Lang!이후 컴파일 버튼을 누르면 아래의 사진과 같이 화살표 중간에 Hello D2Lang!이 적혀있는걸 확인하 실 수 있습니다.
이를 통해 화살표로 두개를 이어준 다음에 ': 내용' 형태로 적을 경우 화살표 중간에 내용이 온다는 것을 알 수 있죠.
그러면 세개를 연결할 경우 어떻게 되는지 확인해 보겠습니다.
Live editor의 내용을 아래와 같이 수정해줍니다.
x -> y -> z: Hello D2Lang!마찬가지로 컴파일 버튼을 누르면 x, y, z를 연결하는 모든 화살표 중간에 Hello D2Lang!이 적혀있는걸 확인하 실 수 있습니다. 그리고 너무 길게 나왔군요.
그러면 다른 내용을 적고 싶으면 어떻게 해야하며 위에서 아래가 아닌 왼쪽에서 오른쪽 흐름으로 수정할 수 있을까요?
생각보다 간단했습니다.
direction: right를 통해 흐름을 오른쪽 방향으로 바꿔준 다음 x에서 y로 가는 경우와 y에서 z로 가는 경우를 나눠서 적으면 됐습니다.
direction: right
x -> y: x to y
y -> z: y to z
기본적인 문법 내용이 였습니다.
다음엔 박스의 텍스트와 모양을 바꾸는 방법을 알아보겠습니다.