Add diagrams to your Mintlify docs

There are three ways to do it. Pick the one that matches where you already work on your docs.

You work in	Use	What you do
Your docs repo, with Claude Code or Codex	The diagramkit plugin	Ask for the diagram. The agent saves it next to your pages and adds it.
Claude, without the repo open	diagramkit and Mintlify’s own connector	Ask for the diagram. Claude uploads it to Mintlify and opens a pull request.
A script or CI job	The API	Request the diagram and download the file into your repo.

Ask your coding agent in the docs repo

Connect diagramkit

In Claude Code, install the plugin:

/plugin marketplace add colinmatthews/diagramkit-plugin
/plugin install diagramkit@diagramkit

In Codex, add colinmatthews/diagramkit-plugin as a plugin marketplace, then run codex plugin add diagramkit@diagramkit. The first time it runs, you sign in to your diagramkit account.

Ask for the diagram where it goes

Open your docs repo and name the page and what the diagram should show:

Add a diagram of how sign-in works to authentication.mdx: the browser,
our app, the identity provider and the session cookie. Save it in images/.

Say what happens in order and who takes part. You don’t need to say what kind of diagram: an order of steps between parties comes back as a sequence diagram, and how parts connect comes back as an architecture diagram.

Check the page

The agent saves the image (for example images/sign-in.png) and adds it to the page. Run mint dev and look at it before you commit.

Ask Claude, and let Mintlify publish it

If you don’t have the repo open, connect both diagramkit and Mintlify’s MCP to Claude. Then ask in one message:

Draw how a webhook is delivered and retried, and add it to the Webhooks page
in our Mintlify docs. Open a pull request.

Claude asks diagramkit for the diagram, uploads the image to your docs with Mintlify’s connector, adds it to the page on a new branch and opens a pull request for you to review. Nothing goes live until you merge it.

Sequence diagram between the person, Claude, diagramkit and Mintlify: the person asks for a diagram, Claude gets it from diagramkit, uploads it to Mintlify, edits the page on a new branch and publishes a pull request, which the person reviews and merges. — Claude asks diagramkit for the diagram, then uses Mintlify's connector to add it to the page and open a pull request.

Generate diagrams from a script

Use the API when diagrams come from a pipeline, such as one diagram per new guide. Make the diagram with the docs preset and wait for it:

curl https://app.diagramkit.ai/api/v1/diagrams \
  -H "Authorization: Bearer $DIAGRAMKIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"prompt": "How a webhook is delivered and retried", "preset": "docs", "wait": 180}'

Then download it into your docs repo with the id from the response:

curl -o images/webhooks.png -H "Authorization: Bearer $DIAGRAMKIT_KEY" \
  "https://app.diagramkit.ai/api/v1/diagrams/$ID/image.png?quality=high"

See Make a diagram and Download it for every option.

Put the image on the page

Mintlify serves anything in your repo, so a file at images/webhooks.png is at /images/webhooks.png. Use a frame to give it a caption:

<Frame caption="A webhook is retried until your endpoint answers with 200.">
  <img src="/images/webhooks.png" alt="Sequence diagram of a webhook delivery and its retries" />
</Frame>

Write alt text that says what the diagram shows, so screen readers and search can use it.

Match your docs

Your brand. On Team and Enterprise plans, set up your brand once and every diagram uses your colours, fonts and shapes. See brand setup.

Light and dark mode. Ask for a second version on a dark background, then show each in its mode:

<img className="block dark:hidden" src="/images/webhooks.png" alt="Webhook delivery and retries" />
<img className="hidden dark:block" src="/images/webhooks-dark.png" alt="Webhook delivery and retries" />

SVG. On paid plans, download SVG instead of PNG. It stays sharp at any size, and every label is real text.
Changes later. Ask for the change in words (“add a rate limit step after sign-in”), or fix a label yourself without the AI. See Change a diagram.

Get started

Diagrams

Guides

More

Add diagrams to your Mintlify docs

Ask your coding agent in the docs repo

Ask Claude, and let Mintlify publish it

Generate diagrams from a script

Put the image on the page

Match your docs

​Ask your coding agent in the docs repo

​Ask Claude, and let Mintlify publish it

​Generate diagrams from a script

​Put the image on the page

​Match your docs

Ask your coding agent in the docs repo

Ask Claude, and let Mintlify publish it

Generate diagrams from a script

Put the image on the page

Match your docs