사용자가 아키텍처, 데이터 흐름, 순서도, 시퀀스, 에이전트/메모리, 개념 맵 등 기술 다이어그램을 만들고 SVG+PNG로 내보낼 수 있도록 지원합니다.
이 스킬은 사용자의 시스템/흐름 설명을 바탕으로 다양한 기술 다이어그램을 자동 생성하고 SVG와 PNG 형식으로 내보내는 기능을 제공합니다. 아키텍처 다이어그램, 데이터 흐름도, 순서도, 시퀀스 다이어그램, 에이전트/메모리 구조도, 개념 맵 등 엔지니어링 및 개발 관련 시각화 작업에 유용합니다. '그림 그려줘', '아키텍처 다이어그램 생성', '시각화' 등의 트리거를 통해 활성화되며, AI 어시스턴트(Claude Code, Cursor 등)와 함께 사용자 요구를 다이어그램으로 변환합니다. 이 스킬은 SKILL.md 문서 기반으로 동작하며, 사용자 프롬프트를 다이어그램 정의 언어(D2, Mermaid 등)로 변환한 후 렌더링 엔진을 통해 SVG/PNG 출력물을 생성합니다.
npx skills add https://github.com/yizhiyanhua-ai/fireworks-tech-graph/tree/main/skills/fireworks-tech-graphInstalled? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
사용자가 아키텍처, 데이터 흐름, 순서도, 시퀀스, 에이전트/메모리, 개념 맵 등 모든 기술 다이어그램을 만들고 SVG+PNG로 내보내려 할 때 사용합니다. 다음 트리거에 반응합니다: "画图" "帮我画" "生成图" "做个图" "架构图" "流程图" "可视化一下" "出图" "generate diagram" "draw diagram" "visualize" 또는 사용자가 시각화를 원하는 모든 시스템/흐름 설명.
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.