From 56ce82d1ea599193da31ea5c89f21dc93a94c51e Mon Sep 17 00:00:00 2001
From: lornakelly <lornakelly88@gmail.com>
Date: Thu, 25 Jun 2026 11:52:55 +0100
Subject: [PATCH 1/2] Style minimap

Signed-off-by: lornakelly <lornakelly88@gmail.com>
---
 .../src/react-flow/diagram/Diagram.css        | 21 +++++++++++++++++++
 .../src/react-flow/diagram/Diagram.tsx        |  4 +++-
 .../src/styles.css                            | 21 ++++++++++++++++++-
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
index 42d7c67..9c108f2 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
@@ -65,6 +65,27 @@
     min-width: 0 !important;
     min-height: 0 !important;
   }
+
+  /* minimap */
+  .dec-root .react-flow__minimap{
+  --xy-minimap-background-color: var(--dec-minimap-bg);
+  --xy-minimap-mask-background-color: var(--dec-minimap-mask);
+  --xy-minimap-mask-stroke-color: var(--dec-minimap-viewport);
+  --xy-minimap-node-background-color: var(--dec-minimap-node);
+  --xy-minimap-node-stroke-color: var(--dec-minimap-node-stroke);
+  --xy-minimap-node-stroke-width: 2;
+  
+  border: 1px solid var(--dec-minimap-border);
+  border-radius:8px;
+  box-shadow: 0 4px 12px var(--dec-minimap-shadow);
+  overflow: hidden;
+}
+
+  .dec-root .react-flow__minimap-node {
+  fill: var(--dec-minimap-node);
+  stroke: var(--dec-minimap-node-stroke);
+  stroke-width: 2;
+}
 }
 
 /* custom nodes */
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx
index 861331f..7c2312b 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx
@@ -176,7 +176,9 @@ export const Diagram = ({ divRef, ref, colorMode = "light" }: DiagramProps) => {
         nodesDraggable={!isReadOnly}
         nodesConnectable={!isReadOnly}
       >
-        {minimapVisible && <RF.MiniMap pannable zoomable position={"top-right"} />}
+        {minimapVisible && (
+          <RF.MiniMap pannable zoomable position={"bottom-left"} maskStrokeWidth={2} />
+        )}
 
         <RF.Panel position="top-right">
           <SidePanelTrigger />
diff --git a/packages/serverless-workflow-diagram-editor/src/styles.css b/packages/serverless-workflow-diagram-editor/src/styles.css
index 486f72d..c325de1 100644
--- a/packages/serverless-workflow-diagram-editor/src/styles.css
+++ b/packages/serverless-workflow-diagram-editor/src/styles.css
@@ -49,13 +49,32 @@
     --dec-error-glow: rgba(239, 68, 68, 0.35);
     --dec-edge-selected: #aea6a6;
     --dec-edge-selected-condition: rgb(59 130 246);
+
+    /* minimap */
+    --dec-minimap-bg: #f8fafc;
+    --dec-minimap-mask: rgba(100, 116, 139, 0.25);
+    --dec-minimap-viewport: rgb(59 130 246);
+    --dec-minimap-node: #94a3b8;
+    --dec-minimap-node-stroke: #64748b;
+    --dec-minimap-border: #cbd5e1;
+    --dec-minimap-shadow: rgba(15, 23, 42, 0.12);
+
   }
 
   .dec-root.dark{
-        --dec-error-accent: #f87171;
+    --dec-error-accent: #f87171;
     --dec-error-glow: rgba(248, 113, 113, 0.4);
     --dec-edge-selected: #aea6a6;
     --dec-edge-selected-condition: rgb(59 130 246);
+  
+    /* minimap */
+    --dec-minimap-bg: #1a202c;
+    --dec-minimap-mask: rgba(2, 6, 23, 0.5);
+    --dec-minimap-viewport: rgb(96 165 250);
+    --dec-minimap-node: #94a3b8;
+    --dec-minimap-node-stroke: #cbd5e1;
+    --dec-minimap-border: #2d3748;
+    --dec-minimap-shadow: rgba(0, 0, 0, 0.5);
   }
 
   .dec-root .dec-diagram-content {

From ad6a2d96252bc17a8b30d6d8b757228100c9782a Mon Sep 17 00:00:00 2001
From: lornakelly <lornakelly88@gmail.com>
Date: Thu, 25 Jun 2026 16:50:20 +0100
Subject: [PATCH 2/2] Add cursor to mermaid buttons

Signed-off-by: lornakelly <lornakelly88@gmail.com>
---
 .changeset/style-minimap.md                   |  5 ++++
 .../src/react-flow/diagram/Diagram.css        | 28 +++++++++----------
 .../src/side-panel/MermaidActions.tsx         | 14 ++++++++--
 .../src/styles.css                            |  3 +-
 4 files changed, 32 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/style-minimap.md

diff --git a/.changeset/style-minimap.md b/.changeset/style-minimap.md
new file mode 100644
index 0000000..cfe20a5
--- /dev/null
+++ b/.changeset/style-minimap.md
@@ -0,0 +1,5 @@
+---
+"@serverlessworkflow/diagram-editor": patch
+---
+
+Small styling tweaks to minimap and buttons
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
index 9c108f2..5b40fff 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
@@ -68,23 +68,23 @@
 
   /* minimap */
   .dec-root .react-flow__minimap{
-  --xy-minimap-background-color: var(--dec-minimap-bg);
-  --xy-minimap-mask-background-color: var(--dec-minimap-mask);
-  --xy-minimap-mask-stroke-color: var(--dec-minimap-viewport);
-  --xy-minimap-node-background-color: var(--dec-minimap-node);
-  --xy-minimap-node-stroke-color: var(--dec-minimap-node-stroke);
-  --xy-minimap-node-stroke-width: 2;
-  
-  border: 1px solid var(--dec-minimap-border);
-  border-radius:8px;
-  box-shadow: 0 4px 12px var(--dec-minimap-shadow);
-  overflow: hidden;
+    --xy-minimap-background-color: var(--dec-minimap-bg);
+    --xy-minimap-mask-background-color: var(--dec-minimap-mask);
+    --xy-minimap-mask-stroke-color: var(--dec-minimap-viewport);
+    --xy-minimap-node-background-color: var(--dec-minimap-node);
+    --xy-minimap-node-stroke-color: var(--dec-minimap-node-stroke);
+    --xy-minimap-node-stroke-width: 2;
+    
+    border: 1px solid var(--dec-minimap-border);
+    border-radius:8px;
+    box-shadow: 0 4px 12px var(--dec-minimap-shadow);
+    overflow: hidden;
 }
 
   .dec-root .react-flow__minimap-node {
-  fill: var(--dec-minimap-node);
-  stroke: var(--dec-minimap-node-stroke);
-  stroke-width: 2;
+    fill: var(--dec-minimap-node);
+    stroke: var(--dec-minimap-node-stroke);
+    stroke-width: 2;
 }
 }
 
diff --git a/packages/serverless-workflow-diagram-editor/src/side-panel/MermaidActions.tsx b/packages/serverless-workflow-diagram-editor/src/side-panel/MermaidActions.tsx
index 691fb7f..a74ed7a 100644
--- a/packages/serverless-workflow-diagram-editor/src/side-panel/MermaidActions.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/side-panel/MermaidActions.tsx
@@ -74,11 +74,21 @@ export function MermaidActions({ model }: { model: Specification.Workflow }): Re
 
   return (
     <>
-      <Button onClick={handleCopyMermaid} variant="outline" size="sm">
+      <Button
+        onClick={handleCopyMermaid}
+        variant="outline"
+        size="sm"
+        className="dec:cursor-pointer"
+      >
         {isCopied ? <ClipboardCheck /> : <ClipboardPen />}
         {isCopied ? t("sidebar.exportMermaid.copied") : t("sidebar.exportMermaid.copy")}
       </Button>
-      <Button onClick={handleDownloadMermaid} variant="outline" size="sm">
+      <Button
+        onClick={handleDownloadMermaid}
+        variant="outline"
+        size="sm"
+        className="dec:cursor-pointer"
+      >
         <Download />
         {t("sidebar.exportMermaid.download")}
       </Button>
diff --git a/packages/serverless-workflow-diagram-editor/src/styles.css b/packages/serverless-workflow-diagram-editor/src/styles.css
index c325de1..71a8400 100644
--- a/packages/serverless-workflow-diagram-editor/src/styles.css
+++ b/packages/serverless-workflow-diagram-editor/src/styles.css
@@ -58,10 +58,9 @@
     --dec-minimap-node-stroke: #64748b;
     --dec-minimap-border: #cbd5e1;
     --dec-minimap-shadow: rgba(15, 23, 42, 0.12);
-
   }
 
-  .dec-root.dark{
+  .dec-root.dark {
     --dec-error-accent: #f87171;
     --dec-error-glow: rgba(248, 113, 113, 0.4);
     --dec-edge-selected: #aea6a6;