Diagram as Code와 draw.io
Source: Dev.to
Overview
아키텍처 다이어그램은 그릴 때마다 바로 구식이 되기 쉽습니다: 상자는 시스템과 맞지 않게 되고, 화살표는 의존성을 반영하지 않으며, 몇 차례 반복한 뒤에는 다이어그램이 실제보다 시스템의 느낌을 더 많이 나타냅니다. Ding‑by‑Dinghy는 이 문제를 Terraform이 임시 인프라 변경을 해결하는 방식과 동일하게, 다이어그램을 코드로 취급함으로써 해결합니다.
Basic Example
모든 Dinghy 다이어그램은 Shape 컴포넌트들의 트리 구조입니다. 의존성은 _dependsOn / _dependsBy 로 선언하고, 레이아웃 방향은 _direction 으로 설정합니다.
import { Shape } from '@dinghy/base-components';
export default () => (
Web App
Client
Cloud
Public Subnet
Load Balancer
Firewall
Private Subnet
Application
Postgres
);이 TSX를 렌더링하면 draw.io 페이지가 생성되며, 올바르게 라벨링된 박스와 의존성 화살표, 그리고 소스 코드와 일치하는 레이아웃이 자동으로 그려집니다: 바깥쪽에 Web App, 그 안에 중첩된 Cloud, 두 개의 수직으로 쌓인 서브넷, 그리고 모든 엣지가 자동으로 연결됩니다.
Improving Readability with Named Components
그냥 Shape만 사용해도 동작하지만, 원시 문자열을 읽는 것은 번거로울 수 있습니다. 각 역할을 자체 React 컴포넌트로 분리하면 다이어그램이 자체 문서화됩니다.
const Client = (props: any) => ;
export default () => (
);이제 “ 은 이름을 통해 의미를 전달하고, 레이아웃 기본 요소는 한 단계 아래에 그대로 유지됩니다.
Using Real AWS Icons
@dinghy/diagrams/entitiesAwsGeneralResources 에서 가져와 공식 AWS 리소스 아이콘으로 일반 박스를 교체합니다.
import * as awsGeneralResources from '@dinghy/diagrams/entitiesAwsGeneralResources';
const Client = (props: any) => (
);TSX 코드는 그대로이며, 렌더링 결과만 일반 도형에서 AWS 스타일 아이콘으로 바뀝니다.
How Dinghy Works
- Output format: 모든 예제는 여전히 순수
.drawio파일을 생성합니다. 이 파일은 표준 draw.io 편집기로 열고, 편집하고, 공유할 수 있습니다. - Workflow shift: 도형을 직접 끌어다 놓고 위치를 조정하는 대신, TSX에 도형과 관계를 기술합니다. Dinghy는 각 렌더링 시점에 픽셀 단위로 레이아웃을 자동 배치합니다.
- Compatibility: 기존 draw.io 기능—도형 라이브러리, 렌더링 엔진, 편집 경험, 그리고
.drawio파일을 사용하는 생태계 도구—모두 그대로 유지됩니다.
Getting Started
- Diagram as Code 시작 가이드를 따라 첫 프로젝트를 스캐폴드하고 첫
.drawio파일을 렌더링해 보세요. - 예제 다이어그램을 살펴보면 몇 개의 도형부터 전체 AWS 아키텍처까지 다양한 Dinghy 다이어그램을 확인할 수 있습니다.