Hey Product Hunt 👋 I'm Bibas. Like a lot of you, I follow Andrej Karpathy, and last week he posted a ladder of better ways to read LLM output: ask for diagrams instead of paragraphs, and even better, ask for output "in HTML" to get a beautiful, interactive webpage. I've worked that way for months, and diagrams were always where it failed. Ask an agent to draw your architecture and you get boxes stacked on boxes, labels sitting on arrows, and arrows pointing at the wrong service. The model understood the system. It just couldn't decide where things go. So Diagram Studio splits the job in two: → The agent writes a short JSON spec: which boxes, which arrows, which groups → A grid engine does the layout: boxes sit in cells and arrows only run through the gaps between them, so boxes can't overlap and arrows can't cut through them → The engine checks the spec and tells the agent what to fix before you ever see it What you get: • One HTML file, about 225 KB. Works offline, no install, no dependencies • Agent access from a single URL (/llms.txt), for Claude Code, Codex, Cursor, or a plain claude.ai chat • A visual editor if you'd rather drag boxes yourself • Export to SVG, PNG, a standalone HTML page, an embeddable , or a share link • Mermaid import • Free and MIT licensed A good first test: ask your agent to read diagram-studio.bibas.dev/llms.txt and diagram your own project. I'm here all day. Tell me which diagrams your agents keep getting wrong. Those are the cases I want to fix next.

Diagram Studio

A diagram engine for AI agents, in one HTML file

A diagram engine for AI agents, in one HTML file