FigGenieとは？
FigGenieは、技術論文向けのカメラレディな図を描くためのAIエージェント用スキルです。システムの説明、仕組み、既存の図、その他の資料をエージェントに渡すと、概要作成、作図、レンダリング、Lint、目視レビュー、改訂という簡潔なワークフローを案内します。
ビットマップ画像生成ツールとは異なり、FigGenieは編集可能なベクターグラフィックを作成します。主な成果物は、フォントを埋め込み、名前付き要素を備えたSVGです。LaTeX用の図サイズに合わせたPDF、PNGプレビュー、図のキャプション案、さらに必要に応じて編集可能なPowerPointデッキも生成できます。
このプロジェクトは現在、システム研究で使われる図を中心に設計されています。そのルールは、2023年から2026年に発表された1,113本のOSDI、NSDI、SOSP、ASPLOS論文に含まれる12,577個の図のコーパスから導出されました。メンテナーは2,041個の図を手作業で評価し、その結果を20種類のアーキテクチャレイアウト、5種類のメカニズムファミリー、21種類のパレット、485個の注釈付き例、2,853個の再利用可能なパーツにまとめました。
主な機能
- アーキテクチャ図: コンポーネント、制御フロー、データフロー、実行段階、その他の関連するシステム構造を示すための20種類のレイアウトテンプレートから選択できます。
- メカニズム図: 比較、変遷、ロジック、ウォークスルー、構造を示す図を作成できます。
- 編集可能なベクター出力: 生成されたSVGをIllustratorなどの互換性のあるベクターエディターで開き、個々の要素を編集できます。
- 論文用PDF: LaTeX文書に挿入できるよう、図の寸法に合わせて切り抜いたPDFを書き出せます。
- 編集可能なPowerPoint: プリミティブがネイティブ図形になり、ラベルが編集可能なテキストとして保持され、グループ名が仕様IDに基づいて維持されるPPTXを要求できます。
- 数式サポート: オプションのNode.jsおよびMathJaxセットアップにより、ベクターTeX数式を含められます。
- 多言語ラベル: ラテン文字に加えて、中国語などのCJKテキストを使用できます。
- 異種コンテンツ: ベクター要素をアイコン、スクリーンショット、写真、その他のビットマップと組み合わせられます。
- 自動チェック: FigGenieはヘッドレスChromiumで図をレンダリングして測定し、Lintを実行したうえで、編集後の結果を目視レビューします。
- 印刷時のサイズを考慮した設計: 図は240ポイントの論文カラム向けにポイント単位で描画されるため、出版時のサイズでもラベルを読みやすく保てます。
インストール前の確認
スキルを読み込み、シェルコマンドを実行し、レンダリングされたPNGを確認できるAIエージェントが必要です。FigGenieはClaude Codeプラグインとしてのインストールを直接サポートしており、Codexや互換性のあるエージェントでは標準のAgent Skillとして読み込めます。
必要なローカル依存関係は次のとおりです。
- Python 3
- PlaywrightとヘッドレスChromiumのインストール
- Pythonパッケージの
lxml、pillow、playwright、fonttools
Node.js 18以降はオプションで、TeX数式に使用します。PowerPointの書き出しには、オプションのpython-pptxパッケージも必要です。PowerPointでネイティブ数式を使う場合は、Officeのmathml2omml.xslも必要です。
インストール方法1: エージェントにFigGenieをインストールさせる
最も簡単な方法は、AIエージェントにリポジトリのURLを渡し、スキルのインストールと依存関係の設定を依頼することです。
Install this skill and set up its dependencies: https://github.com/Sleepy-Avacado/FigGenieインストール後、エージェントがスキルを見つけ、スクリプトを実行し、Chromiumをヘッドレスモードで起動し、PNGプレビューを確認できることを検証してください。
インストール方法2: Claude Codeプラグインをインストールする
Claude CodeでFigGenieマーケットプレイスを追加し、プラグインをインストールします。
/plugin marketplace add Sleepy-Avacado/FigGenie
/plugin install figgenie@figgenieプラグインが有効になると、Claude Codeに論文用の図の作成、批評、改訂、再描画を依頼できます。
インストール方法3: Agent Skillとしてインストールする
FigGenieは、SKILL.mdファイル、スクリプト、参照資料で構成された通常のAgent Skillです。リポジトリをクローンし、そのスキルディレクトリをエージェントのスキル保存場所にリンクします。
git clone https://github.com/Sleepy-Avacado/FigGenie.git
mkdir -p ~/.agents/skills
ln -s "$PWD/FigGenie/skills/figgenie-paper-diagram" ~/.agents/skills/figgenie-paper-diagram古いバージョンのCodexは、~/.codex/skillsからスキルを読み込みます。~/.agents/skillsでスキルが検出されない場合は、代わりに古いディレクトリへ配置またはリンクしてください。
必要なレンダリング依存関係をインストールする
pip install lxml pillow playwright fonttools
playwright install chromiumこれらのパッケージは、XML処理、画像処理、フォント処理、ブラウザー自動化、レンダリング、Lintのサポートを提供します。
オプションのPowerPoint書き出しを有効にする
pip install python-pptx図にTeX数式が必要な場合は、Node.js 18以降をインストールしてください。プロジェクトのドキュメントによると、MathJaxは初回使用時に自動でインストールされます。
最初の図を作成する
FigGenieは、固定されたコマンドライン作図構文ではなく、会話を通じて動作します。まず、図で何を伝える必要があるか、どこで使用するか、どの成果物が必要かをエージェントに伝えます。
例えば、次のようなプロンプトでアーキテクチャ図を依頼できます。
このシステムの説明に基づき、論文掲載用のアーキテクチャ図を作成してください。
制御プレーンをデータプレーンの上に配置し、リクエストの流れとデータ転送を区別し、論文の1段組内でラベルが読みやすいようにしてください。
SVG、PDF、PNGプレビュー、キャプション案を納品してください。
システムの説明:
[ここに説明を貼り付け]エージェントは作図前にブリーフを作成します。このブリーフは意図するメッセージ、視覚的な階層、コンポーネント、関係、出力要件を定めるため、内容を注意深く確認してください。
- 元資料を提供する。 段落、構造化したメモ、コンポーネント一覧、メカニズムの説明、または改善したい既存の図を貼り付けてください。
- ブリーフを確認する。 図で伝えるべき内容と、強調または省略すべき詳細を確認してください。
- 計画を確認する。 適切なアーキテクチャテンプレートまたはメカニズムの種類をエージェントに選ばせてください。
- 図を生成する。 FigGenieは、確認済みの仕様に従ってベクター図を作成します。
- チェックを実行させる。 エージェントは図をレンダリングし、ジオメトリをリントし、プレビューを確認して、検出された問題を修正します。
- 成果物を確認する。 SVGまたはPNGプレビューを確認し、通常の言葉で変更を依頼してください。
適切な図の種類を選ぶ
アーキテクチャ図
読者に主要なコンポーネントとその関係を理解してもらう必要がある場合は、アーキテクチャ図を使用します。望ましい階層と重要なフローを明確に指定してください。たとえば、次のようにします。
以下の説明からアーキテクチャ図を作成してください。
コンポーネントをクライアント層、制御プレーン層、ワーカー層に分類してください。
同期リクエストは実線の矢印、バックグラウンド更新は破線の矢印で示してください。
スケジューラーと共有キャッシュを強調してください。
240 ptの1段組レイアウトを使用してください。実装の詳細をすべてプロンプトに詰め込まないでください。読者がすぐに理解すべき概念を明確にし、二次的な詳細は視覚的に控えめに扱ってください。
メカニズム図
時間経過に伴う動作の説明、代替案の比較、シーケンスの提示、内部構造の明示、またはプロセスの段階的な説明には、メカニズム図を使用します。FigGenieは、比較、進化、ロジック、ウォークスルー、構造分解という5種類のメカニズムを提供します。
比較の依頼は、次のようになります。
左側にベースライン、右側に提案手法を配置した比較メカニズム図を作成してください。
両パネルで同じタイムラインの尺度を使用してください。
アイドル期間を強調し、最終段階を開始できる時点を示してください。
以下のデータにある正確な値を含め、簡潔なキャプション案を作成してください。READMEのギャラリーでは架空のシステムと値を使用しているため、ギャラリーの図は、自分の論文における事実情報の出典ではなく、スタイルと構成の例として扱ってください。
平易な言葉で図を修正する
プレビューを確認した後、具体的な言葉で変更内容を説明してください。すべての修正で基になるSVGを手動編集する必要はありません。
スケジューラーを視覚上の主役にしてください。
モニタリング経路の目立ち方を抑えてください。
最小のラベルサイズを大きくしてください。
ワーカーボックスを整列させ、交差する矢印を短くしてください。
最終的な図を240 ptの段幅内に収めてください。
編集後に再度レンダリングとリントを実行してください。FigGenieのワークフローは、修正依頼の後に作図段階へ戻れるよう設計されています。意味のある編集を行うたびに、レンダリング、リント、目視確認、修正を繰り返してください。
結果をエクスポートして編集する
SVG
SVGは、編集可能な主要ベクター成果物です。フォントは埋め込まれ、互換性のあるエディターで識別できるよう要素に名前が付けられています。ベクターアプリケーションで間隔、色、ラベル、ジオメトリをさらに調整する予定がある場合に使用してください。
PDFは図のサイズに合わせてトリミングされ、LaTeXなどの論文作成ワークフローを想定しています。拡大表示時の読みやすさだけで判断せず、実際の掲載サイズで確認してください。
PNGとキャプション案
PNGは、確認や共同作業に便利なプレビューを提供します。キャプション案は出発点として利用できますが、原稿内の用語、主張、慣例との整合性も確認してください。
PowerPoint
PowerPointで図を編集する必要がある場合は、PPTXを明示的に依頼してください。FigGenieはプリミティブを、SVGと同じ座標にあるネイティブ図形へ変換します。ラベルは編集可能なテキストとして保持され、グループには要素IDを使って名前が付けられます。
この図を編集可能なPowerPointデッキとしてもエクスポートしてください。
ボックスはネイティブ図形、ラベルは編集可能なテキストとして保持し、名前付きグループを維持してください。
高度なヒント
最終的な印刷サイズを基準に設計する
図を1段組に配置するのか、より広いレイアウトにするのかを指定してください。FigGenieのデフォルト原則は240ポイントの段幅を想定していますが、それでも論文で使用するサイズでエクスポートしたPDFを確認してください。特に、最小のラベル、矢印の注釈、凡例、数式の下付き文字に注意してください。
事実と表示上の希望を分ける
正確なコンポーネント名、測定値、順序の制約、関係をエージェントに伝えてください。そのうえで、視覚的な希望を別に列挙します。これにより、スタイルに関する依頼がシステムの特性と誤解される可能性を減らせます。
説明上の価値がある場合にのみ数式を求める
メカニズムが数学的な関係に依存する場合は、TeX表現を含め、その役割を説明してください。オプションのMathJaxベースの数式ワークフローには、Node.js 18以降が必要です。編集可能性と印刷品質が重要な場合は、貼り付けた数式のスクリーンショットよりもベクター数式が適しています。
多言語テキストに早い段階で対応する
FigGenieは中国語やその他のCJKラベルに対応しています。レイアウト時にテキスト幅と改行を考慮できるよう、描画を始める前に最終図で使用する言語をエージェントに伝えてください。
ビットマップは選択的に使用する
スクリーンショットや写真を図の中に配置できますが、ボックス、コネクタ、ラベル、数式をベクター要素として表現すると、図全体の編集性を高く保てます。ビットマップコンテンツには、十分な解像度の元画像を用意してください。
批評と再描画を依頼する
FigGenieは、文章から始めるのではなく、既存の図に対して使用することもできます。階層構造、間隔、可読性、構成を批評するようエージェントに依頼し、事実の内容を維持した再描画を求めてください。提案された簡略化を採用する前に、その内容を確認してください。
自動検証を継続的に行う
最初のレンダリングを最終結果と見なさないでください。編集後は、レンダリングとLintを再実行するようエージェントに依頼してください。自動計測によって幾何学的な問題を特定でき、目視確認によって、強調の分かりにくさ、不自然な経路、技術的には収まっていても読みにくいラベルなどを発見できます。
現在の制限を把握する
インタラクティブエディターはロードマップに記載されており、現在は利用できません。NeurIPS、ICML、ICLR、CVPR、ACLなど主要AIカンファレンス向けのスタイルや、draw.io、OmniGraffleなどのエディターへの対応も、現在の機能ではなくロードマップ項目です。
ライセンスと帰属表示
FigGenieのコードとドキュメントはMITライセンスで公開されています。公開論文から取得した図や再利用可能な部品は、それぞれの著者に帰属し、同梱フォントには個別のライセンスが適用されます。同梱アセットを再配布する前に、リポジトリのクレジット、ソース、およびフォントライセンスのドキュメントを確認してください。
結論
FigGenieは、研究内容の説明を編集可能で出版向けの図へ変換するための構造化された方法を提供します。Claude CodeプラグインまたはAgent Skillとしてインストールし、焦点を絞った説明を入力して概要を確認したうえで、レンダリング、Lint、目視確認を繰り返してください。論文制作にはSVGまたはPDFで書き出し、共同作業者がPowerPointをネイティブ編集する必要がある場合はPPTXを指定してください。