fireworks-tech-graphとは？
fireworks-tech-graph は、SKILL.md と Python スクリプトからなる Agent Skill で、Claude Code や Codex が平易な英語や中国語の説明から技術的な図を描けるようにします。エージェントは依頼を分類し、バージョン付きの JSON で図の記述を書き、同梱のジェネレーターが矢印の経路を決めて、SVG、1,920 ピクセルの PNG、オフラインで動くインタラクティブな HTML ページ、またはアニメーション GIF にレンダリングします。
UML 一式（クラス図、シーケンス図、状態遷移図、配置図など）と ER 図を含む 14 種類の図に対応し、RAG、マルチエージェント構成、ツール呼び出しの流れ、Mem0 風のメモリといった AI システム向けの既製のパターンもあります。視覚スタイルは 12 種類で、11 はジェネレーターが描き、1 つはモデルが自由に書きます。40 以上の製品のアイコンがあります。
MIT ライセンスで、主に Python で書かれており、作者は Brad Zhang（yizhiyanhua-ai）です。バージョン 1.2.0 は 2026 年 7 月 17 日に出ました。最後のコードの変更は 9 月 5 日で、前回確認したときのリポジトリのスターは約 11,800 でした。
fireworks-tech-graphは使う価値があるか？
fireworks-tech-graph をインストールする価値がある理由は 1 つです。モデルが最初に描いたものを信用しないことです。スキルはエージェントに、スキーマで検証される中間の記述を書かせ、決定的なプランナーがエッジの経路を決め、結果は構造上のチェック（XML、マーカー、重なり、交差）を通過しなければなりません。その後エージェントが PNG を読み返し、的を絞った修正を最大 2 回行います。ショーケースの契約では、交差ゼロ、エッジあたりの折れ曲がり 2 回以下、ノード間 40 ピクセル以上を求めています。エージェントが画像を読めない場合は、合格と主張せずに `visual_review: skipped` と報告します。
出力が想定しているのは、生きたドキュメントではなく、スライド、ブログ記事、設計レビューです。図は SVG と PNG で出力され、Mermaid よりはるかに見栄えが良い一方、プルリクエストでテキストとして差分を取ったり編集したりはできません。スタイル 9 は C4 のコンテナのレビューを作り、スタイル 10 から 12 はマルチリージョンのデプロイ、イベントのトポロジー、ゴールデンシグナルのダッシュボードを扱っており、プラットフォームチームが実際に描くものに近くなっています。スタイルのうち 2 つは Claude と OpenAI の独自の見た目を模倣しており、社内の資料なら問題ありませんが、公開ページでは疑問が残ります。
インストールには粗い部分があります。README は、リポジトリに対して素の `npx skills add` を実行すると間違った SKILL.md を拾うことがあると警告しているので、入れ子のパスを指定する必要があります。また npm パッケージ（1.0.4）は GitHub のリリースより遅れています。PNG の書き出しには cairosvg か rsvg-convert が必要で、GIF にはスキルのコピーごとに FFmpeg、Chrome、Puppeteer をインストールする必要があります。
メンテナンスは 1 人によるものです。コントリビューターは 12 人、未解決の issue は 1 件で、9 月 5 日以降のコミットは README のスポンサー欄の編集だけです。README では作者の有料コンサルティングも宣伝しています。長いセッションをかけて 1 つのインタラクティブな説明図を作る Anatomy と比べると、このスキルはより速く、より一般的です。箱、矢印、スイムレーンを、きちんと描きます。
真価を発 揮する場面
設計レビューを準備するスタッフエンジニア
draw.io で午後を費やさずに、提案するチェックアウトのアーキテクチャを描く
サービス名とプロトコルを指定して、スタイル 9 の C4 コンテナ図を Claude Code に依頼します。スキルは SVG と PNG をレンダリングし、検証結果を報告します。費用はエージェントのセッション 1 回分です。修正は、箱をドラッグするのではなくプロンプトを出し直すことになります。
AI インフラ企業のデベロッパーアドボケイト
製品発表のブログ記事用に、RAG やマルチエージェントのパイプラインを図解する
組み込みの RAG かマルチエージェントのパターンを製品アイコン付きで使い、1,920 ピクセルの PNG と、SNS 投稿用のアニメーション GIF を書き出します。GIF の経路には、先に FFmpeg と Puppeteer のインストールが必要です。
イベント駆動のシステムを文書化する SRE のリーダー
トピック、コンシューマー、デッドレターキューを 1 枚の図に示す
スタイル 11 はトピックをレール、プロセッサーを駅として描き、宣言した DLQ も表示します。オフライン HTML の書き出しなら、何もホストせずに読者がパンとズームを使えます。
導入前に確認すること
- 導入
- `npx -y skills@1.5.17 add yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph --agent codex claude-code -g -y --copy` を実行するか、~/.claude/skills か ~/.agents/skills に git clone します。Python 3.9+ と cairosvg が必要です。`fireworks.py doctor` で GIF 用のオプションの依存関係を確認できます。
- 連携
- Agent Skills の形式による Claude Code と Codex。エージェントなしでも動く統合 CLI（render、validate、check、export-html、animate）。cairosvg、rsvg-convert、ヘッドレス Chrome でレンダリングします。
- データとプライバシー
- README にホスト型サービスの記載はありません。レンダリングとチェックはローカルで行われ、入力した説明はエージェントが使うモデルにだけ送られます。MIT ライセンスなので、商用利用に制限はありません。
- 大規模利用時のコスト
- 無料です。費用はエージェントのトークンで、図ごとに最大 2 回の修正と画像の読み返しが含まれます。図ごとのトークン数は公開されていません。
- 制限
- docs-as-code のワークフロー向けのテキストベースの図のソースはありません。スタイル 8 はモデルが自由に書くため、ジェネレーターを通りません。rsvg-convert は CSS を落とすことがあるので、PNG は cairosvg を使うと最もきれいに仕上がります。
良い点
- 図が完成とみなされる前に、検証器と PNG の読み返しを通る
- UML 一式と ER 図を含む 14 種類の図
- AI システムのパターン（RAG、マルチエージェント、ツール呼び出し）を内蔵
- SVG、PNG、オフライン HTML、GIF の出力
気になる点
- 出力は画像で、プルリクエストで差分を取れるテキストではない
- 入れ子のインストールパスが必要で、npm パッケージが遅れている
- GIF の書き出しには FFmpeg、Chrome、Puppeteer が必要
- メンテナーは 1 人で、9 月以 降コードの変更がほとんどない
おすすめの人
Claude Code や Codex の中から、スライド、記事、設計レビュー用の仕上がりの良いアーキテクチャ図を作る必要があるエンジニアとテクニカルライター。
fireworks-tech-graphの代替
fireworks-tech-graph：よくある質問
- fireworks-tech-graphは使う価値があるか？
- 引き渡す前に自分で図形を検証する図のスキルで、スライドや記事に最適です。ただし、ドキュメントの中で生き続ける図には、今も Mermaid の方が勝ります。 評価は5点満点中3.9点です。
- fireworks-tech-graphの料金は？
- 無料のオープンソース（MIT）です。すでに使っているエージェントの契約や API で動きます。
- fireworks-tech-graphの欠点は？
- 出力は画像で、プルリクエストで差分を取れるテキストではない; 入れ子のインストールパスが必要で、npm パッケージが遅れている; GIF の書き出しには FFmpeg、Chrome、Puppeteer が必要; メンテナーは 1 人で、9 月以降コードの変更がほとんどない.
- fireworks-tech-graphは誰に向いているか？
- Claude Code や Codex の中から、スライド、記事、設計レビュー用の仕上がりの良いアーキテクチャ図を作る必要があるエンジニアとテクニカルライター。
- チームや本番環境でfireworks-tech-graphを使うと費用はいくらか？
- 無料です。費用はエージェントのトークンで、図ごとに最大 2 回の修正と画像の読み返しが含まれます。図ごとのトークン数は公開されていません。
- fireworks-tech-graphは企業データを扱っても安全か？
- README にホスト型サービスの記載はありません。レンダリングとチェックはローカルで行われ、入力した説明はエージェントが使うモデルにだけ送られます。MIT ライセンスなので、商用利用に制限はありません。
- fireworks-tech-graphの代わりになるものは？
- 当サイトでレビューした中で最も近い代替はAnatomy, Anthropic Skills 、 Impeccableです。
回答確認日：2026年10月26日