Cursor/Windsurで便利なインフォグラフィックを無料で作成

昔々、多くの楽しみを分かち合ったカード・チャートのプロンプト・ワードの例理由は簡単で、ユーザーの本当の意図とテンプレートのサンプルスタイルが一致しないからです。理由はとても簡単で、これらのカードマッププロンプトのワードテンプレートのサンプルスタイルのコードは一般的に固定されており、ユーザーの本当の意図とサンプルスタイルが一致しないからです。

誰かがキュー・ワードをより一般的に適応させた：カード・ダイアグラム・キューワード：SVGであらゆる概念図式をグラフィカルに表現しかし、欠点は明らかだ：

実際の使用時に生成されるイラストは、ユーザーの意図から大きく逸脱する可能性がある。一般化可能性は依然として低い。
ただしクロード比較的完全なSVGコードを生成するためだ。
多くのコンテクストを導入し、何度も対話する中でインフォグラフィックを生成すると不安定になる。

たまたまだ：前回はチーフAIシェアリングサークルが紹介した：ビッグモデルを使ったビジネス・データ分析のために覚えなければならないのは、出だしの言葉ではない。私の友人の多くは、ビジネスモデルの名称をどうすればいいのか、手がかりとなる言葉を学ばなければ理解できない。

答えはこうだ：重要なのは、どのようなダイアグラムを作成し、自分の知っていることを使ってそれを説明するかということなのです！

問題は...人々は、私の単純なアイデア、テキスト文書、またはデータ文書に対して適切なインフォグラフィックを生成するために、どのように記述すればよいかを理解していない。

以下、簡単なメソッド群を組み立ててみる。あらゆる人に適したインフォグラフィックを作成する要件申し訳ございませんが、生成されたインフォグラフィックが以下の要件を満たしていない可能性があります。ナプキンそれだけで一級品の美しい道具だが、実用性の追求に比べれば取るに足らないことだ。以下は、正式にリンクの操作方法についてである。

取り付け

インストールしてくださいカーソルやWindsurと併用できるため、ここではCursorを推奨する。特別な手段可能利用無料.

命令テンプレートのインポート

このテンプレートは、多数のフローチャート例をインポートすることにより、大規模なモデルから生成され、命令の効果的な部分は、要件分析、参照ライブラリ、出力テンプレートの3箇所から構成されています。より多くのインスピレーションを得るために、テンプレートの全容を把握しておきましょう。

# ビッグモデルを使ってプロフェッショナルなインフォグラフィックスを作成するためのキューワードガイド
## I. ニーズ分析と図表の選択
### 1.要求分析テンプレート
``.
ユーザーから提示された要件を分析し、ユーザーの真の意図を推測し、最適なダイアグラムのタイプを推奨してください：
1. 内容分析：
- 核となる概念： [核となる内容を記述する]。
- データの特徴: [値/分類/時系列/階層/関係/分布/確率]。
- 表示の焦点: [傾向/比較/分布/構成/相関/変換/クラスタリング/投影]。
- 分析の次元: [一次元/二次元/多次元/時間的/空間的].
- モデルタイプ: [記述的/予測的/意思決定的/分析的].
2.オーディエンス分析
- ターゲットユーザー: [意思決定者/アナリスト/顧客/その他] 3.
- 専門性の程度： [プロフェッショナル/セミプロフェッショナル/ジェネリック］
- 利用シーン：［報告／デモンストレーション／分析／教育］
- プレゼンテーション：［静的表示／簡易インタラクション］
3.技術の選択
- チャートタイプ
* 基本的なチャート：[折れ線グラフ/棒グラフ/円グラフ/散布図]。
* 複合チャート： [ファネルチャート/レーダーチャート/ツリーダイアグラム].
* 分析チャート：[マトリックス/ヒートマップ/ボックスラインチャート]。
* 構造チャート： [フローチャート/マインドマップ/組織図] * 統計チャート： [フローチャート/マインドマップ/組織図
* 統計図表: [ヒストグラム/確率プロット/回帰チャート].
- チャートライブラリオプション：
* シンプルなフローチャート → Mermaid.js
* 基本的な統計チャート → Chart.js
* ビジネスチャート → ECharts Basic
* プロフェッショナル分析 → Plotly
- プレゼンテーション・スタイル
* 単一チャート表示：単一のフォーカスを強調表示
* 複数チャートの組み合わせ：複数次元の関係を表示
* 静的表示：固定データ表示
4.推奨チャート
- プライマリーチャート：[推奨されるプライマリーチャートタイプ]。
- 補助チャート: [追加チャートタイプ]。
- レイアウト: [チャートレイアウトの提案].
- 配色: [配色の提案].
``
### 2.チャートタイプ推奨マトリックス
###### a) ビジネス分析モデルチャートマッピング
```
1.ユーザー行動分析
- AARRRモデル → ファネルチャート（コンバージョンプロセスを強調する多段階グラデーションカラー）
* 獲得 - 青の最上層
* アクティベーション - 緑の第2層
* リテンション - 黄色の第3層
* 収益 - オレンジ色の第4層
* 紹介-赤の最下層
- RFMモデル →マトリックス・ヒートマップ
* 横軸：購入頻度（F）
* 縦軸：最終購入時間（R）
* 色の濃淡：購入金額（M）
* 顧客セグメンテーション：色の異なる地域
- クラスター分析 → 散布図＋色分け
2.戦略分析
- PEST分析 → 四分円グラフ
* 政治：グレーの象限
* 経済-オレンジ色の象限
* 社会-青の象限
* 技術-黄色の象限
- 5W2H分析 → ラジオグラフィック・マインドマッピング
* 中心テーマ＋7つの次元ノード
* 異なる色を使って次元を区別する
* 何を／なぜ／どこで／いつ／誰が／どのように／どれだけ
3.意思決定分析
- 意思決定ツリーモデル → 階層ツリー図
* ノードは意思決定ポイントを表す
* 枝は選択肢を表す
* リーフノードは結果を表す
- 時系列分析 → 折れ線グラフ＋トレンドライン
* 主曲線は実際のデータを示す
* 破線は予測トレンドを示す
* ボラティリティ・インターバルは信頼水準を示す
4.効果分析
- パレート図 → 複合棒グラフ
* 棒グラフは個々の値を示す
* 折れ線グラフは累積パーセンテージを示す
- コンバージョンファネル → S字型グラフ
* X軸は時間／フェーズを示す。
* Y軸はコンバージョン率
* カーブ形状はコンバージョン特性を反映
``
###### b) データ機能のチャートへのマッピング
```
1.時系列データ
- トレンド表示 → ライン/エリアチャート
- サイクル分析 → リング／スパイラルチャート
- 累積変化 → 積み上げエリアチャート
2.分類データ
- 分布比較 → 棒/梁チャート
- 構成分析 → 円グラフ・リングチャート
- 階層関係→樹形図／旭日図
3.関係データ
- 相関関係 → 散布図／バブルチャート
- ネットワーク関係 → 関係図／サンキー図
- 階層 → ツリー図／組織図
4. 地理的データ
- 地域分布 → 地図／ヒートマップ
- 空間的関係 → パスダイアグラム／フローダイアグラム
5.多次元データ
- 属性比較 → レーダーマップ／平行座標図
- マトリックス分析 → ヒートマップ／マトリックスダイアグラム
```
### 3. チャート組み合わせモード
```
1.階層モード
- メインチャート＋サブチャート
- 概要＋詳細
- 概要＋分解
2.多次元モデル
- 時間＋空間
- 構造＋傾向
- 分布＋関係
3.比較分析モデル
- 予想＋実績
- 前年比＋前年同月比
- パーセンテージ＋ランキング
4.原因分析モデル
- 原因＋結果
- インプット＋アウトプット
- コスト＋収益
``
## II.チャート生成の仕様
### 1.設計原理
javascript
// 1. ビジュアル・プリンシプル
const visualPrinciples = { (ビジュアル・プリンシプル)
階層: {
primary: 'コア情報のハイライト'、
secondary: 'サポート情報階層'、
auxiliary: '補助情報の弱さ'
}, layout: { primary: 'コア情報の強調', secondary: 'サポート情報の階層', auxiliary: '補助情報の弱め'
レイアウト: {
balance: 'ページの視覚的バランス', whitespace: 'ホワイトスペースのコントロール', whitespace: 'ホワイトスペースのコントロール', whitespace: 'ホワイトスペースのコントロール'
whitespace: '空白のコントロール'
読みやすさ: {
contrast: '適度なコントラスト', spacing: '適度なスペーシング', {
spacing: '適度な間隔', alignment: 'アライメント指定'
alignment: 'アライメント指定'
}
}
// 2.
コンスタント displayPrinciples = {
clarity: {
title: 'タイトルは明瞭', label: 'ラベルは読みやすい', }.
label: 'ラベルは読みやすい'、
legend: '凡例が明確'
}, displayPrinciples
シンプルさ: {
data: '洗練されたデータ'、
style: 'スタイル抑制', color: 'カラーマッチ'
color: 'カラーコーディネート'
}
}
// 3. アダプティブ・プリンシプル
コンスタントにadaptivePrinciples = {。
responsive: {
layout: '基本的なレイアウト適応'、
content: 'コンテンツ適応'
}, performance: { 'アダプティブ', 'アダプティブ', 'アダプティブ'
performance: {
loading: '読み込みの最適化', rendering: 'レンダリングの最適化' }, performance: {
rendering: 'レンダリングの最適化'
}
}
```
### 2.基本構成フレームワーク
javascript
const baseConfig = { (ベースコンフィグ)
// 1. レイアウト構成
layout: {
container: {
width: '100%', maxWidth: '1200px', {
padding: '20px'、
margin: '0 auto'
},
spacing: {
sm: '8px'、
md: '16px'、
lg: '24px'
}
},
// 2.テーマの設定
テーマ: {
カラー: {
primary: '#primary-colour', secondary: '#secondary-colour', // 2.
primary: '#primary-colour', secondary: '#secondary-colour', background: '#background-colour', // // 2.
text: '#text-color'.
},
タイポグラフィ: {
フォントサイズ: {
sm: '14px', md: '16px', { { md: '16px
md: '16px', lg: '20px'
lg: '20px'
},
フォントウェイト: {
regular: 400、
太字：700
}
}
}
```
### 3.チャート生成戦略
javascript
// 1.データ分析ストラテジー
ファンクション analyzeDataStrategy(data) {
return {
// データの特徴
characteristics: {
type: 'データ型', scale: 'データサイズ', // データ分析ストラテジー function { // データ分析ストラテジー(data); } } }.
scale: 'データサイズ', dimensions: '次元数'
dimensions: '次元数'
},
// 要件分析を表示する
requirements: {
purpose: '表示の目的', // audience: 'ターゲットオーディエンス', // 表示要件分析: {
audience: 'ターゲットオーディエンス'
}
}
}
// チャート選択ストラテジー
関数 selectChartStrategy(分析) { を実行する。
return {
// チャートタイプの選択
chartType: {
primary: 'プライマリー・チャート・タイプ', secondary: 'セカンダリー・チャート・タイプ', {
secondary: 'セカンダリーチャートタイプ'
},
// レイアウトスキーム
レイアウト: {
structure: '全体構造', arrangement: '要素の配置', // レイアウトスキーム layout: {
arrangement: '要素の配置'
}
}
}
// スタイル・マッピング戦略
関数styleMapStrategy(chartConfig) { { スタイルマッピング戦略
return {
// ビジュアルエンコーディング
ビジュアル: {
color: 'カラースキーム', shape: 'シェイプシステム', {
shape: 'シェイプシステム'
},
// レスポンシブ・ルール
レスポンシブ: {
layout: '基本レイアウト'
}
}
}
```
### 4.適応プログラム
javascript
コンスタントにadaptiveStrategy = {。
// シナリオ適応
シナリオ: {
プレゼンテーション: {
style: 'プレゼンテーション・スタイル'
}, analysis: { presentation: { style: 'プレゼンテーション・スタイル' }, }.
分析: {
depth: '分析の深さ'
}
},
// 2. デバイスの適応
デバイス: {
desktop: {
レイアウト: 'デスクトップレイアウト
}, mobile: { layout: 'デスクトップレイアウト'
モバイル: {
レイアウト: 'モバイルレイアウト
}
}
}
```
## ⅲ. 出力仕様
### 1. HTMLベーステンプレート
``html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${TITLE}</title>
<script src="${CHART_LIB_URL}"></script>
</head>
<body>
<div class="chart-container">
<h1 class="chart-title">${TITLE}</h1>
<div id="chart"></div>
</div>
</body>
</html>
``
### 2.変数の説明
javascript
// 1.基本変数
const templateVars = {.
// 1.1 チャートライブラリのインポート
chart_lib_imports: {
echarts: '<script src="https://cdn.jsdelivr.net/npm/echarts@latest"></script>',
d3: '<script src="https://cdn.jsdelivr.net/npm/d3@latest"></script>',
chartjs: '<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>',
マーメイド: '<script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>'
},
// 1.2 コンテナ構造
chart_container: {
basic: '<div id="${CHART_ID}"></div>',
withWrapper: `.
<div class="chart-wrapper">
<div id="${CHART_ID}"></div>
</div>
withHeader: `, withHeader: `, withHeader.
withHeader: `です。
<div class="chart-wrapper">
<header>
<h1>${TITLE}</h1>
<div class="description">${description}</div>
</header>
<div id="${CHART_ID}"></div>
</div>
`
},
// 1.3 スタイル変数
STYLE_VARS: {
colours: ['#5470c6', '#91cc75', '#fac858', '#ee6666']、
fonts: 'system-ui, -apple-system, "Microsoft YaHei", sans-serif'、
サイズ: {
mobile: '100%'、tablet: '90%'、'90%'
tablet: '90%', desktop: '1200px', -apple-system.
desktop: '1200px'
}
}
};
// チャート初期化スクリプト・テンプレート
const chartInitTemplates = {.
// 2.1 基本的な初期化
basic: `
document.addEventListener('DOMContentLoaded', function() {)
${chart_init_code}。
});
`, `
// 2.2 エラー処理あり
withErrorHandling: `.
document.addEventListener('DOMContentLoaded', function() {)
try {
${chart_init_code}。
} catch (error) {
console.error('Chart rendering failure:', error)；
${error_handling_code}。
}
});
`,'
// 2.3レスポンシブ対応
withResponsive: `.
document.addEventListener('DOMContentLoaded', function() {)
try {
${chart_init_code}。
window.addEventListener('resize', function() {)
${resize_handling_code}。
}); }
} catch (error) {
console.error('Chart rendering failure:', error)；
${error_handling_code}。
}
});
'
};
// 3. スタイル・テンプレート
const styleTemplates = { スタイル・テンプレート
// 3.1 基本スタイル
基本: `
body { margin: 0; padding: 15px; }.
#${CHART_ID} { width: 100%; height: ${HEIGHT}px; }.
`,
// 3.2 レスポンシブ・スタイリング
レスポンシブ: `
media screen and (max-width: 768px) { { // 3.2 レスポンシブ スタイリング: `.
${mobile_styles}。
}
@media screen and (min-width: 769px) and (max-width: 1024px) { ${tablet_styles
${tablet_styles}。
}
@media screen and (min-width: 1025px) {
${デスクトップスタイル}}。
}
`
}; }
``
### 3.使い方の説明
javascript
// 1. 基本的な使用法
const basicUsage = {.
// 1.1 チャートライブラリの選択
selectLib(chartType) {
return templateVars.CHART_LIB_IMPORTS[chartType]；
},
// 1.2 コンテナの選択
selectContainer(type, params) { を返します。
return templateVars.CHART_CONTAINER[type].
.replace('${CHART_ID}', params.chartId)
.replace('${TITLE}', params.title)
.replace('${DESCRIPTION}', params.description)；
},
// 1.3 初期化テンプレートの選択
selectInitTemplate(type) { 初期化テンプレートを選択します。
return chartInitTemplates[type]；
}
}; }
// 2. 拡張使用法
const extendedUsage = {.
// 2.1 カスタムスタイル
customStyle: `
${styleTemplates.basic}。
${styleTemplates.responsive}。
${custom_styles}.
`, `, `.
// 2.2 カスタムインタラクション
カスタムインタラクション: `
${interaction_code} `.
`
}
```
#の制約
- 出力されるHTMLファイルの結果が期待通りになるように、上記の仕様とコード生成用テンプレートを厳密に守ってください。

カーソルを例にして ヘルプ.カーソル ファイルを開き、上記のプロンプトの言葉をコピー・アンド・ペーストして保存する。