技能包

fireworks-tech-graph:用自然語言生成核對過的 SVG/PNG 技術圖

適合要在 Codex 或 Claude Code 裡把系統描述變成技術圖的人,但會寫 SVG/PNG 檔案,生成前先確認輸出路徑。

官方來源 · fireworks-tech-graph

安裝

python3 "$SKILL_ROOT/scripts/fireworks.py" version

適合誰

如果你要用自然語言描述一套架構或流程,並拿到經過幾何核對的 SVG,以及高解析度 PNG,這個 Agent Skill 更合適。同一套技能在 Codex 和 Claude Code 裡不用改就能用。它還可以做經過校驗的 SVG 到 GIF 語義動畫,以及離線可互動 HTML。

你需要已經能在上述編碼助手裡呼叫該技能,並且本機有 python3,能找到 $SKILL_ROOT/scripts/fireworks.py。只想手動畫圖、不打算讓 Agent 落盤的人,收益有限。頁面點名的是 Codex 與 Claude Code,沒有再寫其他客戶端;也不要把倉庫標題裡可能更舊的風格數量,覆蓋正文裡的 11 個產生器風格加 1 個 AI 撰寫風格(Dark Luxury)。

3 分鐘完成第一次嘗試

頁面沒有另給一條市場安裝命令。先做唯讀核對:在技能根目錄已就緒時執行

python3 "$SKILL_ROOT/scripts/fireworks.py" version

成功訊號是命令跑通並給出版本資訊。這不寫圖檔。若 $SKILL_ROOT 還不存在,先停下來:可用頁面文字沒有寫如何把技能裝進 Codex 或 Claude Code,不要自行補一條安裝器。

版本通過後,再做一次受控出圖。官方示例是使用者說 “Generate a Mem0 memory architecture diagram, dark style”。技能會分類為 Memory Architecture Diagram、Style 2,生成帶泳道、圓柱和語義箭頭的 SVG,再匯出 1920px PNG,並報告 mem0-architecture.svg / mem0-architecture.png。寫檔前讓 Agent 複述這兩個路徑,你確認後再生成。不要一上來就做 GIF 或 HTML:可用頁面文字提到這些產物,但沒有給出對應子命令。

使用案例

案例一:按自然語言出架構圖。沿用上面的 Mem0 示例即可驗證整條鏈路:分類 → SVG → 1920px PNG → 報告檔名。它沒有寫 Style 2 的全部視覺參數,也沒有寫 Mem0 領域知識從哪來。因此驗收看:分類結果被說出,並且那兩個檔名出現在報告裡。若 Agent 開始改你的業務程式,就已經離開出圖任務。

案例二:給已有 SVG 匯出 PNG。官方 CLI 是

python3 "$SKILL_ROOT/scripts/fireworks.py" export-png diagram.svg diagram.png --width 1920

這會覆蓋或新建 diagram.png。先確認輸入 SVG 存在,以及輸出路徑可以寫。需要避免文字被裁切時,向設定加入 "text_policy": "strict":它會在寫出前拒絕可見截斷,報告裡保留完整源標籤並說明如何恢復;中文描述會用到可用的第二行。可用頁面文字沒有給出完整 JSON 檔名。所以你只能確認有這個欄位和中文第二行,不要編其他策略值。

使用邊界

風格數量以正文為準:11 個產生器風格,外加 Dark Luxury。另有四類偏工程的風格,為 C4 評審、雲端部署、事件流和可靠性排查提供可執行約定,以及深度 AI/Agent 領域模式和全部 14 種 UML 圖。頁面沒有列出 14 種 UML 的名稱,也沒有列出那四個工程風格的短名。缺了名字就不要點名去調。

可複製的命令只有 version 和 export-png。GIF、互動 HTML 被寫成能力,但沒有命令列。不要並列第二條安裝器。客戶端只寫到 Codex 與 Claude Code。

第一次停在 version 或一張已確認路徑的 PNG。任何批次出圖、改 text_policy 之外的未知欄位、或生成 GIF/HTML 的動作,都要先讓 Agent 說明依據和將寫檔案,你確認後再繼續。