fireworks-tech-graph의 개요
fireworks-tech-graph는 SKILL.md와 Python 스크립트로 이루어진 Agent Skill로, Claude Code나 Codex가 일상적인 영어나 중국어 설명으로 기술 다이어그램을 그리게 합니다. 에이전트가 요청을 분류하고 버전이 매겨진 JSON으로 다이어그램을 기술하면, 함께 들어 있는 생성기가 화살표 경로를 잡고 SVG, 1,920픽셀 PNG, 오프라인 대화형 HTML 페이지, 애니메이션 GIF로 렌더링합니다.
다이어그램 유형은 14가지로, UML 세트(클래스, 시퀀스, 상태 머신, 배포 등)와 ER 다이어그램을 포함합니다. RAG, 멀티 에이전트 구성, 도구 호출 흐름, Mem0 방식 메모리 같은 AI 시스템용 기성 패턴도 있습니다. 시각 스타일은 12가지이며, 그중 11가지는 생성기가 그리고 한 가지는 모델이 자유롭게 작성합니다. 40개 이상의 제품 아이콘도 들어 있습니다.
Brad Zhang(yizhiyanhua-ai)이 주로 Python으로 작성했으며 MIT 라이선스입니다. 1.2.0 버전은 2026년 7월 17일에 나왔고, 마지막 코드 변경은 9월 5일에 들어갔습니다. 마지막 확인 시점의 스타 수는 약 11,800개였습니다.
fireworks-tech-graph, 쓸 만한 가치가 있습니까?
fireworks-tech-graph를 설치할 이유는 하나입니다. 모델이 처음 그린 그림을 믿지 않는다는 점입니다. 스킬은 에이전트에게 스키마로 검증되는 중간 기술서를 쓰게 하고, 결정론적 플래너가 연결 선 경로를 잡습니다. 결과물은 구조 검사(XML, 마커, 겹침, 교차)를 통과해야 하며, 그다음 에이전트가 PNG를 다시 읽고 최대 두 번까지 목표를 정해 수정합니다. 쇼케이스 기준은 교차 0개, 연결선당 꺾임 2개 이하, 노드 간격 최소 40픽셀입니다. 에이전트가 이미지를 읽지 못하면 통과했다고 주장하지 않고 `visual_review: skipped`를 보고합니다.
결과물은 살아 있는 문서가 아니라 슬라이드, 블로그 게시물, 설계 리뷰를 겨냥합니다. 다이어그램은 SVG와 PNG로 나오며, Mermaid보다 훨씬 보기 좋지만 풀 리퀘스트에서 텍스트로 비교하거나 편집할 수 없습니다. 스타일 9는 C4 컨테이너 리뷰를 만들고, 스타일 10부터 12는 멀티 리전 배포, 이벤트 토폴로지, 골든 시그널 대시보드를 다룹니다. 플랫폼 팀이 실제로 그리는 것에 더 가깝습니다. 스타일 중 두 가지는 Claude와 OpenAI 고유의 디자인을 흉내 내는데, 사내 발표 자료에는 괜찮지만 공개 페이지에는 문제가 될 수 있습니다.
설치에는 거친 부분이 있습니다. README는 저장소를 그냥 `npx skills add`로 추가하면 엉뚱한 SKILL.md를 잡을 수 있다고 경고하므로 중첩된 경로를 지정해야 하며, npm 패키지(1.0.4)는 GitHub 릴리스보다 뒤처져 있습니다. PNG 내보내기에는 cairosvg나 rsvg-convert가 필요하고, GIF에는 스킬의 사본마다 FFmpeg, Chrome, Puppeteer가 함께 설치되어 있어야 합니다.
유지 관리는 한 사람이 합니다. 기여자는 12명, 열린 이슈는 1개이며, 9월 5일 이후 커밋은 README의 후원 문구 수정뿐입니다. README는 저자의 유료 컨설팅도 홍보합니다. 긴 세션에 걸쳐 대화형 설명 그림 하나를 만드는 Anatomy와 비교하면, 이 스킬은 더 빠르고 더 전형적입니다. 상자, 화살표, 스윔 레인을 제대로 그려 줍니다.
제 역할을 하는 곳
설계 리뷰를 준비하는 스태프 엔지니어
draw.io에서 오후를 보내지 않고 제안하는 결제 아키텍처 그리기
서비스와 프로토콜 이름을 넣어 Claude Code에 스타일 9의 C4 컨테이너 다이어그램을 요청합니다. 스킬이 SVG와 PNG를 렌더링하고 검증 결과를 보고합니다. 비용은 에이전트 세션 한 번이며, 수정하려면 상자를 끌어 옮기는 대신 다시 프롬프트를 써야 합니다.
AI 인프라 회사의 디벨로퍼 애드보킷
출시 블로그 게시물에 RAG나 멀티 에이전트 파이프라인 그림 넣기
내장된 RAG 또는 멀티 에이전트 패턴을 제품 아이콘과 함께 쓰고, 1,920픽셀 PNG와 소셜 게시물용 애니메이션 GIF로 내보냅니다. GIF를 만들려면 먼저 FFmpeg와 Puppeteer를 설치해야 합니다.
이벤트 기반 시스템을 문서화하는 SRE 리드
토픽, 컨슈머, 데드 레터 큐를 그림 하나에 보여 주기
스타일 11은 토픽을 레일로, 프로세서를 역으로 그리고, 선언된 DLQ를 표시합니다. 오프라인 HTML 내보내기로 아무것도 호스팅하지 않고 독자가 화면을 이동하고 확대할 수 있습니다.
도입 전 확인할 점
- 설정
- `npx -y skills@1.5.17 add yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph --agent codex claude-code -g -y --copy`를 실행하거나, ~/.claude/skills 또는 ~/.agents/skills에 git clone합니다. Python 3.9+와 cairosvg가 필요하며, `fireworks.py doctor`로 선택 사항인 GIF 의존성을 확인합니다.
- 연동
- Agent Skills 형식을 통한 Claude Code와 Codex. 에이전트 없이도 작동하는 통합 CLI(render, validate, check, export-html, animate). cairosvg, rsvg-convert, 헤드리스 Chrome으로 렌더링합니다.
- 데이터와 개인정보
- README에는 호스팅 서비스에 대한 설명이 없습니다. 렌더링과 검사는 로컬에서 실행되고, 입력한 설명은 에이전트가 쓰는 모델에만 전달됩니다. MIT 라이선스이므로 상업적 사용에 제한이 없습니다.
- 대규모 사용 시 비용
- 무료입니다. 비용은 다이어그램당 최대 두 번의 수정과 이미지 재확인을 포함한 에이전트 토큰입니다. 다이어그램당 토큰 수치는 공개되어 있지 않습니다.
- 제한
- docs-as-code 워크플로용 텍스트 기반 다이어그램 소스가 없습니다. 스타일 8은 모델이 자유롭게 작성하며 생성기를 거치지 않습니다. rsvg-convert는 CSS를 빠뜨릴 수 있어 PNG는 cairosvg로 만들 때 가장 보기 좋습니다.
좋은 점
- 다이어그램을 완료로 치기 전에 검증기와 PNG 재확인을 거침
- 전체 UML과 ER을 포함한 14가지 다이어그램 유형
- AI 시스템 패턴(RAG, 멀티 에이전트, 도구 호출) 내장
- SVG, PNG, 오프라인 HTML, GIF 출력
아쉬운 점
- 풀 리퀘스트에서 비교할 수 있는 텍스트가 아닌 이미지 출력
- 중첩된 설치 경로를 지정해야 하고 npm 패키지가 뒤처짐
- GIF 내보내기에 FFmpeg, Chrome, Puppeteer 필요
- 관리자 한 명, 9월 이후 코드 변경이 거의 없음
추천 대상
Claude Code나 Codex 안에서 슬라이드, 게시물, 설계 리뷰용으로 잘 다듬은 아키텍처 다이어그램이 필요한 엔지니어와 테크니컬 라이터.
fireworks-tech-graph 대안
fireworks-tech-graph: 자주 묻는 질문
- fireworks-tech-graph, 쓸 만한 가치가 있습니까?
- 결과 를 넘기기 전에 자체적으로 도형 배치를 검사하는 다이어그램 스킬로, 슬라이드와 게시물에 잘 맞습니다. 다만 문서 안에 두고 관리할 다이어그램에는 여전히 Mermaid가 낫습니다. 평점은 5점 만점에 3.9점입니다.
- fireworks-tech-graph의 가격은 얼마입니까?
- 무료 오픈소스(MIT)입니다. 이미 쓰고 있는 에이전트 구독이나 API로 실행됩니다.
- fireworks-tech-graph의 단점은 무엇입니까?
- 풀 리퀘스트에서 비교할 수 있는 텍스트가 아닌 이미지 출력; 중첩된 설치 경로를 지정해야 하고 npm 패키지가 뒤처짐; GIF 내보내기에 FFmpeg, Chrome, Puppeteer 필요; 관리자 한 명, 9월 이후 코드 변경이 거의 없음.
- fireworks-tech-graph에 적합한 사람은 누구입니까?
- Claude Code나 Codex 안에서 슬라이드, 게시물, 설계 리뷰용으로 잘 다듬은 아키텍처 다이어그램이 필요한 엔지니어와 테크니컬 라이터.
- 팀이나 프로덕션 환경에서 fireworks-tech-graph의 비용은 얼마입니까?
- 무료입니다. 비용은 다이어그램당 최대 두 번의 수정과 이미지 재확인을 포함한 에이전트 토큰입니다. 다이어그램당 토큰 수치는 공개되어 있지 않습니다.
- fireworks-tech-graph에 회사 데이터를 맡겨도 안전합니까?
- README에는 호스팅 서비스에 대한 설명이 없습니다. 렌더링과 검사는 로컬에서 실행되고, 입력한 설명은 에이전트가 쓰는 모델에만 전달됩니다. MIT 라이선스이므로 상업적 사용에 제한이 없습니다.
- fireworks-tech-graph의 가장 좋은 대안은 무엇입니까?
- 저희가 리뷰한 것 중 가장 가까운 대안은 Anatomy, Anthropic Skills 및 Impeccable입니다.
답변 확인일: 2026년 10월 26일.