Fix Your Claude Charts in 5 Minutes

One of the favorite functionality AI tools is Claude, because it can generate artifacts, particular context rich visuals, instead of the random images from ChatGPT. The color theme of the charts are much more closer to human work than those super-complicated AI pictures. I use Claude to create visualization for my presentations all the time.

One frustration of the chart is that it often has some minor misalignment or little misses, such as text showing outside the box, or labels on the wrong items. If you use prompts to ask it to fix it, it often doesn’t render exactly what you want. This can be frustrating. However, this can be fixed easily.

With zero knowledge about SVG files, I was able to get the chart I want using SVG editor and I am going to show you how.

Here’s the original prompt that I put into the Claude to generate a chart for my upcoming blog.

Here’s the initial chart generated by Claude.

It looks pretty good, but you may have noticed that the phase numbers and labels are not well aligned. Also, I want to add a feedback loop from phase 4 back to phase. I tried updating the prompt or using additional prompts to make the edit. Every time I entered a new prompt, Clause started generating the code and image again, which is not efficient. After several tries, I still couldn’t get exactly what I want.

So, I decided to figure out how to edit the SVG myself. I downloaded the SVG code.

Then, I Googled on how to edit SVG code and the Online SVG Code Editor came up first.

I copied and pasted SVG code from Claude to the free editor and it showed me both the code and graph next to each other.

Then, I started examine the code. The numbers 1,2,3,4,5,6 were the easiest to find. I started changing the values for x and y to see how they move, until I get the label numbers to the right places.

Then I moved on to the section about the label boxes and played around the value of the x and y to make the boxes align well with the numbers.

And finally, I moved to the feedback loop section, and changed the position of the starting point. How, I have the chart in the way I want exactly.

So, in 5 min, I was able to get the chart from Claude with the precision that I needed. Enjoy this little trick and happy generating charts using Claude and SVG editor!