Community程式設計與開發github.com

LizardLiang/interactive-diagram

將系統架構圖、時序圖、流程圖等技術圖表輸出為單一自包含的 HTML 檔案。安裝方式:npx skills add LizardLiang/interactive-diagram

interactive-diagram 是什麼?

這是一個 Claude 技能,可讓 AI 代理將技術圖表(如系統架構圖、時序圖或流程圖)直接生成為互動式、獨立且可嵌入的 HTML 文件。該技能支援 Claude Code、Cursor 和 Codex 等平台,透過單一指令即可輸出無需外部依賴的 HTML 檔案,方便開發者直接在瀏覽器中檢視或分享。其運作原理是接受使用者的需求描述,然後產生一個包含繪圖邏輯(如 Mermaid 或自訂 SVG)的完整 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 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

interactive-diagram 是做什麼的?

將系統架構圖、時序圖、流程圖等技術圖表輸出為單一自包含的 HTML 檔案。這是一個 Claude 技能/外掛程式 — 安裝方式:npx skills add LizardLiang/interactive-diagram

相關技能