Function buildMindMapSvg

frontend-workflow/src/utils/mindmapTree.ts:381–511

(
  root: MindMapTreeNode,
  options: MindMapSvgExportOptions = {},
)

};

export const buildMindMapSvg = (
  root: MindMapTreeNode,
  options: MindMapSvgExportOptions = {},
): string => {
  const { nodes, edges } = buildMindMapFlow(root);
  const title = options.title?.trim() || root.label || 'Mind Map';
  const subtitle = options.subtitle?.trim() || root.summary?.trim() || '';
  const highlights = (options.highlights || []).map((item) => item.trim()).filter(Boolean).slice(0, 4);

  const bounds = nodes.reduce(
    (acc, node) => {
      const box = getNodeBounds(node);
      return {
        minX: Math.min(acc.minX, box.left),
        minY: Math.min(acc.minY, box.top),
        maxX: Math.max(acc.maxX, box.right),
        maxY: Math.max(acc.maxY, box.bottom),
      };
    },
    { minX: 0, minY: 0, maxX: 0, maxY: 0 },
  );

  const contentWidth = bounds.maxX - bounds.minX;
  const contentHeight = bounds.maxY - bounds.minY;
  const width = options.width || Math.max(1400, Math.ceil(contentWidth + SVG_PADDING_X * 2));
  const height =
    options.height ||
    Math.max(980, Math.ceil(contentHeight + SVG_PADDING_Y * 2 + SVG_HEADER_HEIGHT + SVG_FOOTER_HEIGHT));
  const shiftX = Math.round((width - contentWidth) / 2 - bounds.minX);
  const shiftY = Math.round(SVG_HEADER_HEIGHT + Math.max(0, (height - SVG_HEADER_HEIGHT - SVG_FOOTER_HEIGHT - contentHeight) / 2) - bounds.minY);

  const nodeMap = new Map(nodes.map((node) => [node.id, node]));
  const branchColor = (branch: MindMapNodeData['branch']) =>
    branch === 'left'
      ? { stroke: '#a78bfa', fill: 'rgba(91, 33, 182, 0.24)' }
      : branch === 'right'
        ? { stroke: '#22d3ee', fill: 'rgba(14, 165, 233, 0.24)' }
        : { stroke: '#67e8f9', fill: 'rgba(6, 182, 212, 0.28)' };

  const edgeMarkup = edges
    .map((edge) => {
      const source = nodeMap.get(edge.source);
      const target = nodeMap.get(edge.target);
      if (!source || !target) return '';
      const sourceBox = getNodeBounds(source);
      const targetBox = getNodeBounds(target);
      const sourceBranch = target.data.branch === 'left' ? 'left' : 'right';
      const sx = source.data.isRoot
        ? sourceBox.left + sourceBox.width / 2
        : sourceBranch === 'left'
          ? sourceBox.left
          : sourceBox.right;
      const tx = target.data.branch === 'left' ? targetBox.right : targetBox.left;
      const sy = sourceBox.top + sourceBox.height / 2;
      const ty = targetBox.top + targetBox.height / 2;
      const midX = (sx + tx) / 2;
      const color = sourceBranch === 'left' ? '#a78bfa' : '#22d3ee';
      return `<path d="M ${sx} ${sy} C ${midX} ${sy}, ${midX} ${ty}, ${tx} ${ty}" fill="none" stroke="${color}" stroke-width="${target.data.depth <= 1 ? 3 : 2}" stroke-linecap="round" />`;