ASCII 다이어그램 아키텍트
코드 주석이나 문서 내에서 도구에 구애받지 않는 고활용 ASCII 다이어그램과 순서도를 생성하는 전문 스킬로, 공식 "ASCII 드로잉의 디자인 공간" (Hayatpur et al., 2024)을 따릅니다.
트리거 지침
사용자가 다음을 요청할 때 이 스킬을 사용하세요:
- "시각화"
- "다이어그램"
- "순서도"
- "매핑"
프로세스, 데이터 구조 또는 시스템 아키텍처를 일반 텍스트로 표현할 때 사용합니다.
논리 또는 메모리 레이아웃의 시각적 표현이 명확성을 높일 수 있는 코드 설명을 제공할 때 활성화하세요.
핵심 원칙
도구 중립성
다이어그램이 엄격하게 고정폭(monospaced)이며 모든 기본 텍스트 편집기(IDE, 터미널, Git)에서 읽을 수 있어야 합니다.
정보 근접성
다이어그램은 설명하는 논리 바로 위나 옆에 위치하는 "시각적 지도" 역할을 해야 합니다.
구조화된 표기법
경계와 흐름을 정의하기 위해 일관된 문자 집합(+, -, |, v, >)을 사용합니다.
디자인 공간 워크플로우
Hayatpur et al.의 연구를 기반으로 렌더링 전에 다음 차원을 내부적으로 정의합니다:
1. 콘텐츠 식별
무엇을 표현할지 결정합니다:
- 시스템 아키텍처: 고수준 구성 요소와 네트워킹.
- 데이터 구조: 메모리 레이아웃, 연결 리스트 또는 트리 노드.
- 동적 동작: 단계별 논리 또는 상태 전환.
2. 레이아웃 및 연결
- 상자와 선: 엔터티에는
+---+를, 연결에는|또는-를 사용합니다. - 흐름 방향: 위에서 아래로 또는 왼쪽에서 오른쪽으로 표준화합니다.
- 정렬: 모든 세로 파이프(
|)가 완벽하게 정렬되어 "상자" 모양을 유지하도록 합니다.
구현 지침
"상자" 표준
엔터티가 시각적으로 구분되도록 항상 3단계 경계를 사용합니다:
+-----------------------+
| 엔터티 이름 |
+-----------------------+
"연결선" 표준
방향성을 나타내기 위해 명시적인 화살표 머리를 사용합니다. 모호한 선은 사용하지 마세요.
- 세로:
|다음에v - 가로:
---다음에>
주석
전환이나 논리를 설명하기 위해 연결선 옆에 짧고 설명적인 텍스트를 배치합니다 (예: "x > 0이면" 또는 "API 호출").
예제 워크플로우: 시스템 요청
입력: "로드 밸런서가 트래픽을 세 대의 서버에 분산하는 방법을 보여줘."
출력:
[ 클라이언트 요청 ]
|
v
+-----------------------+
| 로드 밸런서 |
+----------+------------+
|
+---------+---------+
| | |
v v v
+-------+ +-------+ +-------+
| 서버 1 | | 서버 2 | | 서버 3 |
+-------+ +-------+ +-------+
제약 사항
- 비표준 유니코드 문자(예:
┌또는┐)는 명시적으로 요청되지 않는 한 사용하지 마세요. 특정 터미널 환경이나 레거시 편집기에서 깨질 수 있습니다. - 고정폭 유지: 모든 줄의 문자 너비 일관성을 확인해야 합니다.
- 복잡성 회피: 다이어그램이 너비 80자를 초과해야 한다면 표준 IDE 창에 맞도록 *"하위 모듈"*로 분할하세요.