Claude Code에서 터미널 아키텍처 다이어그램을 그리고 요청 흐름을 시뮬레이션하는 도구를 만들었습니다
I made Claude Code draw architecture diagrams in the terminal, and play request flows on them
핵심 요약
Claude Code 내에서 시스템 설계 다이어그램을 시각화하고 요청 흐름을 시뮬레이션하는 Proschi 플러그인 소개.
- 시스템 설계 시각화 — 텍스트 기반으로 컴포넌트와 요청 흐름을 다이어그램으로 자동 생성함
- 대화형 시뮬레이션 — 요청 경로, 부하, 지연 시간, 비용 등을 단계별로 확인 가능함
- 터미널 통합 — 브라우저 전환 없이 Claude Code 내에서 바로 다이어그램 확인 및 제어 가능함
- 오픈 소스 공개 — MIT 라이선스로 제공되며 터미널 환경에 최적화된 레이아웃 엔진 포함함
Proschi는 시스템 설계 다이어그램을 위한 작은 텍스트 언어임. .proschi 파일에 컴포넌트, 연결 관계, 그리고 유스케이스(요청이 시스템을 어떻게 통과하는지)를 적으면 됨. Proschi가 알아서 레이아웃을 잡고, 간단한 시뮬레이션(부하, 지연 시간, 가용성, 비용)을 돌려주며, 각 흐름을 단계별로 직접 확인해 볼 수 있게 해줌.
이걸 왜 만들었냐고?: Claude Code로 백엔드 작업할 때, 요청이 서비스들을 어떻게 타고 가는지 자주 물어보거든. 근데 터미널에 나오는 Mermaid나 ASCII 아트는 읽기도 힘들고, 브라우저 띄우면 흐름 다 끊기잖아. 그래서 Claude Code 안에서 바로 다이어그램을 그려주는 플러그인을 만들었음.
기능:
- Claude가 proschi 블록으로 답변하면, 플러그인이 카드, 아이콘, 그룹, 범례가 포함된 진짜 다이어그램으로 그려줌.
- 유스케이스 재생: 요청이 다이어그램을 따라 움직이고, 각 단계의 요청과 응답을 볼 수 있음. 에러 경로는 빨간색으로 표시됨.
- 각 카드에 시뮬레이션된 부하가 표시됨.
- Focus 모드를 쓰면 키보드 컨트롤이 가능한 별도 창에서 다이어그램이 열림. Esc 누르면 다시 돌아옴.
- 클릭 한 번으로 브라우저 에디터에서 똑같은 다이어그램을 바로 열 수 있음.
설치 방법:
/plugin marketplace add gvart/proschi
/plugin install proschi@proschi
더 큰 예제나 전체 에디터는 여기 확인해 봐. 오픈 소스(MIT)임: https://github.com/gvart/proschi
피드백은 언제든 환영임. 특히 터미널에서 뭔가 깨져 보이면 꼭 알려줘.
