@diagrammo/dgmo 0.53.0 → 0.55.0

package/dist/{chunk-HORZ5H2L.js → chunk-IG6J7JWH.js}

@@ -1,9 +1,9 @@
-import {
-  renderInlineText
-} from "./chunk-3HDBAXF5.js";
 import {
   renderNodeCard
 } from "./chunk-H3HFC3SQ.js";
+import {
+  renderInlineText
+} from "./chunk-3HDBAXF5.js";
 import {
   CARD_RADIUS,
   COLLAPSE_BAR_HEIGHT,
@@ -23,12 +23,16 @@ import {
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  layoutInlineHeader
+} from "./chunk-US3P2DQO.js";
 import {
   renderIntegratedLegend
-} from "./chunk-W5KMNC5U.js";
+} from "./chunk-ASPS5O6F.js";
 import {
+  getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-774C2FF3.js";
+} from "./chunk-GRXPFBYC.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
@@ -39,12 +43,6 @@ import {
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
-import {
-  contrastText,
-  mix,
-  shapeFill,
-  themeBaseBg
-} from "./chunk-JYDMBWRP.js";
 import {
   EYE_CLOSED_PATH,
   EYE_OPEN_PATH,
@@ -52,17 +50,24 @@ import {
   LEGEND_EYE_SIZE,
   LEGEND_GROUP_GAP,
   LEGEND_HEIGHT
-} from "./chunk-4RGZFA7H.js";
+} from "./chunk-Q5IHQ4NW.js";
 import {
   measureText
 } from "./chunk-4ASYQ347.js";
+import {
+  contrastText,
+  mix,
+  shapeFill,
+  themeBaseBg
+} from "./chunk-JYDMBWRP.js";
 import {
   tagAttrKey
-} from "./chunk-CMVZWP32.js";
+} from "./chunk-JR7Q6GHE.js";
 import {
   fillModeFromOptions,
+  legendInlineRequested,
   legendSuppressed
-} from "./chunk-YJVA3QUU.js";
+} from "./chunk-A2ARDILY.js";
 
 // src/sitemap/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -138,7 +143,33 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     ) : LEGEND_HEIGHT
   );
   const legendReserveH = fixedLegend ? sLegendHeight + sLegendFixedGap : 0;
-  const fixedReserveTop = fixedTitleH + legendReserveH;
+  const inlineRequested = legendInlineRequested(parsed.options);
+  const legendExtent = inlineRequested && fixedTitle ? getLegendExtent(
+    {
+      groups: parsed.tagGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview",
+      capsulePillAddonWidth: LEGEND_EYE_SIZE + LEGEND_EYE_GAP
+    },
+    { activeGroup: activeTagGroup ?? null },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend: fixedTitle,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: fixedTitleH,
+    legendReserve: legendReserveH,
+    titleBaselineY: sDiagramPadding + sTitleFontSize,
+    titleFontSize: sTitleFontSize
+  });
+  const fixedReserveTop = header.inline ? fixedTitleH : fixedTitleH + legendReserveH;
   const fixedReserveBottom = 0;
   const titleOffset = !fixedTitle && showTitle ? sTitleHeight : 0;
   const diagramW = layout.width;
@@ -340,7 +371,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     );
   }
   if (fixedTitle) {
-    const titleEl = svg.append("text").attr("x", width / 2).attr("y", sDiagramPadding + sTitleFontSize).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("class", "sitemap-title chart-title").style("font-family", FONT_FAMILY);
+    const titleEl = svg.append("text").attr("x", header.titleX).attr("y", sDiagramPadding + sTitleFontSize).attr("text-anchor", header.titleAnchor).attr("fill", palette.text).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("class", "sitemap-title chart-title").style("font-family", FONT_FAMILY);
     if (parsed.titleLineNumber) {
       titleEl.attr("data-line-number", parsed.titleLineNumber);
       if (onClickItem) {
@@ -350,7 +381,10 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     titleEl.text(parsed.title);
   }
   if (fixedLegend) {
-    const legendParent = svg.append("g").attr("class", "sitemap-legend-fixed").attr("transform", `translate(0, ${sDiagramPadding + fixedTitleH})`);
+    const legendParent = svg.append("g").attr("class", "sitemap-legend-fixed").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${sDiagramPadding + fixedTitleH})`
+    );
     if (activeTagGroup) {
       legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
     }
@@ -362,11 +396,12 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
       activeTagGroup,
       width,
       hiddenAttributes,
-      exportMode
+      exportMode,
+      header.inline
     );
   }
 }
-function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fixedWidth, hiddenAttributes, exportMode) {
+function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fixedWidth, hiddenAttributes, exportMode, inlineHeader) {
   if (legendGroups.length === 0) return;
   const groups = legendGroups.map((g) => ({
     name: g.name,
@@ -382,6 +417,10 @@ function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fix
     groups,
     activeGroup: activeTagGroup ?? null,
     mode: exportMode ? "export" : "preview",
+    position: {
+      placement: "top-center",
+      titleRelation: inlineHeader ? "inline-with-title" : "below-title"
+    },
     capsulePillAddonWidth: eyeAddonWidth,
     palette,
     isDark,
@@ -407,8 +446,8 @@ function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fix
   }
 }
 async function renderSitemapForExport(content, theme, palette) {
-  const { parseSitemap } = await import("./parser-UWRX52PC.js");
-  const { layoutSitemap } = await import("./layout-KPQWJNAG.js");
+  const { parseSitemap } = await import("./parser-S6NWSIJO.js");
+  const { layoutSitemap } = await import("./layout-UTMEVFHN.js");
   const { getPalette } = await import("./palettes-FGTNFARW.js");
   const isDark = theme === "dark";
   const effectivePalette = palette ?? (isDark ? getPalette("nord").dark : getPalette("nord").light);
@@ -458,4 +497,4 @@ export {
   renderSitemap,
   renderSitemapForExport
 };
-//# sourceMappingURL=chunk-HORZ5H2L.js.map
+//# sourceMappingURL=chunk-IG6J7JWH.js.map

package/dist/{chunk-VRRDUYOK.js → chunk-IIUYKQ5J.js}

@@ -1,6 +1,6 @@
 import {
   tryCollectNote
-} from "./chunk-ZXUAPTCK.js";
+} from "./chunk-4R5KIPNX.js";
 import {
   resolveNotes
 } from "./chunk-QZAW5SFH.js";
@@ -16,7 +16,7 @@ import {
   measureIndent,
   parseFirstLine,
   tryParseSharedOption
-} from "./chunk-YJVA3QUU.js";
+} from "./chunk-A2ARDILY.js";
 import {
   resolveColorWithDiagnostic
 } from "./chunk-ZKPPI6BF.js";
@@ -445,4 +445,4 @@ export {
   looksLikeClassDiagram,
   extractSymbols
 };
-//# sourceMappingURL=chunk-VRRDUYOK.js.map
+//# sourceMappingURL=chunk-IIUYKQ5J.js.map

package/dist/{chunk-GMAH572Z.js → chunk-INTAQV2Y.js}

@@ -11,7 +11,7 @@ import {
 import {
   injectDefaultTagMetadata,
   resolveTagColor
-} from "./chunk-CMVZWP32.js";
+} from "./chunk-JR7Q6GHE.js";
 
 // src/mindmap/text-wrap.ts
 var H_PAD = 16;
@@ -547,4 +547,4 @@ export {
   computeNodeText,
   layoutMindmap
 };
-//# sourceMappingURL=chunk-GMAH572Z.js.map
+//# sourceMappingURL=chunk-INTAQV2Y.js.map

package/dist/{chunk-6AUZPPAV.js → chunk-ITXL2KU5.js}

@@ -7,7 +7,7 @@ import {
   splitNameAndMeta,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-YJVA3QUU.js";
+} from "./chunk-A2ARDILY.js";
 import {
   makeDgmoError
 } from "./chunk-4W2PE66Q.js";
@@ -314,4 +314,4 @@ export {
   parseTimelineDate,
   parseTimelineEventLine
 };
-//# sourceMappingURL=chunk-6AUZPPAV.js.map
+//# sourceMappingURL=chunk-ITXL2KU5.js.map

package/dist/{chunk-KKHCNSKK.js → chunk-IWG2ECAO.js}

@@ -4,14 +4,14 @@ import {
 import {
   noteCanvasShift
 } from "./chunk-6EK55ART.js";
+import {
+  resolveNotes
+} from "./chunk-QZAW5SFH.js";
 import {
   measureText,
   truncateText,
   wrapTextToWidth
 } from "./chunk-4ASYQ347.js";
-import {
-  resolveNotes
-} from "./chunk-QZAW5SFH.js";
 
 // src/boxes-and-lines/label-placement.ts
 var EDGE_LABEL_FONT_SIZE = 11;
@@ -311,7 +311,7 @@ function computeNodeSize(node, reserveValueRow) {
   return { width: w, height: Math.max(NODE_HEIGHT, totalHeight) };
 }
 async function layoutBoxesAndLines(parsed, collapseInfo, layoutOptions) {
-  const { layoutBoxesAndLinesSearch } = await import("./layout-search-34DPZD43.js");
+  const { layoutBoxesAndLinesSearch } = await import("./layout-search-U2H4ORFJ.js");
   const searchOpts = {
     ...layoutOptions?.hideDescriptions !== void 0 && {
       hideDescriptions: layoutOptions.hideDescriptions
@@ -466,4 +466,4 @@ export {
   computeNodeSize,
   layoutBoxesAndLines
 };
-//# sourceMappingURL=chunk-KKHCNSKK.js.map
+//# sourceMappingURL=chunk-IWG2ECAO.js.map

package/dist/{chunk-GQ644SPD.js → chunk-JGCEFKZP.js}

@@ -25,16 +25,16 @@ import {
 } from "./chunk-3CIOJ5YJ.js";
 import {
   layoutOrg
-} from "./chunk-UKP5HWB5.js";
+} from "./chunk-UBQU2BY6.js";
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-W5KMNC5U.js";
+} from "./chunk-ASPS5O6F.js";
 import {
   getMaxLegendReservedHeight
-} from "./chunk-774C2FF3.js";
+} from "./chunk-GRXPFBYC.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
@@ -44,13 +44,7 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   parseOrg
-} from "./chunk-SGPFVDUL.js";
-import {
-  contrastText,
-  mix,
-  shapeFill,
-  themeBaseBg
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-MNS2ENXF.js";
 import {
   EYE_CLOSED_PATH,
   EYE_OPEN_PATH,
@@ -58,17 +52,23 @@ import {
   LEGEND_EYE_SIZE,
   LEGEND_GROUP_GAP,
   LEGEND_HEIGHT
-} from "./chunk-4RGZFA7H.js";
+} from "./chunk-Q5IHQ4NW.js";
 import {
   measureText
 } from "./chunk-4ASYQ347.js";
+import {
+  contrastText,
+  mix,
+  shapeFill,
+  themeBaseBg
+} from "./chunk-JYDMBWRP.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-CMVZWP32.js";
+} from "./chunk-JR7Q6GHE.js";
 import {
   fillModeFromOptions
-} from "./chunk-YJVA3QUU.js";
+} from "./chunk-A2ARDILY.js";
 
 // src/org/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -485,4 +485,4 @@ export {
   renderOrg,
   renderOrgForExport
 };
-//# sourceMappingURL=chunk-GQ644SPD.js.map
+//# sourceMappingURL=chunk-JGCEFKZP.js.map

package/dist/{chunk-HNBY6CNV.js → chunk-JQLSFZZP.js}

@@ -5,7 +5,7 @@ import {
   splitNameAndMeta,
   tryParseSharedOption,
   warnUnknownMetaKeys
-} from "./chunk-YJVA3QUU.js";
+} from "./chunk-A2ARDILY.js";
 import {
   makeDgmoError,
   makeFail
@@ -274,4 +274,4 @@ function parseCycle(content) {
 export {
   parseCycle
 };
-//# sourceMappingURL=chunk-HNBY6CNV.js.map
+//# sourceMappingURL=chunk-JQLSFZZP.js.map

package/dist/{chunk-CMVZWP32.js → chunk-JR7Q6GHE.js}

@@ -1,7 +1,7 @@
 import {
   stripQuotes,
   tokenizeQuoteAware
-} from "./chunk-YJVA3QUU.js";
+} from "./chunk-A2ARDILY.js";
 import {
   CATEGORICAL_COLOR_ORDER,
   RECOGNIZED_COLOR_NAMES,
@@ -250,4 +250,4 @@ export {
   resolveActiveTagGroup,
   matchTagBlockHeading
 };
-//# sourceMappingURL=chunk-CMVZWP32.js.map
+//# sourceMappingURL=chunk-JR7Q6GHE.js.map

package/dist/{chunk-LHILKFDP.js → chunk-KC3WBBI7.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-W5KMNC5U.js";
+} from "./chunk-ASPS5O6F.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -18,20 +18,20 @@ import {
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
-import {
-  contrastText,
-  shapeFill
-} from "./chunk-JYDMBWRP.js";
 import {
   LEGEND_HEIGHT
-} from "./chunk-4RGZFA7H.js";
+} from "./chunk-Q5IHQ4NW.js";
 import {
   measureText,
   wrapTextToWidth
 } from "./chunk-4ASYQ347.js";
+import {
+  contrastText,
+  shapeFill
+} from "./chunk-JYDMBWRP.js";
 import {
   fillModeFromOptions
-} from "./chunk-YJVA3QUU.js";
+} from "./chunk-A2ARDILY.js";
 import {
   resolveColor
 } from "./chunk-ZKPPI6BF.js";
@@ -676,7 +676,7 @@ function buildEdgeArc(src, tgt, cx, cy, radius, isClockwise, arrowLength = 0) {
 // src/cycle/renderer.ts
 var NODE_FONT_SIZE = 13;
 var DESC_FONT_SIZE2 = 11;
-var EDGE_LABEL_FONT_SIZE2 = 11;
+var EDGE_LABEL_FONT_SIZE2 = 13;
 var DESC_LINE_HEIGHT2 = 15;
 var TITLE_AREA_HEIGHT = 50;
 function renderCycle(container, parsed, palette, isDark, onClickItem, exportDims, viewState, renderOptions) {
@@ -969,4 +969,4 @@ export {
   renderCycle,
   renderCycleForExport
 };
-//# sourceMappingURL=chunk-LHILKFDP.js.map
+//# sourceMappingURL=chunk-KC3WBBI7.js.map

package/dist/{chunk-GABSL6TH.js → chunk-KK3L5NVK.js}

@@ -5,14 +5,14 @@ import {
   matchTagBlockHeading,
   stripDefaultModifier,
   validateTagGroupNames
-} from "./chunk-CMVZWP32.js";
+} from "./chunk-JR7Q6GHE.js";
 import {
   OPTION_NOCOLON_RE,
   extractColor,
   measureIndent,
   parseFirstLine,
   tryParseSharedOption
-} from "./chunk-YJVA3QUU.js";
+} from "./chunk-A2ARDILY.js";
 import {
   formatDgmoError,
   makeDgmoError
@@ -729,4 +729,4 @@ export {
   resetWireframeIds,
   parseWireframe
 };
-//# sourceMappingURL=chunk-GABSL6TH.js.map
+//# sourceMappingURL=chunk-KK3L5NVK.js.map

package/dist/{chunk-LC3FFD43.js → chunk-L2DIXZUT.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-3IUHKMJI.js";
 import {
   layoutERDiagram
-} from "./chunk-VGNIDAPQ.js";
+} from "./chunk-SSHS42QG.js";
 import {
   EDGE_STROKE_WIDTH,
   NODE_STROKE_WIDTH
@@ -15,9 +15,15 @@ import {
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  layoutInlineHeader
+} from "./chunk-US3P2DQO.js";
 import {
   renderIntegratedLegend
-} from "./chunk-W5KMNC5U.js";
+} from "./chunk-ASPS5O6F.js";
+import {
+  getLegendExtent
+} from "./chunk-GRXPFBYC.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -28,26 +34,27 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   parseERDiagram
-} from "./chunk-BR7AYN76.js";
-import {
-  contrastText,
-  getSeriesColors,
-  shapeFill
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-NL7FUIVD.js";
 import {
   LEGEND_HEIGHT
-} from "./chunk-4RGZFA7H.js";
+} from "./chunk-Q5IHQ4NW.js";
 import {
   measureText
 } from "./chunk-4ASYQ347.js";
+import {
+  contrastText,
+  getSeriesColors,
+  shapeFill
+} from "./chunk-JYDMBWRP.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-CMVZWP32.js";
+} from "./chunk-JR7Q6GHE.js";
 import {
   fillModeFromOptions,
+  legendInlineRequested,
   legendSuppressed
-} from "./chunk-YJVA3QUU.js";
+} from "./chunk-A2ARDILY.js";
 
 // src/er/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -274,7 +281,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 +338,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 +372,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 +515,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) {
@@ -550,4 +600,4 @@ export {
   renderERDiagram,
   renderERDiagramForExport
 };
-//# sourceMappingURL=chunk-LC3FFD43.js.map
+//# sourceMappingURL=chunk-L2DIXZUT.js.map