diff --git a/src/diagrams/common/Diagram.tsx b/src/diagrams/common/Diagram.tsx
index 5a4bbc12..9edbfc2a 100644
--- a/src/diagrams/common/Diagram.tsx
+++ b/src/diagrams/common/Diagram.tsx
@@ -52,7 +52,7 @@ const proOptions = {
hideAttribution: true,
};
-function Diagram({ className, nodes, edges }: DiagramProps) {
+export default function Diagram({ className, nodes, edges }: DiagramProps) {
return (
);
}
-
-export default Diagram;
diff --git a/src/diagrams/common/DiagramAuto.tsx b/src/diagrams/common/DiagramAuto.tsx
new file mode 100644
index 00000000..2e8ce68c
--- /dev/null
+++ b/src/diagrams/common/DiagramAuto.tsx
@@ -0,0 +1,31 @@
+import { Node, ReactFlowProvider } from "@xyflow/react";
+import React from "react";
+import { CustomHandleProps } from "./CustomNode";
+import Diagram, { DiagramProps } from "./Diagram";
+import useAutoLayout, { LayoutOptions } from "./useAutoLayout";
+export { LabeledGroupNode } from "./LabeledGroup";
+
+// import "@xyflow/react/dist/style.css";
+
+export type DiagramNode = Node & {
+ data: {
+ label: string;
+ handles?: CustomHandleProps[];
+ };
+};
+
+export type DiagramAutoProps = DiagramProps & Partial;
+
+export default function DiagramAuto({
+ direction = "BT",
+ spacing = [50, 50],
+ algorithm = "dagre",
+ ...props
+}: DiagramAutoProps) {
+ useAutoLayout({ direction, spacing, algorithm });
+ return (
+
+
+
+ );
+}
diff --git a/src/diagrams/common/ZuploApiNode.tsx b/src/diagrams/common/ZuploApiNode.tsx
index 3222ea7a..95fd87c9 100644
--- a/src/diagrams/common/ZuploApiNode.tsx
+++ b/src/diagrams/common/ZuploApiNode.tsx
@@ -1,10 +1,8 @@
import { Handle, HandleProps } from "@xyflow/react";
-import React, { memo } from "react";
+import React from "react";
import { BaseNode } from "./BaseNode";
-type _react = typeof React;
-
-export const ZuploApiNode = memo(
+export const ZuploApiNode = React.memo(
({ data }: { data: { handles?: Pick[] } }) => {
return (
diff --git a/src/diagrams/edges.ts b/src/diagrams/helpers/edges.ts
similarity index 82%
rename from src/diagrams/edges.ts
rename to src/diagrams/helpers/edges.ts
index 8e5e7672..ebdc49f8 100644
--- a/src/diagrams/edges.ts
+++ b/src/diagrams/helpers/edges.ts
@@ -1,4 +1,4 @@
-import { DiagramNode, Edge } from "./common/Diagram.js";
+import { DiagramNode, Edge } from "../common/Diagram.js";
export const createIngressEdgressEdge = ({
egress,
diff --git a/src/diagrams/nodes.ts b/src/diagrams/helpers/nodes.ts
similarity index 95%
rename from src/diagrams/nodes.ts
rename to src/diagrams/helpers/nodes.ts
index d75e5bea..a7b490e7 100644
--- a/src/diagrams/nodes.ts
+++ b/src/diagrams/helpers/nodes.ts
@@ -1,6 +1,6 @@
import { Position, XYPosition } from "@xyflow/react";
-import { CustomHandleProps } from "./common/CustomNode.js";
-import { DiagramNode } from "./common/Diagram.js";
+import { CustomHandleProps } from "../common/CustomNode.js";
+import { DiagramNode } from "../common/Diagram.js";
export const createClient = ({
position,
diff --git a/src/mdx.tsx b/src/mdx.tsx
index 7f9c00e4..29f301ae 100644
--- a/src/mdx.tsx
+++ b/src/mdx.tsx
@@ -1,4 +1,4 @@
-import { lazy, Suspense } from "react";
+import React, { lazy, Suspense } from "react";
import { CogIcon, CopyIcon, FileTextIcon, ListEndIcon } from "zudoku/icons";
import { BundlesTable } from "./BundlesTable";
import { DocusaurusDocsLicense } from "./DocusaurusDocsLicense";
@@ -7,6 +7,8 @@ import { GithubButton } from "./GithubButton";
import { PolicyOverview } from "./PolicyOverview";
import ZupIt from "./ZupIt.js";
+type _react = typeof React;
+
const iconStyle = { display: "inline", verticalAlign: "-0.125em" };
const EmbeddedChat = lazy(() => import("./EmbeddedChat"));
@@ -28,8 +30,6 @@ export const mdxComponents = {
PolicyOverview,
EnterpriseFeature,
EmbeddedChat: () => {
- if (typeof window === "undefined") return null;
-
return (
Loading…
}>
diff --git a/zudoku.config.tsx b/zudoku.config.tsx
index 356f659b..5d2f4593 100644
--- a/zudoku.config.tsx
+++ b/zudoku.config.tsx
@@ -4,6 +4,7 @@ import { diagramPlugin } from "./src/diagrams/common/plugin.js";
import { HeadNavigation } from "./src/HeadNavigation";
import { mdxComponents } from "./src/mdx.js";
import rehypeStaticImages from "./src/mdx/static-images.js";
+
const config: ZudokuConfig = {
basePath: "/docs",
page: {