infographic

Infographic Visualizer

⚠️ 檢查模板： 錯誤的模板名稱會導致渲染失敗。

使用時機與可用模板

✅ 使用 infographic 的時機：

功能列表 / 核取清單：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 vs 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

⚠️ 常見錯誤（會導致渲染失敗）

❌ 錯誤 — 請勿使用 YAML 冒號語法：
template: list-grid-badge-card     ← 錯誤！不能有 "template:" 鍵
title: My Title                    ← 錯誤！不允許冒號
items:                             ← 錯誤！items 後面不能有冒號
  - label: Item One                ← 錯誤！label 後面不能有冒號
    description: Some text         ← 錯誤！欄位是 "desc" 而非 "description"
    value: "100"                   ← 錯誤！不能有冒號，且 value 必須是數值
steps:                             ← 錯誤！欄位是 "items" 而非 "steps"
left:                              ← 錯誤！比較使用 2 個根項目 + children
  label: Option A                  ← 錯誤！比較結構是扁平項目
quadrants:                         ← 錯誤！象限使用 4 個項目 + children

✅ 正確 — 空格分隔的鍵值對，2 空格縮排：
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 vs 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）

象限模板需要恰好 4 個根項目，每個項目包含 children。這 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 區塊：

# 預設主題（單行）
theme dark

# 自訂調色盤
infographic list-grid-badge-card
theme
  palette #3b82f6 #8b5cf6 #f97316
data
  title My Title
  items
    - label Item 1

可用預設：dark、hand-drawn

資源

您可能也喜歡

gifgrep

386Kresearch-knowledge

Search GIF providers with CLI/TUI, download results, and extract stills/sheets.

openclaw

獲取

blucli

385Kresearch-knowledge

用於裝置搜尋、播放控制、群組管理與音量控制的 BluOS CLI (blu) 工具。

steipete

獲取

orch-pipeline

240Kresearch-knowledge

Shared orchestration engine for the orch-* skill family. Defines the gated Research-Plan-TDD-Review-Commit pipeline, the size classifier, the agent map, and the two human gates that the orch-* operation skills delegate to. Not usually invoked directly. Not usually invoked directly; it applies when an orch-* skill delegates its gated Research-Plan-TDD-Review-Commit pipeline.

affaan-m

獲取

繼續探索

瀏覽 research-knowledge 熱門 Skills 最近更新