refactor: komplettsanierung

apps/web/src/components/Mermaid.tsx

@@ -2,15 +2,24 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import mermaid from "mermaid";
+import { DiagramShareButton } from "./DiagramShareButton";
 
 interface MermaidProps {
   graph: string;
   id?: string;
+  title?: string;
+  showShare?: boolean;
 }
 
-export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
+export const Mermaid: React.FC<MermaidProps> = ({
+  graph,
+  id: providedId,
+  title,
+  showShare = false,
+}) => {
   const [id, setId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const [svgContent, setSvgContent] = useState<string>("");
 
   useEffect(() => {
     setId(
@@ -23,15 +32,52 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
   useEffect(() => {
     mermaid.initialize({
       startOnLoad: false,
-      theme: "default",
+      theme: "base",
       darkMode: false,
       themeVariables: {
-        fontFamily: "Inter, system-ui, sans-serif",
-        fontSize: "16px",
+        // Base colors - industrial slate/white palette
         primaryColor: "#ffffff",
-        nodeBorder: "#e2e8f0",
+        primaryTextColor: "#1e293b",
+        primaryBorderColor: "#cbd5e1",
+        lineColor: "#94a3b8",
+        secondaryColor: "#f8fafc",
+        tertiaryColor: "#f1f5f9",
+
+        // Background colors
+        background: "#ffffff",
         mainBkg: "#ffffff",
-        lineColor: "#cbd5e1",
+        secondBkg: "#f8fafc",
+        tertiaryBkg: "#f1f5f9",
+
+        // Text colors
+        textColor: "#1e293b",
+        labelTextColor: "#475569",
+
+        // Node styling
+        nodeBorder: "#cbd5e1",
+        clusterBkg: "#f8fafc",
+        clusterBorder: "#cbd5e1",
+
+        // Edge/line styling
+        edgeLabelBackground: "#ffffff",
+
+        // Font
+        fontFamily: "Inter, system-ui, sans-serif",
+        fontSize: "14px",
+
+        // Pie Chart Colors - High Contrast Industrial Palette
+        pie1: "#0f172a", // Deep Navy
+        pie2: "#334155", // Slate Blue
+        pie3: "#64748b", // Steel Gray
+        pie4: "#94a3b8", // Muted Steel
+        pie5: "#cbd5e1", // Concrete
+        pie6: "#1e293b", // Slate 800
+        pie7: "#475569", // Slate 600
+        pie8: "#000000", // Pure Black for accents
+        pie9: "#e2e8f0", // Light Concrete
+        pie10: "#020617", // Slate 950
+        pie11: "#525252", // Neutral 600
+        pie12: "#262626", // Neutral 800
       },
       securityLevel: "loose",
     });
@@ -41,6 +87,7 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
         try {
           const { svg } = await mermaid.render(`${id}-svg`, graph);
           containerRef.current.innerHTML = svg;
+          setSvgContent(svg);
           setIsRendered(true);
         } catch (err) {
           console.error("Mermaid rendering failed:", err);
@@ -58,21 +105,41 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
   if (!id) return null;
 
   return (
-    <div className="mermaid-wrapper my-12 not-prose w-full overflow-hidden">
-      <div className="flex justify-center w-full">
-        <div
-          ref={containerRef}
-          className={`mermaid transition-opacity duration-500 w-full flex justify-center ${isRendered ? "opacity-100" : "opacity-0"}`}
-          id={id}
-        >
-          {error ? (
-            <div className="text-red-500 p-4 border border-red-200 rounded bg-red-50 text-sm">
-              {error}
-            </div>
-          ) : (
-            graph
-          )}
+    <div className="mermaid-wrapper not-prose relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen px-5 md:px-16 py-12 bg-slate-50/50 border-y border-slate-100">
+      <div className="max-w-7xl mx-auto">
+        {title && (
+          <h4 className="text-center text-sm font-bold text-slate-700 mb-8 uppercase tracking-[0.2em]">
+            {title}
+          </h4>
+        )}
+        <div className="flex justify-center w-full">
+          <div
+            ref={containerRef}
+            className={`mermaid transition-opacity duration-500 w-full flex justify-center ${isRendered ? "opacity-100" : "opacity-0"}`}
+            id={id}
+            style={{
+              maxWidth: "100%",
+              overflow: "visible",
+            }}
+          >
+            {error ? (
+              <div className="text-red-500 p-4 border border-red-200 rounded bg-red-50 text-sm">
+                {error}
+              </div>
+            ) : (
+              graph
+            )}
+          </div>
         </div>
+        {showShare && id && (
+          <div className="flex justify-center mt-8">
+            <DiagramShareButton
+              diagramId={id}
+              title={title}
+              svgContent={svgContent}
+            />
+          </div>
+        )}
       </div>
     </div>
   );