Generating Software Architecture Diagrams with LLMs

TL;DR: Claude is pretty good at generating simple software architecture diagrams but not so good at editing them. ChatGPT is bum

I needed to create a simplified architecture diagram for an investor deck, so like any modern human I tried to avoid doing the work by delegating it to AI.

I started by feeding the following prompt into ChatGPT:

Can you generate me a software platform architecture diagram in the style of an AWS diagram. This diagram will go in an investor deck so must look professional.

It should show:
- A react native mobile app
- The app should be calling an API which lives on AWS and connects to a postgres RDS database
- The API is making calls to the external APIs:
	- Anthropic
	- Strava
	- Garmin
	- Apple HealthKit
- The API also has a data science service which it calls which is also hosted on AWS

As you can see I am a very polite man when talking to people and machines. I’m sure the machines will remember who had polite prompts come judgment day.

The ChatGPT diagram whilst creative is comically bad.

I then decided to use exactly the same prompt with Claude. This produced a much more useful diagram, here’s the Claude published version of the diagram.

Interestingly Claude produced Mermaid.js code and presents both the code and a preview of the diagram next to the Chat UI.

I wanted Claude to tweak the diagram, in particular the layout and colours. It struggled improving the layout, it did a much better job with the initial generation.

I then abandoned my AI approach and tried tweaking the layout using mermaidchart.com which has a GUI for editing Mermaid.js diagrams, I had limited success with this.

The best way to improve the layout would probably be to learn more about the Mermaid.js syntax and tweak the code by hand.

If anyone can suggest good Mermaid.js graphic editing tools let me know, I suspect the use case for Mermaid.js is for relatively simple diagrams in developer documentation. Although their architecture syntax looks promising.

To conclude I should have probably just made the diagram myself in something like Miro or Lucid Charts but where would the fun in that have been? I was impressed with Claude’s ability to create diagrams, and pleasantly surprised by it’s use of Mermaid.js, it still has some way to go with tweaking diagrams but will likely improve over time.

If you'd like to contact me then you can email writing@petegraham.co.uk or message me on BlueSky petexgraham.bsky.social.