@diagrammo/dgmo 0.2.2 → 0.2.4

package/src/d3.ts

@@ -130,6 +130,12 @@ export interface QuadrantLabels {
   bottomRight: QuadrantLabel | null;
 }
 
+/** Optional explicit dimensions for CLI/export rendering (bypasses DOM layout). */
+export interface D3ExportDimensions {
+  width?: number;
+  height?: number;
+}
+
 export interface ParsedD3 {
   type: D3ChartType | null;
   title: string | null;
@@ -1036,8 +1042,8 @@ function tokenizeFreeformText(text: string): WordCloudWord[] {
 // ============================================================
 
 const SLOPE_MARGIN = { top: 80, bottom: 40, left: 80 };
-const SLOPE_LABEL_FONT_SIZE = 12;
-const SLOPE_CHAR_WIDTH = 7; // approximate px per character at 12px
+const SLOPE_LABEL_FONT_SIZE = 14;
+const SLOPE_CHAR_WIDTH = 8; // approximate px per character at 14px
 
 /**
  * Renders a slope chart into the given container using D3.
@@ -1047,7 +1053,8 @@ export function renderSlopeChart(
   parsed: ParsedD3,
   palette: PaletteColors,
   isDark: boolean,
-  onClickItem?: (lineNumber: number) => void
+  onClickItem?: (lineNumber: number) => void,
+  exportDims?: D3ExportDimensions
 ): void {
   // Clear existing content
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
@@ -1055,8 +1062,8 @@ export function renderSlopeChart(
   const { periods, data, title } = parsed;
   if (data.length === 0 || periods.length < 2) return;
 
-  const width = container.clientWidth;
-  const height = container.clientHeight;
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
 
   // Compute right margin from the longest end-of-line label
@@ -1067,7 +1074,7 @@ export function renderSlopeChart(
   const estimatedLabelWidth = maxLabelText.length * SLOPE_CHAR_WIDTH;
   const maxRightMargin = Math.floor(width * 0.35);
   const rightMargin = Math.min(
-    Math.max(estimatedLabelWidth + 20, 100),
+    Math.max(estimatedLabelWidth + 30, 120),
     maxRightMargin
   );
 
@@ -1077,7 +1084,7 @@ export function renderSlopeChart(
   // Theme colors
   const textColor = palette.text;
   const mutedColor = palette.border;
-  const bgColor = palette.overlay;
+  const bgColor = palette.bg;
   const colors = getSeriesColors(palette);
 
   // Scales
@@ -1119,7 +1126,7 @@ export function renderSlopeChart(
       .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', textColor)
-      .attr('font-size', '18px')
+      .attr('font-size', '20px')
       .attr('font-weight', '700')
       .text(title);
   }
@@ -1132,7 +1139,7 @@ export function renderSlopeChart(
       .attr('y', -15)
       .attr('text-anchor', 'middle')
       .attr('fill', textColor)
-      .attr('font-size', '13px')
+      .attr('font-size', '18px')
       .attr('font-weight', '600')
       .text(period);
 
@@ -1232,7 +1239,7 @@ export function renderSlopeChart(
           .attr('dy', '0.35em')
           .attr('text-anchor', isFirst ? 'end' : 'middle')
           .attr('fill', textColor)
-          .attr('font-size', '12px')
+          .attr('font-size', '16px')
           .text(val.toString());
       }
     });
@@ -1420,15 +1427,16 @@ export function renderArcDiagram(
   parsed: ParsedD3,
   palette: PaletteColors,
   _isDark: boolean,
-  onClickItem?: (lineNumber: number) => void
+  onClickItem?: (lineNumber: number) => void,
+  exportDims?: D3ExportDimensions
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
   const { links, title, orientation, arcOrder, arcNodeGroups } = parsed;
   if (links.length === 0) return;
 
-  const width = container.clientWidth;
-  const height = container.clientHeight;
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
 
   const isVertical = orientation === 'vertical';
@@ -1447,7 +1455,7 @@ export function renderArcDiagram(
   // Theme colors
   const textColor = palette.text;
   const mutedColor = palette.border;
-  const bgColor = palette.overlay;
+  const bgColor = palette.bg;
   const colors = getSeriesColors(palette);
 
   // Order nodes by selected strategy
@@ -1499,7 +1507,7 @@ export function renderArcDiagram(
       .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', textColor)
-      .attr('font-size', '18px')
+      .attr('font-size', '20px')
       .attr('font-weight', '700')
       .text(title);
   }
@@ -1541,11 +1549,11 @@ export function renderArcDiagram(
     g.selectAll<SVGGElement, unknown>('.arc-node').attr('opacity', 1);
     g.selectAll<SVGRectElement, unknown>('.arc-group-band').attr(
       'fill-opacity',
-      0.08
+      0.06
     );
     g.selectAll<SVGTextElement, unknown>('.arc-group-label').attr(
       'fill-opacity',
-      0.7
+      0.5
     );
   }
 
@@ -1610,8 +1618,8 @@ export function renderArcDiagram(
           .attr('width', bandHalfW * 2)
           .attr('height', maxY - minY)
           .attr('rx', 4)
-          .attr('fill', bandColor)
-          .attr('fill-opacity', 0.08)
+          .attr('fill', textColor)
+          .attr('fill-opacity', 0.06)
           .style('cursor', 'pointer')
           .on('mouseenter', () => handleGroupEnter(group.name))
           .on('mouseleave', handleMouseLeave)
@@ -1623,11 +1631,11 @@ export function renderArcDiagram(
           .attr('class', 'arc-group-label')
           .attr('data-group', group.name)
           .attr('x', baseX - bandHalfW + 6)
-          .attr('y', minY + 12)
-          .attr('fill', bandColor)
-          .attr('font-size', '10px')
+          .attr('y', minY + 14)
+          .attr('fill', textColor)
+          .attr('font-size', '12px')
           .attr('font-weight', '600')
-          .attr('fill-opacity', 0.7)
+          .attr('fill-opacity', 0.5)
           .style('cursor', onClickItem ? 'pointer' : 'default')
           .text(group.name)
           .on('mouseenter', () => handleGroupEnter(group.name))
@@ -1743,8 +1751,8 @@ export function renderArcDiagram(
           .attr('width', maxX - minX)
           .attr('height', bandHalfH * 2)
           .attr('rx', 4)
-          .attr('fill', bandColor)
-          .attr('fill-opacity', 0.08)
+          .attr('fill', textColor)
+          .attr('fill-opacity', 0.06)
           .style('cursor', 'pointer')
           .on('mouseenter', () => handleGroupEnter(group.name))
           .on('mouseleave', handleMouseLeave)
@@ -1758,10 +1766,10 @@ export function renderArcDiagram(
           .attr('x', (minX + maxX) / 2)
           .attr('y', baseY + bandHalfH - 4)
           .attr('text-anchor', 'middle')
-          .attr('fill', bandColor)
-          .attr('font-size', '10px')
+          .attr('fill', textColor)
+          .attr('font-size', '12px')
           .attr('font-weight', '600')
-          .attr('fill-opacity', 0.7)
+          .attr('fill-opacity', 0.5)
           .style('cursor', onClickItem ? 'pointer' : 'default')
           .text(group.name)
           .on('mouseenter', () => handleGroupEnter(group.name))
@@ -2549,7 +2557,8 @@ export function renderTimeline(
   parsed: ParsedD3,
   palette: PaletteColors,
   isDark: boolean,
-  onClickItem?: (lineNumber: number) => void
+  onClickItem?: (lineNumber: number) => void,
+  exportDims?: D3ExportDimensions
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -2568,8 +2577,8 @@ export function renderTimeline(
 
   const tooltip = createTooltip(container, palette, isDark);
 
-  const width = container.clientWidth;
-  const height = container.clientHeight;
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
 
   const isVertical = orientation === 'vertical';
@@ -2577,7 +2586,7 @@ export function renderTimeline(
   // Theme colors
   const textColor = palette.text;
   const mutedColor = palette.border;
-  const bgColor = palette.overlay;
+  const bgColor = palette.bg;
   const colors = getSeriesColors(palette);
 
   // Assign colors to groups
@@ -2732,7 +2741,7 @@ export function renderTimeline(
           .attr('y', 30)
           .attr('text-anchor', 'middle')
           .attr('fill', textColor)
-          .attr('font-size', '18px')
+          .attr('font-size', '20px')
           .attr('font-weight', '700')
           .text(title);
       }
@@ -2923,7 +2932,7 @@ export function renderTimeline(
           .attr('y', 30)
           .attr('text-anchor', 'middle')
           .attr('fill', textColor)
-          .attr('font-size', '18px')
+          .attr('font-size', '20px')
           .attr('font-weight', '700')
           .text(title);
       }
@@ -3175,7 +3184,7 @@ export function renderTimeline(
         .attr('y', 30)
         .attr('text-anchor', 'middle')
         .attr('fill', textColor)
-        .attr('font-size', '18px')
+        .attr('font-size', '20px')
         .attr('font-weight', '700')
         .text(title);
     }
@@ -3371,8 +3380,8 @@ export function renderTimeline(
               .attr('dy', '0.35em')
               .attr('text-anchor', 'start')
               .attr('fill', '#ffffff')
-              .attr('font-size', '13px')
-              .attr('font-weight', '500')
+              .attr('font-size', '14px')
+              .attr('font-weight', '700')
               .text(ev.label);
           } else {
             // Text outside bar - check if it fits on left or must go right
@@ -3459,7 +3468,7 @@ export function renderTimeline(
         .attr('y', 30)
         .attr('text-anchor', 'middle')
         .attr('fill', textColor)
-        .attr('font-size', '18px')
+        .attr('font-size', '20px')
         .attr('font-weight', '700')
         .text(title);
     }
@@ -3639,8 +3648,8 @@ export function renderTimeline(
             .attr('dy', '0.35em')
             .attr('text-anchor', 'start')
             .attr('fill', '#ffffff')
-            .attr('font-size', '13px')
-            .attr('font-weight', '500')
+            .attr('font-size', '14px')
+            .attr('font-weight', '700')
             .text(ev.label);
         } else {
           // Text outside bar - check if it fits on left or must go right
@@ -3708,22 +3717,23 @@ export function renderWordCloud(
   parsed: ParsedD3,
   palette: PaletteColors,
   _isDark: boolean,
-  onClickItem?: (lineNumber: number) => void
+  onClickItem?: (lineNumber: number) => void,
+  exportDims?: D3ExportDimensions
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
   const { words, title, cloudOptions } = parsed;
   if (words.length === 0) return;
 
-  const width = container.clientWidth;
-  const height = container.clientHeight;
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
 
   const titleHeight = title ? 40 : 0;
   const cloudHeight = height - titleHeight;
 
   const textColor = palette.text;
-  const bgColor = palette.overlay;
+  const bgColor = palette.bg;
   const colors = getSeriesColors(palette);
 
   const { minSize, maxSize } = cloudOptions;
@@ -3750,10 +3760,10 @@ export function renderWordCloud(
     svg
       .append('text')
       .attr('x', width / 2)
-      .attr('y', 28)
+      .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', textColor)
-      .attr('font-size', '18px')
+      .attr('font-size', '20px')
       .attr('font-weight', '700')
       .text(title);
   }
@@ -3805,7 +3815,8 @@ function renderWordCloudAsync(
   container: HTMLDivElement,
   parsed: ParsedD3,
   palette: PaletteColors,
-  _isDark: boolean
+  _isDark: boolean,
+  exportDims?: D3ExportDimensions
 ): Promise<void> {
   return new Promise((resolve) => {
     d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
@@ -3816,8 +3827,8 @@ function renderWordCloudAsync(
       return;
     }
 
-    const width = container.clientWidth;
-    const height = container.clientHeight;
+    const width = exportDims?.width ?? container.clientWidth;
+    const height = exportDims?.height ?? container.clientHeight;
     if (width <= 0 || height <= 0) {
       resolve();
       return;
@@ -3827,7 +3838,7 @@ function renderWordCloudAsync(
     const cloudHeight = height - titleHeight;
 
     const textColor = palette.text;
-    const bgColor = palette.overlay;
+    const bgColor = palette.bg;
     const colors = getSeriesColors(palette);
 
     const { minSize, maxSize } = cloudOptions;
@@ -3854,10 +3865,10 @@ function renderWordCloudAsync(
       svg
         .append('text')
         .attr('x', width / 2)
-        .attr('y', 28)
+        .attr('y', 30)
         .attr('text-anchor', 'middle')
         .attr('fill', textColor)
-        .attr('font-size', '18px')
+        .attr('font-size', '20px')
         .attr('font-weight', '700')
         .text(title);
     }
@@ -4096,19 +4107,20 @@ export function renderVenn(
   parsed: ParsedD3,
   palette: PaletteColors,
   isDark: boolean,
-  onClickItem?: (lineNumber: number) => void
+  onClickItem?: (lineNumber: number) => void,
+  exportDims?: D3ExportDimensions
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
   const { vennSets, vennOverlaps, vennShowValues, title } = parsed;
   if (vennSets.length < 2) return;
 
-  const width = container.clientWidth;
-  const height = container.clientHeight;
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
 
   const textColor = palette.text;
-  const bgColor = palette.overlay;
+  const bgColor = palette.bg;
   const colors = getSeriesColors(palette);
   const titleHeight = title ? 40 : 0;
 
@@ -4198,10 +4210,10 @@ export function renderVenn(
     svg
       .append('text')
       .attr('x', width / 2)
-      .attr('y', 28)
+      .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', textColor)
-      .attr('font-size', '18px')
+      .attr('font-size', '20px')
       .attr('font-weight', '700')
       .text(title);
   }
@@ -4510,7 +4522,8 @@ export function renderQuadrant(
   parsed: ParsedD3,
   palette: PaletteColors,
   isDark: boolean,
-  onClickItem?: (lineNumber: number) => void
+  onClickItem?: (lineNumber: number) => void,
+  exportDims?: D3ExportDimensions
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -4527,13 +4540,13 @@ export function renderQuadrant(
 
   if (quadrantPoints.length === 0) return;
 
-  const width = container.clientWidth;
-  const height = container.clientHeight;
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
 
   const textColor = palette.text;
   const mutedColor = palette.textMuted;
-  const bgColor = palette.overlay;
+  const bgColor = palette.bg;
   const borderColor = palette.border;
 
   // Default quadrant colors with alpha
@@ -4545,7 +4558,9 @@ export function renderQuadrant(
   ];
 
   // Margins
-  const margin = { top: title ? 60 : 30, right: 30, bottom: 50, left: 60 };
+  const hasXAxis = !!quadrantXAxis;
+  const hasYAxis = !!quadrantYAxis;
+  const margin = { top: title ? 60 : 30, right: 30, bottom: hasXAxis ? 70 : 40, left: hasYAxis ? 80 : 40 };
   const chartWidth = width - margin.left - margin.right;
   const chartHeight = height - margin.top - margin.bottom;
 
@@ -4572,7 +4587,7 @@ export function renderQuadrant(
       .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', textColor)
-      .attr('font-size', '18px')
+      .attr('font-size', '20px')
       .attr('font-weight', '700')
       .style(
         'cursor',
@@ -4597,7 +4612,19 @@ export function renderQuadrant(
     .append('g')
     .attr('transform', `translate(${margin.left}, ${margin.top})`);
 
-  // Get fill color for each quadrant (solid, no transparency)
+  // Mix two hex colors: pct=100 → all `a`, pct=0 → all `b`
+  const mixHex = (a: string, b: string, pct: number): string => {
+    const parse = (h: string) => {
+      const r = h.replace('#', '');
+      const f = r.length === 3 ? r[0]+r[0]+r[1]+r[1]+r[2]+r[2] : r;
+      return [parseInt(f.substring(0,2),16), parseInt(f.substring(2,4),16), parseInt(f.substring(4,6),16)];
+    };
+    const [ar,ag,ab] = parse(a), [br,bg,bb] = parse(b), t = pct/100;
+    const c = (x: number, y: number) => Math.round(x*t + y*(1-t)).toString(16).padStart(2,'0');
+    return `#${c(ar,br)}${c(ag,bg)}${c(ab,bb)}`;
+  };
+
+  // Opaque quadrant fills using the assigned color directly
   const getQuadrantFill = (
     label: QuadrantLabel | null,
     defaultIdx: number
@@ -4678,11 +4705,17 @@ export function renderQuadrant(
     .attr('stroke', borderColor)
     .attr('stroke-width', 0.5);
 
-  // Contrast color for text/points on colored backgrounds
-  const contrastColor = isDark ? '#ffffff' : '#333333';
-  const shadowColor = isDark ? 'rgba(0,0,0,0.3)' : 'rgba(255,255,255,0.5)';
+  // White text for points; quadrant labels use a darkened shade of their fill
+  const contrastColor = '#ffffff';
+  const shadowColor = 'rgba(0,0,0,0.4)';
 
-  // Draw quadrant labels (large, centered, contrasting color for readability)
+  // Darken the quadrant fill to create a watermark-style label color
+  const getQuadrantLabelColor = (d: (typeof quadrantDefs)[number]): string => {
+    const fill = getQuadrantFill(d.label, d.colorIdx);
+    return mixHex('#000000', fill, 40);
+  };
+
+  // Draw quadrant labels (large, centered, darkened shade of fill — recedes behind points)
   const quadrantLabelTexts = chartG
     .selectAll('text.quadrant-label')
     .data(quadrantDefs.filter((d) => d.label !== null))
@@ -4693,10 +4726,9 @@ export function renderQuadrant(
     .attr('y', (d) => d.labelY)
     .attr('text-anchor', 'middle')
     .attr('dominant-baseline', 'central')
-    .attr('fill', contrastColor)
-    .attr('font-size', '16px')
-    .attr('font-weight', '600')
-    .style('text-shadow', `0 1px 2px ${shadowColor}`)
+    .attr('fill', (d) => getQuadrantLabelColor(d))
+    .attr('font-size', '48px')
+    .attr('font-weight', '700')
     .style('cursor', (d) =>
       onClickItem && d.label?.lineNumber ? 'pointer' : 'default'
     )
@@ -4715,46 +4747,36 @@ export function renderQuadrant(
       });
   }
 
-  // X-axis labels
+  // X-axis labels — centered on left/right halves
   if (quadrantXAxis) {
-    // Low label (left)
+    // Low label (centered on left half)
     const xLowLabel = svg
       .append('text')
-      .attr('x', margin.left)
-      .attr('y', height - 15)
-      .attr('text-anchor', 'start')
+      .attr('x', margin.left + chartWidth / 4)
+      .attr('y', height - 20)
+      .attr('text-anchor', 'middle')
       .attr('fill', textColor)
-      .attr('font-size', '12px')
+      .attr('font-size', '18px')
       .style(
         'cursor',
         onClickItem && quadrantXAxisLineNumber ? 'pointer' : 'default'
       )
       .text(quadrantXAxis[0]);
 
-    // High label (right)
+    // High label (centered on right half)
     const xHighLabel = svg
       .append('text')
-      .attr('x', width - margin.right)
-      .attr('y', height - 15)
-      .attr('text-anchor', 'end')
+      .attr('x', margin.left + (chartWidth * 3) / 4)
+      .attr('y', height - 20)
+      .attr('text-anchor', 'middle')
       .attr('fill', textColor)
-      .attr('font-size', '12px')
+      .attr('font-size', '18px')
       .style(
         'cursor',
         onClickItem && quadrantXAxisLineNumber ? 'pointer' : 'default'
       )
       .text(quadrantXAxis[1]);
 
-    // Arrow in the middle
-    svg
-      .append('text')
-      .attr('x', width / 2)
-      .attr('y', height - 15)
-      .attr('text-anchor', 'middle')
-      .attr('fill', mutedColor)
-      .attr('font-size', '12px')
-      .text('→');
-
     if (onClickItem && quadrantXAxisLineNumber) {
       [xLowLabel, xHighLabel].forEach((label) => {
         label
@@ -4769,49 +4791,41 @@ export function renderQuadrant(
     }
   }
 
-  // Y-axis labels
+  // Y-axis labels — centered on top/bottom halves
   if (quadrantYAxis) {
-    // Low label (bottom)
+    const yMidBottom = margin.top + (chartHeight * 3) / 4;
+    const yMidTop = margin.top + chartHeight / 4;
+
+    // Low label (centered on bottom half)
     const yLowLabel = svg
       .append('text')
-      .attr('x', 15)
-      .attr('y', height - margin.bottom)
-      .attr('text-anchor', 'start')
+      .attr('x', 22)
+      .attr('y', yMidBottom)
+      .attr('text-anchor', 'middle')
       .attr('fill', textColor)
-      .attr('font-size', '12px')
-      .attr('transform', `rotate(-90, 15, ${height - margin.bottom})`)
+      .attr('font-size', '18px')
+      .attr('transform', `rotate(-90, 22, ${yMidBottom})`)
       .style(
         'cursor',
         onClickItem && quadrantYAxisLineNumber ? 'pointer' : 'default'
       )
       .text(quadrantYAxis[0]);
 
-    // High label (top)
+    // High label (centered on top half)
     const yHighLabel = svg
       .append('text')
-      .attr('x', 15)
-      .attr('y', margin.top)
-      .attr('text-anchor', 'end')
+      .attr('x', 22)
+      .attr('y', yMidTop)
+      .attr('text-anchor', 'middle')
       .attr('fill', textColor)
-      .attr('font-size', '12px')
-      .attr('transform', `rotate(-90, 15, ${margin.top})`)
+      .attr('font-size', '18px')
+      .attr('transform', `rotate(-90, 22, ${yMidTop})`)
       .style(
         'cursor',
         onClickItem && quadrantYAxisLineNumber ? 'pointer' : 'default'
       )
       .text(quadrantYAxis[1]);
 
-    // Arrow in the middle
-    svg
-      .append('text')
-      .attr('x', 15)
-      .attr('y', height / 2)
-      .attr('text-anchor', 'middle')
-      .attr('fill', mutedColor)
-      .attr('font-size', '12px')
-      .attr('transform', `rotate(-90, 15, ${height / 2})`)
-      .text('→');
-
     if (onClickItem && quadrantYAxisLineNumber) {
       [yLowLabel, yHighLabel].forEach((label) => {
         label
@@ -4866,13 +4880,13 @@ export function renderQuadrant(
 
     const pointG = pointsG.append('g').attr('class', 'point-group');
 
-    // Circle (contrasting fill with colored border for visibility)
+    // Circle with white fill and colored border for visibility on opaque quadrants
     pointG
       .append('circle')
       .attr('cx', cx)
       .attr('cy', cy)
       .attr('r', 6)
-      .attr('fill', contrastColor)
+      .attr('fill', '#ffffff')
       .attr('stroke', pointColor)
       .attr('stroke-width', 2);
 
@@ -4883,7 +4897,8 @@ export function renderQuadrant(
       .attr('y', cy - 10)
       .attr('text-anchor', 'middle')
       .attr('fill', contrastColor)
-      .attr('font-size', '11px')
+      .attr('font-size', '12px')
+      .attr('font-weight', '700')
       .style('text-shadow', `0 1px 2px ${shadowColor}`)
       .text(point.label);
 
@@ -4958,7 +4973,15 @@ export async function renderD3ForExport(
   palette?: PaletteColors
 ): Promise<string> {
   const parsed = parseD3(content, palette);
-  if (parsed.error) return '';
+  // Allow sequence diagrams through even if parseD3 errors —
+  // sequence is parsed by its own dedicated parser (parseSequenceDgmo)
+  // and may not have a "chart:" line (auto-detected from arrow syntax).
+  if (parsed.error && parsed.type !== 'sequence') {
+    // Check if content looks like a sequence diagram (has arrows but no chart: line)
+    const looksLikeSequence = /->|~>|<-/.test(content);
+    if (!looksLikeSequence) return '';
+    parsed.type = 'sequence';
+  }
   if (parsed.type === 'wordcloud' && parsed.words.length === 0) return '';
   if (parsed.type === 'slope' && parsed.data.length === 0) return '';
   if (parsed.type === 'arc' && parsed.links.length === 0) return '';
@@ -4983,33 +5006,39 @@ export async function renderD3ForExport(
   container.style.left = '-9999px';
   document.body.appendChild(container);
 
+  const dims: D3ExportDimensions = { width: EXPORT_WIDTH, height: EXPORT_HEIGHT };
+
   try {
     if (parsed.type === 'sequence') {
       const { parseSequenceDgmo } = await import('./sequence/parser');
       const { renderSequenceDiagram } = await import('./sequence/renderer');
       const seqParsed = parseSequenceDgmo(content);
       if (seqParsed.error || seqParsed.participants.length === 0) return '';
-      renderSequenceDiagram(container, seqParsed, effectivePalette, isDark);
+      renderSequenceDiagram(container, seqParsed, effectivePalette, isDark, undefined, {
+        exportWidth: EXPORT_WIDTH,
+      });
     } else if (parsed.type === 'wordcloud') {
-      await renderWordCloudAsync(container, parsed, effectivePalette, isDark);
+      await renderWordCloudAsync(container, parsed, effectivePalette, isDark, dims);
     } else if (parsed.type === 'arc') {
-      renderArcDiagram(container, parsed, effectivePalette, isDark);
+      renderArcDiagram(container, parsed, effectivePalette, isDark, undefined, dims);
     } else if (parsed.type === 'timeline') {
-      renderTimeline(container, parsed, effectivePalette, isDark);
+      renderTimeline(container, parsed, effectivePalette, isDark, undefined, dims);
     } else if (parsed.type === 'venn') {
-      renderVenn(container, parsed, effectivePalette, isDark);
+      renderVenn(container, parsed, effectivePalette, isDark, undefined, dims);
     } else if (parsed.type === 'quadrant') {
-      renderQuadrant(container, parsed, effectivePalette, isDark);
+      renderQuadrant(container, parsed, effectivePalette, isDark, undefined, dims);
     } else {
-      renderSlopeChart(container, parsed, effectivePalette, isDark);
+      renderSlopeChart(container, parsed, effectivePalette, isDark, undefined, dims);
     }
 
     const svgEl = container.querySelector('svg');
     if (!svgEl) return '';
 
-    // For transparent theme, remove the background
+    // Ensure all chart types have a consistent background
     if (theme === 'transparent') {
       svgEl.style.background = 'none';
+    } else if (!svgEl.style.background) {
+      svgEl.style.background = effectivePalette.bg;
     }
 
     // Add xmlns for standalone SVG