@diagrammo/dgmo 0.54.0 → 0.56.0

package/dist/{chunk-KQYQECWQ.js → chunk-JXFB3APA.js}

@@ -1,11 +1,11 @@
 import {
   computeNodeText,
   layoutMindmap
-} from "./chunk-5VXU6MND.js";
+} from "./chunk-23THM67F.js";
 import {
   extractExportSvg,
   runInExportContainer
-} from "./chunk-JTSMEYIZ.js";
+} from "./chunk-L43KTQTW.js";
 import {
   renderInlineText
 } from "./chunk-3HDBAXF5.js";
@@ -17,12 +17,16 @@ import {
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  layoutInlineHeader
+} from "./chunk-6VJCURWU.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-QDOYT6UW.js";
 import {
+  getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-J7HQPVYH.js";
+} from "./chunk-ES66QH6J.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
@@ -32,24 +36,25 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   parseMindmap
-} from "./chunk-OJ435DQZ.js";
+} from "./chunk-KF575IXC.js";
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
 import {
   LEGEND_GROUP_GAP
-} from "./chunk-Q5IHQ4NW.js";
+} from "./chunk-SCJ7CAJF.js";
 import {
   contrastText,
   shapeFill
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 import {
   fillModeFromOptions,
+  legendInlineRequested,
   legendSuppressed
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 
 // src/mindmap/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -105,8 +110,33 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
   const showTitle = !!parsed.title && parsed.options["no-title"] !== "on";
   const fixedTitle = !isExport && showTitle;
   const titleReserve = fixedTitle ? TITLE_HEIGHT : 0;
+  const inlineRequested = legendInlineRequested(parsed.options);
+  const legendExtent = inlineRequested && fixedLegend ? getLegendExtent(
+    {
+      groups: parsed.tagGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: isExport ? "export" : "preview"
+    },
+    { activeGroup: activeTagGroup ?? null },
+    containerWidth
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend: fixedLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth,
+    titleBandHeight: titleReserve,
+    legendReserve,
+    titleBaselineY: DIAGRAM_PADDING + TITLE_FONT_SIZE,
+    titleFontSize: TITLE_FONT_SIZE
+  });
   const availWidth = containerWidth;
-  const availHeight = containerHeight - DIAGRAM_PADDING * 2 - legendReserve - titleReserve;
+  const availHeight = containerHeight - DIAGRAM_PADDING * 2 - (header.inline ? 0 : legendReserve) - titleReserve;
   let ctx = isExport ? ScaleContext.identity() : ScaleContext.fromBox(
     availWidth,
     layout.width,
@@ -147,7 +177,7 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
   const scaledWidth = renderLayout.width * fitScale;
   const scaledHeight = renderLayout.height * fitScale;
   const offsetX = Math.max(0, (availWidth - scaledWidth) / 2);
-  const offsetY = DIAGRAM_PADDING + legendReserve + titleReserve + Math.max(0, (availHeight - scaledHeight) / 2);
+  const offsetY = DIAGRAM_PADDING + (header.inline ? 0 : legendReserve) + titleReserve + Math.max(0, (availHeight - scaledHeight) / 2);
   const mainG = svg.append("g").attr(
     "transform",
     `translate(${offsetX}, ${offsetY})${fitScale < 1 ? ` scale(${fitScale})` : ""}`
@@ -157,9 +187,9 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
   }
   if (showTitle) {
     const titleParent = fixedTitle ? svg : mainG;
-    const titleX = fixedTitle ? containerWidth / 2 : renderLayout.width / 2;
+    const titleX = fixedTitle ? header.titleX : renderLayout.width / 2;
     const titleY = fixedTitle ? DIAGRAM_PADDING + TITLE_FONT_SIZE : TITLE_FONT_SIZE;
-    const titleText = titleParent.append("text").attr("x", titleX).attr("y", titleY).attr("text-anchor", "middle").attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).attr("class", "chart-title").text(parsed.title);
+    const titleText = titleParent.append("text").attr("x", titleX).attr("y", titleY).attr("text-anchor", fixedTitle ? header.titleAnchor : "middle").attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).attr("class", "chart-title").text(parsed.title);
     if (parsed.titleLineNumber) {
       titleText.attr("data-line-number", parsed.titleLineNumber);
     }
@@ -168,7 +198,10 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
     }
   }
   if (fixedLegend) {
-    const legendG = svg.append("g").attr("class", "mindmap-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING + titleReserve})`);
+    const legendG = svg.append("g").attr("class", "mindmap-legend-fixed").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${DIAGRAM_PADDING + titleReserve})`
+    );
     const usedValues = /* @__PURE__ */ new Map();
     for (const node of renderLayout.nodes) {
       for (const tg of parsed.tagGroups) {
@@ -209,7 +242,10 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
           entries: tg.entries.filter((e) => used?.has(e.value.toLowerCase())).map((e) => ({ value: e.value, color: e.color }))
         };
       }),
-      position: { placement: "top-center", titleRelation: "below-title" },
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
       mode: options?.exportMode ? "export" : "preview",
       ...controlsToggles !== void 0 && { controlsGroup: controlsToggles },
       ...options?.controlsHost !== void 0 && {
@@ -390,4 +426,4 @@ export {
   renderMindmap,
   renderMindmapForExport
 };
-//# sourceMappingURL=chunk-KQYQECWQ.js.map
+//# sourceMappingURL=chunk-JXFB3APA.js.map

package/dist/{chunk-OJ435DQZ.js → chunk-KF575IXC.js}

@@ -10,7 +10,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 import {
   MINDMAP_REGISTRY,
   OPTION_NOCOLON_RE,
@@ -22,13 +22,13 @@ import {
   tryParseSharedOption,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   formatDgmoError,
   makeDgmoError,
   makeFail,
   suggest
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/mindmap/parser.ts
 var KNOWN_OPTIONS = /* @__PURE__ */ new Set(["active-tag"]);
@@ -323,4 +323,4 @@ function findMetadataParent(indent, indentStack) {
 export {
   parseMindmap
 };
-//# sourceMappingURL=chunk-OJ435DQZ.js.map
+//# sourceMappingURL=chunk-KF575IXC.js.map

package/dist/{chunk-IOIMQHQ6.js → chunk-KIGV66SP.js}

@@ -11,7 +11,7 @@ import {
   LEGEND_PILL_FONT_SIZE,
   LEGEND_PILL_PAD,
   measureLegendText
-} from "./chunk-Q5IHQ4NW.js";
+} from "./chunk-SCJ7CAJF.js";
 import {
   measureText
 } from "./chunk-4ASYQ347.js";
@@ -19,7 +19,7 @@ import {
   injectDefaultTagMetadata,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 
 // src/sitemap/layout.ts
 import dagre from "@dagrejs/dagre";
@@ -617,4 +617,4 @@ function layoutSitemap(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, e
 export {
   layoutSitemap
 };
-//# sourceMappingURL=chunk-IOIMQHQ6.js.map
+//# sourceMappingURL=chunk-KIGV66SP.js.map

package/dist/{chunk-ICKXIMBA.js → chunk-KSPCR75O.js}

@@ -6,19 +6,19 @@ import {
   formatPct,
   resolveCellColor,
   resolveColorMode
-} from "./chunk-6OYDOQ2Q.js";
+} from "./chunk-2UZVMWSQ.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-QDOYT6UW.js";
 import {
   getMaxLegendReservedHeight
-} from "./chunk-J7HQPVYH.js";
+} from "./chunk-ES66QH6J.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
 import {
   LEGEND_GROUP_GAP
-} from "./chunk-Q5IHQ4NW.js";
+} from "./chunk-SCJ7CAJF.js";
 import {
   measureText
 } from "./chunk-4ASYQ347.js";
@@ -29,10 +29,10 @@ import {
   hexToHSL,
   hslToHex,
   relativeLuminance
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 
 // src/treemap/renderer-radial.ts
 import * as d3Selection from "d3-selection";
@@ -422,4 +422,4 @@ export {
   renderTreemapRadialForExport,
   renderTreemapRadial
 };
-//# sourceMappingURL=chunk-ICKXIMBA.js.map
+//# sourceMappingURL=chunk-KSPCR75O.js.map

package/dist/{chunk-JTSMEYIZ.js → chunk-L43KTQTW.js}

@@ -1,3 +1,6 @@
+import {
+  serializeSvg
+} from "./chunk-NZ5QVASG.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
@@ -27,11 +30,11 @@ function extractExportSvg(container, theme, palette) {
   svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
   svgEl.style.fontFamily = FONT_FAMILY;
   svgEl.querySelectorAll("[data-export-ignore]").forEach((el) => el.remove());
-  return svgEl.outerHTML;
+  return serializeSvg(svgEl);
 }
 
 export {
   runInExportContainer,
   extractExportSvg
 };
-//# sourceMappingURL=chunk-JTSMEYIZ.js.map
+//# sourceMappingURL=chunk-L43KTQTW.js.map

package/dist/{chunk-DLU643TF.js → chunk-LV5BFA24.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-7TF3QOOD.js";
 import {
   tryCollectNote
-} from "./chunk-WWHECSYZ.js";
+} from "./chunk-ST3ZNEUQ.js";
 import {
   resolveNotes
-} from "./chunk-QZAW5SFH.js";
+} from "./chunk-7NK42OIB.js";
 import {
   parseInArrowLabel
-} from "./chunk-WF64MW5G.js";
+} from "./chunk-RRX4Z4TH.js";
 import {
   displayName,
   normalizeName
@@ -21,7 +21,7 @@ import {
   measureIndent,
   parseFirstLine,
   tryParseSharedOption
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   NAME_DIAGNOSTIC_CODES,
   emit,
@@ -29,7 +29,7 @@ import {
   makeDgmoError,
   nameMergedMessage,
   suggest
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/graph/flowchart-parser.ts
 function nodeId(shape, label) {
@@ -470,4 +470,4 @@ export {
   looksLikeFlowchart,
   extractSymbols
 };
-//# sourceMappingURL=chunk-DLU643TF.js.map
+//# sourceMappingURL=chunk-LV5BFA24.js.map

package/dist/{chunk-RJ5LBZ5U.js → chunk-MD2KWAXJ.js}

@@ -1,26 +1,27 @@
 import {
   buildSwatches
-} from "./chunk-B4XS2AF2.js";
+} from "./chunk-FWVKPEG3.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
 import {
   fixedParts,
+  fixedTimeCells,
   formatTime,
   handAngles,
   rampColor,
   sunLine,
   workStatus,
   zoneParts
-} from "./chunk-APKUAJ2L.js";
+} from "./chunk-A2RUBBVT.js";
 import {
   contrastText,
   mix,
   themeBaseBg
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   resolveColor
-} from "./chunk-ZKPPI6BF.js";
+} from "./chunk-EXNKNJ65.js";
 
 // src/clock/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -307,12 +308,12 @@ function drawRow(svg, entry, index, parsed, now, rowTop, rowH, geom, col) {
     const baseY = center + 16;
     const capTop = baseY - mainFont * 0.7;
     const sf = 20;
-    const mainW = [...ts.main].reduce(
-      (w, c) => w + mainFont * (c === ":" ? 0.334 : 0.6),
-      0
-    );
-    const stackX = contentLeft + mainW + 5;
-    g.append("text").attr("data-dgmo-clock-digital", "").attr("data-dgmo-clock-digital-part", "main").attr("x", contentLeft).attr("y", baseY).attr("fill", timeColor).attr("font-family", FONT_FAMILY).attr("font-size", mainFont).attr("font-weight", 600).attr("textLength", mainW).attr("lengthAdjust", "spacing").style("font-variant-numeric", "tabular-nums").text(ts.main);
+    const gap = 5;
+    const { cells, width: mainW } = fixedTimeCells(ts.main, contentLeft, mainFont);
+    const stackX = contentLeft + mainW + gap;
+    const mainText = g.append("text").attr("data-dgmo-clock-digital", "").attr("data-dgmo-clock-digital-part", "main").attr("y", baseY).attr("text-anchor", "middle").attr("fill", timeColor).attr("font-family", FONT_FAMILY).attr("font-size", mainFont).attr("font-weight", 600).attr("data-dgmo-clock-x0", contentLeft).attr("data-dgmo-clock-fs", mainFont).attr("data-dgmo-clock-gap", gap);
+    for (const c of cells)
+      mainText.append("tspan").attr("x", c.x).text(c.ch);
     g.append("text").attr("data-dgmo-clock-digital-part", "sec").attr("x", stackX).attr("y", capTop + sf * 0.72).attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", sf).attr("font-weight", 600).style("font-variant-numeric", "tabular-nums").text(`:${ts.sec}`);
     if (ts.ap)
       g.append("text").attr("data-dgmo-clock-digital-part", "ap").attr("x", stackX).attr("y", baseY).attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", sf).attr("font-weight", 600).text(ts.ap);
@@ -471,14 +472,13 @@ function drawColumns(body, parsed, now, top, geom, col) {
       const gap = 11;
       const cap = 0.7;
       const tf = fitFont(ts.main, 54, innerW - 30 - gap, 20);
-      const mainW = [...ts.main].reduce(
-        (w, c) => w + tf * (c === ":" ? 0.334 : 0.6),
-        0
-      );
+      const mainW = fixedTimeCells(ts.main, 0, tf).width;
       const stackW = Math.max(estWidth(`:${ts.sec}`, sf), estWidth(ts.ap, sf));
       const gLeft = cx - (mainW + gap + stackW) / 2;
       const baseY = cy + tf * 0.34;
-      g.append("text").attr("data-dgmo-clock-digital", "").attr("data-dgmo-clock-digital-part", "main").attr("x", gLeft).attr("y", baseY).attr("fill", timeColor).attr("font-family", FONT_FAMILY).attr("font-size", tf).attr("font-weight", 600).attr("textLength", mainW).attr("lengthAdjust", "spacing").style("font-variant-numeric", "tabular-nums").text(ts.main);
+      const mainText = g.append("text").attr("data-dgmo-clock-digital", "").attr("data-dgmo-clock-digital-part", "main").attr("y", baseY).attr("text-anchor", "middle").attr("fill", timeColor).attr("font-family", FONT_FAMILY).attr("font-size", tf).attr("font-weight", 600).attr("data-dgmo-clock-x0", gLeft).attr("data-dgmo-clock-fs", tf).attr("data-dgmo-clock-gap", gap);
+      for (const c of fixedTimeCells(ts.main, gLeft, tf).cells)
+        mainText.append("tspan").attr("x", c.x).text(c.ch);
       const stackX = gLeft + mainW + gap;
       g.append("text").attr("data-dgmo-clock-digital-part", "sec").attr("x", stackX).attr("y", baseY - tf * cap + sf * cap).attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", sf).attr("font-weight", 500).text(`:${ts.sec}`);
       if (ts.ap)
@@ -558,4 +558,4 @@ export {
   renderClock,
   renderClockForExport
 };
-//# sourceMappingURL=chunk-RJ5LBZ5U.js.map
+//# sourceMappingURL=chunk-MD2KWAXJ.js.map

package/dist/{chunk-KDK5EKUR.js → chunk-MGLJA5TK.js}

@@ -5,11 +5,11 @@ import {
   splitNameAndMeta,
   tryParseSharedOption,
   warnUnknownMetaKeys
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   makeDgmoError,
   makeFail
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/pyramid/parser.ts
 var MAX_LAYERS = 15;
@@ -127,4 +127,4 @@ function parsePyramid(content) {
 export {
   parsePyramid
 };
-//# sourceMappingURL=chunk-KDK5EKUR.js.map
+//# sourceMappingURL=chunk-MGLJA5TK.js.map

package/dist/{chunk-FR6UFVSV.js → chunk-N2KO445N.js}

@@ -4,10 +4,10 @@ import {
   renderNoteBadge,
   renderNoteBox,
   renderNoteConnector
-} from "./chunk-3IUHKMJI.js";
+} from "./chunk-U2BKSEKU.js";
 import {
   layoutERDiagram
-} from "./chunk-SSHS42QG.js";
+} from "./chunk-AN465MXC.js";
 import {
   EDGE_STROKE_WIDTH,
   NODE_STROKE_WIDTH
@@ -15,9 +15,18 @@ import {
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  layoutInlineHeader
+} from "./chunk-6VJCURWU.js";
+import {
+  serializeSvg
+} from "./chunk-NZ5QVASG.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-QDOYT6UW.js";
+import {
+  getLegendExtent
+} from "./chunk-ES66QH6J.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -28,10 +37,10 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   parseERDiagram
-} from "./chunk-B7N5KYXQ.js";
+} from "./chunk-ULR3BVNH.js";
 import {
   LEGEND_HEIGHT
-} from "./chunk-Q5IHQ4NW.js";
+} from "./chunk-SCJ7CAJF.js";
 import {
   measureText
 } from "./chunk-4ASYQ347.js";
@@ -39,15 +48,16 @@ import {
   contrastText,
   getSeriesColors,
   shapeFill
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 import {
   fillModeFromOptions,
+  legendInlineRequested,
   legendSuppressed
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 
 // src/er/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -274,7 +284,55 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   const sTitleFontSize = ctx.text(TITLE_FONT_SIZE);
   const sTitleY = ctx.structural(TITLE_Y);
   const naturalW = diagramW + sDiagramPadding * 2;
-  const naturalH = diagramH + titleHeight + legendReserveH + sDiagramPadding * 2;
+  const semanticRoles = useSemanticColors ? classifyEREntities([...parsed.tables], [...parsed.relationships]) : null;
+  const semanticActive = semanticRoles !== null && (semanticColorsActive ?? true);
+  const presentRoles = semanticRoles ? ROLE_ORDER.filter((role) => {
+    for (const r of semanticRoles.values()) {
+      if (r === role) return true;
+    }
+    return false;
+  }) : [];
+  const semanticGroups = presentRoles.length > 0 ? [
+    {
+      name: "Role",
+      entries: presentRoles.map((role) => ({
+        value: ROLE_LABELS[role],
+        color: palette.colors[ROLE_COLORS[role]]
+      }))
+    }
+  ] : [];
+  const showSemanticLegend = semanticRoles !== null && !noLegend && presentRoles.length > 0;
+  const inlineRequested = legendInlineRequested(parsed.options);
+  const hasLegend = hasTagLegend || showSemanticLegend;
+  const inlineLegendGroups = hasTagLegend ? parsed.tagGroups : semanticGroups;
+  const inlineActiveGroup = hasTagLegend ? activeTagGroup ?? null : semanticActive ? "Role" : null;
+  const inlineContainerW = exportDims?.width ?? naturalW;
+  const legendExtent = inlineRequested && hasLegend ? getLegendExtent(
+    {
+      groups: inlineLegendGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview"
+    },
+    { activeGroup: inlineActiveGroup },
+    inlineContainerW
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: inlineContainerW,
+    titleBandHeight: titleHeight,
+    legendReserve: legendReserveH,
+    titleBaselineY: sTitleY,
+    titleFontSize: sTitleFontSize
+  });
+  const effectiveReserveH = header.inline ? 0 : legendReserveH;
+  const naturalH = diagramH + titleHeight + effectiveReserveH + sDiagramPadding * 2;
   let viewW;
   let viewH;
   let scale;
@@ -283,24 +341,24 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   if (exportDims) {
     viewW = exportDims.width ?? naturalW;
     viewH = exportDims.height ?? naturalH;
-    const availH = viewH - titleHeight - legendReserveH;
+    const availH = viewH - titleHeight - effectiveReserveH;
     const scaleX = (viewW - sDiagramPadding * 2) / diagramW;
     const scaleY = (availH - sDiagramPadding * 2) / diagramH;
     scale = Math.min(MAX_SCALE, scaleX, scaleY);
     const scaledW = diagramW * scale;
     offsetX = (viewW - scaledW) / 2;
-    offsetY = titleHeight + legendReserveH + sDiagramPadding;
+    offsetY = titleHeight + effectiveReserveH + sDiagramPadding;
   } else {
     viewW = naturalW;
     viewH = naturalH;
     scale = 1;
     offsetX = sDiagramPadding;
-    offsetY = titleHeight + legendReserveH + sDiagramPadding;
+    offsetY = titleHeight + effectiveReserveH + sDiagramPadding;
   }
   if (viewW <= 0 || viewH <= 0) return;
   const svg = d3Selection.select(container).append("svg").attr("width", exportDims ? viewW : "100%").attr("height", exportDims ? viewH : "100%").attr("viewBox", `0 0 ${viewW} ${viewH}`).attr("preserveAspectRatio", "xMidYMid meet").style("font-family", FONT_FAMILY);
   if (showTitle) {
-    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", viewW / 2).attr("y", sTitleY).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).style(
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", sTitleY).attr("text-anchor", header.titleAnchor).attr("fill", palette.text).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).style(
       "cursor",
       onClickItem && parsed.titleLineNumber ? "pointer" : "default"
     ).text(parsed.title);
@@ -317,8 +375,6 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   }
   const contentG = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY}) scale(${scale})`);
   const seriesColors = getSeriesColors(palette);
-  const semanticRoles = useSemanticColors ? classifyEREntities([...parsed.tables], [...parsed.relationships]) : null;
-  const semanticActive = semanticRoles !== null && (semanticColorsActive ?? true);
   const useLabels = parsed.options["notation"] === "labels";
   for (const edge of layout.edges) {
     if (edge.points.length < 2) continue;
@@ -462,46 +518,43 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   }
   if (hasTagLegend) {
     const legendY = sDiagramPadding + titleHeight;
-    const legendG = svg.append("g").attr("class", "er-tag-legend").attr("transform", `translate(0,${legendY})`);
+    const legendG = svg.append("g").attr("class", "er-tag-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0,${legendY})`
+    );
     renderIntegratedLegend(legendG, {
       groups: parsed.tagGroups,
       activeGroup: activeTagGroup ?? null,
       mode: exportMode ? "export" : "preview",
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
       palette,
       isDark,
       width: viewW
     });
     legendG.selectAll("[data-legend-group]").classed("er-legend-group", true);
   }
-  if (semanticRoles && !noLegend) {
-    const presentRoles = ROLE_ORDER.filter((role) => {
-      for (const r of semanticRoles.values()) {
-        if (r === role) return true;
-      }
-      return false;
+  if (showSemanticLegend) {
+    const legendY = sDiagramPadding + titleHeight;
+    const legendG = svg.append("g").attr("class", "er-semantic-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0,${legendY})`
+    );
+    renderIntegratedLegend(legendG, {
+      groups: semanticGroups,
+      activeGroup: semanticActive ? "Role" : null,
+      mode: exportMode ? "export" : "preview",
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
+      palette,
+      isDark,
+      width: viewW
     });
-    if (presentRoles.length > 0) {
-      const legendY = sDiagramPadding + titleHeight;
-      const semanticGroups = [
-        {
-          name: "Role",
-          entries: presentRoles.map((role) => ({
-            value: ROLE_LABELS[role],
-            color: palette.colors[ROLE_COLORS[role]]
-          }))
-        }
-      ];
-      const legendG = svg.append("g").attr("class", "er-semantic-legend").attr("transform", `translate(0,${legendY})`);
-      renderIntegratedLegend(legendG, {
-        groups: semanticGroups,
-        activeGroup: semanticActive ? "Role" : null,
-        mode: exportMode ? "export" : "preview",
-        palette,
-        isDark,
-        width: viewW
-      });
-      legendG.selectAll("[data-legend-group]").classed("er-legend-group", true);
-    }
+    legendG.selectAll("[data-legend-group]").classed("er-legend-group", true);
   }
 }
 function renderERDiagramForExport(content, theme, palette) {
@@ -540,7 +593,7 @@ function renderERDiagramForExport(content, theme, palette) {
     }
     svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     svgEl.style.fontFamily = FONT_FAMILY;
-    return svgEl.outerHTML;
+    return serializeSvg(svgEl);
   } finally {
     document.body.removeChild(container);
   }
@@ -550,4 +603,4 @@ export {
   renderERDiagram,
   renderERDiagramForExport
 };
-//# sourceMappingURL=chunk-FR6UFVSV.js.map
+//# sourceMappingURL=chunk-N2KO445N.js.map