Dynamically create infographics using n8n

[bartv]

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

Also find the written companion to this video here.

How to dynamically create infographics using n8n

[Ed_P]

I tried using this approach, but it proved to be rather tedious. Edit Image node is not very optimized for dynamic content and the horizontal / vertical alignment is a pain.

I think populating HTML mock pages with variables from a JSON template and then converting to a final result (i.e. pdf or image file) is more stable. It also allows for tweaking the mock page easily.

[Jon]

Hey @Ed_P,

Do you have an example of the issue you were seeing with dynamic content and alignmen? I would love to understand that a bit more to see if there is anything we can change to improve it.

[Ed_P]

The main problem is here:

It’s not possible to reliably predict the starting position of the text and it requires trial and error. Imagine it’s not a 4-digit number, but 8-digit? Then the X position should be shifted.

Or when you have a 1-line text vs 2-line text: then both X and Y positions should be adjusted.
That’s why I think this approach is not optimal.

Using HTML+CSS example with template variables + converting the output into a desired format is way more stable. In case of some complex design you can easily use it as a background image and apply invisible DIVs on top, so that all text is aligned automatically.