fireworks-tech-graphとは｜自然言語から8スタイルの技術ダイアグラムを生成するOSS

技術記事やLP、社内ドキュメントで使う構成図は、毎回それなりに重い作業です。 描画ツールを開いて図形を並べ、配色を整え、書き出す——この一連を「言葉で指示するだけ」に変えるのがfireworks-tech-graphです。 しかもMermaidのような線画ではなく、公式ブランドカラーやアイコンを備えた本番品質の図を出力します。

そもそもClaude Skillが何か（SKILL.mdの構造・スコープ・自動呼び出し）を先に押さえたい人は、Claude Skillsを徹底解説｜スキルはフォルダ——Anthropicエンジニアが明かした仕組みと使い方 を先に読むと、本記事の「なぜ言葉で図が出るのか」が腑に落ちます。本記事は、その仕組みの上に乗る実用スキルの一つとしてfireworks-tech-graphを読み解きます。

まずは出力サンプルを見るのが早いので、デフォルトのFlat Iconスタイルで生成された図を冒頭に置きます。

fireworks-tech-graphとは何か——言葉で本番品質の技術図を起こすOSS

fireworks-tech-graphは、英語または中国語の説明文から、出版品質のSVGおよびPNGの技術ダイアグラムを生成するツールです。 リポジトリのキャッチコピーは率直で、READMEは冒頭に 「Stop drawing diagrams by hand.（手で図を描くのはもうやめよう）」 と掲げています。 yizhiyanhua-ai氏が2026年4月10日に公開し、ライセンスはMIT。実装言語はPythonで、2026年6月時点でスター7,498・フォーク652という勢いのあるプロジェクトです。 公開からおよそ2か月でこの規模に達しているのは、「言葉で本番品質の図が出る」という体験が、図づくりに悩む多くの開発者の実感に刺さったことの表れでしょう。 フォーク数が600を超えている点も、単に眺めて終わりではなく、自分の環境やスタイルに合わせて拡張しようとする層が一定数いることを示しています。

このOSSが特徴的なのは、配布形態がClaude Skillである点です。 anthropics/skills に代表されるスキル仕様に準拠し、~/.claude/skills/ 配下に置くことでClaude Codeから呼び出せます。 ユーザーが「RAGパイプラインの図を描いて」と頼むと、スキルが起動して図形配置・配色・レイアウト・SVG/PNG書き出しまでを一気通貫で行います。 つまり描画ツールのGUIを一切触らず、会話の流れの中で構成図が完成します。

背景には「ダイアグラム・アズ・コード」と呼ばれる流れがあります。 MermaidやPlantUMLのように、図をテキストで定義してバージョン管理する考え方です。 fireworks-tech-graphはその発想をさらに一歩進め、テキスト記法すら書かず「自然言語の意図」を入力にします。 記法を覚える学習コストが消え、図づくりの入口が「何を伝えたいか」だけになるわけです。 これは、Claude Codeのようなエージェントが日常の開発フローに入り込んだからこそ成立する作り方だといえます。

もう一つ見逃せないのが、ツールが「AIインフラの語彙」を内側に持っている点です。 RAG、Agentic Search、Mem0、マルチエージェントといった概念を名前で指定でき、典型的な構成を理解した状態から作図が始まります。 汎用の作図ツールに「ベクトルストアを置いて、矢印で繋いで……」と細かく指示する手間が要らず、ドメインの共通言語でやり取りできるのが効いてきます。

ここで言う「本番品質」は誇張ではありません。 READMEは出力をPNGに振る理由として 「PNGは可逆圧縮で、エッジが鮮明・JPEGの圧縮ノイズが出ないため技術図に最適」 と明記し、1920px幅の高解像度で書き出します。 ブログのアイキャッチやピッチデックにそのまま貼れる解像度です。

ギャラリー——8つのビジュアルスタイルを公式サンプルで見る

fireworks-tech-graphの目玉は、同じ「技術図」でも用途に合わせて選べる8スタイルです。 7つはテンプレート駆動、最後の1つはAIが意匠を起こすタイプで、READMEには各スタイルの公式サンプルが掲載されています。 ここでは代表的なサンプルを並べ、それぞれの狙いどころを添えます。 いずれも1920px幅のネイティブ解像度で書き出されており、縮小して記事に貼っても文字や線がにじまない品質です。 以下の画像はすべて公式READMEに掲載されたサンプルを引用しており、各図のキャプションに出典を明記しています。

このように、同じ「構成図」でも読者やチャネルによって最適な見せ方は変わります。 開発者向けの技術記事ならDark TerminalやBlueprint、ノンエンジニア向けのLPならNotion CleanやGlassmorphism、ブランド文脈に合わせたいならClaude/OpenAI公式風、といった具合に選び分けられるのが強みです。

8スタイルを眺めて気づくのは、いずれも「それっぽい雰囲気の装飾」ではなく、特定の場面に最適化されたデザインだという点です。 Dark Terminalは等幅フォントとネオンで開発者コミュニティの空気を、Blueprintはグリッドと青写真の質感でエンジニアリングの厳密さを、Glassmorphismはすりガラスの奥行きでプレゼンの華やかさを担います。 Claude OfficialとOpenAI Officialに至っては、それぞれのブランドカラーとトーンを再現しており、対象の文脈に図を溶け込ませたいときに重宝します。 スタイルは見栄えの問題に見えて、実は「誰に向けた図か」を一発で伝えるシグナルでもあるわけです。

何ができるか——14種のUMLとAIワークフロー特化の図

fireworks-tech-graphが扱える図は、いわゆる構成図だけではありません。 READMEによれば、クラス図・コンポーネント図・シーケンス図・状態遷移図・アクティビティ図を含む14種のUMLダイアグラムに対応します。 ソフトウェア設計のレビューや仕様書づくりで使う定番がひと通りそろっており、「状態遷移を図にして」「このAPIのシーケンス図を描いて」といった依頼にそのまま応えられます。 そのうえで、AIインフラに特化した図を理解する点がこのツールの個性です。

たとえば「ツールコールフロー」と指示すると、READMEが説明する通り 「LLM → Tool Selector → Execution → Parser → back to LLM（ループ）」 という典型パターンを理解し、ループ構造まで含めて図に起こします。 AIエージェントの設計でよく出てくる定番フローを「言葉のラベル」だけで描けるのは、図づくりの心理的ハードルを大きく下げます。 エージェントの設計パターンそのものを整理したい場合は、AIエージェント設計パターン入門 と合わせて読むと、どの図をどの場面で描くべきかが見えてきます。

READMEはMem0の例で、記憶層が読み込みパスと書き込みパスを分けて持つことにも触れています。 冒頭のStyle 1のサンプルを見直すと、ベクトルストアやグラフDB、Key-Valueストアといった保存層が並び、矢印の色と線種で「書き込み」と「読み出し」が描き分けられているのが分かります。 こうしたAIインフラ特有の「片方向ではない複雑なデータの流れ」を、ツールが構造として理解しているからこそ、言葉の指示だけで意味の通った図が出てきます。 汎用の作図ツールなら一本一本手で引いていた矢印が、ドメイン知識として最初から組み込まれているわけです。

セマンティックな図形語彙も、このツールの完成度を支えています。 READMEによれば、エージェントは六角形、データベースは円柱、判断は菱形、というように図形の意味が一貫しています。 さらに矢印のストローク（線種）と色がデータフローの種類を表す設計で、冒頭のMem0図でも「API/制御フロー」「メモリ書き込み」「メモリ読み出し」「データ変換」が線種と色で描き分けられていました。 人が後から凡例を付け足さなくても、図そのものが意味を語る構造になっています。

この「図形に意味を持たせる」設計は、見た目の統一以上の価値を持ちます。 たとえばエージェントは常に六角形、データベースは常に円柱で描かれるため、読者は図を見た瞬間に「これはエージェント」「これは永続ストア」と理解できます。 複数の記事やスライドにまたがって図を作っても、語彙が一貫しているので読者の学習が積み上がります。 属人的なお絵描きでは崩れやすいこの一貫性を、ツール側が担保してくれるわけです。

下図は、自然言語の指示が最終的な画像になるまでの処理の流れを俯瞰したものです。

インストールとセットアップ——スキル本体とPNGレンダラー

導入は2段階です。 まずスキル本体を入れ、次にPNG出力用のレンダラーを1つ用意します。 スキル本体はClaude Skills仕様に沿っているため、npx skills か手動cloneのどちらでも導入できます。

# 方法1: skills CLI で導入（推奨）
npx skills add yizhiyanhua-ai/fireworks-tech-graph

# 方法2: スキルディレクトリへ直接 clone
git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git \
  ~/.claude/skills/fireworks-tech-graph

# 更新（グローバル・強制上書き）
npx skills add yizhiyanhua-ai/fireworks-tech-graph --force -g -y

2つ目の更新コマンドにある -g はグローバル導入、-y は確認プロンプトのスキップ、--force は既存スキルの上書きを意味します。 スキルは一度入れたら終わりではなく、リポジトリの更新に追従して入れ直すことで、新しいスタイルや対応図種を取り込めます。 clone方式を選んだ場合は、対象ディレクトリで git pull すれば同様に最新化できます。

次に、SVGをPNGへ変換するレンダラーを1つ選びます。 3択あり、READMEはcairosvgを推奨しています。 環境や既存の依存に合わせて選べばよく、すべてを入れる必要はありません。

# 推奨: cairosvg（Python）
pip install cairosvg

# 代替1: rsvg-convert（システムパッケージ）
brew install librsvg                 # macOS
sudo apt install librsvg2-bin        # Ubuntu/Debian

# 代替2: puppeteer（Node.js、Chromiumを使う）
npm install puppeteer

基本的な使い方——トリガー語とプロンプト例

導入後は、Claude Codeとの会話の中で「図を描いて」と頼むだけです。 READMEは、スキルが反応するトリガー語と、具体的なプロンプト例を挙げています。 英語の指示が基本である点に注意してください。

# 基本: 図の種類だけを指示
Draw a RAG pipeline flowchart

Generate an Agentic Search architecture diagram

# スタイルを指定する（style 2 = Dark Terminal）
Draw a microservices architecture diagram, style 2 (dark terminal)

# 出力先ディレクトリを指定する
Create a tool call flow diagram --output /tmp/diagrams/

ポイントは、図の種類とスタイルを言葉で添えるだけで構図が決まることです。 「style 2」のように番号で指定でき、--output で書き出し先も制御できます。 生成後はSVGとPNGの両方が手元に残るため、SVGを微修正してから最終PNGを書き出す、といった運用もできます。

実際のワークフロー例——記事1本分の図をそろえる

トリガー語とプロンプト例だけでは、実務での使い心地が掴みにくいかもしれません。 そこで、技術記事を1本書くときに図版をそろえる流れを例に、使い方を順を追って整理します。 あくまで一般的な運用イメージであり、READMEのトリガー語と出力仕様に沿った形です。

このとき効いてくるのが、スタイルを記事全体で1つに固定する運用です。 1記事の中で図ごとに見た目がバラつくと、読者は無意識に「別々の出典の図」と感じてしまいます。 fireworks-tech-graphは同じスタイル番号を指定すれば配色とトーンがそろうため、複数の図を並べても一冊のドキュメントとして自然にまとまります。 逆に、SNSで1枚だけ目を引かせたいときはGlassmorphismやDark Luxuryに振る、といった切り替えも指示一つで済みます。

なお、図の正確性はあくまで「指示の解像度」に依存します。 「マイクロサービスの図を描いて」だけでは一般的な構成が出るので、サービス名やデータの流れまで具体的に言葉で渡すほど、意図に沿った図になります。 言葉で図を起こす以上、何を描きたいかを言語化する力が、そのまま図の質に直結すると考えておくとよいでしょう。

逆に言えば、頭の中の構成が固まっていない段階でも、まず一枚出させて「叩き台」にする使い方が有効です。 出てきた図を見ながら「ここにキャッシュ層を足して」「この矢印を双方向に」と会話で直していけば、考えながら図を育てられます。 真っ白なキャンバスを前に手が止まる、というありがちな停滞を避けられるのは、対話型で図を起こせるツールならではの利点です。

カスタマイズとスタイル設定——8番目だけ毛色が違う

スタイル指定の基本は「style 1〜8」または名前での指定です。 ここで押さえておきたいのは、7番目までと8番目で性格が異なる点です。 1〜7はテンプレート駆動で、配色・形状・余白があらかじめ定義されています。 一方の8（Dark Luxury）はAIが意匠そのものを起こすタイプで、毎回まったく同じ構図になるとは限りません。

出力形式の使い分けも実務では重要です。 編集が必要ならSVGを開いてラベルや色を直し、共有・印刷・記事貼り付けには1920px PNGを使う、という流れが基本になります。 特に日本語ラベルを入れたい場合は、対応言語が英語・中国語であることを踏まえ、生成後にSVGのテキストを編集する方が確実です。

SVGを最終成果物に挟む利点は、後からの微調整が効くことにあります。 SVGはテキストベースのベクター形式なので、ラベルの誤字を直したり、社内用語に置き換えたり、配色を自社ブランドに寄せたりといった修正を、画質を落とさずに行えます。 「AIが出した図をそのまま使う」のではなく、「AIに7割の構図を作らせ、残り3割を人が仕上げる」という分業が自然に成立します。 PNGはあくまで配布用の最終形と捉え、編集の起点はSVGに置いておくと運用が安定します。

ユースケース——どこで効くか

「言葉で本番品質の図が出る」ことの価値は、図を多用する現場ほど大きくなります。 代表的な使いどころを整理します。

とりわけAI関連のコンテンツでは、RAGやエージェントの構成図を毎回ゼロから描くコストが無視できません。 fireworks-tech-graphはこの「定番だが描くのが面倒な図」を言葉で量産できるため、解説記事や社内ナレッジの図版整備と相性が良いといえます。

導入効果がもっとも分かりやすいのは、図の本数が多い場面です。 たとえば技術ブログを継続運用していると、記事ごとにアーキテクチャ図が必要になり、その都度の作図が地味な負担になります。 言葉で図を起こせれば、執筆の流れを止めずに「ここで全体構成図を1枚」と差し込めるため、図版が後回しになって記事が薄くなる、という事態を避けられます。 社内ドキュメントでも同様で、設計が変わるたびに図を描き直すコストが下がれば、図と実装の乖離（ドキュメントが古いまま放置される問題）を減らせます。 一枚物の凝った図を作る用途というより、「そろった見た目の図を、必要なだけ素早く供給する」用途で真価を発揮するツールだといえるでしょう。

類似アプローチとの比較——Mermaid・お絵描きツール・画像生成AI

技術図を作る手段は他にもあります。 それぞれ得意・不得意があるため、fireworks-tech-graphの立ち位置を相対化しておきます。

整理すると、厳密な数値や分岐ロジックを保証したい図はMermaid、ピクセル単位で作り込みたい図はお絵描きツール、抽象的なビジュアルは画像生成AI、という棲み分けになります。 fireworks-tech-graphの主戦場は、その中間にある 「意味の通った本番品質の構成図を、言葉で素早く・揃った見た目で量産する」 領域です。 当サイトでも構成図にはMermaidを基本としつつ、見栄えが効く俯瞰図には画像化を併用しており、fireworks-tech-graphはこの「画像化」の有力な選択肢になります。

特に画像生成AIとの違いは、実務で効いてきます。 汎用の画像生成AIは雰囲気のあるビジュアルを作れますが、図中のラベルが崩れたり、矢印の向きが意味と合わなかったりと、「技術図として正確であること」を苦手にしがちです。 fireworks-tech-graphはテンプレートとセマンティックな図形語彙という骨格を持つため、見栄えと正確さを両立しやすい設計になっています。 逆にMermaidとの関係は競合というより補完です。 分岐や数値が厳密に問われる図はMermaidで書き、読者の理解を一枚で促したい俯瞰図はfireworks-tech-graphで起こす、という二刀流が現実的でしょう。

ツール選びで迷ったら、「その図に求めるのは正確さか、伝わりやすさか」を最初に決めると整理が早くなります。 正確さが最優先なら記法ベース、伝わりやすさと見栄えが効くなら言葉ベースの作図、という軸で振り分ければ、fireworks-tech-graphをどの図に使うべきかも自然に決まります。

なお、こうした「専門知識をスキル化してClaude Codeに持たせる」流れは、図解に限った話ではありません。 デザイン判断をスキル化した designer-skills のような事例も登場しており、fireworks-tech-graphは「可視化」という専門領域をスキル化した一例として位置づけられます。

導入前に押さえておきたい注意点

最後に、READMEの記載から読み取れる前提と限界を明確にしておきます。 事実として確認できる範囲に絞ります。

日本語環境で使う場合の現実的な構えも書いておきます。 指示は英語で出し、生成されたSVGの図中ラベルだけを日本語に直す——この運用なら、対応言語の制約を実務上ほぼ回避できます。 英語のトリガー語やプロンプト例はREADMEにそのまま載っているので、最初はコピーして試し、出力の傾向を掴んでから自分の語彙に置き換えていくと無理がありません。 スター数の伸び（公開2か月で7,400★超）が示す通り注目度は高く、今後もスタイルや対応図種が増えていく可能性があります。 導入のハードルが npx skills add 一行と低いぶん、まず手を動かして相性を確かめるのが向いているツールです。

限界も正直に押さえておくと、このツールは「万能の作図エンジン」ではありません。 スタイルは8つに固定されており、それ以外の独自デザインを厳密に再現したい場合は、生成後のSVGを自分で作り込む必要があります。 また、対応言語が英語・中国語である以上、日本語をそのまま流し込む運用は現時点では推奨しづらく、ラベルの後処理が前提になります。 こうした制約を理解したうえで「定番の構成図を、そろった見た目で素早く量産する」用途に絞れば、費用対効果は非常に高いツールだといえます。

総じて、fireworks-tech-graphは「図を描く時間を、図に何を描くか考える時間に振り替える」ためのツールです。 Claude Skillとして会話の流れに溶け込み、8スタイルと豊富なAIワークフロー図で、技術コンテンツの図版づくりを軽くしてくれます。 まずは英語のプロンプトでRAGやアーキテクチャ図を一枚出してみて、自分の媒体に合うスタイルを探すところから始めるのがおすすめです。

参照ソース

・yizhiyanhua-ai/fireworks-tech-graph（GitHub公式リポジトリ・README） — 機能・スタイル・トリガー語・インストール手順・サンプル画像の一次ソース
・fireworks-tech-graph 公式サンプル画像（assets/samples） — 本記事で引用した8スタイルのサンプルPNGの出典