## Overview
Learn how to dynamically create infographics using this simple but powerful n8n workflow.

[How to dynamically create infographics using n8n - YouTube](https://www.youtube.com/watch?v=aE6kSMqjGV8)


## Dynamic infographic automation Flow

![Dynamic infographic automation flow](https://mermaid.ink/svg/pako:eNplUMtugzAQ_BVrK6RESg49JeJQqQ1w6il9HCpfDGzACqzpYhQhxL93gaQPVZbl8c7MvgbIXI4QQhAMlqwPBw2-xBo1hBpS0wrYqGvs3bA1aYWtkEqEDdvacH9wleNZf7e7T5IkXiwtZo7yv3zyuD9EOw3jOAaBpukUbJpSvUYTTtldWuTV0_KuNdGeVnLXv1i13aqYvIC347O6WF-qzw65bz1bKoR9UOKYrZP0iL5jUpZObi5ls_-e3HgjCiXjFDhnuNZaWlQKNlAj18bmsqphivysSaBMedagaRRd10g2jHPrHUN4MlWLGzCddy89ZRB67vAmiqyRlupvVWPow7nbf_wCc0WNGA)
```mermaidignore
graph TD

browser(Browser)
n8n(n8n)

browser -- Enter URL with querystring --> n8n
n8n -- Return infographic with querystring data in image --> browser
```

## How to recreate this automation
### Resources
- [n8n](https://n8n.io/cloud?ref=tinyautomations&utm_source=affiliate)
- [n8n workflow](https://github.com/rymawby/tiny-automations-source/blob/main/automate-creating-an-infographic/Dynamic_Infographic.json)
- [Template image sample](https://github.com/rymawby/tiny-automations-source/blob/main/automate-creating-an-infographic/tiny-automation-stats-template.png)

### Step 1: Create an n8n workflow
Create a new workflow in n8n. Your final workflow will end up looking like this:
![Final n8n workflow](https://ry.d.pr/0gUAjz.png)

### Step 2: Create a webhook node
In your n8n workflow create a webhook node - make sure that the you are responding with the `Respond to Webhook` node in the settings. This makes sure that the whole workflow will get executed before returning the modified image.
![Webhook node screenshot](https://ry.d.pr/xAAzG2.png)

When you call this webhook via its URL you can use a querystring parameter to pass in data. If your `Webhook` node URL is `http://n8n.io/webhook/my-webhook-url` you can add a querystring parameter like this: `http://n8n.io/webhook/my-webhook-url?stat=1900` (here it is named `stat` as this is what we use in the video tutorial). You can then use this `stat` variable later when we edit the image.

### Step 3: Get the image template
Use a `HTTP Request` node to load the [image template](https://github.com/rymawby/tiny-automations-source/blob/main/automate-creating-an-infographic/tiny-automation-stats-template.png). Update the `URL` input to the URL of your template image and change the `Response Format` to `File`.

![HTTP Request node for the image template screenshot](https://ry.d.pr/TPOXkV.png)

### Step 4: Dynamically add text to the image
Now we have the image template (Step 3) and the `stat` value (Step 2) we can combine them so the image contains the `stat` value. We do this with an `Edit Image` node. Below you can see the image prior to the node being executed 
 on the left and after node execution on the right. As you can see we have added the value from `stat` (1900) to the image.
![Edit image node screenshot](https://ry.d.pr/S5K3Pt.png)

Use the `Text` input's `Expression editor` to select the querystring data from `Step 2`. The value we pass in when we call the URL is now used to generate the image.
![Text input expression editor screenshot](https://ry.d.pr/MTeaKS.png)

### Step 5: Return the finished image
The final step is to return the image to the user and end the workflow. We do this with a `Respond to Webhook` node. Make sure that `Respond With` is set to `Binary` and `Response Data Source` is set to `Choose Automatically From Input`.
![Respond to Webhook screenshot](https://ry.d.pr/MPyXE6.png)

Now save the workflow, set it to `Active` and hit the production URL of the initial `Webhook` with a query param.



Use this highly customisable automation to up your image game

Learn how to automate with canva