@imontene/mdrender 2.10.0 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Cambios
 
+## 2.11.0 — 2026-11-06
+
+- **Acabado de los diagramas Mermaid**, en todos los temas:
+  - esquinas ligeramente redondeadas en todas las figuras: rectángulos, subgraphs, actores y
+    notas, y también rombos, hexágonos, paralelogramos, trapecios y banderas, redibujados con
+    las esquinas suavizadas;
+  - títulos de los subgraphs en negrita, medidos así por Mermaid para que no se desborden;
+  - rellenos de figuras y subgraphs con su color, pero al 72 % de opacidad, para que se vean el
+    fondo y las marcas de agua. Se quitó la sombra del estilo de Mermaid 12, que agrisaba los
+    rellenos translúcidos; los PDF con diagramas pesan menos, porque Chrome la guardaba como
+    imagen.
+
 ## 2.10.0 — 2026-11-04
 
 - **Tema de revista de tecnología** `--theme tech_magazine` (o `tech_magazine-dark`, con la

package/README.md

@@ -392,6 +392,12 @@ resumen se separan con una línea en blanco.
 - Si una fórmula o diagrama tiene un error, el documento se genera igual con una caja roja en
   su lugar, se informa `error: archivo.md:LÍNEA: mensaje` y el comando termina con código `2`.
 
+**Acabado de los diagramas**: en todos los temas, las figuras de Mermaid tienen las esquinas
+ligeramente redondeadas (rectángulos, rombos, hexágonos, paralelogramos, trapecios, banderas,
+subgraphs, actores y notas), los títulos de los subgraphs van en negrita, y el relleno de figuras
+y subgraphs conserva su color pero es algo transparente, de modo que se ven el fondo de la página
+y las marcas de agua.
+
 **Autoajuste de diagramas de flujo**: en el PDF, un diagrama más ancho que la columna o más alto
 que la página se reduce entero, y su texto puede quedar diminuto. Por eso mdrender dibuja cada
 `flowchart`/`graph` con varios anchos de ajuste de las etiquetas y se queda con el que imprime el

package/dist/render/mermaid-style.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The finish mdrender gives Mermaid diagrams, in every theme:
+ *
+ * - shapes with slightly rounded corners: rectangles (nodes, subgraphs, sequence actors and
+ *   notes) through CSS `rx`/`ry`, and polygon nodes (decision, hexagon, parallelogram,
+ *   trapezoid) redrawn as paths with eased corners, since an SVG polygon has no corner radius;
+ * - subgraph titles in bold;
+ * - shape and subgraph fills kept in their colours but partly transparent, so the page and its
+ *   watermarks show through.
+ *
+ * The CSS goes to Mermaid as `themeCSS`, so it applies while Mermaid measures labels: a bold
+ * subgraph title gets the room it needs. Polygons are rounded after rendering, which leaves the
+ * diagram's size unchanged.
+ */
+/** Corner radius of rectangles and polygon nodes, in CSS px. */
+export declare const CORNER_RADIUS = 5;
+/** Opacity of shape and subgraph fills (strokes and text stay opaque). */
+export declare const FILL_OPACITY = 0.72;
+export declare const MERMAID_THEME_CSS: string;
+type Point = [number, number];
+/**
+ * Path data for a closed polygon whose corners are eased with quadratic curves of `radius`
+ * (smaller where an edge is too short for it: at most a third of each adjacent edge).
+ */
+export declare function roundedPolygonPath(points: Point[], radius?: number): string;
+/**
+ * The corners of a closed shape drawn only with straight lines written as cubic segments, as
+ * Mermaid draws its flag and other hand-drawn polygons: the fill as one subpath, the outline as
+ * each side drawn twice ("M a C … b M a C … b M b C … c …"). Undefined for any path with a curve,
+ * another command, a gap or an open end.
+ */
+export declare function straightPathCorners(d: string): Point[] | undefined;
+/**
+ * Round the corners of node polygons: `<polygon class="label-container">` (decision, hexagon,
+ * parallelogram, trapezoid) and closed shapes drawn only with straight segments (the flag).
+ * Other polygons and paths (arrowheads, edges, curved shapes) are left alone.
+ */
+export declare function roundNodePolygons(svg: string, radius?: number): string;
+export {};

package/dist/render/mermaid-style.js

@@ -0,0 +1,169 @@
+/**
+ * The finish mdrender gives Mermaid diagrams, in every theme:
+ *
+ * - shapes with slightly rounded corners: rectangles (nodes, subgraphs, sequence actors and
+ *   notes) through CSS `rx`/`ry`, and polygon nodes (decision, hexagon, parallelogram,
+ *   trapezoid) redrawn as paths with eased corners, since an SVG polygon has no corner radius;
+ * - subgraph titles in bold;
+ * - shape and subgraph fills kept in their colours but partly transparent, so the page and its
+ *   watermarks show through.
+ *
+ * The CSS goes to Mermaid as `themeCSS`, so it applies while Mermaid measures labels: a bold
+ * subgraph title gets the room it needs. Polygons are rounded after rendering, which leaves the
+ * diagram's size unchanged.
+ */
+/** Corner radius of rectangles and polygon nodes, in CSS px. */
+export const CORNER_RADIUS = 5;
+/** Opacity of shape and subgraph fills (strokes and text stay opaque). */
+export const FILL_OPACITY = 0.72;
+const SHAPES = [
+    ".node rect",
+    ".node polygon",
+    ".node circle",
+    ".node ellipse",
+    ".node path.label-container",
+    // Hand-drawn shapes (flag, cylinder…) carry the class on their group: fill-opacity inherits.
+    ".node .outer-path",
+    ".cluster rect",
+    "rect.actor",
+    "rect.note",
+];
+export const MERMAID_THEME_CSS = [
+    `.node rect, .cluster rect, rect.actor, rect.note { rx: ${CORNER_RADIUS}px; ry: ${CORNER_RADIUS}px; }`,
+    `${SHAPES.join(", ")} { fill-opacity: ${FILL_OPACITY}; }`,
+    ".cluster-label, .cluster-label * { font-weight: 700; }",
+    // Mermaid's "neo" look drops a shadow under shapes; under a see-through fill it would show
+    // through the whole shape and grey it, hiding the page behind instead of revealing it.
+    `${SHAPES.join(", ")}, .node .outer-path path { filter: none !important; }`,
+].join("\n");
+function parsePoints(points) {
+    const numbers = points
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number);
+    if (numbers.length < 6 || numbers.length % 2 !== 0 || numbers.some((n) => !Number.isFinite(n))) {
+        return undefined;
+    }
+    const result = [];
+    for (let i = 0; i < numbers.length; i += 2)
+        result.push([numbers[i], numbers[i + 1]]);
+    return result;
+}
+const round = (n) => Math.round(n * 100) / 100;
+/**
+ * Path data for a closed polygon whose corners are eased with quadratic curves of `radius`
+ * (smaller where an edge is too short for it: at most a third of each adjacent edge).
+ */
+export function roundedPolygonPath(points, radius = CORNER_RADIUS) {
+    const n = points.length;
+    const corners = points.map((p, i) => {
+        const prev = points[(i - 1 + n) % n];
+        const next = points[(i + 1) % n];
+        const toPrev = Math.hypot(prev[0] - p[0], prev[1] - p[1]);
+        const toNext = Math.hypot(next[0] - p[0], next[1] - p[1]);
+        const r = Math.min(radius, toPrev / 3, toNext / 3);
+        const along = (q, d) => d === 0 ? p : [p[0] + ((q[0] - p[0]) * r) / d, p[1] + ((q[1] - p[1]) * r) / d];
+        return { start: along(prev, toPrev), corner: p, end: along(next, toNext) };
+    });
+    const fmt = (p) => `${round(p[0])},${round(p[1])}`;
+    const parts = [`M${fmt(corners[0].end)}`];
+    for (let i = 1; i <= n; i++) {
+        const c = corners[i % n];
+        parts.push(`L${fmt(c.start)}`, `Q${fmt(c.corner)} ${fmt(c.end)}`);
+    }
+    return parts.join(" ") + " Z";
+}
+const near = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]) < 0.5;
+/** Distance from q to the line through a and b. */
+function offLine(a, b, q) {
+    const length = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    if (length === 0)
+        return Math.hypot(q[0] - a[0], q[1] - a[1]);
+    return Math.abs((b[0] - a[0]) * (a[1] - q[1]) - (a[0] - q[0]) * (b[1] - a[1])) / length;
+}
+/**
+ * The corners of a closed shape drawn only with straight lines written as cubic segments, as
+ * Mermaid draws its flag and other hand-drawn polygons: the fill as one subpath, the outline as
+ * each side drawn twice ("M a C … b M a C … b M b C … c …"). Undefined for any path with a curve,
+ * another command, a gap or an open end.
+ */
+export function straightPathCorners(d) {
+    const tokens = d.match(/[a-z]|-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi) ?? [];
+    const segments = [];
+    let current;
+    let i = 0;
+    const take = () => {
+        const x = Number(tokens[i]);
+        const y = Number(tokens[i + 1]);
+        i += 2;
+        return Number.isFinite(x) && Number.isFinite(y) ? [x, y] : undefined;
+    };
+    while (i < tokens.length) {
+        const command = tokens[i++];
+        if (command === "M") {
+            current = take();
+            if (!current)
+                return undefined;
+        }
+        else if (command === "C" && current) {
+            // One or more segments after a single "C".
+            do {
+                const c1 = take();
+                const c2 = take();
+                const to = take();
+                if (!c1 || !c2 || !to)
+                    return undefined;
+                if (offLine(current, to, c1) > 0.5 || offLine(current, to, c2) > 0.5)
+                    return undefined;
+                segments.push([current, to]);
+                current = to;
+            } while (i < tokens.length && !/[a-z]/i.test(tokens[i]));
+        }
+        else if (command === "Z" || command === "z") {
+            continue;
+        }
+        else {
+            return undefined;
+        }
+    }
+    // Drop each side's repeated stroke, then the sides must chain into a closed shape.
+    const sides = segments.filter(([from, to], k) => k === 0 || !(near(from, segments[k - 1][0]) && near(to, segments[k - 1][1])));
+    if (sides.length < 3)
+        return undefined;
+    for (let k = 1; k < sides.length; k++)
+        if (!near(sides[k][0], sides[k - 1][1]))
+            return undefined;
+    if (!near(sides.at(-1)[1], sides[0][0]))
+        return undefined;
+    const corners = sides.map(([from]) => from);
+    // Drop points that do not turn (several segments along one side).
+    const turning = corners.filter((p, k) => {
+        const prev = corners[(k - 1 + corners.length) % corners.length];
+        const next = corners[(k + 1) % corners.length];
+        return offLine(prev, next, p) > 0.5;
+    });
+    return turning.length >= 3 ? turning : undefined;
+}
+const NODE_PATH = /<path\b([^>]*?)\sd="([^"]*)"/g;
+const NODE_POLYGON = /<polygon\b([^>]*?)\spoints="([^"]*)"([^>]*?)(\/?)>(<\/polygon>)?/g;
+/**
+ * Round the corners of node polygons: `<polygon class="label-container">` (decision, hexagon,
+ * parallelogram, trapezoid) and closed shapes drawn only with straight segments (the flag).
+ * Other polygons and paths (arrowheads, edges, curved shapes) are left alone.
+ */
+export function roundNodePolygons(svg, radius = CORNER_RADIUS) {
+    return svg
+        .replace(NODE_POLYGON, (tag, before, points, after) => {
+        if (!/\bclass="[^"]*\blabel-container\b/.test(before + after))
+            return tag;
+        const parsed = parsePoints(points);
+        if (!parsed)
+            return tag;
+        return `<path${before} d="${roundedPolygonPath(parsed, radius)}"${after}></path>`;
+    })
+        .replace(NODE_PATH, (tag, before, d) => {
+        const corners = straightPathCorners(d);
+        return corners ? `<path${before} d="${roundedPolygonPath(corners, radius)}"` : tag;
+    });
+}
+//# sourceMappingURL=mermaid-style.js.map

package/dist/render/mermaid.js

@@ -1,6 +1,7 @@
 import { MERMAID_JS, readTextAsset } from "../assets.js";
 import { mermaidPlaceholder } from "../markdown/mermaid.js";
 import { FONT_FAMILIES, fontFaceCss, fontStack } from "./fonts.js";
+import { MERMAID_THEME_CSS, roundNodePolygons } from "./mermaid-style.js";
 import { escapeHtml } from "../html.js";
 import { authorConfigured, candidate, chooseCandidate, flipWorthTrying, flippedDirection, flowchartHeader, withDirection, WRAPPING_WIDTHS, wrapsExhausted, } from "./mermaid-fit.js";
 export { MERMAID_THEMES } from "../options.js";
@@ -25,6 +26,8 @@ function mermaidConfig(theme, font, fontPx, wrap, themeVariables = {}) {
         fontSize: fontPx,
         themeVariables: { ...themeVariables, fontFamily, fontSize: `${fontPx}px` },
         htmlLabels: true,
+        // Rounded corners, bold subgraph titles, see-through fills (render/mermaid-style.ts).
+        themeCSS: MERMAID_THEME_CSS,
         // Actors only at the top of sequence diagrams: repeating them below costs height.
         sequence: { mirrorActors: false },
         ...(wrap === undefined ? {} : { flowchart: { wrappingWidth: wrap } }),
@@ -51,7 +54,8 @@ body { margin: 0; width: ${widthPx}px; font-family: ${fontStack(font)}; }</style
             // Load the font weights Mermaid uses before it measures any text.
             await Promise.all(["400", "600", "700"].map((w) => document.fonts.load(`${w} 16px "${family}"`)));
         }, family);
-        const render = (source, id, wrap) => page.evaluate(async (source, id, config) => {
+        const render = (source, id, wrap) => page
+            .evaluate(async (source, id, config) => {
             const { mermaid } = globalThis;
             // Each render sets the whole configuration, so one layout never leaks into the next.
             mermaid.initialize(config);
@@ -61,7 +65,10 @@ body { margin: 0; width: ${widthPx}px; font-family: ${fontStack(font)}; }</style
             catch (error) {
                 return { error: String(error?.message ?? error) };
             }
-        }, source, id, mermaidConfig(theme, font, fontPx, wrap, options.themeVariables));
+        }, source, id, mermaidConfig(theme, font, fontPx, wrap, options.themeVariables))
+            .then((result) => 
+        // Rounding the polygons keeps each diagram's size, so autofit measures it the same.
+        "svg" in result ? { svg: roundNodePolygons(result.svg) } : result);
         const results = [];
         for (const [i, block] of blocks.entries()) {
             const id = `mermaid-${i + 1}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imontene/mdrender",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Command-line app for Windows and Linux that renders Markdown — with LaTeX equations and Mermaid diagrams — to PDF and HTML set in Manrope or Inter",
   "keywords": [
     "markdown",