Creating Mermaid Flow Charts With AI To Boost SEO

Crafting excellent content for your niche website or affiliate blog requires more than just bombarding the user with text. Charts, graphs, and tables make your articles easier to digest – which boosts readability and improves SERP scores. Today I am going to share a prompt I use to quickly mermaid flow charts for blog posts.

In general, I aim to add 1 image per 1,000 words and a minimum of two images per post. Needless to say, being able to programmatically create images with AI cuts back on the amount of time I spend searching for resources.

Prompt Text

Here’s the prompt I use:

Generate a flow chart using the mermaid syntax showing how [KEYWORD] works in the body. Cover the mechanism of actions and various pathways. Use simple terms in a top down format but be very thorough in your chart explanation. Do not give explanations, context, or reasoning, just reply the with the mermaid flow chart:

GPT-4 prompt

Instructions

Replace [KEYWORD] with the desired topic for the chart.

Example

Keyword: Fish oil

Result:

graph TB
A[Consumption of Fish Oil] --> B{Body Digestion}
B --> C[Conversion into Omega-3 Fatty Acids]
C --> D[Eicosapentaenoic Acid and Docosahexaenoic Acid Generated]
D --> E[Blood Stream]
E --> F1[Reduced Inflammation]
E --> F2[Improved Heart Health]
E --> F3[Boosted Brain Function]
E --> F4[Improved Eye Health]
E --> F5[Healthier Skin]
E --> F6[Reduced Liver Fat]
F1 --> G1[Less Swelling and Pain]
F2 --> G2[Lower LDL, Higher HDL and Lower Triglycerides]
F3 --> G3[Improved Mental Function and Mood]
F4 --> G4[Improved Vision]
F5 --> G5[Reduced Ageing of Skin]
F6 --> G6[Smaller Size of Fat Cells in Liver]

From there, simply drop the code into https://mermaid.live

Your result will look like this:

Changing the Colors

Unless your site happens to use the default color scheme offered by Mermaid, you’ll want to change it up. I achieve this with a follow up prompt:

I will provide you with Mermaid table syntax. Your job is to style the table. Use #0073c7 for the lines with a stroke width of 2px. Use #E3F2FD for the box fill color. Use #0073c7 for a 1px border and set the border radius to 4px.

GPT-4 prompt