@diagrammo/dgmo 0.5.4 → 0.6.0

package/dist/index.cjs

@@ -3662,9 +3662,11 @@ var init_parser3 = __esm({
 // src/chart.ts
 function parseChart(content, palette) {
   const lines = content.split("\n");
+  const parsedEras = [];
   const result = {
     type: "bar",
     data: [],
+    eras: parsedEras,
     diagnostics: [],
     error: null
   };
@@ -3683,6 +3685,16 @@ function parseChart(content, palette) {
       continue;
     }
     if (trimmed.startsWith("//")) continue;
+    const eraMatch = trimmed.match(/^era\s+(.+?)\s*->\s*(.+?)\s*:\s*(.+?)(?:\s*\(([^)]+)\))?\s*$/);
+    if (eraMatch) {
+      parsedEras.push({
+        start: eraMatch[1].trim(),
+        end: eraMatch[2].trim(),
+        label: eraMatch[3].trim(),
+        color: eraMatch[4] ? resolveColor(eraMatch[4].trim(), palette) : null
+      });
+      continue;
+    }
     const colonIndex = trimmed.indexOf(":");
     if (colonIndex === -1) continue;
     const key = trimmed.substring(0, colonIndex).trim().toLowerCase();
@@ -3761,6 +3773,9 @@ function parseChart(content, palette) {
       });
     }
   }
+  if (result.type !== "line" && result.type !== "area") {
+    result.eras = void 0;
+  }
   const setChartError = (line10, message) => {
     const diag = makeDgmoError(line10, message);
     result.diagnostics.push(diag);
@@ -3814,7 +3829,7 @@ var init_chart = __esm({
 });
 
 // src/echarts.ts
-function parseEChart(content, palette) {
+function parseExtendedChart(content, palette) {
   const lines = content.split("\n");
   const result = {
     type: "scatter",
@@ -4083,7 +4098,7 @@ function buildChartCommons(parsed, palette, isDark) {
   const tooltipTheme = { backgroundColor: palette.surface, borderColor: palette.border, textStyle: { color: palette.text } };
   return { textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme };
 }
-function buildEChartsOption(parsed, palette, isDark) {
+function buildExtendedChartOption(parsed, palette, isDark) {
   if (parsed.error) {
     return {};
   }
@@ -4755,7 +4770,7 @@ function resolveAxisLabels(parsed) {
     yLabel: parsed.ylabel ?? (isHorizontal ? void 0 : parsed.label)
   };
 }
-function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacity, label, data, nameGapOverride, chartWidthHint) {
+function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacity, label, data, nameGapOverride, chartWidthHint, intervalOverride) {
   const defaultGap = type === "value" ? 75 : 40;
   let catFontSize = 16;
   let catLabelExtras = {};
@@ -4782,7 +4797,7 @@ function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacit
       fontSize: type === "category" && data ? catFontSize : 16,
       fontFamily: FONT_FAMILY,
       ...type === "category" && {
-        interval: 0,
+        interval: intervalOverride ?? 0,
         formatter: (value) => value.replace(/([a-z])([A-Z])/g, "$1\n$2"),
         ...catLabelExtras
       }
@@ -4796,7 +4811,7 @@ function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacit
     }
   };
 }
-function buildEChartsOptionFromChart(parsed, palette, isDark, chartWidth) {
+function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
   if (parsed.error) return {};
   const { textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme } = buildChartCommons(parsed, palette, isDark);
   switch (parsed.type) {
@@ -4805,7 +4820,7 @@ function buildEChartsOptionFromChart(parsed, palette, isDark, chartWidth) {
     case "bar-stacked":
       return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth);
     case "line":
-      return parsed.seriesNames ? buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
+      return parsed.seriesNames ? buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
     case "area":
       return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
     case "pie":
@@ -4858,11 +4873,57 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOp
     ]
   };
 }
+function buildIntervalCallback(labels, eras) {
+  const count = labels.length;
+  if (count <= 8) return () => true;
+  const snapSteps = [1, 2, 4, 5, 10, 20, 25, 50];
+  const raw = Math.ceil(count / 8);
+  const N = [...snapSteps].reverse().find((s) => s <= raw) ?? 1;
+  const pinned = /* @__PURE__ */ new Set();
+  for (let i = 0; i < count; i += N) pinned.add(i);
+  for (const era of eras) {
+    const si = labels.indexOf(era.start);
+    const ei = labels.indexOf(era.end);
+    if (si >= 0) pinned.add(si);
+    if (ei >= 0) pinned.add(ei);
+  }
+  return (index) => pinned.has(index);
+}
+function buildMarkArea(eras, labels, textColor, defaultColor) {
+  if (eras.length === 0) return void 0;
+  return {
+    silent: false,
+    tooltip: { show: true },
+    data: eras.map((era) => {
+      const startIdx = labels.indexOf(era.start);
+      const endIdx = labels.indexOf(era.end);
+      const bandSlots = startIdx >= 0 && endIdx >= 0 ? endIdx - startIdx : Infinity;
+      const color = era.color ?? defaultColor;
+      return [
+        {
+          name: era.label,
+          xAxis: era.start,
+          itemStyle: { color, opacity: 0.15 },
+          label: {
+            show: bandSlots >= 3,
+            position: "insideTop",
+            fontSize: 11,
+            color: textColor
+          }
+        },
+        { xAxis: era.end }
+      ];
+    })
+  };
+}
 function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth) {
   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);
+  const eras = parsed.eras ?? [];
+  const interval = buildIntervalCallback(labels, eras);
+  const markArea = buildMarkArea(eras, labels, textColor, palette.colors.blue);
   return {
     ...CHART_BASE,
     title: titleConfig,
@@ -4872,7 +4933,7 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
       axisPointer: { type: "line" }
     },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth, interval),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -4882,15 +4943,19 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
         symbolSize: 8,
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        ...markArea && { markArea }
       }
     ]
   };
 }
-function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
+function buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const seriesNames = parsed.seriesNames ?? [];
   const labels = parsed.data.map((d) => d.label);
+  const eras = parsed.eras ?? [];
+  const interval = buildIntervalCallback(labels, eras);
+  const markArea = buildMarkArea(eras, labels, textColor, palette.colors.blue);
   const series = seriesNames.map((name, idx) => {
     const color = parsed.seriesNameColors?.[idx] ?? colors[idx % colors.length];
     const data = parsed.data.map(
@@ -4904,7 +4969,8 @@ function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor,
       symbolSize: 8,
       lineStyle: { color, width: 3 },
       itemStyle: { color },
-      emphasis: EMPHASIS_SELF
+      emphasis: EMPHASIS_SELF,
+      ...idx === 0 && markArea && { markArea }
     };
   });
   return {
@@ -4921,7 +4987,7 @@ function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor,
       textStyle: { color: textColor }
     },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title, hasLegend: true }),
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth, interval),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series
   };
@@ -4931,6 +4997,9 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
   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);
+  const eras = parsed.eras ?? [];
+  const interval = buildIntervalCallback(labels, eras);
+  const markArea = buildMarkArea(eras, labels, textColor, palette.colors.blue);
   return {
     ...CHART_BASE,
     title: titleConfig,
@@ -4940,7 +5009,7 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
       axisPointer: { type: "line" }
     },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth, interval),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -4951,7 +5020,8 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
         areaStyle: { opacity: 0.25 },
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        ...markArea && { markArea }
       }
     ]
   };
@@ -5136,7 +5206,7 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
     series
   };
 }
-async function renderEChartsForExport(content, theme, palette, options) {
+async function renderExtendedChartForExport(content, theme, palette, options) {
   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);
@@ -5146,11 +5216,11 @@ async function renderEChartsForExport(content, theme, palette, options) {
   if (chartType && STANDARD_CHART_TYPES.has(chartType)) {
     const parsed = parseChart(content, effectivePalette);
     if (parsed.error) return "";
-    option = buildEChartsOptionFromChart(parsed, effectivePalette, isDark, ECHART_EXPORT_WIDTH);
+    option = buildSimpleChartOption(parsed, effectivePalette, isDark, ECHART_EXPORT_WIDTH);
   } else {
-    const parsed = parseEChart(content, effectivePalette);
+    const parsed = parseExtendedChart(content, effectivePalette);
     if (parsed.error) return "";
-    option = buildEChartsOption(parsed, effectivePalette, isDark);
+    option = buildExtendedChartOption(parsed, effectivePalette, isDark);
   }
   if (!option || Object.keys(option).length === 0) return "";
   const chart = echarts.init(null, null, {
@@ -5177,7 +5247,7 @@ async function renderEChartsForExport(content, theme, palette, options) {
     chart.dispose();
   }
 }
-var echarts, EMPHASIS_SELF, CHART_BASE, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT;
+var echarts, EMPHASIS_SELF, CHART_BASE, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT, STANDARD_CHART_TYPES;
 var init_echarts = __esm({
   "src/echarts.ts"() {
     "use strict";
@@ -5189,11 +5259,21 @@ var init_echarts = __esm({
     init_diagnostics();
     init_colors();
     init_parsing();
-    init_dgmo_router();
     EMPHASIS_SELF = { focus: "self", blurScope: "global" };
     CHART_BASE = { backgroundColor: "transparent", animation: false };
     ECHART_EXPORT_WIDTH = 1200;
     ECHART_EXPORT_HEIGHT = 800;
+    STANDARD_CHART_TYPES = /* @__PURE__ */ new Set([
+      "bar",
+      "line",
+      "multi-line",
+      "area",
+      "pie",
+      "doughnut",
+      "radar",
+      "polar-area",
+      "bar-stacked"
+    ]);
   }
 });
 
@@ -7351,15 +7431,12 @@ var init_parser9 = __esm({
 // src/dgmo-router.ts
 var dgmo_router_exports = {};
 __export(dgmo_router_exports, {
-  DGMO_CHART_TYPE_MAP: () => DGMO_CHART_TYPE_MAP,
-  STANDARD_CHART_TYPES: () => STANDARD_CHART_TYPES,
-  getDgmoFramework: () => getDgmoFramework,
+  getAllChartTypes: () => getAllChartTypes,
+  getRenderCategory: () => getRenderCategory,
+  isExtendedChartType: () => isExtendedChartType,
   parseDgmo: () => parseDgmo,
   parseDgmoChartType: () => parseDgmoChartType
 });
-function getDgmoFramework(chartType) {
-  return DGMO_CHART_TYPE_MAP[chartType.toLowerCase()] ?? null;
-}
 function parseDgmoChartType(content) {
   const lines = content.split("\n");
   for (const line10 of lines) {
@@ -7379,22 +7456,39 @@ function parseDgmoChartType(content) {
   if (looksLikeOrg(content)) return "org";
   return null;
 }
+function getRenderCategory(chartType) {
+  const type = chartType.toLowerCase();
+  if (DATA_CHART_TYPES.has(type)) return "data-chart";
+  if (VISUALIZATION_TYPES.has(type)) return "visualization";
+  if (DIAGRAM_TYPES.has(type)) return "diagram";
+  return null;
+}
+function isExtendedChartType(chartType) {
+  return EXTENDED_CHART_TYPES.has(chartType.toLowerCase());
+}
+function getAllChartTypes() {
+  return [
+    ...DATA_CHART_TYPES,
+    ...VISUALIZATION_TYPES,
+    ...DIAGRAM_TYPES
+  ];
+}
 function parseDgmo(content) {
   const chartType = parseDgmoChartType(content);
   if (!chartType) {
-    return { diagnostics: parseD3(content).diagnostics };
+    return { diagnostics: parseVisualization(content).diagnostics };
   }
   const directParser = PARSE_DISPATCH.get(chartType);
   if (directParser) return { diagnostics: directParser(content).diagnostics };
-  if (STANDARD_CHART_TYPES.has(chartType)) {
+  if (STANDARD_CHART_TYPES2.has(chartType)) {
     return { diagnostics: parseChart(content).diagnostics };
   }
   if (ECHART_TYPES.has(chartType)) {
-    return { diagnostics: parseEChart(content).diagnostics };
+    return { diagnostics: parseExtendedChart(content).diagnostics };
   }
-  return { diagnostics: parseD3(content).diagnostics };
+  return { diagnostics: parseVisualization(content).diagnostics };
 }
-var DGMO_CHART_TYPE_MAP, STANDARD_CHART_TYPES, ECHART_TYPES, PARSE_DISPATCH;
+var DATA_CHART_TYPES, VISUALIZATION_TYPES, DIAGRAM_TYPES, EXTENDED_CHART_TYPES, STANDARD_CHART_TYPES2, ECHART_TYPES, PARSE_DISPATCH;
 var init_dgmo_router = __esm({
   "src/dgmo-router.ts"() {
     "use strict";
@@ -7412,44 +7506,53 @@ var init_dgmo_router = __esm({
     init_parser7();
     init_parser8();
     init_parser9();
-    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",
-      flowchart: "d3",
-      class: "d3",
-      er: "d3",
-      org: "d3",
-      kanban: "d3",
-      c4: "d3",
-      "initiative-status": "d3",
-      state: "d3",
-      sitemap: "d3",
-      infra: "d3"
-    };
-    STANDARD_CHART_TYPES = /* @__PURE__ */ new Set([
+    DATA_CHART_TYPES = /* @__PURE__ */ new Set([
+      "bar",
+      "line",
+      "pie",
+      "doughnut",
+      "area",
+      "polar-area",
+      "radar",
+      "bar-stacked",
+      "multi-line",
+      "scatter",
+      "sankey",
+      "chord",
+      "function",
+      "heatmap",
+      "funnel"
+    ]);
+    VISUALIZATION_TYPES = /* @__PURE__ */ new Set([
+      "slope",
+      "wordcloud",
+      "arc",
+      "timeline",
+      "venn",
+      "quadrant"
+    ]);
+    DIAGRAM_TYPES = /* @__PURE__ */ new Set([
+      "sequence",
+      "flowchart",
+      "class",
+      "er",
+      "org",
+      "kanban",
+      "c4",
+      "initiative-status",
+      "state",
+      "sitemap",
+      "infra"
+    ]);
+    EXTENDED_CHART_TYPES = /* @__PURE__ */ new Set([
+      "scatter",
+      "sankey",
+      "chord",
+      "function",
+      "heatmap",
+      "funnel"
+    ]);
+    STANDARD_CHART_TYPES2 = /* @__PURE__ */ new Set([
       "bar",
       "line",
       "multi-line",
@@ -18522,7 +18625,7 @@ function addDurationToDate(startDate, amount, unit) {
     return `${endYear}-${endMonth}-${endDay}`;
   }
 }
-function parseD3(content, palette) {
+function parseVisualization(content, palette) {
   const result = {
     type: null,
     title: null,
@@ -20968,7 +21071,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
   const circleEls = [];
   const circleGroup = svg.append("g");
   circles.forEach((c, i) => {
-    const el = circleGroup.append("circle").attr("cx", c.x).attr("cy", c.y).attr("r", c.r).attr("fill", setColors[i]).attr("fill-opacity", 0.35).attr("stroke", setColors[i]).attr("stroke-width", 2).attr("class", "venn-fill-circle").attr("data-line-number", String(vennSets[i].lineNumber)).style("pointer-events", "none");
+    const el = circleGroup.append("circle").attr("cx", c.x).attr("cy", c.y).attr("r", c.r).attr("fill", setColors[i]).attr("fill-opacity", 0.35).attr("stroke", setColors[i]).attr("stroke-width", 2).style("pointer-events", "none");
     circleEls.push(el);
   });
   const defs = svg.append("defs");
@@ -21003,10 +21106,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
       );
       regionLineNumber = ov?.lineNumber ?? null;
     }
-    const el = overlayGroup.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height).attr("fill", "white").attr("fill-opacity", 0).attr("class", "venn-region-overlay").attr("clip-path", `url(#${clipId})`);
-    if (regionLineNumber != null) {
-      el.attr("data-line-number", String(regionLineNumber));
-    }
+    const el = overlayGroup.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height).attr("fill", "white").attr("fill-opacity", 0).attr("class", "venn-region-overlay").attr("data-line-number", regionLineNumber != null ? String(regionLineNumber) : "0").attr("clip-path", `url(#${clipId})`);
     if (excluded.length > 0) {
       const maskId = `vvm-${key}`;
       const mask = defs.append("mask").attr("id", maskId);
@@ -21020,7 +21120,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
   }
   const showRegionOverlay = (idxs) => {
     const key = [...idxs].sort((a, b) => a - b).join("-");
-    overlayEls.forEach((el, k) => el.attr("fill-opacity", k === key ? 0.3 : 0));
+    overlayEls.forEach((el, k) => el.attr("fill-opacity", k === key ? 0 : 0.55));
   };
   const hideAllOverlays = () => {
     overlayEls.forEach((el) => el.attr("fill-opacity", 0));
@@ -21479,7 +21579,7 @@ function finalizeSvgExport(container, theme, palette, options) {
   }
   return svgHtml;
 }
-async function renderD3ForExport(content, theme, palette, orgExportState, options) {
+async function renderForExport(content, theme, palette, orgExportState, options) {
   const { parseDgmoChartType: parseDgmoChartType2 } = await Promise.resolve().then(() => (init_dgmo_router(), dgmo_router_exports));
   const detectedType = parseDgmoChartType2(content);
   if (detectedType === "org") {
@@ -21670,7 +21770,7 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     renderState2(container2, stateParsed, layout, effectivePalette2, theme === "dark", void 0, { width: EXPORT_WIDTH, height: EXPORT_HEIGHT });
     return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
-  const parsed = parseD3(content, palette);
+  const parsed = parseVisualization(content, palette);
   if (parsed.error && parsed.type !== "sequence") {
     const looksLikeSequence2 = /->|~>|<-/.test(content);
     if (!looksLikeSequence2) return "";
@@ -21880,20 +21980,18 @@ var init_d3 = __esm({
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  DGMO_CHART_TYPE_MAP: () => DGMO_CHART_TYPE_MAP,
   INFRA_BEHAVIOR_KEYS: () => INFRA_BEHAVIOR_KEYS,
   RULE_COUNT: () => RULE_COUNT,
-  STANDARD_CHART_TYPES: () => STANDARD_CHART_TYPES,
   addDurationToDate: () => addDurationToDate,
   applyGroupOrdering: () => applyGroupOrdering,
   applyPositionOverrides: () => applyPositionOverrides,
   boldPalette: () => boldPalette,
-  buildEChartsOption: () => buildEChartsOption,
-  buildEChartsOptionFromChart: () => buildEChartsOptionFromChart,
+  buildExtendedChartOption: () => buildExtendedChartOption,
   buildMermaidQuadrant: () => buildMermaidQuadrant,
   buildMermaidThemeVars: () => buildMermaidThemeVars,
   buildNoteMessageMap: () => buildNoteMessageMap,
   buildRenderSequence: () => buildRenderSequence,
+  buildSimpleChartOption: () => buildSimpleChartOption,
   buildThemeCSS: () => buildThemeCSS,
   catppuccinPalette: () => catppuccinPalette,
   collapseInitiativeStatus: () => collapseInitiativeStatus,
@@ -21913,8 +22011,8 @@ __export(index_exports, {
   formatDateLabel: () => formatDateLabel,
   formatDgmoError: () => formatDgmoError,
   getAvailablePalettes: () => getAvailablePalettes,
-  getDgmoFramework: () => getDgmoFramework,
   getPalette: () => getPalette,
+  getRenderCategory: () => getRenderCategory,
   getSeriesColors: () => getSeriesColors,
   groupMessagesBySection: () => groupMessagesBySection,
   gruvboxPalette: () => gruvboxPalette,
@@ -21925,6 +22023,7 @@ __export(index_exports, {
   inferRoles: () => inferRoles,
   injectBranding: () => injectBranding,
   isArchiveColumn: () => isArchiveColumn,
+  isExtendedChartType: () => isExtendedChartType,
   isSequenceBlock: () => isSequenceBlock,
   isSequenceNote: () => isSequenceNote,
   isValidHex: () => isValidHex,
@@ -21956,11 +22055,10 @@ __export(index_exports, {
   parseC4: () => parseC4,
   parseChart: () => parseChart,
   parseClassDiagram: () => parseClassDiagram,
-  parseD3: () => parseD3,
   parseDgmo: () => parseDgmo,
   parseDgmoChartType: () => parseDgmoChartType,
-  parseEChart: () => parseEChart,
   parseERDiagram: () => parseERDiagram,
+  parseExtendedChart: () => parseExtendedChart,
   parseFlowchart: () => parseFlowchart,
   parseInfra: () => parseInfra,
   parseInitiativeStatus: () => parseInitiativeStatus,
@@ -21972,6 +22070,7 @@ __export(index_exports, {
   parseSitemap: () => parseSitemap,
   parseState: () => parseState,
   parseTimelineDate: () => parseTimelineDate,
+  parseVisualization: () => parseVisualization,
   registerPalette: () => registerPalette,
   render: () => render,
   renderArcDiagram: () => renderArcDiagram,
@@ -21984,12 +22083,12 @@ __export(index_exports, {
   renderC4DeploymentForExport: () => renderC4DeploymentForExport,
   renderClassDiagram: () => renderClassDiagram,
   renderClassDiagramForExport: () => renderClassDiagramForExport,
-  renderD3ForExport: () => renderD3ForExport,
-  renderEChartsForExport: () => renderEChartsForExport,
   renderERDiagram: () => renderERDiagram,
   renderERDiagramForExport: () => renderERDiagramForExport,
+  renderExtendedChartForExport: () => renderExtendedChartForExport,
   renderFlowchart: () => renderFlowchart,
   renderFlowchartForExport: () => renderFlowchartForExport,
+  renderForExport: () => renderForExport,
   renderInfra: () => renderInfra,
   renderInitiativeStatus: () => renderInitiativeStatus,
   renderInitiativeStatusForExport: () => renderInitiativeStatusForExport,
@@ -22045,12 +22144,12 @@ async function render(content, options) {
   const branding = options?.branding ?? true;
   const paletteColors = getPalette(paletteName)[theme === "dark" ? "dark" : "light"];
   const chartType = parseDgmoChartType(content);
-  const framework = chartType ? getDgmoFramework(chartType) : null;
-  if (framework === "echart") {
-    return renderEChartsForExport(content, theme, paletteColors, { branding });
+  const category = chartType ? getRenderCategory(chartType) : null;
+  if (category === "data-chart") {
+    return renderExtendedChartForExport(content, theme, paletteColors, { branding });
   }
   await ensureDom();
-  return renderD3ForExport(content, theme, paletteColors, void 0, {
+  return renderForExport(content, theme, paletteColors, void 0, {
     branding,
     c4Level: options?.c4Level,
     c4System: options?.c4System,
@@ -22829,20 +22928,18 @@ function decodeDiagramUrl(hash) {
 init_branding();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  DGMO_CHART_TYPE_MAP,
   INFRA_BEHAVIOR_KEYS,
   RULE_COUNT,
-  STANDARD_CHART_TYPES,
   addDurationToDate,
   applyGroupOrdering,
   applyPositionOverrides,
   boldPalette,
-  buildEChartsOption,
-  buildEChartsOptionFromChart,
+  buildExtendedChartOption,
   buildMermaidQuadrant,
   buildMermaidThemeVars,
   buildNoteMessageMap,
   buildRenderSequence,
+  buildSimpleChartOption,
   buildThemeCSS,
   catppuccinPalette,
   collapseInitiativeStatus,
@@ -22862,8 +22959,8 @@ init_branding();
   formatDateLabel,
   formatDgmoError,
   getAvailablePalettes,
-  getDgmoFramework,
   getPalette,
+  getRenderCategory,
   getSeriesColors,
   groupMessagesBySection,
   gruvboxPalette,
@@ -22874,6 +22971,7 @@ init_branding();
   inferRoles,
   injectBranding,
   isArchiveColumn,
+  isExtendedChartType,
   isSequenceBlock,
   isSequenceNote,
   isValidHex,
@@ -22905,11 +23003,10 @@ init_branding();
   parseC4,
   parseChart,
   parseClassDiagram,
-  parseD3,
   parseDgmo,
   parseDgmoChartType,
-  parseEChart,
   parseERDiagram,
+  parseExtendedChart,
   parseFlowchart,
   parseInfra,
   parseInitiativeStatus,
@@ -22921,6 +23018,7 @@ init_branding();
   parseSitemap,
   parseState,
   parseTimelineDate,
+  parseVisualization,
   registerPalette,
   render,
   renderArcDiagram,
@@ -22933,12 +23031,12 @@ init_branding();
   renderC4DeploymentForExport,
   renderClassDiagram,
   renderClassDiagramForExport,
-  renderD3ForExport,
-  renderEChartsForExport,
   renderERDiagram,
   renderERDiagramForExport,
+  renderExtendedChartForExport,
   renderFlowchart,
   renderFlowchartForExport,
+  renderForExport,
   renderInfra,
   renderInitiativeStatus,
   renderInitiativeStatusForExport,