jpskill.com
🛠️ 開発・MCP コミュニティ

understand-dashboard

コード全体を知識グラフとして視覚的に表示するインタラクティブなウェブダッシュボードを起動し、プロジェクトの構造やファイル間の依存関係などを一目で把握できるようにすることで、コードの理解を深めるSkill。

📜 元の英語説明(参考)

Launch an interactive web dashboard to visualize a codebase as a knowledge graph. Use when: exploring project architecture visually, seeing file/function dependencies, understanding code structure at a glance.

🇯🇵 日本人クリエイター向け解説

一言でいうと

コード全体を知識グラフとして視覚的に表示するインタラクティブなウェブダッシュボードを起動し、プロジェクトの構造やファイル間の依存関係などを一目で把握できるようにすることで、コードの理解を深めるSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o understand-dashboard.zip https://jpskill.com/download/15512.zip && unzip -o understand-dashboard.zip && rm understand-dashboard.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/15512.zip -OutFile "$d\understand-dashboard.zip"; Expand-Archive "$d\understand-dashboard.zip" -DestinationPath $d -Force; ri "$d\understand-dashboard.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して understand-dashboard.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → understand-dashboard フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

/understand-dashboard

概要

コードベースの知識グラフを、力指向ノードグラフとして可視化するインタラクティブなウェブダッシュボードを起動します。このダッシュボードは、レイヤービュー、依存関係の探索、複雑さのヒートマップ、検索フィルタリングを提供し、すべてVite経由でローカルに提供されます。

手順

  1. プロジェクトディレクトリを決定します。

    • $ARGUMENTSにパスが含まれている場合は、それをプロジェクトディレクトリとして使用します。
    • それ以外の場合は、現在の作業ディレクトリを使用します。

  2. プロジェクトディレクトリに.understand-anything/knowledge-graph.jsonが存在することを確認します。存在しない場合は、ユーザーに次のように伝えます。

    No knowledge graph found. Run /understand first to analyze this project.

  3. ダッシュボードのコードを見つけます。ダッシュボードは、このプラグインのルートディレクトリからの相対パスpackages/dashboard/にあります。Bashツールを使用してパスを解決します。

    PLUGIN_ROOT="$(cd "$(dirname "$0")/../.." && pwd)"

    または、次のパスを順番に確認して見つけます。

    • ${CLAUDE_PLUGIN_ROOT}/packages/dashboard/
    • このスキルファイルの親ディレクトリ、そして../../packages/dashboard/

  4. 依存関係をインストールし、必要に応じてビルドします。

    cd <dashboard-dir> && pnpm install --frozen-lockfile 2>/dev/null || pnpm install

    次に、コアパッケージがビルドされていることを確認します（ダッシュボードはそれに依存しています）。

    cd <plugin-root> && pnpm --filter @understand-anything/core build

  5. プロジェクトの知識グラフを指すVite開発サーバーを起動します。

    cd <dashboard-dir> && GRAPH_DIR=<project-dir> npx vite --open

    ユーザーが作業を続行できるように、これをバックグラウンドで実行します。

  6. ユーザーに報告します。

    Dashboard started at http://localhost:5173
Viewing: <project-dir>/.understand-anything/knowledge-graph.json

The dashboard is running in the background. Press Ctrl+C in the terminal to stop it.

例

例1：現在のプロジェクトのダッシュボードを起動する

ユーザー: /understand-dashboard

エージェントは、現在のディレクトリに.understand-anything/knowledge-graph.jsonが存在することを確認し、packages/dashboard/にあるダッシュボードパッケージのパスを解決し、pnpm installで依存関係をインストールし、コアパッケージをビルドし、GRAPH_DIR=$(pwd) npx vite --openでVite開発サーバーを起動します。ブラウザがhttp://localhost:5173で開き、5つのアーキテクチャレイヤーにわたる47個のノードを持つインタラクティブなグラフが表示されます。

例2：特定のプロジェクトパスのダッシュボードを起動する

ユーザー: /understand-dashboard ~/projects/my-api

エージェントは、~/projects/my-api/.understand-anything/knowledge-graph.jsonが存在することを確認し、GRAPH_DIR=~/projects/my-apiでダッシュボードを起動します。ユーザーは、レイヤーごとに色分けされ、複雑さのスコアによってサイズが決定されたノードを持つ、APIプロジェクトの知識グラフがブラウザにレンダリングされるのを確認します。

ガイドライン

  • ダッシュボードを起動する前に、必ず知識グラフファイルが存在することを確認してください。
  • ユーザーがターミナルで作業を続行できるように、Viteサーバーをバックグラウンドで実行してください。
  • ポート5173が占有されている場合、Viteは自動的に次に利用可能なポートを選択します。実際のURLを報告してください。
  • ダッシュボードは@understand-anything/coreに依存しているため、ダッシュボードを起動する前にコアパッケージがビルドされていることを確認してください。
  • GRAPH_DIR環境変数は、ダッシュボードに知識グラフファイルの場所を伝えます。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

/understand-dashboard

Overview

Launch an interactive web dashboard that visualizes a codebase's knowledge graph as a force-directed node graph. The dashboard provides layer views, dependency exploration, complexity heatmaps, and search filtering, all served locally via Vite.

Instructions

  1. Determine the project directory:

    • If $ARGUMENTS contains a path, use that as the project directory
    • Otherwise, use the current working directory

  2. Check that .understand-anything/knowledge-graph.json exists in the project directory. If not, tell the user:

    No knowledge graph found. Run /understand first to analyze this project.

  3. Find the dashboard code. The dashboard is at packages/dashboard/ relative to this plugin's root directory. Use the Bash tool to resolve the path:

    PLUGIN_ROOT="$(cd "$(dirname "$0")/../.." && pwd)"

    Or locate it by checking these paths in order:

    • ${CLAUDE_PLUGIN_ROOT}/packages/dashboard/
    • The parent directory of this skill file, then ../../packages/dashboard/

  4. Install dependencies and build if needed:

    cd <dashboard-dir> && pnpm install --frozen-lockfile 2>/dev/null || pnpm install

    Then ensure the core package is built (the dashboard depends on it):

    cd <plugin-root> && pnpm --filter @understand-anything/core build

  5. Start the Vite dev server pointing at the project's knowledge graph:

    cd <dashboard-dir> && GRAPH_DIR=<project-dir> npx vite --open

    Run this in the background so the user can continue working.

  6. Report to the user:

    Dashboard started at http://localhost:5173
Viewing: <project-dir>/.understand-anything/knowledge-graph.json

The dashboard is running in the background. Press Ctrl+C in the terminal to stop it.

Examples

Example 1: Launching the dashboard for the current project

User: /understand-dashboard

The agent verifies .understand-anything/knowledge-graph.json exists in the current directory, resolves the dashboard package path at packages/dashboard/, installs dependencies with pnpm install, builds the core package, and starts the Vite dev server with GRAPH_DIR=$(pwd) npx vite --open. The browser opens to http://localhost:5173 showing the interactive graph with 47 nodes across 5 architectural layers.

Example 2: Launching the dashboard for a specific project path

User: /understand-dashboard ~/projects/my-api

The agent checks that ~/projects/my-api/.understand-anything/knowledge-graph.json exists, then starts the dashboard with GRAPH_DIR=~/projects/my-api. The user sees the knowledge graph for their API project rendered in the browser, with nodes color-coded by layer and sized by complexity score.

Guidelines

  • Always verify the knowledge graph file exists before attempting to start the dashboard
  • Run the Vite server in the background so the user can continue working in the terminal
  • If port 5173 is occupied, Vite automatically picks the next available port; report the actual URL
  • Ensure the core package is built before starting the dashboard since it depends on @understand-anything/core
  • The GRAPH_DIR environment variable tells the dashboard where to find the knowledge graph file