flowcast 예제 갤러리
데이터·설명을 주면 라우터가 다이어그램 단위로 쪼개고 drawer 서브에이전트가 병렬로 흐름도를 렌더링하는 Claude Code 플러그인. 아래는 3뷰의 합성 예제(실 데이터 없음)를 자체완결 HTML로 렌더한 라이브 데모다. 카드를 누르면 전체화면으로 열린다.
왜 이걸 만드는지, 어떤 문제에서 출발했는지는 블로그에 적었다 — 서비스는 움직이는데, 문서는 멈춰 있었다 ↗
sequence — 시간순 요청/응답 스윔레인
topology — 존 배치 + 번호 구간
component — 포트·프로토콜 방향 엣지
어떻게 동작하나
- 1입력확정된 흐름 문서·명세·설명·PPT를 준다. JSON을 손으로 짜지 않는다.
- 2라우터데이터를 다이어그램 단위로 쪼개고 각 단위의 뷰를 판별한다. 미결 단위를 해소해 manifest로 고정한 뒤에야 다음으로.
- 3drawer 병렬단위마다 서브에이전트가 뷰 스킬을 로드해 JSON→렌더·파일링. 한 요청에서 여러 그림을 동시에.
- 4취합·검토각 다이어그램에 근거가 된 원문 경로를 남겨, 검토하고 필요하면 다시 생성한다.
세 관점
하나의 프로젝트도 무엇을 알고 싶은지에 따라 필요한 그림이 다르다. flowcast는 질문에 맞는 관점을 골라 그린다.
sequence동작 — 무엇이 언제
요청과 응답이 어떤 순서로 오가는가. 행위자 사이 시간순 상호작용을 스윔레인으로.
topology실행 환경 — 어디를 거쳐
서비스가 어느 존과 인프라를 거치는가. 공간 배치 위에 요청 구간을 번호로 오버레이.
component구성 — 무엇과 무엇이
컴포넌트와 포트가 어떻게 연결되는가. 프로토콜 방향 엣지로 프로세스를.
라이브 예제
세 관점을 자체완결 HTML로 렌더한 합성 예제(실 데이터 없음). 카드를 누르면 전체화면으로 열린다.