ASCII Diagram

다이어그램 생성 시 복잡도를 판단하여 적절한 형식을 선택합니다.

핵심 원칙: 중간 복잡도 이하는 ASCII art 우선. Mermaid는 고복잡도 전용.

형식 선택 기준

기본값은 ASCII. Mermaid는 ASCII로 표현이 어려울 때만 사용.

ASCII (기본)                         Mermaid (전환)
  선형, 트리, 단순 분기                  교차선 3개 이상
  80자 이내로 표현 가능                  80자 초과 불가피
  노드 간 연결이 이웃끼리                순환 참조 + 복잡한 교차
                                       ER, Gantt, 클래스 다이어그램

Mermaid 전환 신호

다음 중 2개 이상 해당하면 Mermaid로 전환:

1. 교차선 불가피: 선이 3회 이상 겹쳐야 표현 가능
2. 80자 초과: 가로 배치로도 80자를 넘김
3. 자동 레이아웃 필요: 수동 정렬이 비현실적
4. Mermaid 전용 유형: ER, Gantt, 클래스 다이어그램, 파이 차트

ASCII가 잘 맞는 구조

Instructions

워크플로우: 다이어그램 요청 처리

1. 복잡도 판단: 노드 수, 관계 유형, 출력 환경 확인
2. 형식 선택: 위 기준 적용
3. 스타일 선택: 아래 5가지 중 적합한 것
4. 생성: 가이드라인 준수하여 작성

스타일 1: Box-and-Arrow (아키텍처, 흐름)

가장 범용. 컴포넌트 간 관계 표현에 적합.

+----------+     +----------+
|  Client  |---->|  Server  |
+----------+     +----------+
                      |
                 +----v-----+
                 | Database |
                 +----------+

레이블 포함:

+--------+  HTTP   +--------+  SQL   +------+
| Client |-------->|  API   |------->|  DB  |
+--------+         +--------+        +------+
                       |
                  Redis |
                       v
                   +-------+
                   | Cache |
                   +-------+

스타일 2: Tree (계층, 디렉토리)

tree 명령어 출력과 동일한 형태. 계층 표현에 최적.

src/
├── components/
│   ├── Header.tsx
│   └── Footer.tsx
├── hooks/
│   └── useAuth.ts
└── index.ts

스타일 3: Sequence (시간순 상호작용)

메시지 흐름, API 호출 순서 표현.

Client          Server          DB
  |               |              |
  |-- request --->|              |
  |               |-- query ---->|
  |               |<-- result ---|
  |<-- response --|              |
  |               |              |

스타일 4: Flowchart (분기, 의사결정)

조건 분기와 상태 전이 표현.

        +-------+
        | Start |
        +---+---+
            |
        +---v---+
        | Check |
        +---+---+
           / \
      yes /   \ no
         /     \
   +----v-+  +-v------+
   | Pass |  | Retry  |
   +------+  +---+----+
                 |
             +---v---+
             | Fail  |
             +-------+

스타일 5: Table/Matrix (비교, 매핑)

2차원 비교에 적합. 마크다운 테이블과 병행 가능.

          Read  Write  Admin
User       x      -      -
Editor     x      x      -
Admin      x      x      x

작성 가이드라인

문자 세트

한 다이어그램에서 두 세트를 혼용하지 않는다.

핵심 규칙

1. 80자 이내: 초과 시 Mermaid 전환 검토
2. 코드 펜스 필수: ``` 또는 ```text로 감싸기
3. 화살표에 라벨: -- label --> 형태로 의미 전달
4. 박스 내부 패딩: 텍스트 좌우 최소 1칸 여백
5. 정렬 일관성: 같은 레벨 노드는 같은 높이/열에 배치
6. 순수 ASCII 우선: LLM이 +-|> 를 유니코드보다 안정적으로 생성

피해야 할 패턴

• 교차선 3개 이상을 ASCII로 강제 (스파게티)
• 화살표 라벨 없는 복잡한 연결
• 비정렬 박스 (들쑥날쑥)
• 유니코드와 ASCII 혼용

Examples

요청 → ASCII (선형 파이프라인, 15 노드)

User: "CI/CD 파이프라인 그려줘"
→ 선형 흐름, 교차선 없음
→ ASCII (스타일 1: Box-and-Arrow)

  commit -> lint -> test -> build -> staging -> deploy

요청 → ASCII (트리, 20+ 노드)

User: "프로젝트 구조 보여줘"
→ 계층 구조, 교차선 없음
→ ASCII (스타일 2: Tree)

요청 → Mermaid (순환 참조 + 교차)

User: "마이크로서비스 의존관계 그려줘"
→ 서비스 간 양방향 호출, 교차선 5개 이상
→ Mermaid (자동 레이아웃 필요)

요청 → 혼합

User: "시스템 개요 + 상세 흐름 그려줘"
→ 전체 의존관계: Mermaid (교차 다수)
→ 개별 요청 흐름: ASCII (선형)

참고

• ASCIIFlow – 웹 기반 ASCII 다이어그램 에디터
• Monodraw – macOS ASCII 다이어그램 도구
• mermaid-ascii – Mermaid → ASCII 변환