Skip to content

@beoe/rehype-d2

Rehype plugin to generate D2 diagrams in place of code fences. Example:

Diagram
Markdown

```d2
direction: right
x.y.z -> a.b.c: Label
```

Installation

npm i @beoe/rehype-d2

yarn add @beoe/rehype-d2

pnpm add @beoe/rehype-d2

Usage

import rehypeD2 from "@beoe/rehype-d2";

const html = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeD2, {
    /* options */
  })
  .use(rehypeStringify)
  .process(`markdown`);

Check out other options.

Configuration

You probaly want to use file strategy and one of dark schemes (class or media). Unless you need interactivity.

`d2Options`

export type D2Options = {
  /**
   * @default 0
   * Set the diagram theme ID.
   */
  theme?: string;
  /**
   * @default -1
   * The theme to use when the viewer's browser is in dark mode.
   * When left unset --theme is used for both light and dark mode.
   * Be aware that explicit styles set in D2 code will still be
   * applied and this may produce unexpected results. We plan on
   * resolving this by making style maps in D2 light/dark mode
   * specific. See https://github.com/terrastruct/d2/issues/831.
   */
  darkTheme?: string;
  /**
   * Set the diagram layout engine to the passed string. For a
   * list of available options, run layout.
   */
  layout?: "dagre" | "elk";
  /**
   * @default false
   * Renders the diagram to look like it was sketched by hand.
   */
  sketch?: boolean;
  /**
   * @default undefined
   * Glob pattern for files to be used for [`import`](https://d2lang.com/tour/imports/).
   * `GlobOptions` are from [tinyglobby](https://github.com/SuperchupuDev/tinyglobby#options).
   */
  shared?: string | string[] | GlobOptions;
};

You can set it globally:

use(rehypeD2, {
  d2Options: { layout: "dagre" },
});

Or locally:

```d2 layout=elk
...
```

Issues