직접 다이어그램을 그리는 일을 멈추세요. 시스템을 영어 또는 중국어로 설명하기만 하면, 수 초 내에 출판 가능한 수준의 SVG + PNG 기술 다이어그램을 얻을 수 있습니다.

fireworks-tech-graph는

자연어 설명을 세련된 SVG 다이어그램으로 변환한 다음, cairosvg(권장)를 통해 고해상도 PNG로 내보냅니다. 대안으로 rsvg-convert 및 puppeteer를 사용할 수 있습니다. 이 프로젝트는 7가지 시각적 스타일과 AI/에이전트 (Agent) 도메인 패턴(RAG, Agentic Search, Mem0, Multi-Agent, Tool Call 흐름)에 대한 깊은 지식을 갖추고 있으며, 14가지 모든 UML 다이어그램 유형을 완벽하게 지원합니다.

사용자: "Mem0 메모리 아키텍처 다이어그램을 생성해줘, 다크 스타일로"
→ 기술 분류: Memory Architecture Diagram, Style 2
→ 스윔레인(swim lanes), 실린더(cylinders), 의미론적 화살표(semantic arrows)가 포함된 SVG 생성
...

이 프로젝트는 더 넓은 역량을 증명하는 표면이기도 합니다. 즉, 모호한 AI/개발 도구 (devtool) 워크플로우를 검증, 문서화, 내보내기 경로 및 제품 수준의 완성도를 갖춘 제약 조건이 있는 재사용 가능한 시스템으로 변환하는 것입니다.

만약 당신이 에이전트 인프라 (agent infrastructure), AI IDE, 내부 코파일럿 (internal copilots), 개발자 도구, 기술 문서 시스템 또는 응용 AI 워크플로우 제품을 구축하고 있다면, 범위가 정해진 유료 스프린트 (paid sprints), 디자인 파트너 작업, 그리고 파운딩 엔지니어 (founding engineer) 논의에 열려 있습니다.

• 창업자 프로필: https://bradzhang.dev/en
• 상업적 사례 연구: https://bradzhang.dev/en/case-studies/fireworks-tech-graph
• 협업 문의: https://bradzhang.dev/en/work-with-me

모든 샘플은 cairosvg를 통해 너비 1920px (2× retina)로 내보내졌습니다. PNG는 손실이 없으며 기술 다이어그램에 적합한 선택입니다. 텍스트와 선에 JPEG 압축 아티팩트(artifacts)가 없는 날카로운 가장자리를 제공합니다.

Mem0 메모리 아키텍처 — 흰색 배경, 의미론적 화살표, 계층형 메모리 시스템

Tool Call 흐름 — 어두운 배경, 네온 액센트, 모노스페이스 폰트

마이크로서비스 아키텍처 — 짙은 파란색 배경, 그리드 라인, 사이언(cyan) 스트로크

에이전트 메모리 유형 — 미니멀한 화이트, 단일 액센트 컬러

멀티 에이전트 협업 — 어두운 그라데이션 배경, 프로스티드 글래스(frosted glass) 카드

시스템 아키텍처 (System Architecture) — 따뜻한 크림색 배경 (#f8f6f3), Anthropic 브랜드 컬러, 깔끔하고 전문적인 미학

API 통합 흐름 (API Integration Flow) — 순백색 배경, OpenAI 브랜드 팔레트, 현대적인 미니멀리즘 디자인

모델이 저장소(repo)의 가장 강력한 회귀 테스트(regression-tested) 통과 출력값에 가깝게 유지되기를 원할 때는 다음과 같은 프롬프트를 사용하세요:

스타일 1(Flat Icon)로 Mem0 메모리 아키텍처 다이어그램을 그려줘.
네 개의 수평 섹션(입력 계층(Input Layer), 메모리 관리자(Memory Manager), 저장 계층(Storage Layer), 출력 / 검색(Output / Retrieval))을 사용해.
User, AI App / Agent, LLM, mem0 Client, Memory Manager, Vector Store, Graph DB, Key-Value Store, History Store, Context Builder, Ranked Results, Personalized Response를 포함해줘.
...

스타일 2(Dark Terminal)로 도구 호출(tool call) 흐름 다이어그램을 그려줘.
User query, Retrieve chunks, Generate answer, Knowledge base, Agent, Terminal, Source documents, Grounded answer를 보여줘.
터미널 크롬(terminal chrome), 네온 액센트, 모노스페이스 타이포그래피를 사용하고, 검색(retrieval), 합성(synthesis), 임베딩 업데이트(embedding update)를 위해 의미론적 화살표(semantic arrows)를 사용해.

스타일 3(Blueprint)로 마이크로서비스 아키텍처(microservices architecture) 다이어그램을 그려줘.
01 // EDGE, 02 // APPLICATION SERVICES, 03 // DATA + EVENT INFRA, 04 // OBSERVABILITY와 같이 번호가 매겨진 엔지니어링 섹션을 만들어.
Client Apps, API Gateway, Auth / Policy, 세 개의 서비스, Event Router, Postgres, Redis Cache, Warehouse, Metrics / Traces를 포함해줘.
...

스타일 4(Notion Clean)로 에이전트 메모리 유형(agent memory types) 다이어그램을 그려줘.
중앙의 에이전트 코어(Agent core)를 중심으로 감각 메모리(Sensory Memory), 작업 메모리(Working Memory), 일화 메모리(Episodic Memory), 의미론적 메모리(Semantic Memory), 절차적 메모리(Procedural Memory)를 비교해.
미니멀한 화이트 레이아웃, 중립적인 테두리, 화살표를 위한 하나의 액센트 컬러, 그리고 각 메모리 유형에 대한 짧은 저장 태그(storage tags)를 사용해.

스타일 5(Glassmorphism)로 멀티 에이전트 협업(multi-agent collaboration) 다이어그램을 그려줘.
Mission Control, Specialist Agents, Synthesis의 세 섹션을 사용해.
User brief, Coordinator Agent, Research Agent, Coding Agent, Review Agent, Shared Memory, Synthesis Engine, Final response를 포함해줘.
...

스타일 6 (Claude Official)로 시스템 아키텍처 다이어그램을 그리세요.
왼쪽 레이어 레이블을 사용하세요: Interface Layer, Core Layer, Foundation Layer.
Client Surface, Gateway, Task Planner, Model Runtime, Policy Guardrails, Memory Store, Tool Runtime, Observability, 그리고 Registry를 포함하세요.
...

스타일 7 (OpenAI Official)로 API 통합 흐름 다이어그램을 그리세요.
세 가지 섹션을 사용하세요: Entry, Model + Tools, 그리고 Delivery.
Application, OpenAI SDK Layer, Prompt Builder, Model Runtime, Tool Calls, Response Formatter, Observability, 그리고 Release Control을 포함하세요.
...

7가지 시각적 스타일— 깔끔한 화이트 문서부터 다크 네온, 프로스티드 글래스(frosted glass), 그리고 공식 브랜드 스타일까지
실행 가능한 스타일 시스템— 스타일 가이드가 마크다운(markdown)에 문서화될 뿐만 아니라 생성기에 인코딩되어 있음
14가지 다이어그램 유형— 전체 UML 지원 (Class, Component, Deployment, Package, Composite Structure, Object, Use Case, Activity, State Machine, Sequence, Communication, Timing, Interaction Overview, ER Diagram) 및 AI/Agent 도메인 다이어그램 포함
AI/Agent 도메인 패턴— RAG, Agentic Search, Mem0, Multi-Agent, Tool Call 등이 내장됨
의미론적 도형 어휘 (Semantic shape vocabulary)— LLM = 이중 테두리 사각형, Agent = 육각형, Vector Store = 링이 있는 실린더
의미론적 화살표 시스템 (Semantic arrow system)— 색상 + 점선 패턴이 의미를 인코딩 (쓰기 vs 읽기 vs 비동기(async) vs 루프(loop))
제품 아이콘— OpenAI, Anthropic, Pinecone, Weaviate, Kafka, PostgreSQL 등 브랜드 색상이 적용된 40개 이상의 제품
스윔레인 그룹화 (Swim lane grouping)— 복잡한 아키텍처를 위한 자동 레이어 레이블링
SVG + PNG 출력— 편집을 위한 SVG, 임베딩을 위한 1920px PNG
렌더러 친화적— 순수 인라인 SVG 사용, 외부 폰트 호출 없음; cairosvg, rsvg-convert, headless Chrome에서 깔끔하게 렌더링됨

npx skills add yizhiyanhua-ai/fireworks-tech-graph

이 스킬은 GitHub 저장소에서 설치됩니다. npm 패키지 페이지는 공개 패키지/배포 페이지입니다:

skills add 사용 시 npm 패키지 이름을 사용하지 마세요. CLI가 설치 소스를 GitHub/로컬 경로로 해석하기 때문입니다.

npx skills add yizhiyanhua-ai/fireworks-tech-graph --force -g -y

이 스킬의 최신 버전을 가져오려면 add --force를 다시 실행하세요.

또는 직접 클론(clone)하세요:

git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph

하나의 PNG 렌더러(renderer)를 선택하세요 (cairosvg 권장):

# 권장: cairosvg (CSS 지원이 가장 좋음)
pip install cairosvg
# 대체: rsvg-convert (시스템 패키지; CSS / <foreignObject>가 누락될 수 있음)
...

Mermaid는 마크다운(markdown) 내에서 빠르게 인라인 다이어그램을 그리는 데 훌륭합니다. draw.io는 수동으로 다듬는 데 좋습니다. fireworks-tech-graph는 DSL 구문을 작성하거나 GUI를 클릭할 필요 없이, 시스템을 설명하고 즉시 세련된 다이어그램을 얻도록 최적화되어 있습니다.

이 스킬은 다음 키워드에서 자동으로 트리거됩니다:

generate diagram / draw diagram / create chart / visualize
architecture diagram / flowchart / sequence diagram / data flow

Draw a RAG pipeline flowchart
(RAG 파이프라인 플로우차트 그려줘)

Generate an Agentic Search architecture diagram
(Agentic Search 아키텍처 다이어그램 생성해줘)

Draw a microservices architecture diagram, style 2 (dark terminal)
(마이크로서비스 아키텍처 다이어그램 그려줘, 스타일 2 (다크 터미널))

Draw a multi-agent collaboration diagram --style glassmorphism
(멀티 에이전트 협업 다이어그램 그려줘 --style glassmorphism)

Generate a Mem0 architecture diagram, output to ~/Desktop/
(Mem0 아키텍처 다이어그램을 생성해서 ~/Desktop/에 저장해줘)

Create a tool call flow diagram --output /tmp/diagrams/
(도구 호출 흐름 다이어그램을 생성해줘 --output /tmp/diagrams/)

Compare Agentic RAG vs standard RAG in a feature matrix, Notion clean style
(Agentic RAG와 표준 RAG를 기능 매트릭스로 비교해줘, Notion의 깔끔한 스타일로)

→ 비교 매트릭스: 검색 전략(retrieval strategy), 에이전트 루프(agent loop), 도구 사용(tool use)을 포함한 RAG vs Agentic RAG 비교

vector store, graph DB, KV store, 그리고 memory manager를 포함한 Mem0 메모리 아키텍처 다이어그램 생성

→ 스윔레인(swim lanes)이 포함된 메모리 아키텍처: Input → Memory Manager → Storage tiers → Retrieval

Multi-Agent 다이어그램 그리기: Orchestrator가 3개의 SubAgent(search / compute / code execution)를 배정하고, 결과가 집계됨

→ 육각형, 도구 계층(tool layers), 그리고 결과 집계(result aggregation)가 포함된 에이전트 아키텍처

Tool Call 실행 흐름 시각화: LLM → Tool Selector → Execution → Parser → LLM으로 복귀

→ 도구 호출 사이클을 보여주는 결정 루프(decision loop)가 포함된 플로우차트(flowchart)

5가지 에이전트 메모리 유형 그리기: Sensory, Working, Episodic, Semantic, Procedural

→ 감각(sensory)부터 절차(procedural)까지의 메모리 계층을 보여주는 마인드맵 또는 계층형 아키텍처

마이크로서비스 아키텍처 그리기: Client → API Gateway → [User Service / Order Service / Payment Service] → PostgreSQL + Redis

→ 수평 계층과 서비스 클러스터별 스윔레인(swim lanes)이 포함된 아키텍처 다이어그램

데이터 파이프라인 다이어그램 생성: Kafka → Spark processing → S3에 쓰기 → Athena 쿼리

→ 라벨이 지정된 화살표(stream / batch / query)가 포함된 데이터 흐름 다이어그램

Kubernetes 배포 그리기: Ingress → Service → [Pod × 3] → ConfigMap + PersistentVolume

→ 네임스페이스(namespace)별 점선 컨테이너와 트래픽 흐름을 위한 실선 화살표가 포함된 아키텍처

OAuth2 권한 부여 코드 흐름(authorization code flow) 시퀀스 다이어그램 그리기: User → Client → Auth Server → Resource Server

→ 수직 생명선(lifelines)과 활성화 박스(activation boxes)가 포함된 시퀀스 다이어그램

ChatGPT 플러그인 호출 시퀀스 다이어그램 그리기

→ 시퀀스: User → ChatGPT → Plugin Manifest → API → Response chain

AI 앱을 위한 출시 전 QA 플로우차트 그리기: Code Review → Security Scan → Performance Test → Manual Approval → Deploy

→ 다이아몬드 형태의 결정 노드(decision nodes)와 병렬 분기(parallel branches)가 포함된 플로우차트

기능 비교 매트릭스 생성: RAG vs Fine-tuning vs Prompt Engineering

→ 비용(cost), 지연 시간(latency), 정확도(accuracy), 유연성(flexibility)에 따라 체크/미체크 셀로 구성된 비교 매트릭스

LLM 애플리케이션 기술 스택 시각화: 파운데이션 모델 (foundation model)부터 SDK, 앱 프레임워크 (app framework), 배포 (deployment)까지

→ 모델 계층 (model layer)에서 제품 계층 (product layer)까지의 계층형 아키텍처 (layered architecture) 또는 마인드맵 (mind map)

AI 에이전트 (AI Agent) 역량 지도 작성: 인지 (Perception) / 메모리 (Memory) / 추론 (Reasoning) / 행동 (Action) / 학습 (Learning)

→ 중앙에 "AI Agent" 노드가 있고 5개의 방사형 가지가 있는 마인드맵 (mind map)

각 스타일은 references/ 디렉토리에 정확한 컬러 토큰 (color tokens), SVG 패턴, 템플릿이 포함된 전용 참조 파일을 가지고 있습니다.

생성기는 또한 containers, 의미론적 nodes[].kind, arrows[].flow, 그리고 명시적인 포트 앵커 (port anchors)와 같이 스타일을 인식하는 구조 필드 (structure fields)를 사용하여 샘플 수준의 레이아웃을 더욱 일관되게 재현할 수 있습니다.

스타일별 정교한 마무리를 위한 유용한 고효율 필드:

• 전체 스타일을 포크 (fork)하지 않고 제목 정렬이나 팔레트 토큰 (palette tokens)을 조정하기 위한 style_overrides
• 01 // EDGE와 같은 블루프린트 (blueprint) 스타일의 번호가 매겨진 섹션 헤더를 위한 containers[].header_prefix / containers[].header_text
• Claude 스타일의 왼쪽 레이어 라벨을 위한 containers[].side_label
• 터미널 / 문서 크롬 (chrome)을 위한 window_controls, meta_left, meta_center, meta_right
• 스타일 3의 엔지니어링 타이틀 박스를 위한 blueprint_title_block

UML 다이어그램 (UML Diagrams)의 경우: