Post

Figuring out a workflow to make Claude better at creating diagrams and illustrated explanations. By default it is pretty crap - see this example. Labels overlap. Arrows in the wrong place. Text too small. But it's also decent at identifying what's wrong once it takes a screenshot.

Maggie Appleton

@maggieappleton.com

Claude's second attempt at fixing some of the problems, with a lot of additional steering from me on improving the visual details. It's still unable to make an arrow go where it needs to, or make two elements connect with a line. But it's a decent starting point - enough for me to cleanup by hand.

11/1/26, 11:07 am0 reposts2 likes

Maggie Appleton

@maggieappleton.com

11 Jan

The best diagram outputs an LLM can get to are still crap by my standards. It helps speed me up a bit and give me starting points, but it's still disappointing that their visual reasoning and graphic design skills are really weak. The layouts and visual language are always predictably boring too

Maggie Appleton

@maggieappleton.com

11 Jan

My theory here is the major labs have done very little or no RLHF on visual explanations and diagrams? Seems like a blind spot. Image generation alone or text generation alone are very well optimised but the combination seems uniquely hard for current models.

Nick Lothian

@nlothian.bsky.social

11 Jan

It does good Mermaid diagrams though.

John Allsopp

@johnfallsopp.com

11 Jan

It’s been a while But there are markup languages for diagrams like mermaid. Not sure if there are any styling mechanisms for them similar to css. Perhaps a mermaid > structured HTML then style that with css?

@moldandyeast.bsky.social

12 Jan

One way I got to some interessting results was think in a more multi modal way. A prompt is translated into a blueprint diagram, then translate into node based logic gates structure (they are good at that), and then render the outcome. This one was prompt to new game.

Sam Rose

@samwho.dev

11 Jan

We’ve reached identical conclusions. If you figure this out I’d be very keen to hear how you did it!

Sam Rose

@samwho.dev

11 Jan

Something that helped when I was writing my prompt caching post was constraining it to a smaller grid. I created a little SVG library in React where I could create nested grids for easier positioning and the LLM seemed to appreciate that. It also made it easier to clean up when it got it wrong.

yen is building stuff

@weiyen.net

11 Jan

Vector graphics in general is a bit of a blind spot. It's not easy generating e.g. icons using LLMs.

Bryan

@bryanhogan.com

12 Jan

Gemini / Nano Banano became the best at it with the recent large update, any context I'm missing on why to use Claude here?

Maggie Appleton

@maggieappleton.com

12 Jan

Using Claude because I need these to be in working code – SVG, CSS, HTML, JS. It allows me to have have fine-grained control over details. And I usually add in animations and interactions, plus I need them to be responsive for mobile. Nano banan still has a ways to go 😄 bsky.app/profile/magg...

Maggie Appleton@maggieappleton.com

I hadn't tried out Nano Banana for diagrams yet so I had a little play. Wonderfully promising and hilariously crap in the details. So close and yet so far.

randito1.bsky.social

@randito1.bsky.social

12 Jan

What until it can work in layers, or generate native photoshop, illustrator files. Then we're all c̶o̶o̶k̶e̶d̶ unlocked for utopian "understand through diagrams" future (working on my ai optimism).