@diagrammo/dgmo 0.1.7 → 0.2.0

package/dist/cli.cjs

@@ -5066,6 +5066,1491 @@ async function renderD3ForExport(content, theme, palette) {
   }
 }
 
+// src/echarts.ts
+var echarts = __toESM(require("echarts"), 1);
+init_fonts();
+init_colors();
+init_palettes();
+
+// src/chart.ts
+init_colors();
+var VALID_TYPES = /* @__PURE__ */ new Set([
+  "bar",
+  "line",
+  "pie",
+  "doughnut",
+  "area",
+  "polar-area",
+  "radar",
+  "bar-stacked"
+]);
+var TYPE_ALIASES = {
+  "multi-line": "line"
+};
+function parseChart(content, palette) {
+  const lines = content.split("\n");
+  const result = {
+    type: "bar",
+    data: []
+  };
+  for (let i = 0; i < lines.length; i++) {
+    const trimmed = lines[i].trim();
+    const lineNumber = i + 1;
+    if (!trimmed) continue;
+    if (/^#{2,}\s+/.test(trimmed)) continue;
+    if (trimmed.startsWith("#") || trimmed.startsWith("//")) continue;
+    const colonIndex = trimmed.indexOf(":");
+    if (colonIndex === -1) continue;
+    const key = trimmed.substring(0, colonIndex).trim().toLowerCase();
+    const value = trimmed.substring(colonIndex + 1).trim();
+    if (key === "chart") {
+      const raw = value.toLowerCase();
+      const chartType = TYPE_ALIASES[raw] ?? raw;
+      if (VALID_TYPES.has(chartType)) {
+        result.type = chartType;
+      } else {
+        result.error = `Unsupported chart type: ${value}. Supported types: ${[...VALID_TYPES].join(", ")}.`;
+        return result;
+      }
+      continue;
+    }
+    if (key === "title") {
+      result.title = value;
+      continue;
+    }
+    if (key === "xlabel") {
+      result.xlabel = value;
+      continue;
+    }
+    if (key === "ylabel") {
+      result.ylabel = value;
+      continue;
+    }
+    if (key === "label") {
+      result.label = value;
+      continue;
+    }
+    if (key === "orientation") {
+      const v = value.toLowerCase();
+      if (v === "horizontal" || v === "vertical") {
+        result.orientation = v;
+      }
+      continue;
+    }
+    if (key === "color") {
+      result.color = resolveColor(value.trim(), palette);
+      continue;
+    }
+    if (key === "series") {
+      result.series = value;
+      const rawNames = value.split(",").map((s) => s.trim()).filter(Boolean);
+      const names = [];
+      const nameColors = [];
+      for (const raw of rawNames) {
+        const colorMatch = raw.match(/\(([^)]+)\)\s*$/);
+        if (colorMatch) {
+          const resolved = resolveColor(colorMatch[1].trim(), palette);
+          nameColors.push(resolved);
+          names.push(raw.substring(0, colorMatch.index).trim());
+        } else {
+          nameColors.push(void 0);
+          names.push(raw);
+        }
+      }
+      if (names.length === 1) {
+        result.series = names[0];
+      }
+      if (names.length > 1) {
+        result.seriesNames = names;
+      }
+      if (nameColors.some(Boolean)) result.seriesNameColors = nameColors;
+      continue;
+    }
+    const parts = value.split(",").map((s) => s.trim());
+    const numValue = parseFloat(parts[0]);
+    if (!isNaN(numValue)) {
+      let rawLabel = trimmed.substring(0, colonIndex).trim();
+      let pointColor;
+      const colorMatch = rawLabel.match(/\(([^)]+)\)\s*$/);
+      if (colorMatch) {
+        const resolved = resolveColor(colorMatch[1].trim(), palette);
+        pointColor = resolved;
+        rawLabel = rawLabel.substring(0, colorMatch.index).trim();
+      }
+      const extra = parts.slice(1).map((s) => parseFloat(s)).filter((n) => !isNaN(n));
+      result.data.push({
+        label: rawLabel,
+        value: numValue,
+        ...extra.length > 0 && { extraValues: extra },
+        ...pointColor && { color: pointColor },
+        lineNumber
+      });
+    }
+  }
+  if (!result.error && result.data.length === 0) {
+    result.error = "No data points found. Add data in format: Label: 123";
+  }
+  if (!result.error && result.type === "bar-stacked" && !result.seriesNames) {
+    result.error = `Chart type "bar-stacked" requires multiple series names. Use: series: Name1, Name2, Name3`;
+  }
+  if (!result.error && result.seriesNames) {
+    const expectedCount = result.seriesNames.length;
+    for (const dp of result.data) {
+      const actualCount = 1 + (dp.extraValues?.length ?? 0);
+      if (actualCount !== expectedCount) {
+        result.error = `Data point "${dp.label}" has ${actualCount} value(s), but ${expectedCount} series defined. Each row must have ${expectedCount} comma-separated values.`;
+        break;
+      }
+    }
+  }
+  return result;
+}
+
+// src/echarts.ts
+function parseEChart(content, palette) {
+  const lines = content.split("\n");
+  const result = {
+    type: "scatter",
+    data: []
+  };
+  let currentCategory = "Default";
+  for (let i = 0; i < lines.length; i++) {
+    const trimmed = lines[i].trim();
+    const lineNumber = i + 1;
+    if (!trimmed) continue;
+    const mdCategoryMatch = trimmed.match(/^#{2,}\s+(.+)$/);
+    if (mdCategoryMatch) {
+      let catName = mdCategoryMatch[1].trim();
+      const catColorMatch = catName.match(/\(([^)]+)\)\s*$/);
+      if (catColorMatch) {
+        const resolved = resolveColor(catColorMatch[1].trim(), palette);
+        if (!result.categoryColors) result.categoryColors = {};
+        catName = catName.substring(0, catColorMatch.index).trim();
+        result.categoryColors[catName] = resolved;
+      }
+      currentCategory = catName;
+      continue;
+    }
+    if (trimmed.startsWith("#") || trimmed.startsWith("//")) continue;
+    const categoryMatch = trimmed.match(/^\[(.+)\]$/);
+    if (categoryMatch) {
+      currentCategory = categoryMatch[1].trim();
+      continue;
+    }
+    const colonIndex = trimmed.indexOf(":");
+    if (colonIndex === -1) continue;
+    const key = trimmed.substring(0, colonIndex).trim().toLowerCase();
+    const value = trimmed.substring(colonIndex + 1).trim();
+    if (key === "chart") {
+      const chartType = value.toLowerCase();
+      if (chartType === "sankey" || chartType === "chord" || chartType === "function" || chartType === "scatter" || chartType === "heatmap" || chartType === "funnel") {
+        result.type = chartType;
+      } else {
+        result.error = `Unsupported chart type: ${value}. Supported types: scatter, sankey, chord, function, heatmap, funnel.`;
+        return result;
+      }
+      continue;
+    }
+    if (key === "title") {
+      result.title = value;
+      continue;
+    }
+    if (key === "series") {
+      result.series = value;
+      const rawNames = value.split(",").map((s) => s.trim()).filter(Boolean);
+      const names = [];
+      const nameColors = [];
+      for (const raw of rawNames) {
+        const colorMatch = raw.match(/\(([^)]+)\)\s*$/);
+        if (colorMatch) {
+          nameColors.push(resolveColor(colorMatch[1].trim(), palette));
+          names.push(raw.substring(0, colorMatch.index).trim());
+        } else {
+          nameColors.push(void 0);
+          names.push(raw);
+        }
+      }
+      if (names.length === 1) {
+        result.series = names[0];
+      }
+      if (nameColors.some(Boolean)) result.seriesNameColors = nameColors;
+      continue;
+    }
+    if (key === "xlabel") {
+      result.xlabel = value;
+      continue;
+    }
+    if (key === "ylabel") {
+      result.ylabel = value;
+      continue;
+    }
+    if (key === "sizelabel") {
+      result.sizelabel = value;
+      continue;
+    }
+    if (key === "labels") {
+      result.showLabels = value.toLowerCase() === "on" || value.toLowerCase() === "true";
+      continue;
+    }
+    if (key === "columns") {
+      result.columns = value.split(",").map((s) => s.trim());
+      continue;
+    }
+    if (key === "rows") {
+      result.rows = value.split(",").map((s) => s.trim());
+      continue;
+    }
+    if (key === "x") {
+      const rangeMatch = value.match(/^(-?[\d.]+)\s+to\s+(-?[\d.]+)$/);
+      if (rangeMatch) {
+        result.xRange = {
+          min: parseFloat(rangeMatch[1]),
+          max: parseFloat(rangeMatch[2])
+        };
+      }
+      continue;
+    }
+    const arrowMatch = trimmed.match(/^(.+?)\s*->\s*(.+?):\s*(\d+(?:\.\d+)?)$/);
+    if (arrowMatch) {
+      const [, source, target, val] = arrowMatch;
+      if (!result.links) result.links = [];
+      result.links.push({
+        source: source.trim(),
+        target: target.trim(),
+        value: parseFloat(val),
+        lineNumber
+      });
+      continue;
+    }
+    if (result.type === "function") {
+      let fnName = trimmed.substring(0, colonIndex).trim();
+      let fnColor;
+      const colorMatch = fnName.match(/\(([^)]+)\)\s*$/);
+      if (colorMatch) {
+        fnColor = resolveColor(colorMatch[1].trim(), palette);
+        fnName = fnName.substring(0, colorMatch.index).trim();
+      }
+      if (!result.functions) result.functions = [];
+      result.functions.push({
+        name: fnName,
+        expression: value,
+        ...fnColor && { color: fnColor },
+        lineNumber
+      });
+      continue;
+    }
+    if (result.type === "scatter") {
+      const scatterMatch = value.match(
+        /^(-?[\d.]+)\s*,\s*(-?[\d.]+)(?:\s*,\s*(-?[\d.]+))?$/
+      );
+      if (scatterMatch) {
+        let scatterName = trimmed.substring(0, colonIndex).trim();
+        let scatterColor;
+        const colorMatch = scatterName.match(/\(([^)]+)\)\s*$/);
+        if (colorMatch) {
+          scatterColor = resolveColor(colorMatch[1].trim(), palette);
+          scatterName = scatterName.substring(0, colorMatch.index).trim();
+        }
+        if (!result.scatterPoints) result.scatterPoints = [];
+        result.scatterPoints.push({
+          name: scatterName,
+          x: parseFloat(scatterMatch[1]),
+          y: parseFloat(scatterMatch[2]),
+          size: scatterMatch[3] ? parseFloat(scatterMatch[3]) : void 0,
+          ...scatterColor && { color: scatterColor },
+          ...currentCategory !== "Default" && { category: currentCategory },
+          lineNumber
+        });
+      }
+      continue;
+    }
+    if (result.type === "heatmap") {
+      const values = value.split(",").map((v) => parseFloat(v.trim()));
+      if (values.length > 0 && values.every((v) => !isNaN(v))) {
+        const originalKey = trimmed.substring(0, colonIndex).trim();
+        if (!result.heatmapRows) result.heatmapRows = [];
+        result.heatmapRows.push({ label: originalKey, values, lineNumber });
+      }
+      continue;
+    }
+    const numValue = parseFloat(value);
+    if (!isNaN(numValue)) {
+      let rawLabel = trimmed.substring(0, colonIndex).trim();
+      let pointColor;
+      const colorMatch = rawLabel.match(/\(([^)]+)\)\s*$/);
+      if (colorMatch) {
+        pointColor = resolveColor(colorMatch[1].trim(), palette);
+        rawLabel = rawLabel.substring(0, colorMatch.index).trim();
+      }
+      result.data.push({
+        label: rawLabel,
+        value: numValue,
+        ...pointColor && { color: pointColor },
+        lineNumber
+      });
+    }
+  }
+  if (!result.error) {
+    if (result.type === "sankey") {
+      if (!result.links || result.links.length === 0) {
+        result.error = "No links found. Add links in format: Source -> Target: 123";
+      }
+    } else if (result.type === "chord") {
+      if (!result.links || result.links.length === 0) {
+        result.error = "No links found. Add links in format: Source -> Target: 123";
+      }
+    } else if (result.type === "function") {
+      if (!result.functions || result.functions.length === 0) {
+        result.error = "No functions found. Add functions in format: Name: expression";
+      }
+      if (!result.xRange) {
+        result.xRange = { min: -10, max: 10 };
+      }
+    } else if (result.type === "scatter") {
+      if (!result.scatterPoints || result.scatterPoints.length === 0) {
+        result.error = "No scatter points found. Add points in format: Name: x, y or Name: x, y, size";
+      }
+    } else if (result.type === "heatmap") {
+      if (!result.heatmapRows || result.heatmapRows.length === 0) {
+        result.error = "No heatmap data found. Add data in format: RowLabel: val1, val2, val3";
+      }
+      if (!result.columns || result.columns.length === 0) {
+        result.error = "No columns defined. Add columns in format: columns: Col1, Col2, Col3";
+      }
+    } else if (result.type === "funnel") {
+      if (result.data.length === 0) {
+        result.error = "No data found. Add data in format: Label: value";
+      }
+    }
+  }
+  return result;
+}
+function buildEChartsOption(parsed, palette, _isDark) {
+  const textColor = palette.text;
+  const axisLineColor = palette.border;
+  const colors = getSeriesColors(palette);
+  if (parsed.error) {
+    return {};
+  }
+  const titleConfig = parsed.title ? {
+    text: parsed.title,
+    left: "center",
+    textStyle: {
+      color: textColor,
+      fontSize: 18,
+      fontWeight: "bold",
+      fontFamily: FONT_FAMILY
+    }
+  } : void 0;
+  const tooltipTheme = {
+    backgroundColor: palette.surface,
+    borderColor: palette.border,
+    textStyle: { color: palette.text }
+  };
+  if (parsed.type === "sankey") {
+    return buildSankeyOption(
+      parsed,
+      textColor,
+      colors,
+      titleConfig,
+      tooltipTheme
+    );
+  }
+  if (parsed.type === "chord") {
+    return buildChordOption(
+      parsed,
+      textColor,
+      colors,
+      titleConfig,
+      tooltipTheme
+    );
+  }
+  if (parsed.type === "function") {
+    return buildFunctionOption(
+      parsed,
+      palette,
+      textColor,
+      axisLineColor,
+      colors,
+      titleConfig,
+      tooltipTheme
+    );
+  }
+  if (parsed.type === "scatter") {
+    return buildScatterOption(
+      parsed,
+      palette,
+      textColor,
+      axisLineColor,
+      colors,
+      titleConfig,
+      tooltipTheme
+    );
+  }
+  if (parsed.type === "funnel") {
+    return buildFunnelOption(
+      parsed,
+      textColor,
+      colors,
+      titleConfig,
+      tooltipTheme
+    );
+  }
+  return buildHeatmapOption(
+    parsed,
+    palette,
+    textColor,
+    axisLineColor,
+    titleConfig,
+    tooltipTheme
+  );
+}
+function buildSankeyOption(parsed, textColor, colors, titleConfig, tooltipTheme) {
+  const nodeSet = /* @__PURE__ */ new Set();
+  if (parsed.links) {
+    for (const link of parsed.links) {
+      nodeSet.add(link.source);
+      nodeSet.add(link.target);
+    }
+  }
+  const nodes = Array.from(nodeSet).map((name, index) => ({
+    name,
+    itemStyle: {
+      color: colors[index % colors.length]
+    }
+  }));
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      show: false,
+      ...tooltipTheme
+    },
+    series: [
+      {
+        type: "sankey",
+        emphasis: {
+          focus: "adjacency"
+        },
+        nodeAlign: "left",
+        nodeGap: 12,
+        nodeWidth: 20,
+        data: nodes,
+        links: parsed.links ?? [],
+        lineStyle: {
+          color: "gradient",
+          curveness: 0.5
+        },
+        label: {
+          color: textColor,
+          fontSize: 12
+        }
+      }
+    ]
+  };
+}
+function buildChordOption(parsed, textColor, colors, titleConfig, tooltipTheme) {
+  const nodeSet = /* @__PURE__ */ new Set();
+  if (parsed.links) {
+    for (const link of parsed.links) {
+      nodeSet.add(link.source);
+      nodeSet.add(link.target);
+    }
+  }
+  const nodeNames = Array.from(nodeSet);
+  const nodeCount = nodeNames.length;
+  const matrix = Array(nodeCount).fill(null).map(() => Array(nodeCount).fill(0));
+  if (parsed.links) {
+    for (const link of parsed.links) {
+      const sourceIndex = nodeNames.indexOf(link.source);
+      const targetIndex = nodeNames.indexOf(link.target);
+      if (sourceIndex !== -1 && targetIndex !== -1) {
+        matrix[sourceIndex][targetIndex] = link.value;
+      }
+    }
+  }
+  const categories = nodeNames.map((name, index) => ({
+    name,
+    itemStyle: {
+      color: colors[index % colors.length]
+    }
+  }));
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "item",
+      ...tooltipTheme,
+      formatter: (params) => {
+        const p = params;
+        if (p.data && p.data.source && p.data.target) {
+          return `${p.data.source} \u2192 ${p.data.target}: ${p.data.value}`;
+        }
+        return "";
+      }
+    },
+    legend: {
+      data: nodeNames,
+      bottom: 10,
+      textStyle: {
+        color: textColor
+      }
+    },
+    series: [
+      {
+        type: "graph",
+        layout: "circular",
+        circular: {
+          rotateLabel: true
+        },
+        center: ["50%", "55%"],
+        width: "60%",
+        height: "60%",
+        data: categories.map((cat) => ({
+          name: cat.name,
+          symbolSize: 20,
+          itemStyle: cat.itemStyle,
+          label: {
+            show: true,
+            color: textColor
+          }
+        })),
+        links: (parsed.links ?? []).map((link) => ({
+          source: link.source,
+          target: link.target,
+          value: link.value,
+          lineStyle: {
+            width: Math.max(1, Math.min(link.value / 20, 10)),
+            color: colors[nodeNames.indexOf(link.source) % colors.length],
+            curveness: 0.3,
+            opacity: 0.6
+          }
+        })),
+        roam: true,
+        label: {
+          position: "right",
+          formatter: "{b}"
+        },
+        emphasis: {
+          focus: "adjacency",
+          lineStyle: {
+            width: 5,
+            opacity: 1
+          }
+        }
+      }
+    ]
+  };
+}
+function evaluateExpression(expr, x) {
+  try {
+    const processed = expr.replace(/\bpi\b/gi, String(Math.PI)).replace(/\be\b/g, String(Math.E)).replace(/\bsin\s*\(/gi, "Math.sin(").replace(/\bcos\s*\(/gi, "Math.cos(").replace(/\btan\s*\(/gi, "Math.tan(").replace(/\bln\s*\(/gi, "Math.log(").replace(/\blog\s*\(/gi, "Math.log10(").replace(/\bexp\s*\(/gi, "Math.exp(").replace(/\bsqrt\s*\(/gi, "Math.sqrt(").replace(/\babs\s*\(/gi, "Math.abs(").replace(/\bx\b/gi, `(${x})`).replace(/\^/g, "**");
+    const result = new Function(`return ${processed}`)();
+    return typeof result === "number" && isFinite(result) ? result : NaN;
+  } catch {
+    return NaN;
+  }
+}
+function buildFunctionOption(parsed, palette, textColor, axisLineColor, colors, titleConfig, tooltipTheme) {
+  const xRange = parsed.xRange ?? { min: -10, max: 10 };
+  const samples = 200;
+  const step = (xRange.max - xRange.min) / samples;
+  const xValues = [];
+  for (let i = 0; i <= samples; i++) {
+    xValues.push(xRange.min + i * step);
+  }
+  const series = (parsed.functions ?? []).map((fn, index) => {
+    const data = xValues.map((x) => {
+      const y = evaluateExpression(fn.expression, x);
+      return [x, y];
+    });
+    const fnColor = fn.color ?? colors[index % colors.length];
+    return {
+      name: fn.name,
+      type: "line",
+      showSymbol: false,
+      smooth: true,
+      data,
+      lineStyle: {
+        width: 2,
+        color: fnColor
+      },
+      itemStyle: {
+        color: fnColor
+      }
+    };
+  });
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "axis",
+      ...tooltipTheme,
+      axisPointer: {
+        type: "cross"
+      }
+    },
+    legend: {
+      data: (parsed.functions ?? []).map((fn) => fn.name),
+      bottom: 10,
+      textStyle: {
+        color: textColor
+      }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "15%",
+      top: parsed.title ? "15%" : "5%",
+      containLabel: true
+    },
+    xAxis: {
+      type: "value",
+      min: xRange.min,
+      max: xRange.max,
+      axisLine: {
+        lineStyle: { color: axisLineColor }
+      },
+      axisLabel: {
+        color: textColor
+      },
+      splitLine: {
+        lineStyle: {
+          color: palette.overlay
+        }
+      }
+    },
+    yAxis: {
+      type: "value",
+      axisLine: {
+        lineStyle: { color: axisLineColor }
+      },
+      axisLabel: {
+        color: textColor
+      },
+      splitLine: {
+        lineStyle: {
+          color: palette.overlay
+        }
+      }
+    },
+    series
+  };
+}
+function buildScatterOption(parsed, palette, textColor, axisLineColor, colors, titleConfig, tooltipTheme) {
+  const points = parsed.scatterPoints ?? [];
+  const defaultSize = 15;
+  const hasCategories = points.some((p) => p.category !== void 0);
+  const hasSize = points.some((p) => p.size !== void 0);
+  const labelConfig = {
+    show: parsed.showLabels ?? false,
+    formatter: "{b}",
+    position: "top",
+    color: textColor,
+    fontSize: 11
+  };
+  const emphasisConfig = {
+    focus: "self",
+    itemStyle: {
+      shadowBlur: 10,
+      shadowColor: "rgba(0, 0, 0, 0.3)"
+    }
+  };
+  let series;
+  let legendData;
+  if (hasCategories) {
+    const categories = [
+      ...new Set(points.map((p) => p.category).filter(Boolean))
+    ];
+    legendData = categories;
+    series = categories.map((category, catIndex) => {
+      const categoryPoints = points.filter((p) => p.category === category);
+      const catColor = parsed.categoryColors?.[category] ?? colors[catIndex % colors.length];
+      const data = categoryPoints.map((p) => ({
+        name: p.name,
+        value: hasSize ? [p.x, p.y, p.size ?? 0] : [p.x, p.y],
+        ...p.color && { itemStyle: { color: p.color } }
+      }));
+      return {
+        name: category,
+        type: "scatter",
+        data,
+        ...hasSize ? { symbolSize: (val) => val[2] } : { symbolSize: defaultSize },
+        itemStyle: { color: catColor },
+        label: labelConfig,
+        emphasis: emphasisConfig
+      };
+    });
+  } else {
+    const data = points.map((p, index) => ({
+      name: p.name,
+      value: hasSize ? [p.x, p.y, p.size ?? 0] : [p.x, p.y],
+      ...hasSize ? { symbolSize: p.size ?? defaultSize } : { symbolSize: defaultSize },
+      itemStyle: {
+        color: p.color ?? colors[index % colors.length]
+      }
+    }));
+    series = [
+      {
+        type: "scatter",
+        data,
+        label: labelConfig,
+        emphasis: emphasisConfig
+      }
+    ];
+  }
+  const tooltip = {
+    trigger: "item",
+    ...tooltipTheme,
+    formatter: (params) => {
+      const p = params;
+      const xLabel = parsed.xlabel || "x";
+      const yLabel = parsed.ylabel || "y";
+      let html = `<strong>${p.name}</strong>`;
+      if (hasCategories) html += `<br/>${p.seriesName}`;
+      html += `<br/>${xLabel}: ${p.value[0]}<br/>${yLabel}: ${p.value[1]}`;
+      if (hasSize) html += `<br/>${parsed.sizelabel || "size"}: ${p.value[2]}`;
+      return html;
+    }
+  };
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip,
+    ...legendData && {
+      legend: {
+        data: legendData,
+        bottom: 10,
+        textStyle: { color: textColor }
+      }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: hasCategories ? "15%" : "3%",
+      top: parsed.title ? "15%" : "5%",
+      containLabel: true
+    },
+    xAxis: {
+      type: "value",
+      name: parsed.xlabel,
+      nameLocation: "middle",
+      nameGap: 30,
+      nameTextStyle: {
+        color: textColor,
+        fontSize: 12
+      },
+      axisLine: {
+        lineStyle: { color: axisLineColor }
+      },
+      axisLabel: {
+        color: textColor
+      },
+      splitLine: {
+        lineStyle: {
+          color: palette.overlay
+        }
+      }
+    },
+    yAxis: {
+      type: "value",
+      name: parsed.ylabel,
+      nameLocation: "middle",
+      nameGap: 40,
+      nameTextStyle: {
+        color: textColor,
+        fontSize: 12
+      },
+      axisLine: {
+        lineStyle: { color: axisLineColor }
+      },
+      axisLabel: {
+        color: textColor
+      },
+      splitLine: {
+        lineStyle: {
+          color: palette.overlay
+        }
+      }
+    },
+    series
+  };
+}
+function buildHeatmapOption(parsed, palette, textColor, axisLineColor, titleConfig, tooltipTheme) {
+  const heatmapRows = parsed.heatmapRows ?? [];
+  const columns = parsed.columns ?? [];
+  const rowLabels = heatmapRows.map((r) => r.label);
+  const data = [];
+  let minValue = Infinity;
+  let maxValue = -Infinity;
+  heatmapRows.forEach((row, rowIndex) => {
+    row.values.forEach((value, colIndex) => {
+      data.push([colIndex, rowIndex, value]);
+      minValue = Math.min(minValue, value);
+      maxValue = Math.max(maxValue, value);
+    });
+  });
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "item",
+      ...tooltipTheme,
+      formatter: (params) => {
+        const p = params;
+        const colName = columns[p.data[0]] ?? p.data[0];
+        const rowName = rowLabels[p.data[1]] ?? p.data[1];
+        return `${rowName} / ${colName}: <strong>${p.data[2]}</strong>`;
+      }
+    },
+    grid: {
+      left: "3%",
+      right: "10%",
+      bottom: "3%",
+      top: parsed.title ? "15%" : "5%",
+      containLabel: true
+    },
+    xAxis: {
+      type: "category",
+      data: columns,
+      splitArea: {
+        show: true
+      },
+      axisLine: {
+        lineStyle: { color: axisLineColor }
+      },
+      axisLabel: {
+        color: textColor
+      }
+    },
+    yAxis: {
+      type: "category",
+      data: rowLabels,
+      splitArea: {
+        show: true
+      },
+      axisLine: {
+        lineStyle: { color: axisLineColor }
+      },
+      axisLabel: {
+        color: textColor
+      }
+    },
+    visualMap: {
+      min: minValue,
+      max: maxValue,
+      calculable: true,
+      orient: "vertical",
+      right: "2%",
+      top: "center",
+      inRange: {
+        color: [
+          palette.bg,
+          palette.primary,
+          palette.colors.cyan,
+          palette.colors.yellow,
+          palette.colors.orange
+        ]
+      },
+      textStyle: {
+        color: textColor
+      }
+    },
+    series: [
+      {
+        type: "heatmap",
+        data,
+        label: {
+          show: true,
+          color: textColor
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: "rgba(0, 0, 0, 0.5)"
+          }
+        }
+      }
+    ]
+  };
+}
+function buildFunnelOption(parsed, textColor, colors, titleConfig, tooltipTheme) {
+  const sorted = [...parsed.data].sort((a, b) => b.value - a.value);
+  const topValue = sorted.length > 0 ? sorted[0].value : 1;
+  const data = sorted.map((d) => ({
+    name: d.label,
+    value: d.value,
+    itemStyle: {
+      color: d.color ?? colors[parsed.data.indexOf(d) % colors.length],
+      borderWidth: 0
+    }
+  }));
+  const prevValueMap = /* @__PURE__ */ new Map();
+  for (let i = 0; i < sorted.length; i++) {
+    prevValueMap.set(
+      sorted[i].label,
+      i > 0 ? sorted[i - 1].value : sorted[i].value
+    );
+  }
+  const funnelTop = parsed.title ? 60 : 20;
+  const funnelLayout = {
+    left: "20%",
+    top: funnelTop,
+    bottom: 20,
+    width: "60%",
+    sort: "descending",
+    gap: 2,
+    minSize: "8%"
+  };
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "item",
+      ...tooltipTheme,
+      formatter: (params) => {
+        const p = params;
+        const val = p.value;
+        const prev = prevValueMap.get(p.name) ?? val;
+        const isFirst = p.dataIndex === 0;
+        let html = `<strong>${p.name}</strong>: ${val}`;
+        if (!isFirst) {
+          const stepDrop = ((1 - val / prev) * 100).toFixed(1);
+          html += `<br/>Step drop-off: ${stepDrop}%`;
+        }
+        if (!isFirst && topValue > 0) {
+          const totalDrop = ((1 - val / topValue) * 100).toFixed(1);
+          html += `<br/>Overall drop-off: ${totalDrop}%`;
+        }
+        return html;
+      }
+    },
+    series: [
+      {
+        type: "funnel",
+        ...funnelLayout,
+        label: {
+          show: true,
+          position: "left",
+          formatter: "{b}",
+          color: textColor,
+          fontSize: 13
+        },
+        labelLine: {
+          show: true,
+          length: 10,
+          lineStyle: { color: textColor, opacity: 0.3 }
+        },
+        emphasis: {
+          label: {
+            fontSize: 15
+          }
+        },
+        data
+      },
+      {
+        type: "funnel",
+        ...funnelLayout,
+        silent: true,
+        itemStyle: { color: "transparent", borderWidth: 0 },
+        label: {
+          show: true,
+          position: "right",
+          formatter: "{c}",
+          color: textColor,
+          fontSize: 13
+        },
+        labelLine: {
+          show: true,
+          length: 10,
+          lineStyle: { color: textColor, opacity: 0.3 }
+        },
+        emphasis: { disabled: true },
+        data: data.map((d) => ({
+          ...d,
+          itemStyle: { color: "transparent", borderWidth: 0 }
+        }))
+      }
+    ]
+  };
+}
+function resolveAxisLabels(parsed) {
+  const isHorizontal = parsed.orientation === "horizontal";
+  return {
+    xLabel: parsed.xlabel ?? (isHorizontal ? parsed.label : void 0),
+    yLabel: parsed.ylabel ?? (isHorizontal ? void 0 : parsed.label)
+  };
+}
+function makeGridAxis(type, textColor, axisLineColor, splitLineColor, label, data) {
+  return {
+    type,
+    ...data && { data },
+    axisLine: { lineStyle: { color: axisLineColor } },
+    axisLabel: { color: textColor, fontFamily: FONT_FAMILY },
+    splitLine: { lineStyle: { color: splitLineColor } },
+    ...label && {
+      name: label,
+      nameLocation: "middle",
+      nameGap: 30,
+      nameTextStyle: { color: textColor, fontSize: 12, fontFamily: FONT_FAMILY }
+    }
+  };
+}
+function buildEChartsOptionFromChart(parsed, palette, _isDark) {
+  if (parsed.error) return {};
+  const textColor = palette.text;
+  const axisLineColor = palette.border;
+  const splitLineColor = palette.overlay;
+  const colors = getSeriesColors(palette);
+  const titleConfig = parsed.title ? {
+    text: parsed.title,
+    left: "center",
+    textStyle: {
+      color: textColor,
+      fontSize: 18,
+      fontWeight: "bold",
+      fontFamily: FONT_FAMILY
+    }
+  } : void 0;
+  const tooltipTheme = {
+    backgroundColor: palette.surface,
+    borderColor: palette.border,
+    textStyle: { color: palette.text }
+  };
+  switch (parsed.type) {
+    case "bar":
+      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme);
+    case "bar-stacked":
+      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme);
+    case "line":
+      return parsed.seriesNames ? buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, titleConfig, tooltipTheme);
+    case "area":
+      return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, 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);
+    case "polar-area":
+      return buildPolarAreaOption(parsed, textColor, colors, titleConfig, tooltipTheme);
+  }
+}
+function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme) {
+  const { xLabel, yLabel } = resolveAxisLabels(parsed);
+  const isHorizontal = parsed.orientation === "horizontal";
+  const labels = parsed.data.map((d) => d.label);
+  const data = parsed.data.map((d, i) => ({
+    value: d.value,
+    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);
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "axis",
+      ...tooltipTheme,
+      axisPointer: { type: "shadow" }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      top: parsed.title ? "15%" : "5%",
+      containLabel: true
+    },
+    xAxis: isHorizontal ? valueAxis : categoryAxis,
+    yAxis: isHorizontal ? categoryAxis : valueAxis,
+    series: [
+      {
+        type: "bar",
+        data
+      }
+    ]
+  };
+}
+function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, titleConfig, tooltipTheme) {
+  const { xLabel, yLabel } = resolveAxisLabels(parsed);
+  const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
+  const labels = parsed.data.map((d) => d.label);
+  const values = parsed.data.map((d) => d.value);
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "axis",
+      ...tooltipTheme,
+      axisPointer: { type: "line" }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      top: parsed.title ? "15%" : "5%",
+      containLabel: true
+    },
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, xLabel, labels),
+    yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, yLabel),
+    series: [
+      {
+        type: "line",
+        data: values,
+        smooth: false,
+        symbolSize: 8,
+        lineStyle: { color: lineColor, width: 3 },
+        itemStyle: { color: lineColor }
+      }
+    ]
+  };
+}
+function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme) {
+  const { xLabel, yLabel } = resolveAxisLabels(parsed);
+  const seriesNames = parsed.seriesNames ?? [];
+  const labels = parsed.data.map((d) => d.label);
+  const series = seriesNames.map((name, idx) => {
+    const color = parsed.seriesNameColors?.[idx] ?? colors[idx % colors.length];
+    const data = parsed.data.map(
+      (dp) => idx === 0 ? dp.value : dp.extraValues?.[idx - 1] ?? 0
+    );
+    return {
+      name,
+      type: "line",
+      data,
+      smooth: false,
+      symbolSize: 8,
+      lineStyle: { color, width: 3 },
+      itemStyle: { color }
+    };
+  });
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "axis",
+      ...tooltipTheme,
+      axisPointer: { type: "line" }
+    },
+    legend: {
+      data: seriesNames,
+      bottom: 10,
+      textStyle: { color: textColor }
+    },
+    grid: {
+      left: "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),
+    series
+  };
+}
+function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, titleConfig, tooltipTheme) {
+  const { xLabel, yLabel } = resolveAxisLabels(parsed);
+  const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
+  const labels = parsed.data.map((d) => d.label);
+  const values = parsed.data.map((d) => d.value);
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "axis",
+      ...tooltipTheme,
+      axisPointer: { type: "line" }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      top: parsed.title ? "15%" : "5%",
+      containLabel: true
+    },
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, xLabel, labels),
+    yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, yLabel),
+    series: [
+      {
+        type: "line",
+        data: values,
+        smooth: false,
+        symbolSize: 8,
+        lineStyle: { color: lineColor, width: 3 },
+        itemStyle: { color: lineColor },
+        areaStyle: { opacity: 0.25 }
+      }
+    ]
+  };
+}
+function buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, isDoughnut) {
+  const data = parsed.data.map((d, i) => ({
+    name: d.label,
+    value: d.value,
+    itemStyle: { color: d.color ?? colors[i % colors.length] }
+  }));
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "item",
+      ...tooltipTheme
+    },
+    series: [
+      {
+        type: "pie",
+        radius: isDoughnut ? ["40%", "70%"] : ["0%", "70%"],
+        data,
+        label: {
+          position: "outside",
+          formatter: "{b}",
+          color: textColor,
+          fontFamily: FONT_FAMILY
+        },
+        labelLine: { show: true }
+      }
+    ]
+  };
+}
+function buildRadarOption(parsed, palette, textColor, colors, titleConfig, tooltipTheme) {
+  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,
+    max: maxValue
+  }));
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "item",
+      ...tooltipTheme
+    },
+    radar: {
+      indicator,
+      axisName: {
+        color: textColor,
+        fontFamily: FONT_FAMILY
+      },
+      splitLine: {
+        lineStyle: { color: palette.border, opacity: gridOpacity }
+      },
+      axisLine: {
+        lineStyle: { color: palette.border, opacity: gridOpacity }
+      },
+      splitArea: { show: false }
+    },
+    series: [
+      {
+        type: "radar",
+        data: [
+          {
+            value: values,
+            name: parsed.series ?? "Value",
+            areaStyle: { color: radarColor, opacity: 0.25 },
+            lineStyle: { color: radarColor },
+            itemStyle: { color: radarColor },
+            symbol: "circle",
+            symbolSize: 8,
+            label: {
+              show: true,
+              formatter: "{c}",
+              color: textColor,
+              fontSize: 11,
+              fontFamily: FONT_FAMILY
+            }
+          }
+        ]
+      }
+    ]
+  };
+}
+function buildPolarAreaOption(parsed, textColor, colors, titleConfig, tooltipTheme) {
+  const data = parsed.data.map((d, i) => ({
+    name: d.label,
+    value: d.value,
+    itemStyle: { color: d.color ?? colors[i % colors.length] }
+  }));
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "item",
+      ...tooltipTheme
+    },
+    series: [
+      {
+        type: "pie",
+        roseType: "radius",
+        radius: ["10%", "70%"],
+        data,
+        label: {
+          position: "outside",
+          formatter: "{b}",
+          color: textColor,
+          fontFamily: FONT_FAMILY
+        },
+        labelLine: { show: true }
+      }
+    ]
+  };
+}
+function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme) {
+  const { xLabel, yLabel } = resolveAxisLabels(parsed);
+  const isHorizontal = parsed.orientation === "horizontal";
+  const seriesNames = parsed.seriesNames ?? [];
+  const labels = parsed.data.map((d) => d.label);
+  const series = seriesNames.map((name, idx) => {
+    const color = parsed.seriesNameColors?.[idx] ?? colors[idx % colors.length];
+    const data = parsed.data.map(
+      (dp) => idx === 0 ? dp.value : dp.extraValues?.[idx - 1] ?? 0
+    );
+    return {
+      name,
+      type: "bar",
+      stack: "total",
+      data,
+      itemStyle: { color }
+    };
+  });
+  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, isHorizontal ? yLabel : xLabel, labels);
+  const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, isHorizontal ? xLabel : yLabel);
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "axis",
+      ...tooltipTheme,
+      axisPointer: { type: "shadow" }
+    },
+    legend: {
+      data: seriesNames,
+      bottom: 10,
+      textStyle: { color: textColor }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "15%",
+      top: parsed.title ? "15%" : "5%",
+      containLabel: true
+    },
+    xAxis: isHorizontal ? valueAxis : categoryAxis,
+    yAxis: isHorizontal ? categoryAxis : valueAxis,
+    series
+  };
+}
+var ECHART_EXPORT_WIDTH = 1200;
+var ECHART_EXPORT_HEIGHT = 800;
+var STANDARD_CHART_TYPES = /* @__PURE__ */ new Set([
+  "bar",
+  "line",
+  "multi-line",
+  "area",
+  "pie",
+  "doughnut",
+  "radar",
+  "polar-area",
+  "bar-stacked"
+]);
+async function renderEChartsForExport(content, theme, palette) {
+  const isDark = theme === "dark";
+  const { getPalette: getPalette2 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
+  const effectivePalette = palette ?? (isDark ? getPalette2("nord").dark : getPalette2("nord").light);
+  const chartLine = content.match(/^chart\s*:\s*(.+)/im);
+  const chartType = chartLine?.[1]?.trim().toLowerCase();
+  let option;
+  if (chartType && STANDARD_CHART_TYPES.has(chartType)) {
+    const parsed = parseChart(content, effectivePalette);
+    if (parsed.error) return "";
+    option = buildEChartsOptionFromChart(parsed, effectivePalette, isDark);
+  } else {
+    const parsed = parseEChart(content, effectivePalette);
+    if (parsed.error) return "";
+    option = buildEChartsOption(parsed, effectivePalette, isDark);
+  }
+  if (!option || Object.keys(option).length === 0) return "";
+  const chart = echarts.init(null, null, {
+    renderer: "svg",
+    ssr: true,
+    width: ECHART_EXPORT_WIDTH,
+    height: ECHART_EXPORT_HEIGHT
+  });
+  try {
+    chart.setOption(option);
+    const svgString = chart.renderToSVGString();
+    if (!svgString) return "";
+    return svgString.replace(
+      /^<svg /,
+      `<svg style="font-family: ${FONT_FAMILY}" `
+    );
+  } finally {
+    chart.dispose();
+  }
+}
+
+// src/dgmo-router.ts
+init_parser();
+var DGMO_CHART_TYPE_MAP = {
+  // Standard charts (via ECharts)
+  bar: "echart",
+  line: "echart",
+  "multi-line": "echart",
+  area: "echart",
+  pie: "echart",
+  doughnut: "echart",
+  radar: "echart",
+  "polar-area": "echart",
+  "bar-stacked": "echart",
+  // ECharts
+  scatter: "echart",
+  sankey: "echart",
+  chord: "echart",
+  function: "echart",
+  heatmap: "echart",
+  funnel: "echart",
+  // D3
+  slope: "d3",
+  wordcloud: "d3",
+  arc: "d3",
+  timeline: "d3",
+  venn: "d3",
+  quadrant: "d3",
+  sequence: "d3"
+};
+function getDgmoFramework(chartType) {
+  return DGMO_CHART_TYPE_MAP[chartType.toLowerCase()] ?? null;
+}
+function parseDgmoChartType(content) {
+  const lines = content.split("\n");
+  for (const line2 of lines) {
+    const trimmed = line2.trim();
+    if (!trimmed || trimmed.startsWith("#") || trimmed.startsWith("//"))
+      continue;
+    const match = trimmed.match(/^chart\s*:\s*(.+)/i);
+    if (match) return match[1].trim().toLowerCase();
+  }
+  if (looksLikeSequence(content)) return "sequence";
+  return null;
+}
+
 // src/cli.ts
 init_registry();
 init_fonts();
@@ -5247,13 +6732,23 @@ async function main() {
   } else {
     noInput();
   }
-  setupDom();
   const isDark = opts.theme === "dark";
   const paletteColors = isDark ? getPalette(opts.palette).dark : getPalette(opts.palette).light;
-  const svg = await renderD3ForExport(content, opts.theme, paletteColors);
+  const chartType = parseDgmoChartType(content);
+  const framework = chartType ? getDgmoFramework(chartType) : null;
+  let svg;
+  if (framework === "echart") {
+    svg = await renderEChartsForExport(content, opts.theme, paletteColors);
+  } else if (framework === "d3" || framework === null) {
+    setupDom();
+    svg = await renderD3ForExport(content, opts.theme, paletteColors);
+  } else {
+    console.error(`Error: Unknown chart framework "${framework}".`);
+    process.exit(1);
+  }
   if (!svg) {
     console.error(
-      "Error: Failed to render diagram. The input may be empty, invalid, or use an unsupported chart type (e.g. Chart.js/ECharts charts require a browser)."
+      "Error: Failed to render diagram. The input may be empty, invalid, or use an unsupported chart type."
     );
     process.exit(1);
   }