@diagrammo/dgmo 0.2.2 → 0.2.4

package/src/echarts.ts

@@ -391,10 +391,11 @@ export function parseEChart(
 export function buildEChartsOption(
   parsed: ParsedEChart,
   palette: PaletteColors,
-  _isDark: boolean
+  isDark: boolean
 ): EChartsOption {
   const textColor = palette.text;
   const axisLineColor = palette.border;
+  const gridOpacity = isDark ? 0.7 : 0.4;
   const colors = getSeriesColors(palette);
 
   if (parsed.error) {
@@ -407,9 +408,10 @@ export function buildEChartsOption(
     ? {
         text: parsed.title,
         left: 'center' as const,
+        top: 8,
         textStyle: {
           color: textColor,
-          fontSize: 18,
+          fontSize: 20,
           fontWeight: 'bold' as const,
           fontFamily: FONT_FAMILY,
         },
@@ -452,6 +454,7 @@ export function buildEChartsOption(
       palette,
       textColor,
       axisLineColor,
+      gridOpacity,
       colors,
       titleConfig,
       tooltipTheme
@@ -465,6 +468,7 @@ export function buildEChartsOption(
       palette,
       textColor,
       axisLineColor,
+      gridOpacity,
       colors,
       titleConfig,
       tooltipTheme
@@ -704,6 +708,7 @@ function buildFunctionOption(
   palette: PaletteColors,
   textColor: string,
   axisLineColor: string,
+  gridOpacity: number,
   colors: string[],
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
@@ -761,7 +766,7 @@ function buildFunctionOption(
       },
     },
     grid: {
-      left: '3%',
+      left: '4%',
       right: '4%',
       bottom: '15%',
       top: parsed.title ? '15%' : '5%',
@@ -776,10 +781,12 @@ function buildFunctionOption(
       },
       axisLabel: {
         color: textColor,
+        fontSize: 16,
       },
       splitLine: {
         lineStyle: {
-          color: palette.overlay,
+          color: palette.border,
+          opacity: gridOpacity,
         },
       },
     },
@@ -790,10 +797,12 @@ function buildFunctionOption(
       },
       axisLabel: {
         color: textColor,
+        fontSize: 16,
       },
       splitLine: {
         lineStyle: {
-          color: palette.overlay,
+          color: palette.border,
+          opacity: gridOpacity,
         },
       },
     },
@@ -812,6 +821,7 @@ function buildScatterOption(
   palette: PaletteColors,
   textColor: string,
   axisLineColor: string,
+  gridOpacity: number,
   colors: string[],
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
@@ -914,6 +924,16 @@ function buildScatterOption(
     },
   };
 
+  // Auto-fit axes to data range with ~10% padding
+  const xValues = points.map((p) => p.x);
+  const yValues = points.map((p) => p.y);
+  const xMin = Math.min(...xValues);
+  const xMax = Math.max(...xValues);
+  const yMin = Math.min(...yValues);
+  const yMax = Math.max(...yValues);
+  const xPad = (xMax - xMin) * 0.1 || 1;
+  const yPad = (yMax - yMin) * 0.1 || 1;
+
   return {
     backgroundColor: 'transparent',
     animation: false,
@@ -927,9 +947,9 @@ function buildScatterOption(
       },
     }),
     grid: {
-      left: '3%',
+      left: parsed.ylabel ? '5%' : '3%',
       right: '4%',
-      bottom: hasCategories ? '15%' : '3%',
+      bottom: hasCategories ? '15%' : parsed.xlabel ? '10%' : '3%',
       top: parsed.title ? '15%' : '5%',
       containLabel: true,
     },
@@ -937,20 +957,24 @@ function buildScatterOption(
       type: 'value',
       name: parsed.xlabel,
       nameLocation: 'middle',
-      nameGap: 30,
+      nameGap: 40,
       nameTextStyle: {
         color: textColor,
-        fontSize: 12,
+        fontSize: 18,
       },
+      min: Math.floor(xMin - xPad),
+      max: Math.ceil(xMax + xPad),
       axisLine: {
         lineStyle: { color: axisLineColor },
       },
       axisLabel: {
         color: textColor,
+        fontSize: 16,
       },
       splitLine: {
         lineStyle: {
-          color: palette.overlay,
+          color: palette.border,
+          opacity: gridOpacity,
         },
       },
     },
@@ -958,20 +982,24 @@ function buildScatterOption(
       type: 'value',
       name: parsed.ylabel,
       nameLocation: 'middle',
-      nameGap: 40,
+      nameGap: 50,
       nameTextStyle: {
         color: textColor,
-        fontSize: 12,
+        fontSize: 18,
       },
+      min: Math.floor(yMin - yPad),
+      max: Math.ceil(yMax + yPad),
       axisLine: {
         lineStyle: { color: axisLineColor },
       },
       axisLabel: {
         color: textColor,
+        fontSize: 16,
       },
       splitLine: {
         lineStyle: {
-          color: palette.overlay,
+          color: palette.border,
+          opacity: gridOpacity,
         },
       },
     },
@@ -1039,6 +1067,7 @@ function buildHeatmapOption(
       },
       axisLabel: {
         color: textColor,
+        fontSize: 16,
       },
     },
     yAxis: {
@@ -1052,6 +1081,7 @@ function buildHeatmapOption(
       },
       axisLabel: {
         color: textColor,
+        fontSize: 16,
       },
     },
     visualMap: {
@@ -1063,7 +1093,6 @@ function buildHeatmapOption(
       top: 'center',
       inRange: {
         color: [
-          palette.bg,
           palette.primary,
           palette.colors.cyan,
           palette.colors.yellow,
@@ -1080,7 +1109,9 @@ function buildHeatmapOption(
         data,
         label: {
           show: true,
-          color: textColor,
+          color: '#ffffff',
+          fontSize: 14,
+          fontWeight: 'bold' as const,
         },
         emphasis: {
           itemStyle: {
@@ -1236,6 +1267,7 @@ function makeGridAxis(
   textColor: string,
   axisLineColor: string,
   splitLineColor: string,
+  gridOpacity: number,
   label?: string,
   data?: string[]
 ): Record<string, unknown> {
@@ -1243,13 +1275,13 @@ function makeGridAxis(
     type,
     ...(data && { data }),
     axisLine: { lineStyle: { color: axisLineColor } },
-    axisLabel: { color: textColor, fontFamily: FONT_FAMILY },
-    splitLine: { lineStyle: { color: splitLineColor } },
+    axisLabel: { color: textColor, fontSize: 16, fontFamily: FONT_FAMILY },
+    splitLine: { lineStyle: { color: splitLineColor, opacity: gridOpacity } },
     ...(label && {
       name: label,
       nameLocation: 'middle',
-      nameGap: 30,
-      nameTextStyle: { color: textColor, fontSize: 12, fontFamily: FONT_FAMILY },
+      nameGap: 40,
+      nameTextStyle: { color: textColor, fontSize: 18, fontFamily: FONT_FAMILY },
     }),
   };
 }
@@ -1261,22 +1293,24 @@ function makeGridAxis(
 export function buildEChartsOptionFromChart(
   parsed: ParsedChart,
   palette: PaletteColors,
-  _isDark: boolean
+  isDark: boolean
 ): EChartsOption {
   if (parsed.error) return {};
 
   const textColor = palette.text;
   const axisLineColor = palette.border;
-  const splitLineColor = palette.overlay;
+  const splitLineColor = palette.border;
+  const gridOpacity = isDark ? 0.7 : 0.4;
   const colors = getSeriesColors(palette);
 
   const titleConfig = parsed.title
     ? {
         text: parsed.title,
         left: 'center' as const,
+        top: 8,
         textStyle: {
           color: textColor,
-          fontSize: 18,
+          fontSize: 20,
           fontWeight: 'bold' as const,
           fontFamily: FONT_FAMILY,
         },
@@ -1291,21 +1325,21 @@ export function buildEChartsOptionFromChart(
 
   switch (parsed.type) {
     case 'bar':
-      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme);
+      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme);
     case 'bar-stacked':
-      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme);
+      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme);
     case 'line':
       return parsed.seriesNames
-        ? buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme)
-        : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, titleConfig, tooltipTheme);
+        ? buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme)
+        : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme);
     case 'area':
-      return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, titleConfig, tooltipTheme);
+      return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme);
     case 'pie':
       return buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, false);
     case 'doughnut':
       return buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, true);
     case 'radar':
-      return buildRadarOption(parsed, palette, textColor, colors, titleConfig, tooltipTheme);
+      return buildRadarOption(parsed, palette, textColor, gridOpacity, colors, titleConfig, tooltipTheme);
     case 'polar-area':
       return buildPolarAreaOption(parsed, textColor, colors, titleConfig, tooltipTheme);
   }
@@ -1318,6 +1352,7 @@ function buildBarOption(
   textColor: string,
   axisLineColor: string,
   splitLineColor: string,
+  gridOpacity: number,
   colors: string[],
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
@@ -1330,8 +1365,10 @@ function buildBarOption(
     itemStyle: { color: d.color ?? colors[i % colors.length] },
   }));
 
-  const categoryAxis = makeGridAxis('category', textColor, axisLineColor, splitLineColor, isHorizontal ? yLabel : xLabel, labels);
-  const valueAxis = makeGridAxis('value', textColor, axisLineColor, splitLineColor, isHorizontal ? xLabel : yLabel);
+  const categoryAxis = makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? yLabel : xLabel, labels);
+  const valueAxis = makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel);
+
+  // xAxis is always the bottom axis, yAxis is always the left axis in ECharts
 
   return {
     backgroundColor: 'transparent',
@@ -1343,9 +1380,9 @@ function buildBarOption(
       axisPointer: { type: 'shadow' },
     },
     grid: {
-      left: '3%',
+      left: yLabel ? '5%' : '3%',
       right: '4%',
-      bottom: '3%',
+      bottom: xLabel ? '10%' : '3%',
       top: parsed.title ? '15%' : '5%',
       containLabel: true,
     },
@@ -1368,6 +1405,7 @@ function buildLineOption(
   textColor: string,
   axisLineColor: string,
   splitLineColor: string,
+  gridOpacity: number,
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
 ): EChartsOption {
@@ -1386,14 +1424,14 @@ function buildLineOption(
       axisPointer: { type: 'line' },
     },
     grid: {
-      left: '3%',
+      left: yLabel ? '5%' : '3%',
       right: '4%',
-      bottom: '3%',
+      bottom: xLabel ? '10%' : '3%',
       top: parsed.title ? '15%' : '5%',
       containLabel: true,
     },
-    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, xLabel, labels),
-    yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, yLabel),
+    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
         type: 'line',
@@ -1414,6 +1452,7 @@ function buildMultiLineOption(
   textColor: string,
   axisLineColor: string,
   splitLineColor: string,
+  gridOpacity: number,
   colors: string[],
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
@@ -1453,14 +1492,14 @@ function buildMultiLineOption(
       textStyle: { color: textColor },
     },
     grid: {
-      left: '3%',
+      left: yLabel ? '5%' : '3%',
       right: '4%',
       bottom: '15%',
       top: parsed.title ? '15%' : '5%',
       containLabel: true,
     },
-    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, xLabel, labels),
-    yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, yLabel),
+    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series,
   };
 }
@@ -1473,6 +1512,7 @@ function buildAreaOption(
   textColor: string,
   axisLineColor: string,
   splitLineColor: string,
+  gridOpacity: number,
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
 ): EChartsOption {
@@ -1491,14 +1531,14 @@ function buildAreaOption(
       axisPointer: { type: 'line' },
     },
     grid: {
-      left: '3%',
+      left: yLabel ? '5%' : '3%',
       right: '4%',
-      bottom: '3%',
+      bottom: xLabel ? '10%' : '3%',
       top: parsed.title ? '15%' : '5%',
       containLabel: true,
     },
-    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, xLabel, labels),
-    yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, yLabel),
+    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
         type: 'line',
@@ -1544,7 +1584,7 @@ function buildPieOption(
         data,
         label: {
           position: 'outside',
-          formatter: '{b}',
+          formatter: '{b} — {c} ({d}%)',
           color: textColor,
           fontFamily: FONT_FAMILY,
         },
@@ -1560,6 +1600,7 @@ function buildRadarOption(
   parsed: ParsedChart,
   palette: PaletteColors,
   textColor: string,
+  gridOpacity: number,
   colors: string[],
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
@@ -1567,7 +1608,6 @@ function buildRadarOption(
   const radarColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const values = parsed.data.map((d) => d.value);
   const maxValue = Math.max(...values) * 1.15;
-  const gridOpacity = 0.6;
 
   const indicator = parsed.data.map((d) => ({
     name: d.label,
@@ -1587,6 +1627,7 @@ function buildRadarOption(
       axisName: {
         color: textColor,
         fontFamily: FONT_FAMILY,
+        fontSize: 16,
       },
       splitLine: {
         lineStyle: { color: palette.border, opacity: gridOpacity },
@@ -1653,7 +1694,7 @@ function buildPolarAreaOption(
         data,
         label: {
           position: 'outside',
-          formatter: '{b}',
+          formatter: '{b} — {c} ({d}%)',
           color: textColor,
           fontFamily: FONT_FAMILY,
         },
@@ -1670,6 +1711,7 @@ function buildBarStackedOption(
   textColor: string,
   axisLineColor: string,
   splitLineColor: string,
+  gridOpacity: number,
   colors: string[],
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
@@ -1690,11 +1732,20 @@ function buildBarStackedOption(
       stack: 'total',
       data,
       itemStyle: { color },
+      label: {
+        show: true,
+        position: 'inside' as const,
+        formatter: '{c}',
+        color: '#ffffff',
+        fontSize: 14,
+        fontWeight: 'bold' as const,
+        fontFamily: FONT_FAMILY,
+      },
     };
   });
 
-  const categoryAxis = makeGridAxis('category', textColor, axisLineColor, splitLineColor, isHorizontal ? yLabel : xLabel, labels);
-  const valueAxis = makeGridAxis('value', textColor, axisLineColor, splitLineColor, isHorizontal ? xLabel : yLabel);
+  const categoryAxis = makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? yLabel : xLabel, labels);
+  const valueAxis = makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel);
 
   return {
     backgroundColor: 'transparent',
@@ -1711,7 +1762,7 @@ function buildBarStackedOption(
       textStyle: { color: textColor },
     },
     grid: {
-      left: '3%',
+      left: yLabel ? '5%' : '3%',
       right: '4%',
       bottom: '15%',
       top: parsed.title ? '15%' : '5%',
@@ -1787,10 +1838,11 @@ export async function renderEChartsForExport(
     if (!svgString) return '';
 
     // The SSR output already includes xmlns, width, height, and viewBox.
-    // Inject font-family on the root <svg> element for consistent rendering.
+    // Inject font-family and background on the root <svg> element.
+    const bgStyle = theme !== 'transparent' ? `background: ${effectivePalette.bg}; ` : '';
     return svgString.replace(
       /^<svg /,
-      `<svg style="font-family: ${FONT_FAMILY}" `
+      `<svg style="${bgStyle}font-family: ${FONT_FAMILY}" `
     );
   } finally {
     chart.dispose();

package/src/index.ts

@@ -31,7 +31,7 @@ export {
   computeTimeTicks,
   formatDateLabel,
 } from './d3';
-export type { ParsedD3, D3ChartType, ArcLink, ArcNodeGroup } from './d3';
+export type { ParsedD3, D3ChartType, D3ExportDimensions, ArcLink, ArcNodeGroup } from './d3';
 
 export {
   parseSequenceDgmo,

package/src/palettes/bold.ts

@@ -34,7 +34,7 @@ export const boldPalette: PaletteConfig = {
   dark: {
     bg: '#000000',
     surface: '#111111',
-    overlay: '#000000',
+    overlay: '#1a1a1a',
     border: '#333333',
     text: '#ffffff',
     textMuted: '#aaaaaa',

package/src/sequence/parser.ts

@@ -140,7 +140,8 @@ const UML_RETURN_PATTERN = /^(\w+\([^)]*\))\s*:\s*(.+)$/;
 
 /**
  * Extract return label from a message label string.
- * Priority: `<-` syntax first, then UML `method(): return` syntax.
+ * Priority: `<-` syntax first, then UML `method(): return` syntax,
+ * then shorthand ` : ` separator (splits on last occurrence).
  */
 function parseReturnLabel(rawLabel: string): {
   label: string;
@@ -160,6 +161,16 @@ function parseReturnLabel(rawLabel: string): {
     return { label: umlReturn[1].trim(), returnLabel: umlReturn[2].trim() };
   }
 
+  // Shorthand request : response syntax (split on last " : ")
+  const lastSep = rawLabel.lastIndexOf(' : ');
+  if (lastSep > 0) {
+    const reqPart = rawLabel.substring(0, lastSep).trim();
+    const resPart = rawLabel.substring(lastSep + 3).trim();
+    if (reqPart && resPart) {
+      return { label: reqPart, returnLabel: resPart };
+    }
+  }
+
   return { label: rawLabel };
 }
 

package/src/sequence/renderer.ts

@@ -416,6 +416,7 @@ export interface SectionMessageGroup {
 
 export interface SequenceRenderOptions {
   collapsedSections?: Set<number>; // keyed by section lineNumber
+  exportWidth?: number; // Explicit width for CLI/export rendering (bypasses getBoundingClientRect)
 }
 
 /**
@@ -898,7 +899,11 @@ export function renderSequenceDiagram(
   {
     let fi = 0;
     for (let oi = 0; oi < allRenderSteps.length; oi++) {
-      if (!hiddenMsgIndices.has(allRenderSteps[oi].messageIndex)) {
+      const step = allRenderSteps[oi];
+      if (
+        !hiddenMsgIndices.has(step.messageIndex) &&
+        (step.type === 'call' || step.label)
+      ) {
         originalToFiltered.set(oi, fi);
         fi++;
       }
@@ -1016,7 +1021,7 @@ export function renderSequenceDiagram(
     Math.max(lifelineLength, 40) +
     40;
 
-  const { width: containerWidth } = container.getBoundingClientRect();
+  const containerWidth = options?.exportWidth ?? container.getBoundingClientRect().width;
   const svgWidth = Math.max(totalWidth, containerWidth);
 
   // Center the diagram horizontally
@@ -1103,10 +1108,10 @@ export function renderSequenceDiagram(
     svg
       .append('text')
       .attr('x', svgWidth / 2)
-      .attr('y', TOP_MARGIN + TITLE_HEIGHT * 0.7)
+      .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
-      .attr('font-size', 16)
+      .attr('font-size', 20)
       .attr('font-weight', 'bold')
       .text(title);
   }