Configuration

The Astro D2 integration can be configured inside the astro.config.mjs configuration file of your project:

astro.config.mjs

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

export default defineConfig({
  integrations: [
    astroD2({
      // Configuration options go here.
    }),
  ],
})

Configuration options

The Astro D2 integration accepts the following configuration options:

theme

Type: AstroD2ThemeConfig

The themes to use for the generated diagrams.

output

Type: string
Default: 'd2'

The name of the output directory containing the generated diagrams relative to the public/ directory.

skipGeneration

Type: boolean
Default: false

Whether the Astro D2 integration should skip the generation of diagrams.

This is useful to disable generating diagrams when deploying on platforms that do not have D2 installed or cannot be easily installed. This will require you to build and commit diagrams before deploying your site.

Read more about deploying your site in the “Deployment” guide.

layout

Type: 'dagre' | 'elk' | 'tala'
Default: 'dagre'

Defines the layout engine to use to generate the diagrams. See the D2 documentation for more information about the available layout engines.

sketch

Type: boolean
Default: false

Whether to render the diagrams as if they were sketched by hand.

pad

Type: number
Default: 100

The padding (in pixels) around the rendered diagrams.

fonts

Type: AstroD2FontsConfig

The fonts to use for the generated diagrams.

appendix

Type: boolean
Default: false

Whether to add an appendix to the diagrams with tooltips or links.

inline

Type: boolean
Default: false

Defines if the SVG diagrams should be inlined in the HTML output.

By default, the diagrams are rendered using the <img> tag.

experimental

Type: AstroD2ExperimentalConfig

The experimental features to enable for the generated diagrams.

Theme configuration

The theme configuration is an object used to configure the themes used for the generated diagrams. It accepts the following options:

default

Type: string
Default: '0'

The default theme to use for the diagrams.

See the D2 documentation for more information about the available themes.

dark

Type: string | false
Default: '200'

The dark theme to use for the diagrams when the user’s system preference is set to dark mode. To disable the dark theme, set this option to false.

See the D2 documentation for more information about the available themes.

Fonts configuration

The fonts configuration is an object used to configure the fonts used for the generated diagrams. It accepts the following options:

regular

Type: string

The relative path from the project’s root to the .ttf font file to use for the regular font.

italic

Type: string

The relative path from the project’s root to the .ttf font file to use for the italic font.

bold

Type: string

The relative path from the project’s root to the .ttf font file to use for the bold font.

semibold

Type: string

The relative path from the project’s root to the .ttf font file to use for the semibold font.

Experimental configuration

Experimental flags allow you to participate in feature development by reporting issues and providing feedback on features that are still in development. These features are not guaranteed to be stable and may change or be removed in any future release.

The experimental configuration is an object used to configure the experimental features to enable for the generated diagrams. It accepts the following options:

useD2js

Type: boolean
Default: false

Whether to use D2.js to generate the diagrams instead of the D2 binary.

By default, the integration requires the D2 binary to be installed on the system to generate diagrams. Enabling this option allows generating diagrams using D2.js, a JavaScript wrapper around D2 to run it through WebAssembly.