@diagrammo/dgmo 0.1.3 → 0.1.5

package/dist/cli.cjs

@@ -30,6 +30,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
+// src/fonts.ts
+var FONT_FAMILY, DEFAULT_FONT_NAME;
+var init_fonts = __esm({
+  "src/fonts.ts"() {
+    "use strict";
+    FONT_FAMILY = "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif";
+    DEFAULT_FONT_NAME = "Helvetica";
+  }
+});
+
 // src/colors.ts
 function resolveColor(color, palette) {
   const lower = color.toLowerCase();
@@ -1627,6 +1637,16 @@ __export(renderer_exports, {
   groupMessagesBySection: () => groupMessagesBySection,
   renderSequenceDiagram: () => renderSequenceDiagram
 });
+function mix(a, b, pct) {
+  const parse = (h) => {
+    const r = h.replace("#", "");
+    const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
+    return [parseInt(f.substring(0, 2), 16), parseInt(f.substring(2, 4), 16), parseInt(f.substring(4, 6), 16)];
+  };
+  const [ar, ag, ab] = parse(a), [br, bg, bb] = parse(b), t = pct / 100;
+  const c = (x, y) => Math.round(x * t + y * (1 - t)).toString(16).padStart(2, "0");
+  return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
+}
 function renderRectParticipant(g, palette, isDark) {
   g.append("rect").attr("x", -W / 2).attr("y", 0).attr("width", W).attr("height", H).attr("rx", 2).attr("ry", 2).attr("fill", fill(palette, isDark)).attr("stroke", stroke(palette)).attr("stroke-width", SW);
 }
@@ -1916,7 +1936,10 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
   }
   const allRenderSteps = buildRenderSequence(messages);
-  const renderSteps = hiddenMsgIndices.size > 0 ? allRenderSteps.filter((s) => !hiddenMsgIndices.has(s.messageIndex)) : allRenderSteps;
+  let renderSteps = hiddenMsgIndices.size > 0 ? allRenderSteps.filter((s) => !hiddenMsgIndices.has(s.messageIndex)) : allRenderSteps;
+  renderSteps = renderSteps.filter(
+    (s) => s.type === "call" || s.label
+  );
   const activations = activationsOff ? [] : computeActivations(renderSteps);
   const stepSpacing = 35;
   const BLOCK_HEADER_SPACE = 30;
@@ -2111,10 +2134,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   participants.forEach((p, i) => {
     participantX.set(p.id, offsetX + i * PARTICIPANT_GAP);
   });
-  const svg = d3Selection.select(container).append("svg").attr("width", "100%").attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style(
-    "font-family",
-    "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif"
-  );
+  const svg = d3Selection.select(container).append("svg").attr("width", "100%").attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "seq-arrowhead").attr("viewBox", `0 0 ${ARROWHEAD_SIZE} ${ARROWHEAD_SIZE}`).attr("refX", ARROWHEAD_SIZE).attr("refY", ARROWHEAD_SIZE / 2).attr("markerWidth", ARROWHEAD_SIZE).attr("markerHeight", ARROWHEAD_SIZE).attr("orient", "auto").append("polygon").attr(
     "points",
@@ -2140,7 +2160,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const boxY = participantStartY - GROUP_PADDING_TOP;
     const boxH = PARTICIPANT_BOX_HEIGHT + GROUP_PADDING_TOP + GROUP_PADDING_BOTTOM;
     const resolvedGroupColor = group.color ? resolveColor(group.color, palette) : void 0;
-    const fillColor = resolvedGroupColor ? `color-mix(in srgb, ${resolvedGroupColor} 10%, ${isDark ? palette.surface : palette.bg})` : isDark ? palette.surface : palette.bg;
+    const fillColor = resolvedGroupColor ? mix(resolvedGroupColor, isDark ? palette.surface : palette.bg, 10) : isDark ? palette.surface : palette.bg;
     const strokeColor = resolvedGroupColor || palette.textMuted;
     svg.append("rect").attr("x", minX).attr("y", boxY).attr("width", maxX - minX).attr("height", boxH).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("class", "group-box").attr("data-group-line", String(group.lineNumber));
     svg.append("text").attr("x", minX + 8).attr("y", boxY + GROUP_LABEL_SIZE + 4).attr("fill", strokeColor).attr("font-size", GROUP_LABEL_SIZE).attr("font-weight", "bold").attr("opacity", 0.7).attr("class", "group-label").attr("data-group-line", String(group.lineNumber)).text(group.name);
@@ -2263,7 +2283,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       if (msg) coveredLines.push(msg.lineNumber);
     }
     svg.append("rect").attr("x", x).attr("y", y1).attr("width", ACTIVATION_WIDTH).attr("height", y2 - y1).attr("fill", isDark ? palette.surface : palette.bg);
-    const actFill = `color-mix(in srgb, ${palette.primary} ${isDark ? "15%" : "30%"}, ${isDark ? palette.surface : palette.bg})`;
+    const actFill = mix(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
     svg.append("rect").attr("x", x).attr("y", y1).attr("width", ACTIVATION_WIDTH).attr("height", y2 - y1).attr("fill", actFill).attr("stroke", palette.primary).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("data-participant-id", act.participantId).attr("data-msg-lines", coveredLines.join(",")).attr("class", "activation");
   });
   for (const ln of deferredLines) {
@@ -2436,6 +2456,7 @@ var init_renderer = __esm({
     "use strict";
     d3Selection = __toESM(require("d3-selection"), 1);
     init_colors();
+    init_fonts();
     init_parser();
     PARTICIPANT_GAP = 160;
     PARTICIPANT_BOX_WIDTH = 120;
@@ -2447,7 +2468,7 @@ var init_renderer = __esm({
     MESSAGE_START_OFFSET = 30;
     LIFELINE_TAIL = 30;
     ARROWHEAD_SIZE = 8;
-    fill = (palette, isDark) => `color-mix(in srgb, ${palette.primary} ${isDark ? "15%" : "30%"}, ${isDark ? palette.surface : palette.bg})`;
+    fill = (palette, isDark) => mix(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
     stroke = (palette) => palette.textMuted;
     SW = 1.5;
     W = PARTICIPANT_BOX_WIDTH;
@@ -2467,6 +2488,7 @@ var d3Selection2 = __toESM(require("d3-selection"), 1);
 var d3Shape = __toESM(require("d3-shape"), 1);
 var d3Array = __toESM(require("d3-array"), 1);
 var import_d3_cloud = __toESM(require("d3-cloud"), 1);
+init_fonts();
 init_colors();
 init_palettes();
 var DEFAULT_CLOUD_OPTIONS = {
@@ -4432,8 +4454,8 @@ function renderWordCloudAsync(container, parsed, palette, _isDark) {
       "transform",
       `translate(${width / 2},${titleHeight + cloudHeight / 2})`
     );
-    (0, import_d3_cloud.default)().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(4).rotate(rotateFn).fontSize((d) => d.size).font("system-ui, -apple-system, sans-serif").on("end", (layoutWords) => {
-      g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", "system-ui, -apple-system, sans-serif").style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).attr("text-anchor", "middle").attr(
+    (0, import_d3_cloud.default)().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(4).rotate(rotateFn).fontSize((d) => d.size).font(FONT_FAMILY).on("end", (layoutWords) => {
+      g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", FONT_FAMILY).style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).attr("text-anchor", "middle").attr(
         "transform",
         (d) => `translate(${d.x},${d.y}) rotate(${d.rotate})`
       ).text((d) => d.text);
@@ -5037,6 +5059,7 @@ async function renderD3ForExport(content, theme, palette) {
       svgEl.style.background = "none";
     }
     svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgEl.style.fontFamily = FONT_FAMILY;
     return svgEl.outerHTML;
   } finally {
     document.body.removeChild(container);
@@ -5045,6 +5068,7 @@ async function renderD3ForExport(content, theme, palette) {
 
 // src/cli.ts
 init_registry();
+init_fonts();
 var PALETTES = [
   "nord",
   "solarized",
@@ -5147,7 +5171,12 @@ function inferFormat(outputPath) {
 function svgToPng(svg, background) {
   const resvg = new import_resvg_js.Resvg(svg, {
     fitTo: { mode: "zoom", value: 2 },
-    ...background ? { background } : {}
+    ...background ? { background } : {},
+    font: {
+      loadSystemFonts: true,
+      defaultFontFamily: DEFAULT_FONT_NAME,
+      sansSerifFamily: DEFAULT_FONT_NAME
+    }
   });
   const rendered = resvg.render();
   return rendered.asPng();

package/dist/index.cjs

@@ -1617,6 +1617,15 @@ var init_palettes = __esm({
   }
 });
 
+// src/fonts.ts
+var FONT_FAMILY;
+var init_fonts = __esm({
+  "src/fonts.ts"() {
+    "use strict";
+    FONT_FAMILY = "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif";
+  }
+});
+
 // src/sequence/renderer.ts
 var renderer_exports = {};
 __export(renderer_exports, {
@@ -1627,6 +1636,16 @@ __export(renderer_exports, {
   groupMessagesBySection: () => groupMessagesBySection,
   renderSequenceDiagram: () => renderSequenceDiagram
 });
+function mix(a, b, pct) {
+  const parse = (h) => {
+    const r = h.replace("#", "");
+    const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
+    return [parseInt(f.substring(0, 2), 16), parseInt(f.substring(2, 4), 16), parseInt(f.substring(4, 6), 16)];
+  };
+  const [ar, ag, ab] = parse(a), [br, bg, bb] = parse(b), t = pct / 100;
+  const c = (x, y) => Math.round(x * t + y * (1 - t)).toString(16).padStart(2, "0");
+  return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
+}
 function renderRectParticipant(g, palette, isDark) {
   g.append("rect").attr("x", -W / 2).attr("y", 0).attr("width", W).attr("height", H).attr("rx", 2).attr("ry", 2).attr("fill", fill(palette, isDark)).attr("stroke", stroke(palette)).attr("stroke-width", SW);
 }
@@ -1916,7 +1935,10 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
   }
   const allRenderSteps = buildRenderSequence(messages);
-  const renderSteps = hiddenMsgIndices.size > 0 ? allRenderSteps.filter((s) => !hiddenMsgIndices.has(s.messageIndex)) : allRenderSteps;
+  let renderSteps = hiddenMsgIndices.size > 0 ? allRenderSteps.filter((s) => !hiddenMsgIndices.has(s.messageIndex)) : allRenderSteps;
+  renderSteps = renderSteps.filter(
+    (s) => s.type === "call" || s.label
+  );
   const activations = activationsOff ? [] : computeActivations(renderSteps);
   const stepSpacing = 35;
   const BLOCK_HEADER_SPACE = 30;
@@ -2111,10 +2133,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   participants.forEach((p, i) => {
     participantX.set(p.id, offsetX + i * PARTICIPANT_GAP);
   });
-  const svg = d3Selection.select(container).append("svg").attr("width", "100%").attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style(
-    "font-family",
-    "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif"
-  );
+  const svg = d3Selection.select(container).append("svg").attr("width", "100%").attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "seq-arrowhead").attr("viewBox", `0 0 ${ARROWHEAD_SIZE} ${ARROWHEAD_SIZE}`).attr("refX", ARROWHEAD_SIZE).attr("refY", ARROWHEAD_SIZE / 2).attr("markerWidth", ARROWHEAD_SIZE).attr("markerHeight", ARROWHEAD_SIZE).attr("orient", "auto").append("polygon").attr(
     "points",
@@ -2140,7 +2159,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const boxY = participantStartY - GROUP_PADDING_TOP;
     const boxH = PARTICIPANT_BOX_HEIGHT + GROUP_PADDING_TOP + GROUP_PADDING_BOTTOM;
     const resolvedGroupColor = group.color ? resolveColor(group.color, palette) : void 0;
-    const fillColor = resolvedGroupColor ? `color-mix(in srgb, ${resolvedGroupColor} 10%, ${isDark ? palette.surface : palette.bg})` : isDark ? palette.surface : palette.bg;
+    const fillColor = resolvedGroupColor ? mix(resolvedGroupColor, isDark ? palette.surface : palette.bg, 10) : isDark ? palette.surface : palette.bg;
     const strokeColor = resolvedGroupColor || palette.textMuted;
     svg.append("rect").attr("x", minX).attr("y", boxY).attr("width", maxX - minX).attr("height", boxH).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("class", "group-box").attr("data-group-line", String(group.lineNumber));
     svg.append("text").attr("x", minX + 8).attr("y", boxY + GROUP_LABEL_SIZE + 4).attr("fill", strokeColor).attr("font-size", GROUP_LABEL_SIZE).attr("font-weight", "bold").attr("opacity", 0.7).attr("class", "group-label").attr("data-group-line", String(group.lineNumber)).text(group.name);
@@ -2263,7 +2282,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       if (msg) coveredLines.push(msg.lineNumber);
     }
     svg.append("rect").attr("x", x).attr("y", y1).attr("width", ACTIVATION_WIDTH).attr("height", y2 - y1).attr("fill", isDark ? palette.surface : palette.bg);
-    const actFill = `color-mix(in srgb, ${palette.primary} ${isDark ? "15%" : "30%"}, ${isDark ? palette.surface : palette.bg})`;
+    const actFill = mix(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
     svg.append("rect").attr("x", x).attr("y", y1).attr("width", ACTIVATION_WIDTH).attr("height", y2 - y1).attr("fill", actFill).attr("stroke", palette.primary).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("data-participant-id", act.participantId).attr("data-msg-lines", coveredLines.join(",")).attr("class", "activation");
   });
   for (const ln of deferredLines) {
@@ -2436,6 +2455,7 @@ var init_renderer = __esm({
     "use strict";
     d3Selection = __toESM(require("d3-selection"), 1);
     init_colors();
+    init_fonts();
     init_parser();
     PARTICIPANT_GAP = 160;
     PARTICIPANT_BOX_WIDTH = 120;
@@ -2447,7 +2467,7 @@ var init_renderer = __esm({
     MESSAGE_START_OFFSET = 30;
     LIFELINE_TAIL = 30;
     ARROWHEAD_SIZE = 8;
-    fill = (palette, isDark) => `color-mix(in srgb, ${palette.primary} ${isDark ? "15%" : "30%"}, ${isDark ? palette.surface : palette.bg})`;
+    fill = (palette, isDark) => mix(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
     stroke = (palette) => palette.textMuted;
     SW = 1.5;
     W = PARTICIPANT_BOX_WIDTH;
@@ -3150,6 +3170,7 @@ function buildChartJsConfig(parsed, palette, _isDark) {
 }
 
 // src/echarts.ts
+init_fonts();
 init_colors();
 init_palettes();
 function parseEChart(content, palette) {
@@ -3384,7 +3405,7 @@ function buildEChartsOption(parsed, palette, _isDark) {
       color: textColor,
       fontSize: 18,
       fontWeight: "bold",
-      fontFamily: "system-ui, -apple-system, sans-serif"
+      fontFamily: FONT_FAMILY
     }
   } : void 0;
   const tooltipTheme = {
@@ -4032,6 +4053,7 @@ var d3Selection2 = __toESM(require("d3-selection"), 1);
 var d3Shape = __toESM(require("d3-shape"), 1);
 var d3Array = __toESM(require("d3-array"), 1);
 var import_d3_cloud = __toESM(require("d3-cloud"), 1);
+init_fonts();
 init_colors();
 init_palettes();
 var DEFAULT_CLOUD_OPTIONS = {
@@ -5990,8 +6012,8 @@ function renderWordCloud(container, parsed, palette, _isDark, onClickItem) {
     "transform",
     `translate(${width / 2},${titleHeight + cloudHeight / 2})`
   );
-  (0, import_d3_cloud.default)().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(4).rotate(rotateFn).fontSize((d) => d.size).font("system-ui, -apple-system, sans-serif").on("end", (layoutWords) => {
-    g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", "system-ui, -apple-system, sans-serif").style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).style(
+  (0, import_d3_cloud.default)().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(4).rotate(rotateFn).fontSize((d) => d.size).font(FONT_FAMILY).on("end", (layoutWords) => {
+    g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", FONT_FAMILY).style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).style(
       "cursor",
       (d) => onClickItem && d.lineNumber ? "pointer" : "default"
     ).attr("text-anchor", "middle").attr(
@@ -6040,8 +6062,8 @@ function renderWordCloudAsync(container, parsed, palette, _isDark) {
       "transform",
       `translate(${width / 2},${titleHeight + cloudHeight / 2})`
     );
-    (0, import_d3_cloud.default)().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(4).rotate(rotateFn).fontSize((d) => d.size).font("system-ui, -apple-system, sans-serif").on("end", (layoutWords) => {
-      g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", "system-ui, -apple-system, sans-serif").style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).attr("text-anchor", "middle").attr(
+    (0, import_d3_cloud.default)().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(4).rotate(rotateFn).fontSize((d) => d.size).font(FONT_FAMILY).on("end", (layoutWords) => {
+      g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", FONT_FAMILY).style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).attr("text-anchor", "middle").attr(
         "transform",
         (d) => `translate(${d.x},${d.y}) rotate(${d.rotate})`
       ).text((d) => d.text);
@@ -6645,6 +6667,7 @@ async function renderD3ForExport(content, theme, palette) {
       svgEl.style.background = "none";
     }
     svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgEl.style.fontFamily = FONT_FAMILY;
     return svgEl.outerHTML;
   } finally {
     document.body.removeChild(container);