Export diagram from model to mermaid code (#174)

Author: cheryl7114

.changeset/mermaid-export.md

@@ -0,0 +1,5 @@
+---
+"@serverlessworkflow/diagram-editor": minor
+---
+
+Add mermaid export functionality

packages/serverless-workflow-diagram-editor/src/core/index.ts

@@ -19,3 +19,4 @@ export * from "./graph";
 export * from "./taskDetails";
 export * from "./taskSubType";
 export * from "./elkjs";
+export * from "./mermaidExport";

packages/serverless-workflow-diagram-editor/src/core/mermaidExport.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { convertToMermaidCode } from "@serverlessworkflow/sdk";
+import type { Specification } from "@serverlessworkflow/sdk";
+
+/**
+ * Converts a workflow model to Mermaid diagram code
+ * @param workflow - The workflow object (parsed from JSON/YAML)
+ * @returns Mermaid diagram code as a string
+ */
+export function exportToMermaid(workflow: Specification.Workflow): string {
+  return convertToMermaidCode(workflow);
+}

packages/serverless-workflow-diagram-editor/src/i18n/locales/en.ts

@@ -38,6 +38,9 @@ export const en = {
   "sidebar.noDetails": "No additional details for this node",
   "node.entry": "Entry",
   "node.exit": "Exit",
+  "sidebar.exportMermaid.copy": "Copy Mermaid Code",
+  "sidebar.exportMermaid.download": "Download as Mermaid File",
+  "sidebar.exportMermaid.copied": "Copied!",
 } as const;
 
 export type TranslationKeys = keyof typeof en;

packages/serverless-workflow-diagram-editor/src/lib/clipboard.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function copyToClipboard(text: string): Promise<void> {
+  if (typeof navigator === "undefined" || !navigator.clipboard) {
+    return Promise.reject(new Error("Clipboard API is not available in this environment"));
+  }
+  return navigator.clipboard.writeText(text);
+}

packages/serverless-workflow-diagram-editor/src/lib/download.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function downloadFile(content: string, filename: string, mimeType = "text/plain"): void {
+  if (typeof document === "undefined") {
+    throw new Error("Document API is not available in this environment");
+  }
+
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  setTimeout(() => {
+    URL.revokeObjectURL(url);
+  }, 100);
+}

packages/serverless-workflow-diagram-editor/src/side-panel/MermaidActions.tsx

@@ -0,0 +1,87 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { useI18n } from "@serverlessworkflow/i18n";
+import { ClipboardPen, Download, ClipboardCheck } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { exportToMermaid } from "@/core";
+import { copyToClipboard } from "@/lib/clipboard";
+import { downloadFile } from "@/lib/download";
+import type { Specification } from "@serverlessworkflow/sdk";
+
+export function MermaidActions({ model }: { model: Specification.Workflow }): React.JSX.Element {
+  const { t } = useI18n();
+  const [isCopied, setIsCopied] = React.useState(false);
+  const copyTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  React.useEffect(() => {
+    return () => {
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopyMermaid = async () => {
+    try {
+      const mermaidCode = exportToMermaid(model);
+      await copyToClipboard(mermaidCode);
+      setIsCopied(true);
+
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+
+      copyTimeoutRef.current = setTimeout(() => {
+        setIsCopied(false);
+        copyTimeoutRef.current = null;
+      }, 2000);
+    } catch (error) {
+      console.error("Failed to copy mermaid code:", error);
+      // TODO: Create component to show errors to users
+    }
+  };
+
+  const handleDownloadMermaid = () => {
+    try {
+      const mermaidCode = exportToMermaid(model);
+      const sanitizedName = (model.document?.name || "workflow")
+        .replace(/[/\\:*?"<>|]/g, "_")
+        .replace(/\s+/g, "_")
+        .trim()
+        .substring(0, 200);
+      const filename = `${sanitizedName}.mmd`;
+      downloadFile(mermaidCode, filename);
+    } catch (error) {
+      console.error("Failed to download mermaid file:", error);
+      // TODO: Create component to show errors to users
+    }
+  };
+
+  return (
+    <>
+      <Button onClick={handleCopyMermaid} variant="outline" size="sm">
+        {isCopied ? <ClipboardCheck /> : <ClipboardPen />}
+        {isCopied ? t("sidebar.exportMermaid.copied") : t("sidebar.exportMermaid.copy")}
+      </Button>
+      <Button onClick={handleDownloadMermaid} variant="outline" size="sm">
+        <Download />
+        {t("sidebar.exportMermaid.download")}
+      </Button>
+    </>
+  );
+}

packages/serverless-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx

@@ -69,7 +69,10 @@ export function NodeDetailsView({ node }: NodeDetailsViewProps) {
         <>
           <div className="dec-sidebar-section-spacer" />
           <SectionHeader label={t("sidebar.sectionSource")} />
-          <YamlField yaml={yaml.dump(task, { indent: 2, lineWidth: -1 })} summary={t("sidebar.viewSource")} />
+          <YamlField
+            yaml={yaml.dump(task, { indent: 2, lineWidth: -1 })}
+            summary={t("sidebar.viewSource")}
+          />
         </>
       )}
     </div>

packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx

@@ -18,10 +18,17 @@ import * as React from "react";
 import type * as RF from "@xyflow/react";
 import { useI18n } from "@serverlessworkflow/i18n";
 import { Workflow, Info, Box } from "lucide-react";
-import { Sidebar, SidebarContent, SidebarHeader, useSidebar } from "@/components/ui/sidebar";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  useSidebar,
+  SidebarFooter,
+} from "@/components/ui/sidebar";
 import { useDiagramEditorContext } from "@/store/DiagramEditorContext";
 import { WorkflowInfoView } from "@/side-panel/WorkflowInfoView";
 import { NodeDetailsView } from "@/side-panel/NodeDetailsView";
+import { MermaidActions } from "@/side-panel/MermaidActions";
 import { getNodeVisualConfig } from "@/react-flow/nodes/taskNodeConfig";
 import type { BaseNodeData } from "@/react-flow/nodes/Nodes";
 import "./SidePanel.css";
@@ -90,6 +97,9 @@ export function SidePanel() {
           </>
         )}
       </SidebarContent>
+      <SidebarFooter>
+        {model !== null && selectedNodeId === null && <MermaidActions model={model} />}
+      </SidebarFooter>
     </Sidebar>
   );
 }

packages/serverless-workflow-diagram-editor/tests/core/mermaidExport.test.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, it, expect } from "vitest";
+import { exportToMermaid } from "../../src/core/mermaidExport";
+import { parseWorkflow } from "../../src/core/workflowSdk";
+import { BASIC_VALID_WORKFLOW_YAML } from "../fixtures/workflows";
+
+describe("exportToMermaid", () => {
+  it("converts a valid workflow to Mermaid code", () => {
+    const { model } = parseWorkflow(BASIC_VALID_WORKFLOW_YAML);
+    expect(model).not.toBeNull();
+
+    const mermaidCode = exportToMermaid(model!);
+    expect(mermaidCode).toBeTruthy();
+    expect(typeof mermaidCode).toBe("string");
+    // Mermaid diagrams start with flowchart
+    expect(mermaidCode).toMatch(/flowchart/i);
+  });
+});