d2 dark theme

Author: stereobooster

netlify.toml

@@ -10,7 +10,7 @@ Rehype plugin to generate [D2](https://d2lang.com/) diagrams in place of code fe
 <Tabs>
   <TabItem label="Diagram">
 
-```d2 pad=10
+```d2
 direction: right
 x.y.z -> a.b.c: Label
 ```
@@ -19,7 +19,7 @@ x.y.z -> a.b.c: Label
   <TabItem label="Markdown">
 
 ````md
-```d2 pad=10
+```d2
 direction: right
 x.y.z -> a.b.c: Label
 ```
@@ -32,12 +32,6 @@ x.y.z -> a.b.c: Label
 
 <PackageManagers pkg="@beoe/rehype-d2" />
 
-You need to install D2 as well:
-
-```sh
-curl -fsSL https://d2lang.com/install.sh | sh -s --
-```
-
 ## Usage
 
 ```js
@@ -82,50 +76,27 @@ export type D2Options = {
    * Set the diagram layout engine to the passed string. For a
    * list of available options, run layout.
    */
-  layout?: string;
-  /**
-   * @default 100
-   * Pixels padded around the rendered diagram.
-   */
-  pad?: number;
-  /**
-   * @default -1
-   * Scale the output. E.g., 0.5 to halve the default size.
-   * Default -1 means that SVG's will fit to screen and all others
-   * will use their default render size. Setting to 1 turns off
-   * SVG fitting to screen.
-   */
-  scale?: number;
+  layout?: "dagre" | "elk";
   /**
    * @default false
    * Renders the diagram to look like it was sketched by hand.
    */
   sketch?: boolean;
-  /**
-   * @default true
-   * Bundle all assets and layers into the output svg.
-   */
-  bundle?: boolean;
-  /**
-   * Center the SVG in the containing viewbox, such as your
-   * browser screen.
-   */
-  center?: boolean;
 };
 ```
 
 You can set it globally:
 
 ```ts
 use(rehypeD2, {
-  d2Options: { pad: 20 },
+  d2Options: { layout: "dagre" },
 });
 ```
 
 Or locally:
 
 ````md
-```d2 pad=10
+```d2
 ...
 ```
 ````
@@ -138,10 +109,10 @@ You can create small Netlify plugin to install D2. See example [here](https://gi
 
 ## Issues
 
-- [ ] [Support links in connections](https://github.com/terrastruct/d2/pull/1955)
-- [ ] [JS package](https://github.com/terrastruct/d2/discussions/234#discussioncomment-11286029)
+- [x] [Support links in connections](https://github.com/terrastruct/d2/pull/1955)
+- [x] [JS package](https://github.com/terrastruct/d2/discussions/234#discussioncomment-11286029)
+- [ ] [Export JSON graph](https://github.com/terrastruct/d2/discussions/2224)
+- [ ] [Class-based dark mode](https://github.com/terrastruct/d2/pull/1803)
 - [ ] [Remove embeded fonts](https://github.com/terrastruct/d2/discussions/132)
 - [ ] [Smaller embeded icons](https://github.com/terrastruct/d2/discussions/2223)
-- [ ] [Export JSON graph](https://github.com/terrastruct/d2/discussions/2224)
-- [ ] [Class-based dark mode](https://github.com/terrastruct/d2/discussions/2225)
 - [ ] Link resolution callback

packages/docs/src/content/docs/diagrams/d2.mdx

@@ -22,8 +22,6 @@ which can look like this:
 
 ## Usage
 
-You need to install [D2](https://d2lang.com/tour/install) in order to use this plugin. **But** they are working on [WASM version](https://github.com/terrastruct/d2/discussions/234#discussioncomment-11286029), so hopefully this will change soon.
-
 ```js
 import rehypeD2 from "@beoe/rehype-d2";
 

packages/rehype-d2/README.md

@@ -1,133 +1,18 @@
 // @ts-ignore
 import { D2 } from "@terrastruct/d2";
-import { spawn } from "node:child_process";
-
-// https://github.com/stereobooster/venn-nodejs/blob/main/index.js
-export function exec(
-  command: string,
-  args: string[],
-  stdin?: string,
-  cwd?: string
-) {
-  return new Promise<string>((resolve, reject) => {
-    const child = spawn(command, args, {
-      cwd,
-      stdio: [],
-      windowsHide: true,
-    });
-
-    const output: string[] = [];
-    let errorMessage = `Unable to run command: '${command} ${args.join(" ")}'.`;
-
-    child.stdout.on("data", (data: Buffer) => {
-      const lines = data
-        .toString()
-        .split("\n")
-        .filter((line) => line.length > 0);
-
-      output.push(...lines);
-    });
-
-    child.stderr.on("data", (data: Buffer) => {
-      errorMessage += `\n${data.toString()}`;
-    });
-
-    child.on("error", (error) => {
-      reject(new Error(errorMessage, { cause: error }));
-    });
-
-    child.on("close", (code) => {
-      if (code !== 0) {
-        reject(new Error(errorMessage));
-
-        return;
-      }
-
-      resolve(output.join(""));
-    });
-
-    if (stdin) {
-      child.stdin.write(stdin);
-      child.stdin.end();
-    }
-  });
-}
 
 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 100
-   * Pixels padded around the rendered diagram.
-   */
-  pad?: number;
-  /**
-   * @default -1
-   * Scale the output. E.g., 0.5 to halve the default size.
-   * Default -1 means that SVG's will fit to screen and all others
-   * will use their default render size. Setting to 1 turns off
-   * SVG fitting to screen.
-   */
-  scale?: number;
-  /**
-   * @default false
-   * Renders the diagram to look like it was sketched by hand.
-   */
   sketch?: boolean;
-  /**
-   * @default true
-   * Bundle all assets and layers into the output svg.
-   */
-  bundle?: boolean;
-  /**
-   * Center the SVG in the containing viewbox, such as your
-   * browser screen.
-   */
-  center?: boolean;
+  themeID?: number;
 };
 
-export function d2(code: string, options?: D2Options) {
-  const args = [];
-
-  if (options?.theme) args.push(`--theme=${options.theme}`);
-  // if (options?.darkTheme) args.push(`--dark-theme=${options.darkTheme}`);
-  if (options?.layout) args.push(`--layout=${options.layout}`);
-  if (options?.pad !== undefined) args.push(`--pad=${options.pad}`);
-  if (options?.scale) args.push(`--scale=${options.scale}`);
-  if (options?.sketch) args.push(`--sketch`);
-  if (options?.bundle) args.push(`--bundle`);
-  if (options?.center) args.push(`--center`);
-
-  return exec("d2", [...args, "-"], code);
-}
-
-export type CompileOptions = {
-  layout?: "dagre" | "elk";
-  sketch?: boolean;
-};
 const d2Instance = new D2();
-export async function d2New(
+
+export async function d2(
   code: string,
-  options?: CompileOptions
+  options?: D2Options
 ): Promise<string> {
   const result = await d2Instance.compile(code, options);
-  return await d2Instance.render(result.diagram);
+  return await d2Instance.render(result.diagram, options);
 }

packages/rehype-d2/src/d2.ts

@@ -3,26 +3,33 @@ import type { Plugin } from "unified";
 // @ts-expect-error The inferred type of '...' cannot be named without a reference to
 import type { Root } from "hast";
 import { rehypeCodeHookImg } from "@beoe/rehype-code-hook-img";
-import { D2Options, d2New } from "./d2.js";
+import { D2Options, d2 } from "./d2.js";
 
 export type RehypeD2Config = {
-  d2Options?: D2Options;
+  d2Options?: Omit<D2Options, "themeID"> & {
+    theme?: string;
+    darkTheme?: string;
+  };
 };
 
 export const rehypeD2 = rehypeCodeHookImg<RehypeD2Config>({
   language: "d2",
   render: async (code: string, opts) => {
     const { darkMode, d2Options, ...rest } = opts;
     const newD2Options = { ...d2Options, ...rest };
-    const svg = await d2New(code, newD2Options);
-    return { svg };
-    // const darkSvg = darkMode
-    //   ? await d2(code, {
-    //       ...d2Options,
-    //       theme: newD2Options?.darkTheme ?? "200",
-    //     })
-    //   : undefined;
-    // return { svg, darkSvg };
+    if (newD2Options.theme !== undefined) {
+      // @ts-ignore
+      newD2Options.themeID = parseFloat(newD2Options.theme);
+    }
+    const svg = await d2(code, newD2Options);
+    const darkSvg = darkMode
+      ? await d2(code, {
+          ...newD2Options,
+          // @ts-ignore
+          themeID: parseFloat(newD2Options?.darkTheme ?? "200"),
+        })
+      : undefined;
+    return { svg, darkSvg };
   },
 });