Maggie Appleton @maggieappleton.com · Jan 11 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.
37 likes 11 replies
Replies
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.
I've kind of enjoyed what it Opus 4.5 produces out to excalidraw diagrams. However, it does end up blocky pages in structure instead of flows similar to wireframes. It also struggles to leave enough room for text when wrapped in boxes
what a pretty theme!
try mermaid for standard diagrams, and d2 for more general diagrams. d2 can output svg. I intermixed AI to get the right layouts and clustering.
Ooo I like the theming on your Claude terminal UI… have you customised it?
The dream is to use AI to get started with a set theme .. something you can point the AI at (url, screenshot, etc) .. prompt it and get a first pass. But the iteration step is tricky. More prompting? At that point I want to take over in a tool (PS, Illustrator) and get what I want. Or code.
Generating for draw.io used to work well (GPT-4 Turbo, Claude 3.5 Sonnet, …). Wrote a walk-through (€, 🇩🇪) here: www.heise.de/ratgeber/Pro...
For my use cases, Claude worked best at generating Mermaid diagrams ( which you can then render however you want). Downside was that they’re pretty ugly by default.
Have you tried mermaid?
Wow, pretty decent start. What does the Claude use for diagrams? Plain CSS?
Ask it to create a mermaid diagram. For that it does great.