viz은(는) 무엇을 하나요?
하나의 고정 렌더러 assets/viz.js가 모든 시각적 요소를 그립니다. 에이전트는 문법에 따라 데이터만 작성하면 되므로, 시각화 비용은 대체하는 ASCII 트리와 거의 같은 토큰 수로 처리됩니다. 그 대가로 단계 재생, 노드 검사기, 엣지 추적, 필터링, 경로 복사 기능을 얻을 수 있습니다.
뷰 선택
HTML이 아닌 데이터를 작성하세요: == graph 섹션(노드, 경로 및 view:) 또는 차트 섹션입니다. 독자가 묻는 질문에 따라 뷰를 선택한 다음, 필요한 문법만 읽으세요: 그래프, 트리 및 차이(diff)는 grammar, == timing, gantt, hist, retries, causes, board, stock 및 waits는 charts를 참조하세요.
흐름은 어떠한가?
- 컴포넌트 간 데이터 이동(분기, 폴백, 비동기 홉, 실패 종료) →
view: flow, 기본값입니다. "Walk me through"는 아래에 설명 내레이션 꼬리를 추가합니다. 각 엣지에 무엇이 이동하는지 레이블을 지정하고 엣지가 발생하는 순서대로 선언하세요. 숫자는 자동으로 따라옵니다. - 누가 행동하고, 무엇을 보내고, 무엇이 필터링하고, 어떤 결과가 나오는지 →
ranks:열, 트리거당 하나의 경로, 통과 시=> result로 끝나고 필터링 시=| result로 끝납니다. 팀 또는 서비스를 밴드로 표시 →lane:을 추가합니다. - 시간에 따른 서비스 간 요청 →
view: seq, 대기 시간이 중요할 때at:시간을 추가합니다. 호출 순서와 그 사이의 대기 시간이 핵심일 때는 seq를, 분기가 핵심일 때는 flow를 선택하세요. 각 메시지 후 각 서비스가 어떤 상태인지 → 엣지 아래에sets: id=*charging, 노드 아래에state:를 추가합니다. - 하나의 필드 또는 작업의 생애 →
view: states, 스토리당 하나의 경로(!giveup: running > blocked => dead). 사용자 대상 흐름에는 시작 점([*] -> form), 톤 및group상자를 추가합니다(views). - 누가 누구를 호출하는가 →
== tree. 한 순간의 호출 스택, 잘못된 값 포함 →view: stack및locals:를 추가합니다.
언제, 그리고 얼마나 오래?
- 동시에 실행되는 것: 경합, 중복 작업 →
== timing, 작업자당 하나의 레인과 중첩 위에!window를 추가합니다. - 재시도가 쌓인 이유: 백오프, 지터, 포기 지점, 동시에 많은 클라이언트 →
== retries,policy:포함. - 요청의 지연 시간이 어디에 사용되는지와 어떤 체인이 이를 제한하는지(임계 경로, 여유 시간) →
== gantt,after로 막대 체인 연결;budget:은 한계를 그리고, 변경된 행에was 140ms는 이전 실행을 아래에 그립니다.
얼마나 많은가?
- 볼륨이 어떻게 분할되는지: 트래픽 분할, 퍼널, 요청이 떨어지는 지점 →
view: sankey, 각 경로 아래에weight:를 추가하고 떨어지는 경로는=| <exit node>로 끝냅니다. 볼륨이 중요할 때ranks:대신 sankey를 사용하세요. - 꼬리인지 전체인지(p50 대 p99, 지연 시간 회귀) →
== hist, 이전 분포는was:로 표시합니다. - 임계값에 대한 시간 경과에 따른 단일 수량(큐 깊이, 지연, 사용 중인 풀), 스톡-앤-플로우 →
== stock,meter:밴드 포함. 반복되는 패턴의 경우 일반적인 한 윈도우를 플로팅하고 설명하세요.
왜 고장 났으며, 어디에 막혔는가?
- 누가 어떤 락을 잡고 있고 누가 그 락을 기다리는지, 교착 상태 →
== waits; 사이클을 찾습니다. - 인시던트의 의심되는 원인, 규명 여부 →
== causes, 피쉬본. - 여러 단계에 걸친 작업 항목(백필의 샤드, 파이프라인의 작업), WIP 제한 및 차단된 항목 →
== board, 칸반. - 검사가 읽는 입력과 각 입력을 신선하게 유지하는 트리거 → 그래프 다음에
== cover; 작성자 × 필드 매트릭스 →columns: <rank>.
무엇이 변경되었는가?
- 하나의 레이아웃에 대한 변경 → 노드와 경로에
+및-; 독자는 이전 | 둘 다 | 이후 토글을 얻습니다. - 변경이 호출 트리에 미친 영향 →
== diff, 수동이 아닌 변환기에서 생성합니다.<viz>는 이 스킬의 디렉토리입니다. 처음 두 인수는 베이스와 헤드 참조(PR의 베이스 브랜치, 그 다음HEAD)입니다.<paths>는 스캔 범위를 제한합니다:
python3 <viz>/scripts/viz.py calldiff main HEAD --max-depth 4 <paths> # base + == diff 출력, 변경되지 않은 하위 트리는 접힘
python3 <viz>/scripts/viz.py calltree --entry submitForm
필요에 따라 모든 뷰에 다음을 추가하세요:
- 각 단계의 이유 → 경로에
| payload | narration꼬리; 각각이 재생 단계가 됩니다. - 시나리오를 안내하는 디자인 문서 →
theme drawing, 단계 아래에shows: id = text, 하나의 숫자가 결과를 결정할 때meter:(drawing). - 저장, 인쇄 또는 공유할 페이지 →
theme paper. 자체 시트를 칠하므로 인라인 T3 렌더는 기본 테마를 유지합니다.
모든 것을 증거에 기반하세요. 각 노드는 @path:line과 읽기, 쓰기 및 실패 동작에 대한 세부 라인을 가집니다. 각 숫자(기간, 가중치, 수준)는 트레이스, 로그, 쿼리 또는 코드에서 가져옵니다. 읽거나 측정하지 않은 것은 ?로 표시하세요: 노드, 경로, 막대 또는 세그먼트에 ? 접두사, 스톡 포인트에 # estimate 주석.
표시하기
T3 Code (도구 목록에 html_render 있음): 페이지를 html_preview에 직접 작성하고, 콘솔에서 viz: 구문 오류를 확인한 후 동일한 페이지를 html_render에 전달하세요. viz.js를 붙여넣지 마세요.
<!doctype html><script src="https://cdn.jsdelivr.net/gh/Yeshwanthyk/agent-skills@efe8911d3765b764d7f0bf775e395d5201e29b16/skills/viz/assets/viz.js"></script>
<script type="text/viz">
…
</script>
미리보기 콘솔에서 스크립트 로드 실패가 표시되면 아래 페이지(기타 모든 곳)로 대체하고 사용자에게 해당 경로를 알려주세요. T3 렌더에 viz.js를 인라인으로 삽입하지 마세요: 호출당 약 55k 토큰입니다.
기타 모든 곳: 데이터를 /tmp/viz/<name>.viz에 저장한 다음 python3 <viz>/scripts/viz.py html /tmp/viz/<name>.viz --open을 실행하세요. 구문 오류를 보고하고, 렌더러가 인라인된 /tmp/viz/<name>.html을 작성한 후 브라우저에서 엽니다. glimpse가 설치된 pi에서는 대신 해당 파일을 거기서 엽니다(pi). 경로를 보고하세요.
자체 포함된 저장 페이지 내부(사용자가 보관하거나 공유하는 페이지): 뷰가 있어야 할 위치에 text/viz 블록을 작성하고, 본문 끝에 <script data-viz></script>를 추가한 후 viz.py inline page.html을 실행하세요. viz.js 업데이트 후 재실행하세요. 스토리 캡션, 테이블 행 또는 용어집 항목에 data-viz-id="<node id or path name>"를 지정하면, 마우스를 올렸을 때 페이지 스크립트 없이 페이지의 모든 그래프에서 해당 부분이 강조 표시됩니다.
응답
시각적 요소가 구조를 전달합니다. 응답은 표시할 수 없는 것, 즉 확인하지 않은 것과 가장 먼저 봐야 할 한 가지만 추가합니다.
완료
viz: 오류 없이 시각적 요소가 렌더링되고, 모든 노드와 숫자가 증거에 기반하거나 ?로 표시되었으며, 독자가 볼 위치(T3 인라인 또는 다른 곳에서 열린 페이지의 스크린샷)에서 확인했을 때 완료됩니다. 헤드리스 로드, curl, 또는 깨끗한 콘솔은 확인으로 간주되지 않습니다. 볼 수 없었을 경우에는 렌더링되었다고 말하지 말고 그렇게 말하세요.