Erstellen Sie kostenlos alle Arten von nützlichen Infografiken mit Cursor/Windsur!

Es war einmal eine Zeit, in der das Teilen viel Spaß machteBeispiele für Aufforderungswörter auf der KarteikarteDer Grund dafür ist einfach: Die tatsächliche Absicht des Benutzers stimmt nicht mit dem Musterstil der Vorlage überein. Der Grund ist sehr einfach: diese Karte Karte prompt Wort Vorlage Muster Stil Code ist in der Regel festgelegt, die wirkliche Absicht des Benutzers und Muster-Stil nicht übereinstimmen.

Jemand hat eine allgemeinere Anpassung des Stichworts vorgenommen:Card Diagram Cue Words: grafische Darstellung beliebiger konzeptioneller Schemata mit SVG aber die Nachteile sind offensichtlich:

• Die in der Praxis erzeugten Abbildungen können erheblich von der Absicht des Benutzers abweichen, d. h. dieses StichwortDie Verallgemeinerbarkeit bleibt gering.
• nur wenn Claude um relativ vollständigen SVG-Code zu erzeugen.
• Instabil bei der Einführung von viel Kontext und der Erstellung von Infografiken in mehreren Dialogrunden.

Das ist der Fall:Zuvor eingeführt von Chief AI Sharing Circle:Es sind nicht die Schlagworte, die Sie für die Analyse von Geschäftsdaten mit Hilfe von Big Models lernen müssen, aber diese... Viele meiner Freunde verstehen nicht, was sie mit den Namen von Geschäftsmodellen anfangen sollen, ohne die Stichwörter zu lernen.

Die Antwort lautet:Die Stichworte selbst ermöglichen es Ihnen nicht, gute und nützliche Diagramme mit dem Großen Modell zu erstellen; es kommt darauf an, welche Art von Diagrammen Sie erstellen und mit dem, was Sie wissen, beschreiben wollen!

Die Frage ist...Die Leute verstehen nicht wirklich, wie sie beschreiben müssen, um die richtige Infografik für meine einfache Idee, mein Textdokument oder mein Datendokument zu erstellen.

Im Folgenden werde ich eine einfache Reihe von Methoden entwickeln, die ich ausprobieren möchteErstellung von Infografiken für alleBedingung. Leider ist es möglich, dass die generierte Infografik nicht Serviette Ein schönes Werkzeug der Extraklasse, aber das ist nebensächlich im Vergleich zum Streben nach Praktikabilität. Die folgenden formal in den Betrieb der Link...

Montage

Bitte installieren Sie Cursor oder Windsur, Cursor wird hier empfohlen, weil es mit wenigen Handgriffen verwendet werden kann.Besondere MittelmöglichKostenlose Nutzung.

Instruktionsvorlagen importieren

Diese Vorlage wird aus einem großen Modell generiert, indem eine große Anzahl von Flussdiagrammbeispielen importiert wird. Der effektive Teil der Anleitung besteht aus drei Teilen: Anforderungsanalyse, Referenzbibliothek und Ausgabeschablone. Behalten Sie die vollständige Vorlage für mehr Inspiration.

# Stichwortverzeichnis für die Erstellung professioneller Infografiken mit großen Modellen
## I. Bedarfsanalyse und Auswahl der Grafik
### 1. Vorlage für die Bedarfsanalyse
``.
Analysieren Sie die vom Benutzer vorgelegten Anforderungen, erraten Sie die tatsächlichen Absichten des Benutzers und empfehlen Sie die beste Diagrammart:
1. Inhaltsanalyse:
- Kernkonzepte: [beschreiben Sie den Kerninhalt].
- Merkmale der Daten: [Wert/Klassifizierung/Bestimmung/Hierarchie/Verhältnis/Verteilung/Wahrscheinlichkeit].
- Darstellungsschwerpunkte: [Trend/Vergleich/Verteilung/Zusammensetzung/Korrelation/Transformation/Clustering/Projektion].
- Analysedimensionen: [eindimensional/zweidimensional/mehrdimensional/zeitlich/räumlich]
- Modelltyp: [beschreibend/vorhersagend/entscheidend/analytisch]
2. Zielgruppenanalyse:
- Zielbenutzer: [Entscheidungsträger/Analysten/Kunden/Andere]
- Grad der Fachkenntnis: [Professionell/Semiprofessionell/Generisch]
- Anwendungsszenarien: [Berichterstattung/Demonstration/Analyse/Lehre]
- Präsentation: [Statische Anzeige/Einfache Interaktion]
3 Auswahl der Technologie:
- Diagrammtyp:
* Grundlegende Diagramme: [Linien-/Balken-/Torten-/Punktediagramm].
* Zusammengesetzte Diagramme: [Trichterdiagramm/Radardiagramm/Baumdiagramme].
* Analytische Diagramme: [Matrix/Heatmap/BoxLine Chart].
* Strukturelle Diagramme: [Flussdiagramm / Mindmap / Organigramm] * Statistische Diagramme: [Flussdiagramm / Mindmap / Organigramm
* Statistische Diagramme: [Histogramme/Wahrscheinlichkeitsdiagramme/Regressionsdiagramme]
- Optionen der Diagrammbibliothek:
* Einfache Flussdiagramme → Mermaid.js
* Grundlegende statistische Diagramme → Chart.js
* Geschäftsdiagramme → ECharts Basic
* Professionelle Analyse → Plotly
- Präsentationsstile:
* Einzelne Diagrammdarstellung: Hervorhebung eines einzelnen Fokus
* Multi-Diagramm-Kombination: Darstellung mehrdimensionaler Beziehungen
* Statische Darstellung: feste Datenanzeige
4 Diagramm-Empfehlungen:
- Primäres Diagramm: [Empfohlener primärer Diagrammtyp].
- Hilfsdiagramme: [Zusätzliche Diagrammtypen].
- Layout: [Diagramm-Layout-Vorschläge].
- Farbschema: [Vorschlag für ein Farbschema].
``
### 2. tabellentypische Empfehlungsmatrix
##### a) Chart-Mapping für das Geschäftsanalyse-Modell
```
1. die Analyse des Benutzerverhaltens
- AARRR-Modell → Trichterdiagramm (mehrstufige Farbabstufungen zur Hervorhebung des Konversionsprozesses)
* Akquisition - blaue oberste Ebene
* Aktivierung - grüne zweite Ebene
* Retention - dritte Ebene in gelb
* Umsatz - vierte Ebene in Orange
* Referral - rote untere Ebene
- RFM-Modell → Matrix Heat Map
* Horizontale Achse: Häufigkeit des Kaufs (F)
* Vertikale Achse: Zeitpunkt des letzten Kaufs (R)
* Farbschattierungen: Kaufbetrag (M)
* Kundensegmentierung: unterschiedliche Farbbereiche
- Clusteranalyse → Streudiagramm + Farbgruppierung
2. strategische Analyse
- PEST-Analyse → Quadranten-Kuchendiagramm
* Politisch - grauer Quadrant
* Wirtschaftlich - oranger Quadrant
* Sozial - blauer Quadrant
* Technologisch - gelber Quadrant
- 5W2H-Analyse → Radiographisches Mind Mapping
* Zentrales Thema + 7 dimensionale Knotenpunkte
* Verwenden Sie verschiedene Farben, um zwischen den Dimensionen zu unterscheiden
* Was/Warum/Wo/Wann/Wer/Wie/Wieviel
3. entscheidungsanalyse
- Entscheidungsbaummodell → Hierarchisches Baumdiagramm
* Knoten stellen Entscheidungspunkte dar
* Zweige stellen Optionen dar
* Blattknoten stellen Ergebnisse dar
- Zeitreihenanalyse → Liniendiagramme + Trendlinien
* Hauptkurve zeigt aktuelle Daten
* Gestrichelte Linien zeigen prognostizierte Trends
* Volatilitätsintervalle zeigen Konfidenzniveaus
4. die Effektivitätsanalyse
- Pareto-Diagramme → Kombinierte Balkendiagramme
* Balkendiagramme zeigen Einzelwerte
* Liniendiagramme zeigen kumulative Prozentsätze
- Konversionstrichter → S-förmiges Diagramm
* X-Achse zeigt Zeit/Phase
* Y-Achse zeigt die Konversionsrate
* Die Kurvenform spiegelt die Umwandlungsmerkmale wider.
``
##### b) Zuordnung von Datenmerkmalen zu Diagrammen
```
1) Zeitreihendaten
- Trenddarstellung → Linien-/Flächendiagramm
- Zyklusanalyse → Ring-/Spiraldiagramm
- Kumulative Veränderung → gestapeltes Flächendiagramm
2. klassifizierte Daten
- Verteilungsvergleich → Balken-/Balkendiagramm
- Kompositionsanalyse → Kreisdiagramm/Ringdiagramm
- Hierarchische Beziehungen → Baum-/Sonnendiagramm
3. relationale Daten
- Korrelation → Streudiagramm/Blasendiagramm
- Netzwerkbeziehungen → Beziehungsdiagramm / Sankey-Diagramm
- Hierarchien → Baumdiagramme / Organigramme
4. geografische Daten
- Regionale Verteilung → Karte/Heatmap
- Räumliche Beziehungen → Wegdiagramme / Flussdiagramme
5. mehrdimensionale Daten
- Attributvergleich → Radarkarte/Parallelkoordinatenkarte
- Matrixanalysen → Heatmaps/Matrixdiagramme
```
### 3. Modus der Kartenkombination
```
1. der Hierarchie-Modus
- Hauptdiagramm + Unterdiagramme
- Übersicht + Detail
- Zusammenfassung + Dekomposition
2. mehrdimensionales Modell
- Zeit + Raum
- Struktur + Tendenzen
- Verteilung + Beziehungen
3. vergleichendes Analysemodell
- Erwartete + Tatsächliche
- Jahr-zu-Jahr + YoY
- Prozentsatz + Ranking
4. kausales Analysemodell
- Ursache + Wirkung
- Inputs + Outputs
- Kosten + Erlöse
``
## II. Spezifikationen für die Diagrammerstellung
### 1. Gestaltungsprinzipien
``javascript
// 1. visualPrinciples
const visualPrinciples = {
Hierarchie: {
primary: 'Kerninformation Hervorhebung',
secondary: 'Unterstützende Informationshierarchie',
auxiliary: 'Hilfsinformationen schwach'
}, layout: { primary: 'Kerninformationen hervorgehoben', secondary: 'Unterstützende Informationshierarchie', auxiliary: 'Hilfsinformationen abgeschwächt'
layout: {
balance: 'Visuelles Gleichgewicht der Seite', whitespace: 'Weißraumkontrolle', whitespace: 'Weißraumkontrolle', whitespace: 'Weißraumkontrolle'
Leerraum: 'Leerraumkontrolle', Leerraum: 'Leerraumkontrolle'
}, Lesbarkeit: { Lesbarkeit: { whitespace: 'Visuelle Balance der Seite'
Lesbarkeit: {
Kontrast: 'Moderater Kontrast', Abstand: 'Angemessene Abstände', {
spacing: 'spacing is reasonable', alignment: 'Ausrichtungsangabe'
Ausrichtung: 'Ausrichtungsspezifikation'
}
}
// 2. displayPrinciples
const displayPrinciples = {
clarity: {
title: 'Titel ist klar', label: 'Label ist lesbar', }
label: 'Beschriftungen sind lesbar',
legend: 'legend clear'
}, displayPrinciples
Einfachheit: {
Daten: 'Daten-verfeinert',
style: 'style-restrained', color: 'farblich angepasst'
color: 'farblich abgestimmt', color: 'color-coordinated'
}
}
// 3. adaptive Prinzipien
const adaptivePrinciples = {
responsive: {
layout: 'Grundlegende Layoutanpassung',
content: 'Inhaltsanpassung'
}, performance: { 'Adaptiv', 'Adaptiv', 'Adaptiv'
Leistung: {
loading: 'Ladeoptimierung', rendering: 'Rendering-Optimierung' }, performance: {
Rendering: 'Rendering-Optimierung'
}
}
```
### 2. grundlegender Konfigurationsrahmen
```javascript
const baseConfig = {
// 1. Layout-Konfiguration
Layout: {
container: {
Breite: '100%', maxWidth: '1200px', {
padding: '20px',
margin: '0 auto'
},
spacing: {
sm: '8px',
md: '16px',
lg: '24px'
}
},
// 2. themenbezogene Konfiguration
Thema: {
Farben: {
primär: '#primär-Farbe', sekundär: '#sekundär-Farbe', // 2.
primär: '#Primärfarbe', sekundär: '#Sekundärfarbe', Hintergrund: '#Hintergrundfarbe', // // // 2.
text: '#ext-Farbe'
},
Typografie: {
fontSize: {
sm: '14px', md: '16px', {
md: '16px', lg: '20px'
lg: '20px'
},
fontWeight: {
normal: 400,
fett: 700
}
}
}
}
```
### 3. Strategie der Diagrammerstellung
```javascript
// 1. datenanalyse-strategie
Funktion analyzeDataStrategy(Daten) {
return {
// Charakterisierung der Daten
Merkmale: {
type: 'Datentyp', scale: 'Datengröße', // Datenanalysestrategie function { // Datenanalysestrategie(Daten); } }
scale: 'Datengröße', dimensions: 'Anzahl der Dimensionen'
Dimensionen: 'Anzahl der Dimensionen'
},
// Analyse der Anforderungen anzeigen
Anforderungen: {
Zweck: 'Zweck der Anzeige', // Zielgruppe: 'Zielpublikum', // Analyse der Anzeigeanforderungen: {
Zielgruppe: 'Zielpublikum'
}
}
}
// 2. chart selection strategy
Funktion selectChartStrategy(Analyse) {
return {
// Auswahl des Chart-Typs
chartType: {
primary: 'Primärer Chart-Typ', secondary: 'Sekundärer Chart-Typ', {
secondary: 'Sekundärer Chart-Typ'
},
// Layout-Schema
Layout: {
structure: 'Gesamtstruktur', arrangement: 'Elementanordnung', // layout scheme: {
Anordnung: 'Anordnung der Elemente'
}
}
}
// 3. style mapping strategy
function styleMapStrategy(chartConfig) {
return {
// Visuelle Kodierung
visual: {
color: 'Farbschema', shape: 'Formsystem', {
shape: 'Formsystem'
},
// Reaktionsfähige Regeln
responsive: {
layout: 'Basis-Layout'
}
}
}
```
### 4. das Anpassungsprogramm
```javascript
const adaptiveStrategy = {
// 1. szenariobedingte Anpassung
Szenario: {
Präsentation: {
Stil: 'Präsentationsstil'
}, analysis: { presentation: { style: 'presentation style' }, }
Analyse: {
Tiefe: 'Tiefe der Analyse'
}
},
// 2. Geräteanpassung
Gerät: {
desktop: {
layout: 'desktop layout'
}, mobile: { layout: 'desktop layout'
mobil: {
layout: 'mobiles layout'
}
}
}
```
## iii. Spezifikation der Ausgabe
### 1. HTML-Basisvorlage
``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. variable Beschreibung
``javascript
// 1. basisvariablen
const templateVars = {
// 1.1 Diagrammbibliothek importieren
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>',
Nixe: '<script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>'
},
// 1.2 Container-Struktur
CHART_CONTAINER: {
basic: '<div id="${CHART_ID}"></div>',
withWrapper: `
<div class="chart-wrapper">
<div id="${CHART_ID}"></div>
</div>
`, mitKopfzeile: `, mitKopfzeile: `, mitKopfzeile.
mitKopfzeile: `
<div class="chart-wrapper">
<header>
<h1>${TITLE}</h1>
<div class="description">${BESCHREIBUNG}</div>
</header>
<div id="${CHART_ID}"></div>
</div>
`
},
// 1.3 Stil-Variablen
STYLE_VARS: {
Farben: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
Schriftarten: 'system-ui, -apple-system, "Microsoft YaHei", sans-serif',
Größen: {
mobil: '100%', tablet: '90%', '90%'
tablet: '90%', desktop: '1200px', -apple-system.
desktop: '1200px'
}
}
};
// 2) Skriptvorlagen für die Chart-Initialisierung
const chartInitTemplates = {
// 2.1 Grundlegende Initialisierung
basic: `
document.addEventListener('DOMContentLoaded', function() {
${CHART_INIT_CODE}
});
`, `
// 2.2 Mit Fehlerbehandlung
withErrorHandling: `
document.addEventListener('DOMContentLoaded', function() {
try {
${CHART_INIT_CODE}
} catch (error) {
console.error('Chart rendering failure:', error);
${ERROR_HANDLING_CODE}
}
});
`,'
// 2.3 mit responsiver Unterstützung
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. Stilvorlagen
const styleTemplates = {
// 3.1 Grundlegende Stile
basic: `
body { margin: 0; padding: 15px; }
#${CHART_ID} { width: 100%; height: ${HEIGHT}px; }
`,
// 3.2 Reaktionsfähige Gestaltung
responsive: `
@media screen and (max-width: 768px) {
${MOBILE_STYLES}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
${TABLET_STYLES}
}
@media screen and (min-width: 1025px) {
${DESKTOP_STYLES}
}
`
}; }
``
### 3) Gebrauchsanweisung
``javascript
// 1. basicUsage
const basicUsage = {
// 1.1 Auswählen einer Diagrammbibliothek
selectLib(chartType) {
return templateVars.CHART_LIB_IMPORTS[chartType];
},
// 1.2 Auswählen des Containers
selectContainer(type, params) {
return templateVars.CHART_CONTAINER[type]
.replace('${CHART_ID}', params.chartId)
.replace('${TITLE}', params.title)
.replace('${DESCRIPTION}', params.description);
},
// 1.3 Auswahl der Initialisierungsvorlage
selectInitTemplate(type) {
return chartInitTemplates[type];
}
}; }
// 2. erweiterte Verwendung
const extendedUsage = {
// 2.1 Benutzerdefinierte Stile
customStyle: `
${styleTemplates.basic}
${styleTemplates.responsive}
${CUSTOM_STYLES}
`, `, `.
// 2.2 Benutzerdefinierte Interaktionen
customInteraction: `
${INTERACTION_CODE}
`
}
```
#-Einschränkungen
- Bitte halten Sie sich strikt an die oben genannten Spezifikationen und Vorlagen für die Codegenerierung, um sicherzustellen, dass das Ergebnis der HTML-Ausgabedatei den Erwartungen entspricht.

Erstellen Sie am Beispiel von Cursor eine help.cursorrules Datei, kopieren Sie dann die obige Eingabeaufforderung und speichern Sie sie.

ausnutzen

Korrektes Verweisen auf die Prompt-Beschreibungsdatei und Einschalten des Agentenmodus

1. kontextfreie Erstellung von Infografiken

ausnutzen Geschäftsdatenanalyse mit großen Modellen Bei der Methode zur Erstellung des "RFM-Modells" ist das RFM-Modell sehr repräsentativ, da eine angemessene Darstellung der Infografik dreidimensionaler sein sollte, um die Beziehung zwischen den drei R, F, M widerzuspiegeln. Der erste Versuch ohne Ziel:

Da meine Anfrage darauf abzielte, "Beispiele" zu generieren, war sie eher darauf ausgerichtet, die Kernkonzepte zu demonstrieren, und konstruierte nicht die Analysediagramme, die wir im Sinn hatten, was auch ein Problem während der Denkphase des Agenten war. Wir hätten den Gedankengang des Agenten unterbrechen und um eine andere Methode der Generierung bitten können, was ich nicht getan habe.

Zu diesem Zeitpunkt haben sich die Vorteile der Lösung gezeigt, derselbe Prozess ist mit anderen Werkzeugen und Modellen nur schwer durchführbar, und der Endpunkt der Erstellung von Infografiken sollte darin bestehen, auf umfangreiche Bibliotheken zurückzugreifen.

Als Nächstes lud ich eine 3D-RFM-Illustration hoch und bat darum, sie nach meinem Bild zu erstellen:

Übrigens, diesmal kann das Thema Stilüberschneidung erneut zur Änderung angefordert werden, und es wird hier keine weitere Optimierung vorgenommen.

Ändern Sie eine Aufgabe: nicht zeigen, den Betrieb Prozess hier, nur Blick auf die Wirkung, die Anweisung ist: ein Flussdiagramm des Unternehmens WeChat autorisierten Login zu generieren, für die technische Entwicklung.

2. kontextabhängige Erstellung von Infografiken

vergleichbar Serviette Sie können Artikel importieren, um Infografiken zu erstellen, aber Sie können diese Lösung verwenden, um mehrere Infografiken zu erstellen, die auf verschiedenen Inhalten im Artikel basieren. Eine einfache Demo: (löschen Sie den vorherigen Dialogsatz und die generierten Bilder vor der Demo)

Laden Sie zunächst einen langen Artikel hoch und speichern Sie ihn als text.md:

Eingabeanweisungen: Analysieren Sie den Schwerpunkt des Artikels text.md, wählen Sie 2 Kernthemen des Artikels aus und erstellen Sie ein Diagramm. (erfordert noch freies Spiel für große Modelle)

Diesmal wurde ein Flussdiagramm erstellt, und es gab Nachteile, der Artikel war zu lang, der Inhalt selbst beschrieb die Logik des Problems, nur Menschen können das vollständige Flussdiagramm durch Raten verfeinern, und es ist verständlich, dass das große Modell natürlich kein sehr perfektes Diagramm erstellen kann.

Im letzten Beispiel geben wir eine Reihe von Daten ein und mischen einige finanzielle Inhalte hinein, um zu sehen, wie gut die Datenanalyse dargestellt wird:

PS: Unser Ziel ist nicht die Datenanalyse, sondern die visuelle Darstellung der Ergebnisse der Datenanalyse. In der Tat kann die Analyse großer Datenmengen bis zur Präsentation der Informationen, die sich auf die Fähigkeiten des Agenten zur Aufgabenplanung stützt, in einem Schritt erfolgen (z. B. durch die Einführung eines Agenten, der die Daten analysieren kann). MCP Dienstleistungen), wird diese Frage nicht eingehend erörtert.

Es wurden drei Diagramme erstellt:

1. das Unternehmen im Überblick

2. finanzieller Vergleich

3. wettbewerbsfähiger Vorteil

ultimativ

Jede dieser KI-IDEs kann "Werkzeuge" aufrufen, typischerweise die Cline Der MCP wird in dem Befehl referenziert. Wenn Sie vor der Anzeige der Diagramme eine ausführliche Datenanalyse durchführen möchten, können Sie zusätzlich zu den bestehenden Aufforderungen den Cursor bitten, eine Python-Umgebung einzurichten, dann ein Analyseskript für das von Ihnen angegebene Datenbeispiel zu erstellen und am Ende der Befehlsvorlage eine Anweisung zu geben, die lautet: Versuchen Sie bei der Datenanalyse, das Skript XXX.py auszuführen. Die Möglichkeiten sind endlos!