mintel.me/apps/web/src/components/DiagramFlow.tsx

"use client";

import React from "react";
import { Mermaid } from "./Mermaid";

interface FlowNode {
    id: string;
    label: string;
    style?: string;
}

interface FlowEdge {
    from: string;
    to: string;
    label?: string;
    type?: "solid" | "dotted";
}

interface DiagramFlowProps {
    direction?: "LR" | "TB" | "RL" | "BT";
    nodes?: FlowNode[];
    edges?: FlowEdge[];
    title?: string;
    caption?: string;
    id?: string;
    showShare?: boolean;
    fontSize?: string;
}

export const DiagramFlow: React.FC<DiagramFlowProps> = ({
    direction = "LR",
    nodes = [],
    edges = [],
    title,
    caption,
    id,
    showShare = true,
    fontSize = "16px",
}) => {
    const lines: string[] = [`graph ${direction}`];

    // Declare nodes with labels
    for (const node of nodes) {
        lines.push(`    ${node.id}[${JSON.stringify(node.label)}]`);
    }

    // Add edges
    for (const edge of edges) {
        const arrow = edge.type === "dotted" ? "-.-" : "-->";
        const label = edge.label ? `|${edge.label}|` : "";
        lines.push(`    ${edge.from} ${arrow} ${label}${edge.to}`);
    }

    // Add styles
    for (const node of nodes) {
        if (node.style) {
            lines.push(`    style ${node.id} ${node.style}`);
        }
    }

    const flowGraph = lines.join("\n");

    return (
        <div className="my-12">
            <Mermaid
                graph={flowGraph}
                id={id}
                title={title}
                showShare={showShare}
                fontSize={fontSize}
            />
            {caption && (
                <div className="text-center text-xs text-slate-400 mt-4 italic">
                    {caption}
                </div>
            )}
        </div>
    );
};