Communitygithub.com

hraness/graphics

Graphicsは、小さく明確な図のためのヘッドレスCLIおよびエージェントスキルです。

graphics とは?

Graphicsは、AIエージェント(Claude Code、Cursor、Codexなど)がCLI経由で決定論的に図を作成・更新するためのスキルです。ユーザーのプロンプトを完全な内容仕様として扱い、指定されたラベル、値、関係性、相対サイズを厳密に守り、タイトルや凡例などの装飾を勝手に追加しません。ソースは`.diagram.json`として管理し、`.light.svg`、`.dark.svg`、`.light.png`、`.dark.png`、`.tldr`を自動的に書き換え可能な出力として生成します。内部では視覚コミュニケーションのベストプラクティス(丸角矩形の使用、適切な間隔、アイコン配置、3〜7要素への抽象化、色の意味的区別は最大1つなど)を適用しますが、ユーザーのデータを無視してこれらの設定を優先することはありません。tldrawとの連携により、人間が直接編集可能なファイルも生成します。

対応~Claude Code~Codex CLI~Cursor
npx skills add hraness/graphics

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

明確な図を作成する

インストール済みのgraphics CLIを決定論的アダプターとして使用します。作成した.diagram.jsonソースは保持し、.light.svg、.dark.svg、.light.png、.dark.png、.tldrは書き換え可能な出力として扱います。

プロンプトを文字通りに従う

ユーザーのプロンプトを完全な内容仕様として扱います。

  • 指定されたラベル、値、関係性、相対サイズ、省略を保持します。
  • それらの事実を描画するために必要な中立的な仕組みのみを追加します。
  • タイトル、サブタイトル、凡例、注釈、例示、含意、カテゴリ、メトリック、ティック、コネクタ、装飾的な主張を発明してはなりません。
  • 短いラベルを文に拡張してはなりません。ユーザー自身の1〜3ワードのラベルを優先します。
  • 更新時は、拒否されたコンテンツを削除し、新しい説明で置き換えないでください。

ソースを見つける

  1. ローカルリポジトリの指示を読み、graphics.config.* を探します。
  2. 新しいものを作成する前に、既存の同じ主題の .diagram.json を検索します。
  3. 生成された画像を編集したり重複を作成したりするのではなく、そのソースを更新します。
  4. kb/ を持つナレッジベースでは、kb/diagrams/<slug>.diagram.json を使用し、kb/notes/<slug>.md とペアにします。ホストの慣例に従ってレンダリングされた明/暗の画像を埋め込むかリンクし、バイナリキャンバスではなくノートを通じて知識をリンクします。
  5. ナレッジベース外では、デフォルトで diagrams/<slug>.diagram.json を使用します。

ビジュアルを構成する

図を作成または実質的に再設計する前に、visual-communication.md を読んでください。

以下のデフォルトを深く適用します:

  • 通常の概念には丸角矩形を使用します。同じ役割には同じサイズ、半径、ストロークの太さ、アイコンサイズ、ラベル処理を適用します。
  • 接続された形状の間には少なくとも96px、できれば120〜200pxの間隔を空け、矢印が継ぎ目ではなく関係性として読まれるようにします。
  • アイコンはその意味的な形状の内側に直接配置します。枠線付きのアイコンタイルを別の枠線付きカードの中に配置しないでください。
  • プロンプトが抽象化を許可する場合、3〜7個の主要要素を使用します。
  • 明確な読み取り順序を確立し、同じ階層の要素を共有グリッドに揃えます。
  • グループを分離するには、境界線、色、散文の前に空白を使用します。
  • 色は最大で1つの意味的な区別に使用します。プロンプトが指定しなかった違いを暗示するような任意のサイズやスタイルの変更を行ってはなりません。
  • アイコンはサポート役に留めます。ラベルは依然として意味を伝える必要があります。
  • オブジェクトごとに1つの可視境界、軸またはコネクタごとに1つの可視ストロークを優先します。

これらの設定を満たすためにリテラルデータを「改善」してはなりません。プロンプトが優先されます。

オーサリングとレンダリング

パブリックスキーマURLを使用するか、graphics init を実行してスターターファイルを作成します:

graphics check diagrams/<slug>.diagram.json --strict
graphics render diagrams/<slug>.diagram.json

レンダーコマンドは、一貫した同じ語幹の出力を上書きします。レイアウトやコントラストが不確かな場合は、明るい出力と暗い出力の両方を検査します。有用なlintの指摘事項にはすべて対応し、ソースを変更してから再レンダリングします。

リポジトリが独自のフォントやアイコンパッケージを使用している場合は、customization.md を読んでください。ライセンスされたフォント(MonoLisaなど)をリポジトリに追加しないでください。デフォルトのレンダリングはシステムのサンセリフスタックを使用します。

tldrawを意図的に使用する

生成された .tldr ファイルは編集可能な交換形式であり、tldraw SDKやデスクトップアプリを必要とせずに作成できます。人間が直接キャンバスを編集したい場合は、tldraw Offlineで開きます:

graphics open diagrams/<slug>.tldr

オプションのアプリがない場合、graphics desktop install は現在の公式リリースを解決し、公開されたSHA-256ダイジェストを検証し、プラットフォームインストーラを起動します。このアプリは .tldr を未保存ドキュメントとしてインポートします。そこで保存すると、新しいネイティブの .tldraw バンドルが作成されます。ネイティブの .tldraw ZIP/SQLiteバンドルを直接書き換えてはなりません。

確認

  1. graphics check <source> --strict を実行します。
  2. graphics render <source> を実行します。
  3. ソースの隣または要求された出力ディレクトリに5つのアーティファクトすべてが存在することを確認します。
  4. 明るい出力と暗い出力を実際のサイズで検査します。
  5. 同じ階層の形状が誤った差異を示していないことを確認します。
  6. コネクタが長く、.tldr 内の意図した形状にバインドされ、ラベルを横切っていないことを確認します。
  7. 付随するノートが必要な場合、そのパスとビジュアル参照が正しいことを確認します。

関連スキル