How Astro D2 Works?

The Astro D2 integration is an Astro integration embedding a remark plugin to transform D2 Markdown code blocks into diagrams.

Command-line tool

The most common way to use D2 is to install and use the official D2 command-line tool. The D2 CLI can be used to render D2 code into diagrams.

When writing Markdown (or MDX) content in your Astro project, the Astro D2 integration will automatically transform D2 Markdown code blocks into diagrams using the D2 CLI that you must have installed on your machine. The diagrams will be rendered as SVG images and be saved in the public/d2/ directory of your Astro project.

Note

The d2 directory name used in the above description can be modified using the output configuration option.

Deployment

When deploying your Astro site, you will need to ensure that the D2 binary is available on the deployment platform. D2 can be installed on many platforms, including Windows, macOS, and Linux using different methods such as various package managers, Docker, or manual installation.

On some deployment platforms, the D2 binary might not be available or may be difficult to install. In such cases, you can use the skipGeneration configuration option to disable the generation of diagrams on specific platforms.

When using this option, you will need to build and commit the generated diagrams before deploying your site.

astro.config.mjs

import { defineConfig } from 'astro/config'
import astroD2 from 'astro-d2'

export default defineConfig({
  integrations: [
    astroD2({
      // Disable generating diagrams when deploying on Vercel.
      skipGeneration: !!process.env['VERCEL'],
    }),
  ],
})