Merge pull request #9 from stereobooster/d2-graph

d2 graph

Author: stereobooster

packages/docs/src/components/PageFrame.astro

@@ -13,4 +13,5 @@ import Default from "@astrojs/starlight/components/PageFrame.astro";
   import "./panzoom.ts";
   import "./vizdom.ts";
   import "./graphviz.ts";
+  import "./d2.ts";
 </script>

packages/docs/src/components/d2.ts

@@ -0,0 +1,52 @@
+import { json, alg } from "@dagrejs/graphlib";
+
+// interactivity for d2 diagrams
+document.querySelectorAll(".d2.shadow").forEach((container) => {
+  const data = container.getAttribute("data-beoe")
+    ? JSON.parse(container.getAttribute("data-beoe")!)
+    : null;
+
+  if (!data) return;
+  const graph = json.read(data);
+
+  function clear() {
+    container
+      .querySelectorAll("g[id]")
+      .forEach((node) => node.classList.remove("shadow"));
+  }
+
+  function highlight(id: string) {
+    container
+      .querySelectorAll("g[id]")
+      .forEach((node) => node.classList.add("shadow"));
+    alg.postorder(graph, [id]).forEach((node) => {
+      container
+        .querySelector(`#${CSS.escape(node)}`)
+        ?.classList.remove("shadow");
+      graph.outEdges(node)?.forEach(({ name }) => {
+        container
+          .querySelector(`#${CSS.escape(name!)}`)
+          ?.classList.remove("shadow");
+      });
+    });
+  }
+
+  // highlight on hover
+  let currentHover: string | null = null;
+  container.addEventListener("mouseover", (e) => {
+    // @ts-expect-error
+    const node = e.target?.closest(".shape");
+
+    if (node) {
+      const id = node.parentElement.getAttribute("id");
+      if (currentHover == id) return;
+      clear();
+      highlight(id);
+      currentHover = id;
+    } else {
+      if (currentHover == null) return;
+      clear();
+      currentHover = null;
+    }
+  });
+});

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

@@ -105,7 +105,7 @@ Or locally:
 
 - [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)
+- [x] [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)

packages/docs/src/content/docs/examples/d2-test.md

@@ -282,7 +282,7 @@ a2 -> b -> c -> d -> e
 
 ### `strategy=inline`
 
-```d2 strategy=inline darkScheme=false
+```d2 strategy=inline darkScheme=false graphFormat=dagre class=shadow svgo=false
 direction: right
 a -> b -> c -> d -> e
 ```

packages/docs/src/styles/custom.css

@@ -133,3 +133,13 @@ html[data-theme="dark"] .beoe-light {
 .vizdom .style-me :first-child {
   fill: lightblue;
 }
+
+.d2[data-beoe].shadow {
+  .shadow {
+    opacity: 0.4;
+  }
+
+  .shape {
+    cursor: default;
+  }
+}

packages/rehype-d2/src/d2.ts

@@ -5,14 +5,63 @@ export type D2Options = {
   layout?: "dagre" | "elk";
   sketch?: boolean;
   themeID?: number;
+  graphFormat?: "graphology" | "dagre";
 };
 
-export async function d2(
-  code: string,
-  options?: D2Options
-): Promise<string> {
+export async function d2(code: string, options: D2Options) {
   const d2Instance = new D2();
   const result = await d2Instance.compile(code, options);
-  const svg = await d2Instance.render(result.diagram, options);
-  return svg
+
+  let data;
+  if (options.graphFormat) {
+    if (options.graphFormat === "graphology") {
+      data = {
+        attributes: { name: "g" },
+        options: { allowSelfLoops: true, multi: true, type: "directed" },
+        nodes: result.diagram.shapes.map((node: any) => ({
+          key: node.id,
+          // attributes: {
+          //   label: node.label,
+          //   x: node.pos.x,
+          //   y: node.pos.y,
+          //   width: node.width,
+          //   height: node.height,
+          //   url: node.url,
+          // },
+        })),
+        edges: result.diagram.connections.map((edge: any) => ({
+          key: edge.id,
+          source: edge.src,
+          target: edge.dst,
+          // attributes: {
+          //   label: edge.label,
+          //   url: edge.url,
+          // },
+        })),
+      };
+    }
+
+    if (options.graphFormat === "dagre") {
+      data = {
+        options: {
+          directed: true,
+          multigraph: true,
+          compound: false,
+        },
+        nodes: result.diagram.shapes.map((node: any) => ({
+          v: node.id,
+          // value: {},
+        })),
+        edges: result.diagram.connections.map((edge: any) => ({
+          v: edge.src,
+          w: edge.dst,
+          name: edge.id,
+          // value: {},
+        })),
+      };
+    }
+  }
+
+  const svg = await d2Instance.render(result.diagram, options) as string;
+  return { svg, data };
 }

packages/rehype-d2/src/index.ts

@@ -21,15 +21,18 @@ export const rehypeD2 = rehypeCodeHookImg<RehypeD2Config>({
       // @ts-ignore
       newD2Options.themeID = parseFloat(newD2Options.theme);
     }
-    const svg = await d2(code, newD2Options);
-    const darkSvg = darkMode
-      ? await d2(code, {
+    const { svg, data } = await d2(code, newD2Options);
+    let darkSvg;
+    if (darkMode) {
+      darkSvg = (
+        await d2(code, {
           ...newD2Options,
           // @ts-ignore
           themeID: parseFloat(newD2Options?.darkTheme ?? "200"),
         })
-      : undefined;
-    return { svg, darkSvg };
+      ).svg;
+    }
+    return { svg, darkSvg, data };
   },
 });
 

packages/rehype-vizdom/src/render.ts

@@ -30,7 +30,7 @@ export const render = async (code: string, options: RehypeVizdomConfig) => {
           //   x: node.x,
           //   y: node.y,
           //   width: node.width,
-          //   height: node.width,
+          //   height: node.height,
           //   url: node.url,
           // },
         })),