PRO+ 公開サンプル · ログイン不要で全文をご覧いただけます。
インストール前の試食 · ログイン不要
Aryanutkarsh/SeeCode 開発・ドキュメント
新メンバーに注文のコードを説明するなら。57秒の手描き解説で、AIによる構造整理、SeeCodeの描画、実コードとの照合をたどります。公式例と準備・共有方法・制限も確認します。
約57秒の動画公式例3点選び方01 · 動画でひと目に
約57秒・韓国語音声／字幕・BGMあり。公式の決済例をもとにギット飯が制作した手描き解説です。Storefront → Edge cache → Checkout API → Stripeを要約し、保存と領収書の分岐は省略しています。実行録画ではありません。
02 · 実際の画面
SeeCodeのREADMEの「See it in action」に載っている6本のクリップです。SeeCodeが作ったHTMLファイル1つをブラウザーで開いたときにできることです。最初は静止画で表示され、再生を押すと動きます。
画面: Aryanutkarsh/SeeCodeのREADMEのクリップ（docs/features、v0.6.2）、MIT。原文は実際の図から録画したと書いています。ギット飯はGIFを変えずにそのまま再生し、再生前の静止画だけ、GIFの1コマをWebPとして取り出して作りました。右下のSeeCodeの表示は、すべての図に入る元のウォーターマークです。画面内の決済・キャッシュの図は元のリポジトリの例で、ギット飯が撮影した画面ではありません。
03 · すぐに始める
SeeCodeは別に起動するアプリではなく、自分が使うコーディングAIの中に入れるスキルです。使っているAIに合うインストール方法を選び、コマンド横のコピーを押して貼り付けます。SeeCode用のアカウントやAPIキーはありません。
元リポジトリv0.6.2（2026-10-17 UTCリリース、タグのコミット9a186890）の文書に基づく · 2026-10-19確認 · ギット飯では実際にインストール・実行していません。リポジトリは2026-10-02（UTC）に作られ、2026-10-08から10-17までにv0.5.1からv0.6.2まで5回リリースしています。原文には「mainに取り込まれた変更ごとに新しい版が出る」と書かれています。そのため、自動更新をオンにしたりmainをそのまま取得したりすると、v0.6.2より新しい版が入り、この記事の内容と違う場合があります。準備するものはNode.js 20以上です（原文）。
Claude Codeを使うとき
1 · Claude Codeの入力欄に自分で入力（端末ではありません）
/plugin marketplace add Aryanutkarsh/seecode2 · 続けて入力
/plugin install seecode@seecode元のリポジトリのマーケットプレイスを追加し、seecodeプラグインをインストールします。2行ともClaude Codeの中で自分で入力するコマンドです。プラグインは/seecode:export・/seecode:import・/seecode:doctor・/seecode:settingsのコマンドも追加します。
原文は、/plugin → Marketplaces → seecode → Enable auto-updateを一度オンにするよう勧めています。オンにすると新しいリリースのたびに自動で更新され、この記事が基準にしたv0.6.2より先に進みます。
Agent Skillsを読み込むコーディングAIを使うとき（原文: Claude Code・Cursor・Codex・OpenCodeなど）
npx skills add Aryanutkarsh/seecode -gskills.shのインストールツールでSeeCodeのスキルを取得します。-gは、このプロジェクトではなくユーザー全体（グローバル）にインストールするオプションです。原文の更新の表は、プロジェクトだけに入れるなら-gを外すよう書き、この方法で入れたスキルは自動では更新されないとしています。
ギット飯の補足: npx skillsは、SeeCodeではなくサードパーティーのnpmパッケージ（skills）をダウンロードして実行します。実行する前に、この点を理解したうえで使ってください。
OpenAI Codexを使うとき
codex plugin marketplace add Aryanutkarsh/seecode
codex plugin add seecode@seecodeCodexのプラグインのマーケットプレイスに元のリポジトリを追加し、seecodeプラグインをインストールします。更新はCodexのプラグイン管理から行うか、同じコマンドをもう一度実行するよう原文に書かれています。
GitHub Copilotを使うとき
copilot plugin marketplace add Aryanutkarsh/seecode
copilot plugin install seecode@seecodeCopilotのプラグインのマーケットプレイスに元のリポジトリを追加し、seecodeプラグインをインストールします。更新はプラグイン管理から行うか、同じコマンドをもう一度実行するよう原文に書かれています。
WebやデスクトップアプリのClaudeで使うとき
seecode.zip下のv0.6.2リリースページからseecode.zip（358,688バイト）をダウンロードし、Settings → Capabilities → Skillsにアップロードします。原文には、ここでもすべての機能が使えるものの、サンドボックスにブラウザーがないため、画像と動画のファイルは図のExportメニューで作ると書かれています。更新するときは新しいseecode.zipをもう一度アップロードします。
原文は最新リリース（latest）へのリンクを載せていますが、ギット飯はこの記事と同じv0.6.2のリリースページに固定しました。Skillsを使える料金プランやアカウントの条件は原文になく、ギット飯は確認できていません。
Claude Codeのスキルのフォルダー（~/.claude/skills）に直接つなぐとき
git clone https://github.com/Aryanutkarsh/seecode ~/code/seecode
ln -s ~/code/seecode/skills/seecode ~/.claude/skills/seecodeリポジトリを~/code/seecodeに取得し、その中のskills/seecodeフォルダーを~/.claude/skills/seecodeにつなぎます（シンボリックリンク）。更新はクローンしたフォルダーでgit pullです（リンクがそのまま追従します）。
ギット飯の補足: git cloneはv0.6.2ではなく、その時点のmainの最新の状態を取得します。この記事と同じ版にそろえるなら、取得後にクローンしたフォルダーでgit checkout v0.6.2を実行してください。更新するときはgit checkout mainのあとgit pull。
インストールしたら、コーディングAIの新しいセッションを始めます（原文: スキルはセッションの開始時に読み込まれます）。そのあと、READMEの最初の依頼をそのまま貼り付けてみましょう。ギット飯の補足: この依頼は決済の流れを文章で伝える例なので、自分のリポジトリをスキャンさせる依頼ではありません。
Use SeeCode to show how checkout works: the browser calls the API,
the API writes to Postgres, charges Stripe and publishes an event to Kafka.プロジェクトで初めて使うと、SeeCodeはグローバル設定を使うか、このプロジェクト用の設定を別に作るかを1回だけ尋ねます。グローバル設定は~/.seecode/config.json、プロジェクト設定は<リポジトリ>/.seecode/config.jsonに保存されます。ギット飯の補足: 原文の設定の文書では、どちらを選んでもリポジトリ内に.seecode/config.jsonができる場合があります。コミットするかを先に決めてください。
既定の設定では、仕様（JSON）とHTMLはdiagramsフォルダーに保存されます。既定の書き出し形式はHTMLとPNGです（原文）。HTMLファイル1つをブラウザーで開くと、上の画面のようにポインターを合わせる、押す、経路をたどる、←/→で手順を送ることができます。続けて「決済の経路を強調して」「暗くして」「スライド用に書き出して」のように、普段の言葉で直してもらえると原文に書かれています。
図のExportメニューが、ブラウザーでPNG・JPEG・SVG・GIF・MP4を作ります。何もインストールする必要はありません。コマンドラインで書き出すときは、SVGはNodeだけで、ほかの形式はすでにあるChromeかEdgeを使います。原文のCLIの文書には、これらのコマンドを自分で実行することはまれで、スキルがAIに伝えると書かれています。
doctorは、Node、同梱のエンコーダー、PNG・GIF・MP4の書き出しに使うブラウザーを点検し、項目ごとに1行で伝えます。失敗した項目があれば、原文の直し方（fix）をそのまま伝えます。Claude Codeのプラグインでなければ、原文のnode skills/seecode/scripts/seecode.mjs doctorを使います（ギット飯の補足: クローンした場合はクローンのフォルダーで、npx skillsで入れた場合はnode <インストールされたスキルのフォルダー>/scripts/seecode.mjs doctorです）。
/seecode:doctorインストールされたSKILL.mdの先頭にあるversion:の行か、/seecode:doctorでいまの版を確認できます。この記事と同じ版なら0.6.2です。それより新しければ、この記事のあとの変更が入っています。原文が食い違っています: READMEは/seecode:doctorでも版を確認できると書いていますが、doctorの説明（CLIの文書・コマンドのファイル）にはNode・エンコーダー・ブラウザーの点検しかありません。SKILL.mdのversionの行が確実です。
インストールした方法ごとに更新の方法が違います。npx skillsで入れた場合は、下の原文のコマンドで更新します。生成されたHTMLがGoogle Fontsに通信しないようにするには、fontsの設定をsystemに変えます（原文: config set fonts system）。
npx skillsで入れた場合の更新（READMEのまま）
npx skills update seecode -gギット飯の補足 · Claude CodeのプラグインでGoogle Fontsへの通信を止める
/seecode:settings fonts systemClaude Codeのプラグインは、/plugin → Marketplaces → seecodeのEnable auto-update（自動）かUpdate（すぐに）で更新します。更新したら、新しいセッションを始めるとスキルが読み込み直されます。ギット飯の補足: /seecode:settingsは原文のconfig setコマンドを実行するプラグインのコマンドなので、上のように書きました。--globalなしでは、このプロジェクトだけに適用される場合があります。すべてのプロジェクトには/seecode:settings fonts system --global。この設定はブランドのプロファイルのフォントには適用されません（原文）。
下の指示文をClaude CodeやCodexに貼り付けると、固定したv0.6.2のREADMEどおりにインストールし、例の図を一つ作って確認します。インストール方法、グローバルへのインストール、Node.jsのインストール、自動更新、設定の保存先、画像の書き出し、スキャンするフォルダーの前には先に確認し、外部への通信は事前に伝え、作った図は共有しません。指示文はギット飯が公式文書をもとに書いたものです。
インストール方法（README Install） ↗簡単なインストールと最初の依頼 ↗更新・版の確認 ↗実際の画面のクリップ（See it in action） ↗書き出し（インストール不要のExportメニュー） ↗取り込み（色・フォント・座標は引き継がない） ↗プライバシー・外部への通信（PRIVACY.md） ↗設定（outputDir・fonts） ↗/seecode:settingsコマンド ↗SKILL.md（version 0.6.2） ↗CLI・doctor ↗コードから描くときの根拠の表示 ↗取り込みコマンド（ファイル内の文字は資料） ↗ライセンス: MIT ↗同梱のエンコーダー・フォントのライセンス ↗
まずSeeCodeの役割を知り、注文が通る道と処理の順番を見ていきます。
01 / 公式SeeCode概要
解説は公式例と文書に基づきます。ギット飯の実システム構成や実行検証の結果ではありません。
公式例: AryanutkarshおよびSeeCode貢献者・MIT。手描き動画と解説: ギット飯。ナレーション: Google Flow Despina。資料再確認: 2026年10月19日。 資料ライセンス ↗
04 · 選び方
答えを選ぶと、下の比較と判断の根拠をもとにギット飯がまとめた結論がすぐに表示されます。
3つ選ぶと結論が表示されます。
結論は、下の比較と「条件が変わったら」の判断、元の分析の推薦・保留の条件をもとにまとめたものです。 README: 共有先ごとの書き出し形式 ↗
同じ「新メンバーに一つの注文の経路を説明する」を、SeeCode v0.6.2のREADMEとMermaidの公式紹介（2026-10-19確認、版の固定なし）をもとに比べました。
| 基準 | SeeCode | Mermaid |
|---|---|---|
| 読む体験 | HTMLで経路・ノードを探索、段階的に説明 | テキストで定義して文書に組み込む |
| 既存文書との関係 | Mermaidを仕様の下書きとして取り込む（色・フォント・座標は引き継がない） | 使い慣れた構文・描画を維持 |
| 共有する成果物 | 探索できるHTMLかSVG・PNG・GIF・MP4（動画ではクリック不可） | 文書側のMermaidの描画 |
| 確認する内容 | AIが書いた仕様を人が照合 | 図の正しさは別途確認 |
こんなときは SeeCode経路をたどって説明し、成果物を複数の形式に分けるとき。
こんなときは Mermaidチームの文書でMermaidを読み、管理できているとき。
読者自身が経路をたどる必要があるかを考えます。
一枚を変換し、意味と抜けを先に比べます。
共有先がHTMLの実行を許可するか確かめます。
どちらも実行を追跡するツールの代わりにはなりません。
インストール前に確認しておくと、無駄足を減らせます。チェックはこの画面でのみ表示されます。
合わないときは 誤った構成図を共有すると引き継ぎが難しくなります。
合わないときは SeeCode自体にサーバー・アカウント・テレメトリーがないことは、完全なオフラインを意味しません。Google Fontsへの通信はfontsの設定をsystemにすると止められますが、AI提供者に渡る資料と、ExportメニューでGIF・MP4を書き出すときのjsDelivrへの通信は別に残ります。
開発者がコードと設計を確認でき、初めて見る人が流れを理解する状況を想定します。
SeeCodeの公式文書・例は2026年10月19日にv0.6.2のタグのコミット（9a186890）に固定して再確認しました。Mermaidの公式紹介（mermaid.js.org/intro）は版の固定なしで同じ日に再確認しました。公式文書・例とMermaid公式紹介に基づく編集解説です。SeeCodeの導入・実行と実サービス構造の検証は行っていません。
開発者がコードと設計を確認でき、初めて見る人が流れを理解する状況を想定します。
図を作る前に、伝えたい問いを一つ決めましょう。
動画と同じく「新メンバーに一つの注文の経路を説明する」という問いから始めます。AIが整理した仕様を図にし、コードと照合して共有します。図の完成度と説明の正しさはそれぞれ確認が必要です。
以下は自分の条件に照らして確認するための手順です。ギット飯による実行結果ではありません。
残すもの担当者がノードと接続を原本と照合します。
残すもの抜けた失敗経路や曖昧な名前を見つけ、仕様を直します。
残すもの仕様とソースの版を添えて共有し、変更時に更新します。
図がコードと一致し、説明後の疑問が減り、変更時に更新できるなら範囲を広げます。
抜けを直す負担が大きい、共有先で開けない場合は既存の文書方式に戻ります。
選んだ理由：コードを読んで理解したつながりを、別の人へ伝える道具です。引き継ぎや設計説明で何を助けるかを見ます。
公式資料を読み解いた編集記事です。新しい動作確認や導入効果の測定を行った記録ではありません。原作の画面内の言語・数値は保持しています。