> ## Documentation Index
> Fetch the complete documentation index at: https://docs.diagramkit.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Add diagrams to your Mintlify docs

> Ask your coding agent or Claude for a diagram and put it on a Mintlify page, in your brand.

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

**1. Connect diagramkit**

In Claude Code, install the plugin:

```bash theme={null}
/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.

**2. Ask for the diagram where it goes**

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

```text theme={null}
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.

**3. 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](https://www.mintlify.com/docs/ai/mintlify-mcp) to Claude. Then ask in one message:

```text theme={null}
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.](https://mintcdn.com/diagramkit/ebykF4nswR7v4CBJ/images/mintlify-pr.png?fit=max\&auto=format\&n=ebykF4nswR7v4CBJ\&q=85\&s=0c7c5fe35aae287f8ddc08520ccfc372)

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:

```bash theme={null}
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:

```bash theme={null}
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](/diagrams/make.md) and [Download it](/diagrams/download.md) 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:

```mdx theme={null}
<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](https://diagramkit.ai/brand).
* **Light and dark mode.** Ask for a second version on a dark background, then show each in its mode:

  ```mdx theme={null}
  <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](/diagrams/change.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.