Skip to main content
Prompt, generate light and dark, save to your folder, refine via the chat URL

Prompt to saved image, then refine in the editor if you want

/docdiagram:diagram is the zero-setup path. You give it a prompt, it generates a diagram and saves the image to your current folder. Use it when you want a picture for a slide, a README, an issue, or a chat, and you do not need the diagram tied to a docs page.
First time? Finish Setup so /docdiagram:auth has stored your key. The skill needs nothing else: no open file, no repo, no GitHub install.

​
1. Run the command

Inside a Claude Code session, call the skill with your prompt:
DocDiagram creates the diagram, waits for it to render, and downloads the image into the directory you launched Claude Code from.

​
2. Write a good prompt

The same prompting habits that work in the web app work here. Be specific about the diagram type and the pieces involved. Prompts that work well:
  • “An architecture diagram for a Next.js app on Vercel with a Postgres database and a Redis cache.”
  • “A flowchart of a CI pipeline: lint, test, build, deploy, with a manual approval gate before deploy.”
  • “An ER diagram with Users, Posts, and Comments. Users have many Posts, Posts have many Comments.”
Tips:
  • Name the diagram type (sequence, architecture, flowchart, ER, org chart).
  • List the entities or steps explicitly.
  • Mention the direction of flow if it matters, such as “left to right”.

​
3. Use the output

The command reports two things:
  • The saved file path, for example oauth-refresh.png in your current folder. Diagrams render in both light and dark; the light variant is saved by default.
  • A chat URL like https://app.docdiagram.com/c/<slug>. Open it to refine the diagram in the web editor, switch themes, or export other formats.
Ask for a specific name and Claude will use it, for example “save it as auth-flow”. Otherwise the file is named diagram.

​
Refining

Because the result is a plain image, you iterate by running the command again with a sharper prompt, or by opening the chat URL and editing there. To keep a diagram under version control and revise it in place over time, use embedded diagrams instead.

​
Watermarks

On the free tier, generated images carry a watermark. Upgrade your account for clean exports. Generation itself is unchanged either way.

​
Troubleshooting

​
Next

Embedded diagrams

Bind a diagram to a docs page and keep it synced in your repo.