Fixed rendering of arrow heads in Mermaid.js class diagrams

squidfunk · web-flow · commit a1816aedcb93 · 2025-02-06T10:28:26.000+07:00
Fix embedded mermaid css to fix class diagram arrow heads
diff --git a/src/templates/assets/javascripts/components/content/mermaid/index.css b/src/templates/assets/javascripts/components/content/mermaid/index.css
@@ -171,19 +171,15 @@ g.classGroup text {
 }
 
 /* Class extension, composition and dependency marker */
-defs #classDiagram-extensionStart,
-defs #classDiagram-extensionEnd,
-defs #classDiagram-compositionStart,
-defs #classDiagram-compositionEnd,
-defs #classDiagram-dependencyStart,
-defs #classDiagram-dependencyEnd {
+defs marker.marker.extension.class path,
+defs marker.marker.composition.class path ,
+defs marker.marker.dependency.class path  {
   fill: var(--md-mermaid-edge-color) !important;
   stroke: var(--md-mermaid-edge-color) !important;
 }
 
 /* Class aggregation marker */
-defs #classDiagram-aggregationStart,
-defs #classDiagram-aggregationEnd {
+defs marker.marker.aggregation.class path  {
   fill: var(--md-mermaid-label-bg-color) !important;
   stroke: var(--md-mermaid-edge-color) !important;
 }
