Dina diagram blir alltid en sista-minuten-paniksatsning. Du hittar datan, kopierar in den i ett kalkylark, brottas med ett diagramverktyg, exporterar en PNG, laddar sedan upp den igen till WordPress och hoppas att storleken inte ser konstig ut i inlägget.
Content marketers känner igen det när en ”snabb” uppdatering blir en timme av pill. Analytiker kör in i samma vägg när intressenter ber om ”en visual till”. Byråteam som uppdaterar kundinlägg drabbas också. Den här automatiseringen för QuickChart WordPress-diagram förvandlar webbdata till publiceringsklara bilder i ditt mediebibliotek.
Du får se hur arbetsflödet hämtar live-data från webben, genererar en Chart.js-konfiguration, renderar den med QuickChart och laddar upp den direkt till WordPress så att du kan publicera snabbare och uppdatera visualiseringar när som helst.
Så fungerar automatiseringen
Här är hela arbetsflödet du kommer att sätta upp:
n8n Workflow Template: QuickChart till WordPress, diagram redo att publicera
flowchart LR
subgraph sg0["When Executed by Another Workflow Flow"]
direction LR
n0@{ icon: "mdi:play-circle", form: "rounded", label: "When Executed by Another Wor..", pos: "b", h: 48 }
n1@{ icon: "mdi:robot", form: "rounded", label: "QuickChart Object Schema", pos: "b", h: 48 }
n2@{ icon: "mdi:brain", form: "rounded", label: "OpenAI Chat Model", pos: "b", h: 48 }
n3["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Upload image2"]
n4@{ icon: "mdi:robot", form: "rounded", label: "Generate Chart AI agent", pos: "b", h: 48 }
n5@{ icon: "mdi:play-circle", form: "rounded", label: "When clicking ‘Execute workf..", pos: "b", h: 48 }
n6@{ icon: "mdi:robot", form: "rounded", label: "Message a model", pos: "b", h: 48 }
n7@{ icon: "mdi:wrench", form: "rounded", label: "Think1", pos: "b", h: 48 }
n8["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Create QuickChart"]
n9["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Code"]
n7 -.-> n4
n3 --> n9
n6 --> n4
n8 --> n3
n2 -.-> n4
n4 --> n8
n1 -.-> n4
n0 --> n6
n5 --> n6
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n0,n5 trigger
class n1,n4,n6 ai
class n2 aiModel
class n7 ai
class n3,n8 api
class n9 code
classDef customIcon fill:none,stroke:none
class n3,n8,n9 customIcon
Varför det här spelar roll: att hålla diagram uppdaterade är en tidstjuv
Diagram åldras snabbt. Ett inlägg du publicerade förra månaden kan fortfarande ranka, men siffrorna i visualiseringen kan vara inaktuella redan i dag, vilket i det tysta urholkar förtroendet. Det irriterande är arbetsflödet runt jobbet: du letar källor, bygger en tabell, väljer diagramtyp, exporterar en bild, namnger den, laddar upp den och upprepar när datan ändras. Om du publicerar ofta blir det här ett veckovis ok som stjäl energi från själva jobbet (skrivande, analys, distribution). Och ärligt talat är det också här små misstag uppstår: förväxlade etiketter, gamla skärmbilder eller ”nästan samma” diagramstil mellan inlägg.
Det går snabbt att summera. Så här faller det isär i verkligheten.
- Att klistra in siffror från webben i ett diagramverktyg bjuder in till små fel som är svåra att upptäcka när bilden väl är inbäddad i WordPress.
- Diagramstilen blir inkonsekvent mellan inlägg, så sajten ser ihopplockad ut i stället för som ett varumärke.
- Att uppdatera ett diagram innebär att du upprepar hela export- och uppladdningsloopen, även när ”ändringen” bara är en rad data.
- Mediebiblioteket blir en röra av ”chart-final-v7.png”-filer utan ett pålitligt sätt att spåra vilken data som skapade dem.
Det du bygger: diagram med live-data som laddas upp till WordPress automatiskt
Det här arbetsflödet startar med en enkel prompt som ”Generate a graph of Apple’s market share in the mobile phone market in Q1 2025.” n8n skickar den begäran till GPT-4o med webbsökning, som söker på webben, hämtar relevanta siffror och returnerar dem som en felfri markdown-tabell med käll-URL:er. Sedan tolkar en AI-agent tabellen och gör om den till strikt, schema-validerad Chart.js-JSON (så att diagramkonfigurationen blir förutsägbar, inte en slumpmässig textklump). Den konfigurationen skickas till QuickChart.io för att rendera en PNG. Till sist laddas PNG-filen upp direkt till ditt WordPress-mediebibliotek via WordPress REST API, och du får tillbaka den slutliga bild-URL:en som du kan lägga in i ett inlägg direkt.
Arbetsflödet startar med en manuell körning (eller som ett subarbetsflöde som anropas av en annan automatisering) med en prompt-sträng. Därifrån hanterar OpenAI research och diagramkonfiguration, QuickChart renderar bilden och WordPress tar emot den slutliga uppladdningen med rätt filnamn och content-type. Utdata inkluderar den råa research-tabellen, källhänvisningar, Chart.js-JSON och WordPress-URL:en till mediefilen.
Det du bygger
| Det som automatiseras | Det du uppnår |
|---|---|
|
|
Förväntade resultat
Säg att du publicerar två datadrivna inlägg per vecka, och varje inlägg behöver ett diagram. Manuellt är en typisk loop cirka 20 minuter för att hitta siffror, 20 minuter för att bygga diagrammet och 10 minuter för att exportera, namnge, ladda upp och placera det i WordPress, alltså ungefär en timme per diagram. Med det här arbetsflödet lägger du kanske 5 minuter på att skriva en bra prompt och kontrollera resultatet, och väntar sedan på att rendering och uppladdning blir klara. Det är ungefär 2 timmar tillbaka varje vecka, och det ökar när du publicerar mer.
Innan du börjar
- n8n-instans (testa n8n Cloud gratis)
- Alternativ för egen drift om du föredrar det (Hostinger fungerar bra)
- WordPress för att ladda upp bilder till mediebiblioteket
- OpenAI (GPT-4o eller GPT-4o-mini) för research och generering av diagramkonfigurationer
- Inloggningsuppgifter för WordPress REST API (skapa ett applikationslösenord i WordPress)
Kunskapsnivå: Medel. Du kommer att koppla inloggningsuppgifter och verifiera att en WordPress REST-uppladdning fungerar, men du bygger ingen app.
Vill du att någon bygger det åt dig? Prata med en automationsexpert (gratis 15-minuters konsultation).
Steg för steg
Du börjar med en prompt. Kör arbetsflödet manuellt i n8n, eller anropa det från ett annat arbetsflöde med execute-workflow-triggern och skicka med en enda prompt-sträng som beskriver diagrammet du vill ha.
AI gör research och extraherar en tabell. GPT-4o gör en live-webbfråga och returnerar sedan en markdown-tabell med siffrorna plus käll-URL:er så att du kan rimlighetskontrollera källor i efterhand.
Diagramkonfigurationen genereras och valideras. En agent för diagramgenerering väljer en lämplig diagramtyp (stapel, linje, ring och så vidare) och outputar strikt Chart.js-JSON som matchar schemat du definierar.
QuickChart renderar, WordPress tar emot. n8n skickar Chart.js-JSON till QuickChart.io för att få tillbaka en PNG och laddar sedan upp den binära filen till ditt WordPress-mediebibliotek via REST API, och returnerar den slutliga media-URL:en.
Du kan enkelt justera promptformatet för att standardisera diagramstilar för din webbplats, eller byta uppladdningsdestination till utkast och mallar beroende på behov. Se hela implementationsguiden nedan för anpassningsalternativ.
Steg-för-steg-guide för implementering
Steg 1: konfigurera triggertypen
Det här arbetsflödet kan startas antingen manuellt eller som ett underarbetsflöde med en prompt som indata.
- Öppna Subworkflow Trigger Input och bekräfta att arbetsflödets indata innehåller prompt som inkommande fält.
- Använd Manual Execution Start för ad hoc-tester och körningar under utveckling.
- Säkerställ att både Subworkflow Trigger Input och Manual Execution Start är anslutna till Query Data Model.
Steg 2: anslut OpenAI för dataanalys
Steget för datainsamling använder en OpenAI-modell för att hämta och formatera källdata till diagrammet.
- Öppna Query Data Model och välj modellen
gpt-4o-search-previewunder Model. - Bekräfta att användarprompten mappas med
{{ $json.prompt }}i det andra meddelandet. - Credential Required: Anslut era openAiApi-uppgifter.
Steg 3: sätt upp AI-pipelinen för diagramkonfiguration
Det här avsnittet omvandlar den analyserade datan till en strukturerad QuickChart-konfiguration med hjälp av en agent, schemaparsare och ett resonemangsverktyg.
- Öppna OpenAI Chat Engine och bekräfta att modellen är inställd på
gpt-4o-mini. - Credential Required: Anslut era openAiApi-uppgifter.
- Öppna QuickChart Schema Definition och behåll Schema Type inställt på
manualmed det angivna JSON-schemat i Input Schema. - Öppna Chart Config Generator och ställ in Text till
{{ $json.message.content }}. - Bekräfta att Chart Config Generator har Has Output Parser aktiverat och är ansluten till QuickChart Schema Definition som output parser.
- Säkerställ att Reasoning Step är ansluten som ett AI-verktyg till Chart Config Generator. För AI-verktyg som Reasoning Step och parsers som QuickChart Schema Definition måste uppgifter (om de behövs) läggas till i den överordnade noden OpenAI Chat Engine.
Steg 4: konfigurera diagramgenerering och uppladdning till WordPress
Det här avsnittet renderar QuickChart-bilden och laddar upp den till ert WordPress-mediebibliotek.
- Öppna Generate QuickChart Image och ställ in URL till
https://quickchart.io/chart. - Ställ in JSON Body till
{{ $json.output }}och behåll Specify Body somjson. - Öppna Upload Chart Image och ställ in URL till
https://your.wordpress.com/wp-json/wp/v2/media. - Ställ in headern Content-Disposition till
attachment; filename="chart-{{ $json.output.slug }}.png". - Credential Required: Anslut era wordpressApi-uppgifter.
⚠️ Vanlig fallgrop: Om er WordPress-webbplats kräver applikationslösenord eller REST-autentisering, se till att er wordpressApi-credential är konfigurerad därefter, annars misslyckas uppladdningar med ett 401/403-fel.
Steg 5: sätt ihop slutlig utdata
Det sista steget konsoliderar analysdatan, diagramkonfigurationen och WordPress-svaret från mediauppladdningen till ett enda utdataobjekt.
- Öppna Assemble Output Data och behåll JavaScript-koden oförändrad så att det kombinerade objektet returneras.
- Verifiera att utdatafälten refererar till rätt noder:
$('Query Data Model').first().json,$('Chart Config Generator').first().json.output,$('Upload Chart Image').first().jsonoch$('Upload Chart Image').first().json.guid.raw.
Steg 6: testa och aktivera ert arbetsflöde
Kör ett manuellt test för att bekräfta att datafrågan, diagramgenereringen och WordPress-uppladdningen alla lyckas innan ni aktiverar i produktion.
- Klicka på Execute Workflow och trigga Manual Execution Start med en exempel-
prompt(t.ex. ”global EV sales 2020–2024”). - Bekräfta att Generate QuickChart Image returnerar binär bilddata och att Upload Chart Image returnerar ett WordPress-mediarespons med
guid.raw. - Kontrollera Assemble Output Data för en konsoliderad utdata som innehåller
research,graph_dataochresult_image_url. - Aktivera arbetsflödet så att Subworkflow Trigger Input kan anropas från andra arbetsflöden i produktion.
Felsökningstips
- Inloggningsuppgifter för WordPress REST API kan gå ut eller sakna behörigheter för media. Om uppladdningar misslyckas, kontrollera först ditt applikationslösenord och användarrollens behörigheter i WordPress.
- Om QuickChart-rendering tar längre tid än vanligt kan efterföljande uppladdningssteg få en tom eller ofullständig bild. Öka eventuell vänt-/retry-logik och kör om en enda testprompt.
- OpenAI-prompter som är för vaga ger generiska diagram. Lägg in dina föredragna etiketter, enheter och diagramstil tidigt så att du inte behöver ”fixa i redigeringen” varje gång.
Snabba svar
Cirka 30 minuter om dina WordPress- och OpenAI-inloggningsuppgifter är klara.
Nej. Du kopplar konton och justerar några fält som filnamn och prompter.
Ja. n8n har ett gratisalternativ för egen drift och en gratis provperiod på n8n Cloud. Cloud-planer börjar på 20 USD/månad för högre volym. Du behöver också räkna med OpenAI API-kostnader (ofta bara cent per diagram) och QuickChart (gratisnivån täcker vanligtvis grundläggande rendering).
Två alternativ: n8n Cloud (hanterat, enklast att komma igång) eller egen drift på en VPS. För egen drift är Hostinger VPS prisvärd och hanterar n8n bra. Egen drift ger dig obegränsade körningar men kräver grundläggande serveradministration.
Ja, och det bör du. Du kan byta prompten för ”Query Data Model” för att tvinga fram specifika källor och justera instruktionerna i ”Chart Config Generator” för att låsa in dina varumärkesfärger, diagramtyper och etikettformatering. Vissa team lägger till ett Google Sheets-steg för att mata in kända dataset i stället för live-sökning. Andra förgrenar efter ämne så att ”finance” alltid ger linjediagram medan ”market share” som standard ger ringdiagram.
Oftast är det ett problem med applikationslösenordet eller att WordPress-användaren saknar behörighet att ladda upp media. Dubbelkolla REST API-endpointens URL och skapa sedan om applikationslösenordet och uppdatera det i n8n. Om du kör bakom Cloudflare eller ett säkerhetsplugin kan det också blockera REST-uppladdningar tills du allowlistar din n8n-server.
Med n8n Cloud Starter kan du normalt köra tusentals exekveringar per månad, vilket räcker för de flesta content-team. Om du kör egen drift finns ingen plattformsgräns för exekveringar, men din server och externa API:er blir de verkliga begränsningarna. I praktiken kan du generera ett par diagram per minut, och sedan kan du stöta i OpenAI- eller WordPress-rate limits om du försöker trycka ut hundratals samtidigt. Om du planerar att köra i skala, lägg till enkel köhantering och retries så att fel inte kaskadar. Den lilla ändringen gör att det känns betydligt mer ”production-ready”.
För just det här arbetsflödet har n8n några fördelar: mer komplex logik med obegränsad förgrening utan extra kostnad, ett alternativ för egen drift med obegränsade körningar och inbyggd flexibilitet med HTTP + kod för Chart.js-rendering och uppladdningar till WordPress-media. Det spelar roll när du behöver strikt schemavalidering och förutsägbara utdata. Zapier eller Make kan fungera, men du hamnar ofta i strul med formatering och filhantering för binära uppladdningar. Prata med en automationsexpert om du är osäker på vad som passar.
När det här väl rullar slutar diagram att vara en flaskhals. Du publicerar med renare visualiseringar, och när siffrorna ändras kör du om arbetsflödet och går vidare.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.