Claudeデータ可視化スキル：ダッシュボード・チャート・ダイアグラム
Claudeデータ可視化スキルは、インストールして使うSKILL.md形式の指示パッケージです。Claude Code、Codexなどのエージェントが、データやアイデアをダッシュボード、チャート、アーキテクチャ図・フロー図、監視パネルといったビジュアルに変換できるようになります。最もインストールされているのはdesign-doc-mermaidです（9.3万インストール・GitHubスター182）。
公開元ごとに最もインストールされているデータ可視化スキルを1つずつ掲載し、続いてタスク別（ダッシュボード、チャート、ダイアグラム、監視ダッシュボード、データ可視化MCPサーバー）のおすすめを紹介します。
Skillselionによるランキング · 利用データはskills.shレジストリとGitHubに基づく · 公開元ごとに1スキル · 2026年11月8日更新
Claudeデータ可視化スキル上位10選
| # | スキル | スター | インストール数 |
|---|---|---|---|
| 1 | design-doc-mermaidSpillwaveSolutions · SpillwaveSolutions/design-doc-mermaidイチオシ Instantly turn plain text specs, architecture ideas, or existing code into clean, professional Mermaid diagrams for activity flows, sequences, deployments, and system a | 182 | 9.3万 |
| 2 | Instantly turn natural language descriptions into clean, editable Excalidraw diagrams for architecture, workflows, and system designs. | 4.1万 | 3.4万 |
| 3 | diagram-designcathrynlavery · cathrynlavery/diagram-design アーキテクチャ図、フロー図、ER図、タイムライン、チャートを、ブランドに沿ったデザインでHTML、SVG、PNGとして作成します。 | 6.6万 | 2.6万 |
| 4 | kpi-dashboard-designwshobson · wshobson/agents Get department-specific KPI lists and dashboard layout examples that can be turned into analytics views or agent monitoring interfaces. | 4.2万 | 1.7万 |
| 5 | baoyu-diagramJimLiu · JimLiu/baoyu-skills Generate clean, layered architecture diagrams that clearly communicate system flows to themselves, collaborators, or stakeholders. | 2.7万 | 1.6万 |
| 6 | data-visualizationanthropics · anthropics/knowledge-work-plugins Generate correct, publication-quality Python charts with the right chart type, color theory, and accessibility for dashboards, reports, and AI agent outputs. | 3.5万 | 1.4万 |
| 7 | dashboard-builderaffaan-m · affaan-m/ECC Turn raw metrics into focused operational dashboards for Grafana or SigNoz that operators can actually act on. | 29.9万 | 1万 |
| 8 | dashboardinggrafana · grafana/skills Create, modify, and organize Grafana dashboards with panels, variables, transformations, and alerting rules. | 304 | 9468 |
| 9 | Generate clear visual arguments as Excalidraw JSON files that explain architectures, workflows, and concepts better than text alone. | 5213 | 8771 |
| 10 | drawio-skillAgents365-ai · Agents365-ai/drawio-skill Generate clean, professional diagrams, architecture visuals, flowcharts and UML directly from natural language prompts inside their coding agent. | 1.1万 | 7299 |
Claude向けダッシュボードスキル
ダッシュボードスキルは、KPIを選び、パネルを配置し、ページそのものを作ります。出力は単体のHTMLファイル、Reactアプリ、BIレイアウトなどです。スキルごとの違いは、データの取得元と、どこまでデザインの指針を持っているかにあります。
詳しいガイド: Claude Code向けおすすめダッシュボードスキル
- build-dashboard (anthropics, 9380インストール・GitHubスター3.5万) - Instantly generate a self-contained interactive HTML dashboard with charts, filters, tables and KPI cards that opens in any browser.
- react-vite-dashboard (google-labs-code, 6091インストール・GitHubスター8693) - Convert Stitch designs into React+Vite dashboards with TanStack Query and optional Web3 reads.
- metrics-dashboard (phuryn, 3133インストール・GitHubスター2.8万) - Design a clear, actionable product metrics dashboard complete with KPIs, data sources, visualizations, and alert thresholds.
- wiki-dashboard (Ar9av, 2811インストール・GitHubスター3697) - Generate dynamic, auto-updating dashboard views of their Obsidian knowledge base or project wiki.
- mm2-analytics-dashboard-roblox (reason-machines, 2295インストール・GitHubスター5) - Track Murder Mystery 2 inventory, analyze knife skin values, monitor win rates, and receive AI-powered gameplay optimization recommendations.
Claude向けチャート・データ可視化スキル
チャートスキルは、データに合ったチャートの種類を選び、描画コードを書きます。対応するのはmatplotlibやPlotlyを使うPython、D3、Recharts、ECharts、Swift Chartsなどです。優れたスキルはラベル、配色、アクセシビリティまで面倒を見ます。
詳しいガイド: Claude Code向けおすすめデータ可視化スキル
- chart-visualization (antvis, 6462インストール・GitHubスター530) - Turn raw data or metrics into clear, publication-ready charts without leaving the agent workflow.
- chart-designer (claude-office-skills, 5935インストール・GitHubスター569) - Quickly turn raw data into clear, professional charts and dashboards without manual design iteration.
- charting (Starchild-ai-agent, 4421インストール・GitHubスター32) - Generate professional TradingView-style candlestick charts with technical indicators directly from agent conversations.
- swift-charts (dpearson2699, 4142インストール・GitHubスター1280) - Quickly implement, review, or improve interactive data visualizations in SwiftUI iOS apps using the native Swift Charts API.
- d3-visualization (nexu-io, 3233インストール・GitHubスター10.6万) - Generate production-grade interactive D3.js charts and data visualizations instead of generic Chart.js placeholders.
Claude向けダイアグラムスキル
ダイアグラムスキルは、文章の説明やコードベースから、アーキテクチャ図・フロー図・シーケンス図・ER図をMermaid、Excalidraw、draw.io、素のSVGで生成します。図がコードと同じリポジトリに置けるのが利点です。
詳しいガイド: Claude Code向けおすすめダイアグラムスキル
1つのスキルを詳しく解説: diagram-designスキルのガイド
- external-diagram-mermaid-generate (forcedotcom, 5567インストール・GitHubスター1151) - Generate Mermaid and ASCII diagrams for Salesforce architecture, OAuth flows, ERDs, and Agentforce structure.
- mermaid-diagrams (softaworks, 5201インストール・GitHubスター2643) - Generate clear, version-controlled diagrams that explain architecture, flows, and data models directly from text.
- diagram-creator (claude-office-skills, 5116インストール・GitHubスター569) - Instantly turn architecture thoughts, user flows, and system designs into clean, professional Mermaid and PlantUML diagrams.
- drawio (api, 5031インストール) - Create and edit draw.io diagrams for architecture and flow documentation.
- excalidraw (Agents365-ai, 4649インストール・GitHubスター100) - Generate precise, copy-pasteable Excalidraw JSON diagrams for system architecture, user flows, and component layouts directly from agent prompts.
Claude向け監視ダッシュボードスキル
監視スキルは、メトリクスとログからGrafanaやKibanaのダッシュボードを構築し、各パネルの裏にあるPromQLやLogQLのクエリも書きます。JSONを手で編集しなくても、エージェントがオブザーバビリティ環境を立ち上げられます。
- grafana-dashboards (wshobson, 1.4万インストール・GitHubスター4.2万) - Generate production-ready Grafana dashboards that turn raw Prometheus metrics into clear, hierarchical observability interfaces.
- promql (grafana, 9049インストール・GitHubスター304) - Write, validate, and optimize PromQL queries for Prometheus and Grafana Cloud Metrics.
- promql-cli (samber, 5209インストール・GitHubスター242) - Run instant PromQL queries against Prometheus, Thanos, Cortex, VictoriaMetrics or Grafana Mimir directly from the terminal or agent.
- kibana-dashboards (elastic, 4575インストール・GitHubスター603) - Generate Kibana dashboard definitions and visualizations from natural language descriptions for log and metrics analysis.
- cx-observability-setup (coralogix, 4015インストール・GitHubスター241) - Quickly configure Coralogix observability for a new service including saved views, alert notifications, Slack webhooks, PagerDuty connectors and dashboard organiz
Claude向けデータ可視化MCPサーバー
MCPサーバーはエージェントに描画ツールを与えます。MermaidをSVGにレンダリングする、AntVやVega-Liteでデータをチャート化する、Excalidrawのボードを編集する、稼働中のGrafanaダッシュボードを読み取る、といった操作です。どのチャートや図が適切かを指示するスキルと組み合わせて使います。
- Mcp Server Chart (antvis, GitHubスター4416) - AntVを使ってチャートを生成するModel Context Protocolサーバーです。
- Mcp Grafana (grafana, GitHubスター3646) - Grafanaのダッシュボードやデータなどにアクセスできる、MCPサーバーです。
- Hustcc Mcp Mermaid (hustcc, GitHubスター649) - AIの支援でダイナミックなMermaid図やチャートを生成します。スタイルをカスタマイズして図をエクスポートできます。
- MCP ECharts (hustcc, GitHubスター268) - Generates Apache ECharts charts from an agent for chart generation and data analysis, exporting to png, svg or raw ECharts option, with validation that helps the model correct its own syntax.
- Mermaid MCP Server (peng-shawn, GitHubスター234) - MCP server that converts Mermaid diagram syntax to PNG or SVG images.
Claudeのデータ可視化スキルはどうやってインストールしますか？
- ランキング表かタスク別セクションからスキルを選び、掲載ページを開きます。
- 掲載ページのインストールコマンドを実行します（design-doc-mermaidの場合:
npx skills add https://github.com/SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid）。 - スキルがツール経由で描画する場合（MermaidからSVGへの変換、稼働中のGrafanaなど）は、対応するMCPサーバーも追加します。
- Claude CodeやCodexでダッシュボード、チャート、図の作成を依頼します。タスクがスキルの説明に合致すると、エージェントがスキルを読み込みます。
よくある質問
Claudeのデータ可視化スキルとは何ですか？
Claudeのデータ可視化スキルとは、Claude Codeなどのエージェントに読み込ませるSKILL.md形式の指示ファイルです。スクリプトやテンプレートが同梱されていることもあります。データに合うチャートや図の選び方、使うライブラリや形式、ラベルの付け方をエージェントに教えます。インストールはコマンド1つで、タスクが合致するとエージェントが自動で使います。
最もインストールされているClaudeデータ可視化スキルはどれですか？
design-doc-mermaidが第1位です（9.3万インストール・GitHubスター182）。Instantly turn plain text specs, architecture ideas, or existing code into clean, professional Mermaid diagrams for activity flows, sequences, deployments, and system a。このページのランキングは、skills.shレジストリとGitHubのデータに基づいて自動更新されます。
ClaudeはMermaidやExcalidrawで図を作れますか？
はい、作れます。ダイアグラムスキルを使うと、Claudeは文章の説明やコードからMermaid、ExcalidrawのJSON、draw.ioのXMLを書けます。MCPサーバーを併用すれば、結果をSVGやPNGにレンダリングできます。リポジトリで管理する図にはMermaid、後から手で編集する手書き風のボードにはExcalidrawが向いています。
チャートや図を作るには、スキルとMCPサーバーのどちらが必要ですか？
スキルは「方法」（どのチャートが合うか、どう配置しラベルを付けるか）、MCPサーバーは「ツール」（Mermaidのレンダリング、AntVでのチャート描画、Grafanaダッシュボードの読み取り）です。多くの構成では両方を使い、デザインのルールはスキルに、レンダリングやデータ取得はMCPサーバーに任せます。
Claudeのデータ可視化スキルはどうやってインストールしますか？
ランキング表かタスク別セクションからスキルを選び、そのインストールコマンドを実行します。design-doc-mermaidの場合: npx skills add https://github.com/SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid