Skip to content
Astro D2

Getting Started

An Astro integration and remark plugin to transform D2 Markdown code blocks into diagrams.

Check out the examples for previews of some diagrams you can create with D2.

Prerequisites

  1. You will need to have an Astro set up. If you don’t have one yet, you can follow the installation guide in the Astro docs to create one.
  2. You will also need to have D2 installed. You can follow the installation instructions to install D2 on various platforms.

Installation

Astro D2 is an Astro integration. Astro includes an astro add command to automate the setup of integrations. If you prefer, you can install the integration manually instead.

To install astro-d2, run the following from your project directory and follow the prompts:

Terminal window
npx astro add astro-d2

Manual Install

First, install the astro-d2 integration using your favorite package manager:

Terminal window
npm install astro-d2

Then, add the integration to your astro.config.mjs file using the integrations property:

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


export default defineConfig({
  // …
  integrations: [astroD2()],
})

Editor Integration

For editor support in Visual Studio Code, install the official D2 extension.

For other editors, you can check the list of official and community-developed plugins and extensions.

Usage

With the Astro D2 integration, you can create a D2 diagram by using a Markdown code block which is indicated by a block with three backticks ``` at the start and end and by specifying the D2 language after the opening backticks.

src/content/docs/example.md
```d2
direction: right
installation -> configuration
```

The above code block will be rendered as the following diagram:

Diagram

The Astro D2 instegration behavior can be tweaked using various configuration options and individual diagrams can be customized using attributes.

Note that when deploying your site, you will need to ensure that D2 is installed as well or use the skipGeneration configuration option. Lean more about deploying your site using the Astro D2 integration.