D2로 종속 관계에 있는 토폴로지 구현해보기

D2 자체가 하나의 노드에 링크를 연결해서 다른 토폴로지로 연결할 수 있게 되어있는데, 콘솔 사이트에서는 이게 문제없이 잘 된다. 이제 실제로 웹에서 잘되는지 확인해보기 전, 우선적으로 CLI를 통해 문제없이 svg 형태로 잘 추출해내는지부터 확인해보자.

들어가기 전에…

위에서 TALA 엔진 사용시 생겼던 워터마크는 terrastruct의 콘솔에서 아래와 같이 api token만 가져와서(유료 버전) ~/.config/tstruct/auth.json을 생성해서 api_token이라는 key로 삽입하면 해결된다.

우선 파일구조는 아래와 같다. 실행해야 하는 d2파일들은 모두 같은 디렉토리 위치에 있어야 문제없이 실행된다. (포함관계에 따른 폴더구조는 d2를 실행하면 알아서 형성되는데 이는 아래에서 알아보자.)

파일 내용 자체는 보안상의 이유로 공개 불가하지만 지금까지 작성한 d2 코드와 형식은 동일하다.

index.d2에서 그 외 파일들을 종속한다고 보면 되고 바로 아래 종속된 파일들이 또 그 아래에 있는 파일을 종속하는 방식이다.

# 다음과 같이 종속이 가능하다.

layers: {
	region: @region
}

# 아래와 같이 가져다 사용하면 region.d2을 실행한 svg가 그대로 브라우저에 뜨는걸 볼 수 있다.
region: {
	shape: image
	.
	.
	.
	link: layer.region
}

그럼 이제 다음과 같이 cli에서 실행해보자.

D2_LAYOUT=tala d2 --watch docs/examples/topology/index.d2

→ 이 때, D2_LAYOUT=tala는 세 개의 d2 엔진 중 tala를 사용하기 위함인데 위에서 얘기했듯이 top과 right을 통해 노드들을 고정하려면 해당 엔진을 사용해야만 가능하다.

→ –watch를 통해 실시간으로 수정사항이 업데이트되게끔 실행했다.

→ 이 외에도 cli 실행시 D2_THEME= 를 통해 색깔 테마를 따로 지정할 수도 있다.

위와 같이 실행을 마치면 다음과 같이 파일 구조가 생성된다.

해당 파일 구조와 같이 종속관계가 적용돼 index에서 region 페이지로 가려고 링크를 누르면 region 페이지로 바로 렌더링되는 것을 알 수 있다.