💡Tips・活用術まさおAIじっくり解説ch

AIエージェントで活用できる最新『図解スキル』7選を徹底検証

2026年10月にGitHubトレンドやSNSで話題となった「図解スキル」の中から、AIエージェントでの実用性が高い7つの手法をピックアップして解説します。実際にClaude Codeなどのツールを用いて、同じお題で描き比べた結果をもとに、それぞれの得意・不得意や使い分けのポイントを明らかにします。

検証の前提と4つのお題

今回の検証では、Claude Code(モデルはopus、2026-11-02試行)を使用し、以下の4つの共通お題(P1〜P4)を各スキルで描かせています。\n・P1 構成図:何がどこにあり、どうつながっているか(スマホや別PCからClaude Codeを動かす仕組み)\n・P2 伝言の流れ:相手が作業中か待機中かで届け方が変わるシーケンス図的な内容\n・P3 比較図:AIに仕事を任せる3つのやり方を「速さ・コスト・口出し」などの軸で比較\n・P4 高密度:25個の部品を詰め込んだ複雑な全体図\nこれらに対し、各スキルが「何が得意か」「どういう時に使うべきか」を評価しました。

決定論的な図解スキル3選

コードやテキストから構造を正確に再現するのに向いているスキルです。\n・pretty-mermaid:Mermaidの文字を「貼れる絵」に変換するスキル。15のテーマから選べ、ブラウザ不要で軽量なのが特徴。状態遷移図などをサクッと作りたい時に最適ですが、配置の自由度は低めです。\n・archify:手元のコードを読み取り、出典付きの図を作るスキル。本体は約5万行のコードで構成されており、コードの仕組みをレビュー資料や引き継ぎ用に可視化するのに向いています。日本語は正式対応外ですが、正確な配線が可能です。\n・svg-diagram:暗号資産取引所Bybitの公式GitHubに由来するスキル。作法を「ゆったり」といった形容詞ではなく「11px」などの具体的な数値で指定しており、作風が揃いやすく見やすいのが特徴です。

デザインと修正に強いスキル

見た目の美しさや、後からの調整を重視する場合に有効なスキルです。\n・diagram-design:45種類の型から最適な図を選び、デザイナー品質の1枚に仕上げるスキル。製品の分解図(Mac miniを6部品に分けるなど)のような、仕上がり重視の資料に向いています。\n・excalidraw:ホワイトボードに手で描いたような主張の強い図を作るスキル。Claudeが生成したJSONからPNGを書き出し、それを画像として見て直すループを4周ほど回して精度を高めます。最大の特徴は、生成後にExcalidrawのサイトで自分で手直しできる点です。

概念を形にする特殊スキル

・huashu-design:方向性の違う3つの案(時間軸、雑誌風、記号図など)を提示し、人間に選ばせるインフォグラフィック向けのスキル。単なる色違いではなく、骨組みから異なる案を出してくれます。\n・anatomy:考え方を「実在しそうな機械」に置き換えて描くスキル。例えばエスプレッソマシンの内部構造に見立てて概念を説明します。10月にスター数が23,150以上増えるなど非常に注目されました。論理的な関係性よりも、直感的な美しさや雑誌のような図解を求めるシーンに向いています。

結論:何を持っていて何が欲しいか

7つのスキルはそれぞれ「入れる物(コード、注文文、Mermaidなど)」と「出力物(SVG、PNG、HTMLなど)」が異なり、得意領域がほぼ重なりません。\n・手元にMermaidがあるなら:pretty-mermaid\n・説明したいコードがあるなら:archify\n・速く安く、揃ったSVGが欲しいなら:svg-diagram\n・型選びと仕上がりを重視するなら:diagram-design\n・後で手で直したいなら:excalidraw\n・方向性の違う3案から選びたいなら:huashu-design\n・動いて触れる機械の1枚にしたいなら:anatomy\nまずは自分の目的に一番近いものを1本入れて試してみるのが、図解AIエージェント活用の第一歩となります。

なぜ重要か

AIによる図解は、単一の万能ツールを求めるのではなく、用途(正確な構造再現か、直感的なデザインか)に応じて「Mermaid系」「コード解析系」「キャンバス編集系」などのスキルを使い分けるフェーズに入っています。特に、生成された図を人間が後から微調整できる「excalidraw」のような、AIと人間の協調を前提としたスキルが実務上の満足度を高める鍵となります。

こんな人におすすめ

資料作成を効率化したいビジネスパーソンや、複雑なシステム構成を可視化したいエンジニア。AIエージェントにどのような図解能力を持たせるべきかの指針が得られます。

見どころ

この記事は まさおAIじっくり解説ch が公開した動画をAI(Google Gemini)が視聴して 日本語にまとめ、公開前に運営者が内容を確認したうえで掲載しています。 要約の性質上、細部が元の発言と異なる場合があります。 正確な内容は元の動画をご確認ください。

YouTubeで元の動画を見る

スポンサーリンク

💡関連記事