fix(): refine mermaid label style

Author: weareoutman

shared/markdown/src/rehypeMermaid.ts

@@ -55,7 +55,8 @@ export function rehypeMermaid() {
           );
           defs.innerHTML = `<linearGradient id="linear-gradient-${id}" x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="0%" stop-color="#F0EBFA" />
-  <stop offset="100%" stop-color="#DCD2F3" />
+  <stop offset="75%" stop-color="#DED4F4" />
+  <stop offset="100%" stop-color="#C5C7FA" />
 </linearGradient>`;
           svgElement.prepend(defs);
 
@@ -64,18 +65,29 @@ export function rehypeMermaid() {
             "style"
           );
           style.textContent = `
-            #${id} .node rect,
-            #${id} .node circle,
-            #${id} .node ellipse,
-            #${id} .node polygon,
-            #${id} .node path {
-              fill: url(#linear-gradient-${id});
-            }
-            #${id} .node rect {
-              rx: 4;
-              ry: 4;
-            }
-          `;
+#${id} .node rect,
+#${id} .node circle,
+#${id} .node ellipse,
+#${id} .node polygon,
+#${id} .node path {
+  fill: url(#linear-gradient-${id});
+}
+#${id} .node rect {
+  rx: 4;
+  ry: 4;
+}
+#${id} .labelBkg {
+  background-color: #f5f8ff;
+}
+#${id} .edgeLabel,
+#${id} .edgeLabel p {
+  background-color: transparent;
+}
+#${id} .edgeLabel {
+  color: #8c8c8c;
+  font-size: 12px;
+}
+`;
           svgElement.appendChild(style);
 
           const modifiedSvg = serializer.serializeToString(svgElement);