Claude Code用27種図表自動生成スキル公開

AFFILIATE_PRODUCTS:

GitHub Trendingのcathrynlaveryの投稿によれば、AIコーディングアシスタント向けの図表生成スキル「diagram-design」が公開された。 Claude Code、Codex、Piの3プラットフォームで動作し、27種類のエディトリアル品質の図表をブランドに合わせて自動生成する。

開発背景と課題

著者のcathrynlaveryはlittlemight.comを運営し、BestSelf.coも手掛けている。著者によれば、技術アーキテクチャのスケッチやフローチャート、ピラミッド図などを作成するたびに、AIから返されるのは汎用的な丸角ボックスの図だった。サイトのデザインと全く異なる見た目のため、Figmaで30分戦うか、図表自体を諦めるかの二択を強いられた。

この負担を解消するために開発されたのがClaude Code用のスキルである。従来の汎用的なAI図表生成とは異なり、エディトリアル品質を標榜する。ノードは設定された意味を持ち、アクセントカラーは最初に読者が見るべき1〜2つの要素にのみ使用される。対象の情報密度は4/10に設定されている。

27種類の図表タイプ

Architecture、Flowchart、Sequence、State Machine、ERデータモデル、Timeline、Swimlane、Quadrant、Nested、Tree、Org Chart、Venn、Layer Stack、Pyramid/Funnel、Consultant 2×2、Radar/Spider、Loop、IT Current-State、High-Level、Bar Chart、Line Chart、Gantt、Scatter Plot、Process、Medallion、Data Flow、DP Security Matrixの計27種類が用意されている。

各タイプはminimal light、minimal dark、full-editorialの3パターンで出力される。生成された図表はビルドステップやJavaScript、外部画像なしでブラウザで直接開くことが可能だ。

ブランドの自動マッチング

最大の特徴は、ウェブサイトを読み込んでブランドカラーとフォントを60秒で各図表に反映する機能だ。既存のサイトデザインとの整合性を自動的に確保できる。draw.ioやMermaidで作成済みの図表がある場合は、ソースを指定することで目的のフォーマット、サイズ、詳細度に再描画される。

インストール方法

Piの場合は「pi install」コマンドでインストールし、「/reload」で反映する。Claude Codeではプラグインマーケットプレイスから「/plugin marketplace add cathrynlavery/diagram-design」で追加できる。Claude Coworkの場合はカスタマイズディレクトリからプラグインとして同期・インストールする手順となっている。

編集部の見解

短期的に見れば、このスキルの公開はAIコーディングアシスタントがコード生成だけでなく、ドキュメントや可視化領域にも侵食を加速させる兆候だ。Claude Codeプラグインエコシステムの実用性を示す事例として、他の開発者にも影響を与える可能性がある。

長期的には、AIエージェントが図表作成スキルをネイティブに持つことが標準化する可能性がある。技術ドキュメントの品質基準が底上げされ、デザイナーとエンジニアの役割分担に変化が生じそうだ。

問われるのは、自動生成される図表の品質が多様なコンテキストで一貫して維持されるかという点だ。また、ブランドの自動マッチングが実際にどの程度の精度で成果を出すのか、検証データが今後必要になる。

参考

• 「cathrynlavery /

  diagram-design」, by **cathrynlavery** — GitHub Trending, 2026-08-13 (ARR)

• 元記事URL: https://github.com/cathrynlavery/diagram-design