nicobailon/visual-explainer

これは何？

主な機能

• 01ASCII出力の代わりに、図、表、レビューを自己完結型のHTMLページとして生成します。
• 02diffレビュー、計画レビュー、プロジェクトの概要、比較、スライドデッキ向けのスラッシュコマンドを提供します。
• 03切り替え可能な11種類のカラーパレットと、複数のページレイアウトを用意しています。
• 04手描き風のインラインSVG図を作成し、プロセスを段階的に表示できます。
• 05オプションでMCPサーバー、Piツール、PPTXエクスポート用ユーティリティを利用できます。

ユースケース

• システムアーキテクチャや認証フローをチームメイトに説明する。
• 大規模なdiffをレビューしたり、要件と実装計画を照合したりする。
• エージェントが作成した複雑な比較表を読みやすいページにする。
• コードベースや機能をもとに、スライドデッキや短いナレーション付き動画を作成する。

クイックスタート

1. 1

   Claude Code にマーケットプレイスを追加する

   /plugin marketplace add nicobailon/visual-explainer
2. 2

   visual-explainer プラグインをインストールする

   /plugin install visual-explainer@visual-explainer-marketplace
3. 3

   エージェントに図の作成やレビューを依頼すると、ブラウザーで HTML ページが開きます

使う前に知っておきたいこと

• !動画のエクスポートには、ffmpeg、Chrome、playwright-core を別途インストールする必要があります。
• !PPTX エクスポートはベストエフォートのユーティリティです。HTML が引き続き信頼できる唯一の情報源です。

トピック

よくある質問

visual-explainer とは？

コーディングエージェントが図、diffレビュー、計画、表をASCIIアートではなく、スタイル付きHTMLページとして表示するためのエージェントスキルです。 visual-explainerは、Claude Code、Codex CLI、Cursor、Piなどのコーディングアシスタント向けエージェントスキルです。アーキテクチャの説明、diffのレビュー、要件と計画の照合を求められると、ASCII図や折り返されて読みにくい横長のターミナル表を出力する代わりに、自己完結型のHTMLページを作成してブラウザで開きます。

visual-explainer は無料で使えますか？ライセンスは？

visual-explainer は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

visual-explainer は今もメンテナンスされていますか？

活発にメンテナンス中。visual-explainer の最終コミットは 2026年10月20日 です。

visual-explainer は何に使えますか？

システムアーキテクチャや認証フローをチームメイトに説明する。 大規模なdiffをレビューしたり、要件と実装計画を照合したりする。 エージェントが作成した複雑な比較表を読みやすいページにする。 コードベースや機能をもとに、スライドデッキや短いナレーション付き動画を作成する。

visual-explainer のインストール方法は？

Claude Code にマーケットプレイスを追加する: /plugin marketplace add nicobailon/visual-explainer visual-explainer プラグインをインストールする: /plugin install visual-explainer@visual-explainer-marketplace エージェントに図の作成やレビューを依頼すると、ブラウザーで HTML ページが開きます

visual-explainer はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/nicobailon/visual-explainer