@diagrammo/dgmo 0.1.4 → 0.1.6

package/README.md

@@ -50,8 +50,8 @@ dgmo diagram.dgmo --theme dark --palette catppuccin
 
 | Option | Values | Default |
 |---|---|---|
-| `--theme` | `light`, `dark`, `transparent` | `light` |
-| `--palette` | `nord`, `solarized`, `catppuccin`, `rose-pine`, `gruvbox`, `tokyo-night`, `one-dark`, `bold` | `nord` |
+| --theme | light, dark, transparent | light |
+| --palette | nord, solarized, catppuccin, rose-pine, gruvbox, tokyo-night, one-dark, bold | nord |
 
 ## How it works
 

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();
@@ -2124,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",
@@ -2449,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;
@@ -2480,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 = {
@@ -4445,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);
@@ -5050,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);
@@ -5058,6 +5068,7 @@ async function renderD3ForExport(content, theme, palette) {
 
 // src/cli.ts
 init_registry();
+init_fonts();
 var PALETTES = [
   "nord",
   "solarized",
@@ -5160,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, {
@@ -2124,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",
@@ -2449,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;
@@ -3163,6 +3170,7 @@ function buildChartJsConfig(parsed, palette, _isDark) {
 }
 
 // src/echarts.ts
+init_fonts();
 init_colors();
 init_palettes();
 function parseEChart(content, palette) {
@@ -3397,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 = {
@@ -4045,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 = {
@@ -6003,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(
@@ -6053,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);
@@ -6658,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);