I've had excellent luck using Claude Code to generate "mermaid diagrams" for me, and convert them to .png format headlessly using mmdc/puppeteer. Really helped me out with an engineering proposal I just finished. In past years I would have fumbled around with Visio forever and the result would have been worse.
I find Mermaid diagram rendering is quite ugly by default. I've gotten much better-looking results by asking it to just generate SVGs. As a bonus it can do animations too. e.g. see slide 3 here, which I first tried with Mermaid and then switched to SVG when I couldn't get the rendering to look good: https://talks.mk.gg/2026/atmosphereconf/
I now often have CC make technical/architecture diagrams with tikz, the results look much better than mermaid but still requires multiple iterations to fix bad arrows, bad layouts etc.
Diagrams are still far from solved. We need a good non-gameable diagrams benchmark.
Well, mermaid diagrams are "just" a list of nodes and their relations. You'd expect any llm capable of generating code to be able to generate them
Writing an SVG of a pelican riding a bicycle without being able to see the result and iterate based on that is incredibly difficult by comparison. I'm sure some humans could do it, but I sure can't. That's part of the beauty of it: it's very difficult to do but a toddler could judge the results
Writing an SVG of a diagram by hand would be somewhere on the middle ground. Or depending on the number of nodes might be even harder than the pelican. Layouting diagrams can get tricky very quickly. It's also one of Mermaid's biggest weaknesses
Just wait if they go public. Claude 5.4 fails the Pelican test stock sheds 20% of value pf news. Wall street wonders if the lack of front wheel means there is something seriously wrong with the stocks underlying value
I love this idea. Unfortunately, it says "Unsupported browser/GPU" for me. This is Desktop Chrome version 147 (page says it requires 134+) and I have a 1060 card with 6 GB of RAM on this specific device, so it should fit. I have more than 4 GB of free RAM as well.
Small models in the browser are a different optimization problem than small models on a server.
On server you chase throughput so you batch. In browser you're stuck at batch size 1, which means kernel launch overhead and memory bandwidth dominate, not FLOPs
The Gemma models really are amazing. I was on a flight a few days ago and used E2B to do some basic research on the place I was going to, running the model locally on my Pixel 10 Pro. It gave me basically the same as Gemini or ChatGPT would do when I landed
> "OAuth 2.0 authorization code flow with PKCE as a sequence diagram — user, browser, app server, auth server, API"
If you do a Google image search for "OAuth 2.0 PKCE sequence diagram" you get good results also. Maybe if you ask for something more esoteric this becomes valuable? Of course, that also makes hallucinations more likely.
just tried it out, must say it's amazing the speed at which it generates these diagrams
Is this opensource by any chance?
Would love to take a look at the code and understand how it works
"The LLM outputs compact code (~50 tokens) instead of raw Excalidraw JSON (~5,000 tokens)."
I see on the left that the LLM is outputting some instructions to add nodes and edges to the diagram. But what is interpreting those commands and turning them into an Excalidraw file?
very interesting. Prompt to "generate System Design like ChatGPT end to end". Took about ~3-5 mins the model to download. It generated a reasonably good system design.
so multiple of these browser wasm demos make me re-download the models, can someone make a cdn for it or some sort u uberfast downloader? just throw some claude credits against it ty!
62 comments
Diagrams are still far from solved. We need a good non-gameable diagrams benchmark.
I just ask Claude code for mermaid to visualize any topic I'm discussing.
Writing an SVG of a pelican riding a bicycle without being able to see the result and iterate based on that is incredibly difficult by comparison. I'm sure some humans could do it, but I sure can't. That's part of the beauty of it: it's very difficult to do but a toddler could judge the results
Writing an SVG of a diagram by hand would be somewhere on the middle ground. Or depending on the number of nodes might be even harder than the pelican. Layouting diagrams can get tricky very quickly. It's also one of Mermaid's biggest weaknesses
> "OAuth 2.0 authorization code flow with PKCE as a sequence diagram — user, browser, app server, auth server, API"
If you do a Google image search for "OAuth 2.0 PKCE sequence diagram" you get good results also. Maybe if you ask for something more esoteric this becomes valuable? Of course, that also makes hallucinations more likely.
"The LLM outputs compact code (~50 tokens) instead of raw Excalidraw JSON (~5,000 tokens)."
I see on the left that the LLM is outputting some instructions to add nodes and edges to the diagram. But what is interpreting those commands and turning them into an Excalidraw file?