1 files changed, 30 insertions, 3 deletions

diff --git a/subprojects/frontend/src/graph/postProcessSVG.ts b/subprojects/frontend/src/graph/postProcessSVG.ts
index a580f5c6..bf990f3a 100644
--- a/subprojects/frontend/src/graph/postProcessSVG.ts
+++ b/subprojects/frontend/src/graph/postProcessSVG.ts
@@ -1,13 +1,13 @@
 /*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
 
 import { type BBox, parsePolygonBBox, parsePathBBox } from './parseBBox';
 
-const SVG_NS = 'http://www.w3.org/2000/svg';
-const XLINK_NS = 'http://www.w3.org/1999/xlink';
+export const SVG_NS = 'http://www.w3.org/2000/svg';
+export const XLINK_NS = 'http://www.w3.org/1999/xlink';
 
 function modifyAttribute(element: Element, attribute: string, change: number) {
   const valueString = element.getAttribute(attribute);
@@ -166,6 +166,32 @@ function replaceImages(node: SVGGElement) {
   });
 }
 
+function markerColorToClass(svg: SVGSVGElement) {
+  svg.querySelectorAll('.node [stroke="black"]').forEach((node) => {
+    node.removeAttribute('stroke');
+    node.classList.add('node-outline');
+  });
+  svg.querySelectorAll('.node [fill="green"]').forEach((node) => {
+    node.removeAttribute('fill');
+    node.classList.add('node-header');
+  });
+  svg.querySelectorAll('.node [fill="white"]').forEach((node) => {
+    node.removeAttribute('fill');
+    node.classList.add('node-bg');
+  });
+  svg.querySelectorAll('.edge [stroke="black"]').forEach((node) => {
+    node.removeAttribute('stroke');
+    node.classList.add('edge-line');
+  });
+  svg.querySelectorAll('.edge [fill="black"]').forEach((node) => {
+    node.removeAttribute('fill');
+    node.classList.add('edge-arrow');
+  });
+  svg.querySelectorAll('[font-family]').forEach((node) => {
+    node.removeAttribute('font-family');
+  });
+}
+
 export default function postProcessSvg(svg: SVGSVGElement) {
   // svg
   //   .querySelectorAll<SVGTitleElement>('title')
@@ -183,4 +209,5 @@ export default function postProcessSvg(svg: SVGSVGElement) {
     svg.viewBox.baseVal.height + 12,
   ];
   svg.setAttribute('viewBox', viewBox.join(' '));
+  markerColorToClass(svg);
 }