Exporting

One diagram radiating out to PNG, JPG, PDF, and GIF — One diagram, four export formats

DocDiagram exports to the format you ask for, with crisp lines at any zoom level and consistent output at any size.

Formats

Format	Best for	Notes
PNG	Docs sites, READMEs, blog posts	Transparent background available. Default choice for most use cases.
JPG	Slides, social media, anywhere file size matters	Smaller files than PNG, but no transparency.
PDF	Print, formal documents, technical specs	Vector-preserving — scales infinitely without quality loss.
GIF	Animated diagrams (sequence flows, step-by-step)	Currently a single-frame export; animated multi-step coming soon.

Light and dark variants

Every diagram is generated in both light and dark themes. When you export, you pick which variant — or grab both. Useful for docs sites that support theme toggling.

Resolution

PNG and JPG exports are rendered at 2x by default for retina-quality display. You can pick a different scale in the export dialog if you need something specific.

Embedding in docs

The most common pattern for technical docs:

<Frame caption="Auth flow">
  <img src="/diagrams/auth-flow-light.png" className="block dark:hidden" />
  <img src="/diagrams/auth-flow-dark.png" className="hidden dark:block" />
</Frame>

Export both themes, drop them in your docs folder, and use a theme-aware swap like the snippet above.

Themes & branding

Make every diagram match your company’s look.

Start from a template Themes & branding

Getting Started

Core Concepts

Claude Code

API & SDKs

Formats

Light and dark variants

Resolution

Embedding in docs

Next

Themes & branding

​Formats

​Light and dark variants

​Resolution

​Embedding in docs

​Next

Themes & branding

Formats

Light and dark variants

Resolution

Embedding in docs

Next