fireworks-tech-graph

Fireworks Tech Graph

Codex と Claude Code 用のポータブルなエージェントスキルです。SVG が正規の成果物です。 PNG、オフライン HTML、サポート対象の GIF アニメーションは出力形式です。指定された ラベル、トポロジー、意味を維持してください。コマンドが正常に実行されたことは、視覚的な品質の評価にはなりません。

場所の特定と選択

このファイルを含むディレクトリを SKILL_ROOT として解決してください。Claude Code では ${CLAUDE_SKILL_DIR} を、Codex では読み込まれたスキルのメタデータにある絶対ディレクトリを使用します。 cwd や以前のシェル変数が引き継がれると想定しないでください。

タスクにはインストール済みのバージョンを使用してください。ソースやバージョンに関する質問には version を実行し、レンダラー、フォント、依存関係が見つからない場合の診断には doctor を実行してください。 すべての図で、インストール、更新、またはテストスイート全体の実行を必須にしないでください。

SKILL_ROOT="${CLAUDE_SKILL_DIR:-/absolute/path/from-codex-skill-metadata}"
python3 "$SKILL_ROOT/scripts/fireworks.py" version

• ユーザーが指定した図の種類、内容、スタイルを尊重し、依頼内容に基づいて適切で後から変更可能な詳細を選んでください。重要なエンジニアリング上の情報が不足している場合、またはユーザーが明示的に選択を委ねていない場合に限り、質問してください。描画の依頼にはローカルでのレンダリングも含まれます。
• スタイル 1～7 および 9～12 には JSON ジェネレーターがあります。スタイル 8（Dark Luxury）は引き続き AI が作成する SVG です。このスタイルの参照を使い、その後、同じ検証とエクスポートのチェックポイントを適用してください。
• ユーザーやワークスペースに適用可能な設定がない場合は、スタイル 1 Flat Icon をデフォルトにしてください。スタイルマトリックスから、実際に該当するファイルを読み込んでください。ほかのスタイルを読むのは、比較を求められた場合だけにしてください。
• スタイル 9～12 は、C4、クラウド、イベント、オブザーバビリティのセマンティックコントラクトをデフォルトにします。レイアウトの前に事実を検証し、責務、プロトコル、メトリクスを創作しないでください。
• 適切な場合は、既存の有効な SVG を直接編集してください。すべての編集で JSON 生成が必須というわけではありません。図とレイアウトのガイダンスと アイコンは、該当する種類や記号に限って使用してください。

生成と確認

ユーザーの現在の依頼内容と成果物を再利用してください。追加の計画文書は任意です。 JSON を扱う場合、すべてのラベルを正確に表示する必要があるときは text_policy: "strict" を選択してください。 互換性のあるデフォルトの report は、SVG メタデータにラベル全文を保持し、表示上の切り詰めがあれば報告します。 完全かつ正確なテキストを実現したと判断する前に、その警告を解消してください。 仕上がりを高める場合は、構成コントラクトを適用してください。

SKILL_ROOT="${CLAUDE_SKILL_DIR:-/absolute/path/from-codex-skill-metadata}"
python3 "$SKILL_ROOT/scripts/fireworks.py" validate architecture input.json
python3 "$SKILL_ROOT/scripts/fireworks.py" render architecture input.json diagram.svg --report layout.json
python3 "$SKILL_ROOT/scripts/fireworks.py" check diagram.svg
python3 "$SKILL_ROOT/scripts/fireworks.py" export-png diagram.svg diagram.png --width 1920

check は SVG の識別情報、マーカー参照、一般的な衝突、セマンティックなジオメトリ、構成を検証します。 レポートのタイポグラフィと配色の対象範囲を確認してください。 ヒューリスティックによるテキスト幅の推定は、実際にレンダリングされたフォントの確認に代わるものではありません。 読みやすさやスタイル固有の調整には、視覚的品質のガイダンスを使用してください。 ビジネス上のエッジごとに、セマンティックコネクターを 1 つだけ使用してください。

追加の出力

• PNG： export-png を優先してください。ルートキャンバスの寸法を読み取り、出力サイズを制限し、アトミックに書き込み、PNG の寸法を読み戻します。別のレンダラーに関する詳細はPNG エクスポートを参照してください。
• HTML： fireworks.py export-html diagram.svg diagram.html。サニタイズされた単一のオフラインファイルで、パンとズーム、ソースのコピー、静的画像のダウンロードを提供します。
• GIF： 「GIF を生成」「この図をアニメーション化」「生成 GIF」「制作 GIF」「让这张图动起来」は、既存のセマンティック SVG のアニメーション出力を選択します。スタイル 1～12 は、文書化されたシーンコントラクトに対して有効です。同じスタイルの任意のトポロジーが保証されるわけではありません。アニメーション効果を読み込み、fireworks.py animate diagram.svg diagram.gif を実行してください。デフォルトは 960px、20fps、5.75s で、+2s-settled-flow プリセットと .motion.json レポートを使用します。過去の user-approved フィールドは、メンテナーがレビューしたプリセットを示すものであり、現在のユーザーから公開、支出、データ送信の許可を得たことを意味しません。

要求された成果物を確認する

画像を表示できる場合は、最終的な PNG を実際の表示サイズで確認します。テキストがすべて揃っているか、コントラスト、フォントの置き換わり、階層、間隔、切り抜き、矢印の向き、交差、ラベルをチェックします。スタイルの配色と素材感を保ちながら、問題を修正します。レビュー済みのレンダリングに変更がなければ、それを再利用します。合格後にテストや仕上げを追加し続けないでください。画像を表示できない場合は、視覚チェックをスキップしたことを明記し、視覚的に正しいと主張しないでください。

チェックに失敗した場合は、対象の要素 ID とジオメトリを使って、問題を絞った修正を行います。同じ失敗が 2 回続いたら、アプローチを変更します。図が詰め込みすぎの場合は、必要な文章を隠したり、文字を際限なく小さくしたりせず、図の幅を広げるか分割します。合格させるために、意味上の制約や構成上の制約を黙って緩めないでください。

依頼されたすべてのローカル出力を完成させ、該当するチェックをすべて実施してから、ファイルパス、寸法、視覚レビューの結果、残る制限事項を報告します。最初の SVG だけでは、依頼された PNG／GIF／HTML パッケージは完成しません。公開またはリモートへの納品には、それぞれの範囲に合った承認が必要です。すでに承認を得ている場合、再度依頼する必要はありません。