できること

  • 検索、ズーム、パン、詳細パネル付きのオフライン HTML 構成図 1 つ
  • バージョン管理にそのまま入れられる元の JSON モデル
  • 接続先のないエッジやメイン経路の抜けを検出するビルドスクリプト
  • 読者や印刷向けに全関係を書き出したプレーンテキストのアウトライン
  • PopNow によるドキュメント用カバー画像(任意、先に見積もり)

向いている用途

  • サービスやリポジトリのオンボーディング資料
  • 1 つのリクエストやジョブがシステム内をどう流れるかの追跡
  • 設計レビュー用のワークフローやライフサイクル

向いていない用途

  • 実行時の挙動、負荷、障害影響の証明
  • 数百のコンポーネントを 1 枚に収めること
  • スライド用の、ピクセル単位で精密な図

使い方

Claude・ChatGPT で

PopNow のスキル「インタラクティブなアーキテクチャ図」(interactive-architecture-diagram)を使って、次のことをしてください:このリポジトリで、ファイルのアップロードが Web フォームからサムネイル生成ワーカーまでどう流れるかを図にして。

コーディングエージェントで

/popnow-interactive-architecture-diagram このリポジトリで、ファイルのアップロードが Web フォームからサムネイル生成ワーカーまでどう流れるかを図にして。

次はこれ

外部ストレージのバケットを信頼境界としてマークして、ビルドし直して。

アップロード状態のライフサイクルについて、2 つ目の図を作って。

用意しておくもの

  • 図で答えたい問い
  • 説明文、リポジトリへのアクセス、またはコンポーネント一覧
  • 変えてはいけない正確な名前とプロトコル

似ているスキル

すべて見る →

よくある質問

図にインターネットや作図サービスは必要ですか?

不要です。成果物はすべてをインラインで含む HTML ファイル 1 つです。ローカルから開け、オフラインで動作し、ネットワーク通信も行いません。

どの部分が推測なのか、どうすれば分かりますか?

すべてのボックスと接続に根拠のステータスが付きます。依頼文に記載、ファイルで確認、推測、不明のいずれかです。詳細パネルでは、該当する場合はファイル名と行番号とともに表示されます。

後から図を編集できますか?

できます。JSON モデルを編集して、ビルドスクリプトを再実行してください。新しいページを書き出す前に、ID、接続、メイン経路をチェックします。

ここで PopNow は何を追加しますか?

図を載せるページのカバー画像やシェア画像だけで、料金を確認してから任意で作ります。図そのものを画像モデルで生成することはありません。