mcpField
I
infographic

infographic

github.com/markdown-viewerデザイン・UI3.4k3.5k 回インストール3 週間前に更新
リポジトリ

infographic について

定義済みのテンプレートとテキスト構文を使い、構造化データをインフォグラフィックにするスキルです。リスト、タイムライン、工程、比較、チャート、階層図に対応します。

主な機能

  1. 01リスト・タイムライン・工程のテンプレート
  2. 02比較・SWOT・象限レイアウト
  3. 03円・棒・折れ線チャートのテンプレート
  4. 04インフォグラフィック用データ構文

活用シーン

  1. 01プロジェクトのマイルストーンをタイムラインで表示
  2. 02選択肢の比較やSWOT分析の整理
  3. 03チャートの値や優先度マトリクスの可視化

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/markdown-viewer/skills --skill infographic

インストール後、Claude Code で/infographicを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
examples.md
syntax.md
templates.md

詳細

インフォグラフィックビジュアライザー

⚠️ テンプレートを確認してください： テンプレート名が正しくないと、レンダリングに失敗します。

使用する場面と利用可能なテンプレート

✅ 次の場合はインフォグラフィックを使用してください：

  • 機能一覧／チェックリスト：list-grid-badge-card、list-grid-candy-card-lite、list-grid-ribbon-card、list-column-done-list、list-column-vertical-icon-arrow、list-column-simple-vertical-arrow、list-row-horizontal-icon-arrow、list-row-simple-illus、list-sector-plain-text、list-zigzag-down-compact-card、list-zigzag-down-simple、list-zigzag-up-compact-card、list-zigzag-up-simple
  • タイムライン／マイルストーン：sequence-timeline-simple、sequence-timeline-rounded-rect-node、sequence-timeline-simple-illus
  • ステップごとのプロセス：sequence-snake-steps-simple、sequence-snake-steps-compact-card、sequence-snake-steps-underline-text、sequence-stairs-front-compact-card、sequence-stairs-front-pill-badge、sequence-ascending-steps、sequence-ascending-stairs-3d-underline-text、sequence-circular-simple、sequence-pyramid-simple、sequence-mountain-underline-text、sequence-cylinders-3d-simple、sequence-zigzag-steps-underline-text、sequence-zigzag-pucks-3d-simple、sequence-horizontal-zigzag-underline-text、sequence-horizontal-zigzag-simple-illus、sequence-color-snake-steps-horizontal-icon-line
  • 製品ロードマップ：sequence-roadmap-vertical-simple、sequence-roadmap-vertical-plain-text
  • ファネル／コンバージョン：sequence-filter-mesh-simple、sequence-funnel-simple
  • A対Bの比較：compare-binary-horizontal-underline-text-vs、compare-binary-horizontal-simple-fold、compare-binary-horizontal-badge-card-arrow、compare-hierarchy-left-right-circle-node-pill-badge
  • SWOT分析：compare-swot
  • 優先度マトリクス2×2：quadrant-quarter-simple-card、quadrant-quarter-circular、quadrant-simple-illus
  • 組織ツリー／階層：hierarchy-tree-tech-style-capsule-item、hierarchy-tree-curved-line-rounded-rect-node、hierarchy-tree-tech-style-badge-card、hierarchy-structure
  • 円グラフ／ドーナツグラフ：chart-pie-plain-text、chart-pie-compact-card、chart-pie-donut-plain-text、chart-pie-donut-pill-badge
  • 棒グラフ／縦棒グラフ：chart-bar-plain-text、chart-column-simple、chart-line-plain-text
  • ワードクラウド：chart-wordcloud
  • 関係／円：relation-circle-icon-badge、relation-circle-circular-progress

構文構造

infographic <template-name>
data
  title Title
  desc Description
  items
    - label Label
      value 12.5
      desc Explanation
      icon mdi/rocket-launch
theme
  palette #3b82f6 #8b5cf6 #f97316

ルール： 1行目は infographic <template-name>（テンプレート一覧の名前と一致する必要があります） | インデントは半角スペース2つ | key value の組（スペース区切り、key: value ではありません） | 配列には - を付ける | 比較テンプレートでは、children を持つルート項目がちょうど2つ必要です | SWOTでは、項目がちょうど4つ必要です（英語で Strengths／Weaknesses／Opportunities／Threats） | 象限テンプレートでは、children を持つ項目がちょうど4つ必要です | リストテンプレートでは value ではなく desc を使用します | hierarchy-structure は最大3階層です | description ではなく desc を使用します | steps ではなく items を使用します

⚠️ よくある間違い（レンダリングに失敗します）
❌ WRONG — Do NOT use YAML colon syntax:
template: list-grid-badge-card     ← wrong! no "template:" key
title: My Title                    ← wrong! colons are not allowed
items:                             ← wrong! no colon after items
  - label: Item One                ← wrong! no colon after label
    description: Some text         ← wrong! field is "desc" not "description"
    value: "100"                   ← wrong! no colon, and value must be numeric
steps:                             ← wrong! field is "items" not "steps"
left:                              ← wrong! compare uses 2 root items + children
  label: Option A                  ← wrong! compare structure is flat items
quadrants:                         ← wrong! quadrant uses 4 items + children

✅ CORRECT — Space-separated key-value, 2-space indent:
infographic list-grid-badge-card
data
  title My Title
  items
    - label Item One
      desc Some text
      value 100

データフィールド

フィールド説明例
label項目のタイトル／名前（必須）label Q1 Sales
desc説明テキストdesc $1.28B | +20%
value数値（グラフ／ファネルのみ）value 128
time時刻ラベル（タイムラインテンプレートのみ）time Q1 2024
iconアイコン：mdi/icon-name（Iconify）icon mdi/star
illusイラスト名（unDraw）illus coding
children入れ子の項目（階層／比較）例を参照
done完了状況（チェックリスト）done true

基本的な例

機能グリッド（list-grid-badge-card）
infographic list-grid-badge-card
data
  title Key Metrics
  desc Annual performance overview
  items
    - label Total Revenue
      desc $1.28B | YoY +23.5%
    - label New Customers
      desc 3280 | YoY +45%
    - label Satisfaction
      desc 94.6% | Industry leading
    - label Market Share
      desc 18.5% | Rank #2
タイムライン（sequence-timeline-simple）

タイムラインの項目では、時刻ラベルに time、マイルストーン名に label を使用します。

infographic sequence-timeline-simple
data
  title Product Roadmap
  items
    - label Research
      time Q1 2024
      desc Research phase
    - label Design
      time Q2 2024
      desc Design phase
    - label Development
      time Q3 2024
      desc Development
    - label Launch
      time Q4 2024
      desc Launch
ファネルグラフ（sequence-filter-mesh-simple）
infographic sequence-filter-mesh-simple
data
  title Sales Funnel
  items
    - label Leads
      value 10000
      desc Market leads
    - label Qualified
      value 2500
      desc 25% conversion
    - label Proposals
      value 800
      desc 32% conversion
    - label Closed
      value 328
      desc 41% conversion
チェックリスト（list-column-done-list）
infographic list-column-done-list
data
  title Launch Checklist
  items
    - label Code review completed
      done true
    - label Tests passing
      done true
    - label Documentation updated
      done false
    - label Deploy to production
      done false
A 対 B の比較（compare-binary-horizontal-underline-text-vs）
infographic compare-binary-horizontal-underline-text-vs
data
  title Cloud vs On-Premise
  items
    - label Cloud
      children
        - label Scalable on demand
        - label Pay as you go
    - label On-Premise
      children
        - label Full control
        - label One-time cost
SWOT 分析（compare-swot）

英語のラベルを使用して、項目を正確に 4 つ含める必要があります：Strengths、Weaknesses、Opportunities、Threats

infographic compare-swot
data
  title Strategic Analysis
  items
    - label Strengths
      children
        - label Strong R&D
        - label Complete supply chain
    - label Weaknesses
      children
        - label Limited brand awareness
        - label High costs
    - label Opportunities
      children
        - label Digital transformation
        - label Emerging markets
    - label Threats
      children
        - label Intense competition
        - label Market changes
円グラフ／ドーナツグラフ（chart-pie-donut-plain-text）
infographic chart-pie-donut-plain-text
data
  title Revenue by Product
  items
    - label Enterprise Software
      value 42
    - label Cloud Services
      value 28
    - label Hardware
      value 18
    - label Services
      value 12
組織ツリー（hierarchy-tree-tech-style-capsule-item）
infographic hierarchy-tree-tech-style-capsule-item
data
  title Organization Structure
  items
    - label CEO
      children
        - label VP Engineering
          children
            - label Frontend Team
            - label Backend Team
        - label VP Product
          children
            - label Design
            - label Research
優先順位マトリックス（quadrant-quarter-simple-card）

象限テンプレートでは、children を持つルート項目が正確に 4 つ必要です。4 つの項目は、それぞれ 4 つの象限を表します。

infographic quadrant-quarter-simple-card
data
  title Priority Matrix
  items
    - label Do First
      desc Urgent & Important
      children
        - label Critical bugs
        - label Client deadlines
    - label Schedule
      desc Not Urgent & Important
      children
        - label Planning
        - label Training
    - label Delegate
      desc Urgent & Not Important
      children
        - label Meetings
        - label Some emails
    - label Eliminate
      desc Not Urgent & Not Important
      children
        - label Time wasters
        - label Busy work

出力形式

```infographic
infographic <template-name>
data
  title Your Title
  items
    - label Item 1
      desc Description here
```
テーマ（任意）

data の内側ではなく、data と同じ階層に theme ブロックを追加します。

# Preset theme (single line)
theme dark

# Custom palette
infographic list-grid-badge-card
theme
  palette #3b82f6 #8b5cf6 #f97316
data
  title My Title
  items
    - label Item 1

利用可能なプリセット：dark、hand-drawn

関連ファイル

詳細な構文、テンプレート、例については、以下のリファレンスを参照してください。

  • syntax.md — 構文とルールの完全な仕様
  • templates.md — 利用可能なすべてのテンプレートと説明
  • examples.md — 各テンプレートカテゴリの完全な例

リソース

コメント

Markdown 対応