Community코딩 & 개발github.com

LizardLiang/interactive-diagram

대화형 기술 다이어그램(시스템/아키텍처/시퀀스/플로우)을 하나의 독립적인 HTML 파일로 생성합니다. Claude 스킬/플러그인 — 설치: npx skills add LizardLiang/interactive-diagram

interactive-diagram란 무엇인가요?

LizardLiang/interactive-diagram 스킬은 개발자와 AI 에이전트(Claude Code, Cursor 등)가 시스템 아키텍처, 시퀀스, 플로우 등 기술 다이어그램을 단일 HTML 파일로 생성할 수 있게 해줍니다. 이 스킬은 Mermaid.js 같은 라이브러리를 활용해 상호작용이 가능한 다이어그램을 만들며, 별도의 서버나 외부 의존성 없이 브라우저에서 바로 렌더링됩니다. 시스템 설계 문서, 기술 블로그, 프레젠테이션 자료에 유용하며, `npx skills add` 명령어로 쉽게 설치할 수 있습니다. 생성된 HTML은 완전히 독립적이므로 공유와 배포가 간편하고, 복잡한 기술 개념을 시각적으로 명확하게 전달하는 데 최적화되어 있습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add LizardLiang/interactive-diagram

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

interactive-diagram은(는) 무엇을 하나요?

대화형 기술 다이어그램(시스템/아키텍처/시퀀스/플로우)을 하나의 독립적인 HTML 파일로 생성합니다. Claude 스킬/플러그인 — 설치: npx skills add LizardLiang/interactive-diagram

관련 스킬