@imontene/mdrender 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Cambios
 
+## 2.2.0 — 2026-10-15
+
+- **Autoajuste de diagramas de flujo Mermaid** (`flowchart`/`graph`): cada diagrama se dibuja
+  con varios anchos de ajuste de etiquetas y se elige el que imprime el texto más grande (a igual
+  legibilidad, el más bajo), nunca más pequeño que tal como está escrito. Si sigue por debajo del
+  75 % de su tamaño, se prueba el otro eje (`LR` → `TB`, `TD` → `LR`) y se gira si gana al menos
+  15 puntos. En el banco de pruebas, la escala media del texto pasa de 0,80 a 0,98 y ningún
+  diagrama queda por debajo de 0,6.
+  - `--mermaid-flip never` (`mermaidFlip`) conserva la dirección; `--no-mermaid-autofit`
+    (`mermaidAutofit: false`) lo desactiva. Se respetan los diagramas con `%%{init}%%` o
+    `config:` propios.
+  - `-v` informa la elección por diagrama; aviso si un diagrama se imprime por debajo del 50 %.
+- Un título seguido de un diagrama o una imagen ya no queda solo al pie de una página: pasa con
+  ellos a la siguiente.
+- `npm run bench:mermaid [-- archivo.md]` compara los diagramas de un documento con y sin
+  autoajuste.
+
 ## 2.1.0 — 2026-10-15
 
 - `mdrender doctor`: revisa instalación (versión, Node.js, `PATH`), navegador (cuál y por qué,

package/README.md

@@ -134,37 +134,39 @@ equipo); `--port` fija el puerto y `--no-open` no abre el navegador.
 
 ### Opciones
 
-| Opción                        | Descripción                                                  | Por defecto        |
-| ----------------------------- | ------------------------------------------------------------ | ------------------ |
-| `-o, --output <ruta>`         | Archivo de salida, o carpeta con varios archivos             | junto al `.md`     |
-| `-f, --format <pdf\|html>`    | Formato de salida                                            | `pdf`              |
-| `--page-size <tamaño>`        | `Letter`, `A4`, `Legal` (también `A3`, `A5`, `Tabloid`)      | `Letter`           |
-| `--margin <valor>`            | Las cuatro márgenes como en CSS: `10mm`, `15mm 20mm`…        | `10mm`             |
-| `--margin-top <medida>`       | Margen superior, p. ej. `15mm` (prevalece sobre `--margin`)  | `10mm`             |
-| `--margin-right <medida>`     | Margen derecho                                               | `10mm`             |
-| `--margin-bottom <medida>`    | Margen inferior                                              | `10mm`             |
-| `--margin-left <medida>`      | Margen izquierdo                                             | `10mm`             |
-| `--orientation <orientación>` | `portrait` (vertical) o `landscape` (horizontal)             | `portrait`         |
-| `--landscape`                 | Atajo de `--orientation landscape`                           | —                  |
-| `--toc`                       | Tabla de contenidos al inicio (o donde pongas `[[toc]]`)     | —                  |
-| `--toc-depth <n>`             | Nivel de título más profundo en la tabla de contenidos       | `3`                |
-| `--header <texto>`            | Encabezado de página (ver abajo)                             | —                  |
-| `--footer <texto>`            | Pie de página (ver abajo)                                    | `{page} / {pages}` |
-| `--no-page-numbers`           | Sin el pie con números de página                             | —                  |
-| `--density <densidad>`        | `normal` o `compact` (menos espacio entre líneas y bloques)  | `normal`           |
-| `--font-size <tamaño>`        | Tamaño del texto en `pt` o `px`, de 6 a 24 pt; p. ej. `10pt` | `10.5pt`           |
-| `--theme <light\|dark\|css>`  | `light`, `dark` o un `.css` que reemplaza el tema            | `light`            |
-| `--css <archivo.css>`         | CSS adicional (se puede repetir)                             | —                  |
-| `--mermaid-theme <tema>`      | `default`, `neutral`, `dark`, `forest`, `base`               | `neutral` / `dark` |
-| `--lang <código>`             | Idioma del documento; `en` para inglés (`pt`, `fr`, `de`…)   | `es`               |
-| `--title <texto>`             | Título del documento (muestra un bloque de título)           | primer `# título`  |
-| `--config <archivo>`          | Archivo de configuración                                     | el más cercano     |
-| `--no-config`                 | Ignorar `mdrender.config.json`                               | —                  |
-| `--browser <ruta>`            | Ruta a Chrome/Edge/Chromium (o variable `MDRENDER_BROWSER`)  | autodetección      |
-| `--allow-remote`              | Permitir que el PDF descargue imágenes/CSS de internet       | bloqueado          |
-| `-w, --watch`                 | Regenerar al guardar                                         | —                  |
-| `-q, --quiet`                 | Mostrar solo advertencias y errores                          | —                  |
-| `-v, --verbose`               | Mostrar también configuración, navegador y tiempos           | —                  |
+| Opción                         | Descripción                                                          | Por defecto        |
+| ------------------------------ | -------------------------------------------------------------------- | ------------------ |
+| `-o, --output <ruta>`          | Archivo de salida, o carpeta con varios archivos                     | junto al `.md`     |
+| `-f, --format <pdf\|html>`     | Formato de salida                                                    | `pdf`              |
+| `--page-size <tamaño>`         | `Letter`, `A4`, `Legal` (también `A3`, `A5`, `Tabloid`)              | `Letter`           |
+| `--margin <valor>`             | Las cuatro márgenes como en CSS: `10mm`, `15mm 20mm`…                | `10mm`             |
+| `--margin-top <medida>`        | Margen superior, p. ej. `15mm` (prevalece sobre `--margin`)          | `10mm`             |
+| `--margin-right <medida>`      | Margen derecho                                                       | `10mm`             |
+| `--margin-bottom <medida>`     | Margen inferior                                                      | `10mm`             |
+| `--margin-left <medida>`       | Margen izquierdo                                                     | `10mm`             |
+| `--orientation <orientación>`  | `portrait` (vertical) o `landscape` (horizontal)                     | `portrait`         |
+| `--landscape`                  | Atajo de `--orientation landscape`                                   | —                  |
+| `--toc`                        | Tabla de contenidos al inicio (o donde pongas `[[toc]]`)             | —                  |
+| `--toc-depth <n>`              | Nivel de título más profundo en la tabla de contenidos               | `3`                |
+| `--header <texto>`             | Encabezado de página (ver abajo)                                     | —                  |
+| `--footer <texto>`             | Pie de página (ver abajo)                                            | `{page} / {pages}` |
+| `--no-page-numbers`            | Sin el pie con números de página                                     | —                  |
+| `--density <densidad>`         | `normal` o `compact` (menos espacio entre líneas y bloques)          | `normal`           |
+| `--font-size <tamaño>`         | Tamaño del texto en `pt` o `px`, de 6 a 24 pt; p. ej. `10pt`         | `10.5pt`           |
+| `--theme <light\|dark\|css>`   | `light`, `dark` o un `.css` que reemplaza el tema                    | `light`            |
+| `--css <archivo.css>`          | CSS adicional (se puede repetir)                                     | —                  |
+| `--mermaid-theme <tema>`       | `default`, `neutral`, `dark`, `forest`, `base`                       | `neutral` / `dark` |
+| `--mermaid-flip <auto\|never>` | Si el autoajuste puede girar un diagrama de flujo de eje (ver abajo) | `auto`             |
+| `--no-mermaid-autofit`         | Dibujar los diagramas de flujo tal como están escritos               | —                  |
+| `--lang <código>`              | Idioma del documento; `en` para inglés (`pt`, `fr`, `de`…)           | `es`               |
+| `--title <texto>`              | Título del documento (muestra un bloque de título)                   | primer `# título`  |
+| `--config <archivo>`           | Archivo de configuración                                             | el más cercano     |
+| `--no-config`                  | Ignorar `mdrender.config.json`                                       | —                  |
+| `--browser <ruta>`             | Ruta a Chrome/Edge/Chromium (o variable `MDRENDER_BROWSER`)          | autodetección      |
+| `--allow-remote`               | Permitir que el PDF descargue imágenes/CSS de internet               | bloqueado          |
+| `-w, --watch`                  | Regenerar al guardar                                                 | —                  |
+| `-q, --quiet`                  | Mostrar solo advertencias y errores                                  | —                  |
+| `-v, --verbose`                | Mostrar también configuración, navegador y tiempos                   | —                  |
 
 **Página**: por defecto hoja **Letter vertical con márgenes de 10 mm**. Las medidas aceptan
 `mm`, `cm`, `in` o `px`. `--margin` fija las cuatro márgenes a la vez y `--margin-top`,
@@ -237,6 +239,25 @@ fecha). Las rutas de `css` y `theme` son relativas al archivo donde aparecen.
 - 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`.
 
+**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
+texto más grande; a igual legibilidad, el que ocupa menos alto. Nunca lo imprime más pequeño que
+tal como está escrito.
+
+- Si el diagrama sigue por debajo del 75 % de su tamaño, prueba además el otro eje (`LR` → `TB`,
+  o `TD` → `LR`) y lo gira si gana al menos 15 puntos. Una cadena horizontal de 8 cajas, por
+  ejemplo, pasa de imprimirse al 37 % a su tamaño real. `--mermaid-flip never` (o
+  `mermaidFlip: never`) conserva siempre la dirección escrita.
+- No se tocan los diagramas con configuración propia (`%%{init: …}%%` o `config:` en su front
+  matter) ni los de otros tipos (secuencia, torta, clases…).
+- `-v` informa la elección de cada diagrama; si alguno queda por debajo del 50 %, mdrender avisa:
+  conviene partirlo o acortar sus etiquetas.
+- `--no-mermaid-autofit` (o `mermaidAutofit: false`) lo desactiva.
+
+Un título seguido de un diagrama o una imagen pasa con ellos a la página siguiente cuando no
+caben, en lugar de quedar solo al pie de la anterior.
+
 ## Más Markdown
 
 - **Alertas** estilo GitHub: `> [!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`,

package/dist/assets/theme.css

@@ -352,6 +352,21 @@ div.math-error {
   .mermaid-diagram svg {
     max-height: calc(var(--page-content-height) - 6mm);
   }
+
+  /* Next to its heading: leave room for it (HEADING_ALLOWANCE_EM in render/mermaid.ts). */
+  .keep-with-heading img,
+  .keep-with-heading .mermaid-diagram svg {
+    max-height: calc(var(--page-content-height) - 6mm - 5rem);
+  }
+}
+
+/* A heading and the diagram or image right after it go to the same page. */
+.keep-with-heading {
+  break-inside: avoid;
+}
+
+.markdown-body > .keep-with-heading:first-child > :first-child {
+  margin-top: 0;
 }
 
 /* Mermaid's HTML labels are <p>/<span> inside <foreignObject>: keep document styles out. */

package/dist/cli.js

@@ -30,6 +30,8 @@ const DOCUMENT_FLAGS = [
     "css",
     "theme",
     "mermaidTheme",
+    "mermaidAutofit",
+    "mermaidFlip",
     "lang",
     "title",
 ];
@@ -60,6 +62,8 @@ function addDocumentOptions(command) {
         .option("--theme <theme>", "light, dark, or a .css file replacing the theme (default: light)")
         .option("--css <file>", "extra stylesheet (repeatable)", collect)
         .option("--mermaid-theme <theme>", `Mermaid theme: ${MERMAID_THEMES.join(", ")} (default: neutral; dark with --theme dark)`)
+        .option("--no-mermaid-autofit", "draw flowcharts exactly as written (no layout search)")
+        .option("--mermaid-flip <mode>", "auto: turn a flowchart to the other axis if its text prints too small; never (default: auto)")
         .option("--lang <tag>", "document language, e.g. es or en (default: es)")
         .option("--title <text>", "document title (shown as a title block)")
         .option("--config <file>", "config file (default: nearest mdrender.config.json)")
@@ -111,7 +115,11 @@ function cliOverrides(program) {
         if (program.getOptionValueSource(key) === "cli")
             raw[key] = program.getOptionValue(key);
     }
-    return normalizeOptions(raw, "command line", process.cwd(), (key) => key === "pageNumbers" ? "--no-page-numbers" : toFlag(key));
+    return normalizeOptions(raw, "command line", process.cwd(), (key) => key === "pageNumbers"
+        ? "--no-page-numbers"
+        : key === "mermaidAutofit"
+            ? "--no-mermaid-autofit"
+            : toFlag(key));
 }
 function settings(program, options) {
     return {

package/dist/convert.d.ts

@@ -2,6 +2,7 @@ import type { Diagnostic } from "./diagnostics.js";
 import { type DocumentOptions, type Margins, type MermaidTheme } from "./options.js";
 import type { OutputFormat } from "./paths.js";
 import { BrowserSession } from "./render/browser.js";
+import { type DiagramLayout } from "./render/mermaid.js";
 /** Settings shared by every file of a run (batch, watch or preview). */
 export interface RenderSettings {
     /** Explicit browser executable. */
@@ -30,6 +31,8 @@ export interface ConvertResult {
     output: string;
     /** Problems found while rendering; the output is still written, with errors shown inline. */
     diagnostics: Diagnostic[];
+    /** Details for --verbose, such as the layout chosen for each Mermaid flowchart. */
+    notes: Note[];
     /** The effective options after merging config file, front matter and command line. */
     options: DocumentOptions;
     /** Config file that was applied, if any. */
@@ -59,12 +62,20 @@ export declare class BrowserPool {
  */
 export declare const MIN_HEADER_FOOTER_MARGIN = "10mm";
 export declare function headerFooterSpaceWarnings(margin: Margins, hasHeader: boolean, hasFooter: boolean): Diagnostic[];
+export interface Note {
+    line?: number;
+    message: string;
+}
+/** "Mermaid autofit: wrap 300, turned LR→TB, scale 0.33 → 1.00, height 81 → 903 px". */
+export declare function describeLayout(layout: DiagramLayout): string;
 /** Mermaid theme: explicit choice, else dark diagrams for the dark page theme. */
 export declare function effectiveMermaidTheme(options: DocumentOptions): MermaidTheme;
 /**
  * Render a Markdown file to a complete HTML document. A browser is only started (through
  * `browsers`) when the document has Mermaid diagrams.
  */
-export declare function renderDocument(inputPath: string, settings: RenderSettings, browsers: BrowserPool): Promise<RenderedDocument>;
+export declare function renderDocument(inputPath: string, settings: RenderSettings, browsers: BrowserPool, 
+/** Printed on pages (PDF): diagrams are fitted to the page height, not only the width. */
+paged?: boolean): Promise<RenderedDocument>;
 /** Read a Markdown file and write it as a self-contained HTML document or a PDF. */
 export declare function convertFile(convert: ConvertOptions): Promise<ConvertResult>;

package/dist/convert.js

@@ -11,6 +11,7 @@ import { DEFAULT_FONT_SIZE, fontSizePx, mergeOptions, normalizeOptions, OptionsE
 import { BrowserSession } from "./render/browser.js";
 import { DEFAULT_FOOTER, headerFooterTemplate } from "./render/header-footer.js";
 import { fillMermaid, renderMermaid } from "./render/mermaid.js";
+import { SMALL_SCALE } from "./render/mermaid-fit.js";
 import { contentHeightPx, contentWidthPx, lengthToPx } from "./render/page.js";
 import { buildHtmlDocument, builtinThemeCss, densityCss } from "./render/template.js";
 import { writeFileAtomic } from "./write.js";
@@ -86,6 +87,19 @@ function layoutCss(options, margin) {
         rules.push(`html { font-size: ${options.fontSize}; }`);
     return rules.join("\n");
 }
+const fixed2 = (n) => n.toFixed(2);
+/** "Mermaid autofit: wrap 300, turned LR→TB, scale 0.33 → 1.00, height 81 → 903 px". */
+export function describeLayout(layout) {
+    const changes = [
+        layout.wrap === undefined ? undefined : `wrap ${layout.wrap}`,
+        layout.turned ? `turned ${layout.turned}` : undefined,
+    ].filter(Boolean);
+    const scale = `scale ${fixed2(layout.baseScale)} → ${fixed2(layout.scale)}`;
+    const height = `height ${layout.baseHeight} → ${layout.height} px`;
+    return changes.length === 0
+        ? `Mermaid autofit: kept as written (scale ${fixed2(layout.scale)}, ${layout.tried} layouts tried)`
+        : `Mermaid autofit: ${changes.join(", ")}, ${scale}, ${height} (${layout.tried} layouts tried)`;
+}
 /** Mermaid theme: explicit choice, else dark diagrams for the dark page theme. */
 export function effectiveMermaidTheme(options) {
     return options.mermaidTheme ?? (options.theme === "dark" ? "dark" : "neutral");
@@ -94,7 +108,9 @@ export function effectiveMermaidTheme(options) {
  * Render a Markdown file to a complete HTML document. A browser is only started (through
  * `browsers`) when the document has Mermaid diagrams.
  */
-export async function renderDocument(inputPath, settings, browsers) {
+export async function renderDocument(inputPath, settings, browsers, 
+/** Printed on pages (PDF): diagrams are fitted to the page height, not only the width. */
+paged = false) {
     const input = path.resolve(inputPath);
     const baseDir = path.dirname(input);
     const source = await readFile(input, "utf8");
@@ -114,6 +130,7 @@ export async function renderDocument(inputPath, settings, browsers) {
         ...config.warnings.map((message) => ({ severity: "warning", message })),
         ...md.diagnostics,
     ];
+    const notes = [];
     const title = options.title ?? md.title ?? path.parse(input).name;
     // Table of contents: at the [[toc]] marker, or at the start with --toc.
     let body = md.html;
@@ -130,10 +147,36 @@ export async function renderDocument(inputPath, settings, browsers) {
         const width = contentWidthPx(options.pageSize, options.orientation === "landscape", margin);
         const theme = effectiveMermaidTheme(options);
         const fontPx = fontSizePx(options.fontSize ?? DEFAULT_FONT_SIZE);
-        const results = await renderMermaid(session, md.mermaid, theme, width, fontPx);
+        const landscape = options.orientation === "landscape";
+        const results = await renderMermaid(session, md.mermaid, {
+            theme,
+            widthPx: width,
+            fontPx,
+            // Same limit as the print stylesheet: the page's text height minus 6 mm.
+            pageHeightPx: paged
+                ? contentHeightPx(options.pageSize, landscape, margin) - lengthToPx("6mm")
+                : Infinity,
+            autofit: options.mermaidAutofit,
+            flip: options.mermaidFlip,
+        });
         const filled = fillMermaid(body, md.nonce, md.mermaid, results);
         body = filled.html;
         diagnostics.push(...filled.diagnostics);
+        md.mermaid.forEach((block, i) => {
+            const result = results[i];
+            if (!result || "error" in result)
+                return;
+            if (result.layout)
+                notes.push({ line: block.line, message: describeLayout(result.layout) });
+            if (paged && result.scale !== undefined && result.scale < SMALL_SCALE) {
+                diagnostics.push({
+                    severity: "warning",
+                    line: block.line,
+                    message: `Mermaid diagram printed at ${Math.round(result.scale * 100)}% of its size; ` +
+                        "split it or shorten its labels to make it readable",
+                });
+            }
+        });
     }
     const html = buildHtmlDocument({
         title,
@@ -154,14 +197,14 @@ export async function renderDocument(inputPath, settings, browsers) {
         ...(options.theme.endsWith(".css") ? [options.theme] : []),
         ...options.css,
     ];
-    return { html, title, diagnostics, options, configFile, dependencies };
+    return { html, title, diagnostics, notes, options, configFile, dependencies };
 }
 /** Read a Markdown file and write it as a self-contained HTML document or a PDF. */
 export async function convertFile(convert) {
     const output = path.resolve(convert.output);
     const browsers = convert.browsers ?? new BrowserPool(convert.browser);
     try {
-        const doc = await renderDocument(convert.input, convert, browsers);
+        const doc = await renderDocument(convert.input, convert, browsers, convert.format === "pdf");
         const { options } = doc;
         if (convert.format === "pdf") {
             const margin = resolveMargins(options);
@@ -195,6 +238,7 @@ export async function convertFile(convert) {
         return {
             output,
             diagnostics: doc.diagnostics,
+            notes: doc.notes,
             options,
             configFile: doc.configFile,
             dependencies: doc.dependencies,

package/dist/markdown/env.d.ts

@@ -4,6 +4,8 @@ export interface MermaidBlock {
     source: string;
     /** 1-based source line of the opening fence. */
     line?: number;
+    /** Printed together with the heading just above it (see markdown/keep-with-heading.ts). */
+    afterHeading?: boolean;
 }
 /** Per-document state shared by the Markdown plugins during one render. */
 export interface RenderEnv extends Env {

package/dist/markdown/index.js

@@ -8,6 +8,7 @@ import { codeBlocks } from "./code-blocks.js";
 import { inlineChildLines } from "./env.js";
 import { highlightCode } from "./highlight.js";
 import { inlineLocalImages } from "./images.js";
+import { keepWithHeading } from "./keep-with-heading.js";
 import { math } from "./math.js";
 import { mermaid } from "./mermaid.js";
 import { taskLists } from "./task-lists.js";
@@ -24,6 +25,7 @@ export function createMarkdown() {
     md.use(taskLists);
     md.use(alerts);
     md.use(tocMarker);
+    md.use(keepWithHeading);
     md.use(inlineChildLines);
     md.use(inlineLocalImages);
     // Before math and mermaid, which hand their non-code fences on to this renderer.

package/dist/markdown/keep-with-heading.d.ts

@@ -0,0 +1,8 @@
+import type { MarkdownIt } from "markdown-it";
+export declare const KEEP_WITH_HEADING_CLASS = "keep-with-heading";
+/**
+ * Wrap a top-level heading and the diagram or lone image right after it in a block that is not
+ * split across pages (`.keep-with-heading` in theme.css). Otherwise a figure that does not fit at
+ * the bottom of a page moves to the next one and leaves its heading alone at the bottom.
+ */
+export declare function keepWithHeading(md: MarkdownIt): void;

package/dist/markdown/keep-with-heading.js

@@ -0,0 +1,44 @@
+export const KEEP_WITH_HEADING_CLASS = "keep-with-heading";
+const isMermaidFence = (token) => token?.type === "fence" && token.info.trim().toLowerCase() === "mermaid";
+/** A paragraph holding nothing but one image (`![alt](img.png)`). */
+function imageParagraphEnd(tokens, i) {
+    if (tokens[i]?.type !== "paragraph_open" || tokens[i + 2]?.type !== "paragraph_close") {
+        return undefined;
+    }
+    const children = tokens[i + 1]?.children?.filter((child) => !(child.type === "text" && child.content.trim() === ""));
+    return children?.length === 1 && children[0].type === "image" ? i + 2 : undefined;
+}
+/**
+ * Wrap a top-level heading and the diagram or lone image right after it in a block that is not
+ * split across pages (`.keep-with-heading` in theme.css). Otherwise a figure that does not fit at
+ * the bottom of a page moves to the next one and leaves its heading alone at the bottom.
+ */
+export function keepWithHeading(md) {
+    md.core.ruler.push("keep_with_heading", (state) => {
+        const tokens = state.tokens;
+        for (let i = 0; i < tokens.length; i++) {
+            const open = tokens[i];
+            if (open.type !== "heading_open" || open.level !== 0)
+                continue;
+            const next = i + 3; // heading_open, inline, heading_close
+            let end;
+            if (isMermaidFence(tokens[next])) {
+                end = next;
+                tokens[next].meta = { ...tokens[next].meta, afterHeading: true };
+            }
+            else {
+                end = imageParagraphEnd(tokens, next);
+            }
+            if (end === undefined)
+                continue;
+            const before = new state.Token("html_block", "", 0);
+            before.content = `<div class="${KEEP_WITH_HEADING_CLASS}">\n`;
+            const after = new state.Token("html_block", "", 0);
+            after.content = "</div>\n";
+            tokens.splice(end + 1, 0, after);
+            tokens.splice(i, 0, before);
+            i = end + 2;
+        }
+    });
+}
+//# sourceMappingURL=keep-with-heading.js.map

package/dist/markdown/mermaid.js

@@ -15,7 +15,9 @@ export function mermaid(md) {
             return fence(tokens, idx, options, rawEnv, self);
         }
         const env = rawEnv;
-        const index = env.mermaid.push({ source: token.content, line: tokenLine(token) }) - 1;
+        const block = { source: token.content, line: tokenLine(token) };
+        const afterHeading = token.meta?.afterHeading;
+        const index = env.mermaid.push(afterHeading ? { ...block, afterHeading } : block) - 1;
         return `<figure class="mermaid-diagram">${mermaidPlaceholder(env.nonce, index)}</figure>\n`;
     };
 }

package/dist/options.d.ts

@@ -11,6 +11,8 @@ export type Margins = {
 };
 export declare const MERMAID_THEMES: readonly ["default", "neutral", "dark", "forest", "base"];
 export type MermaidTheme = (typeof MERMAID_THEMES)[number];
+export declare const MERMAID_FLIPS: readonly ["auto", "never"];
+export type MermaidFlip = (typeof MERMAID_FLIPS)[number];
 export declare const BUILTIN_THEMES: readonly ["light", "dark"];
 export declare const DENSITIES: readonly ["normal", "compact"];
 export type Density = (typeof DENSITIES)[number];
@@ -35,6 +37,10 @@ export interface DocumentOptions {
     footer?: string;
     /** Mermaid theme; when unset, "neutral" for light pages and "dark" for the dark theme. */
     mermaidTheme?: MermaidTheme;
+    /** Try several layouts of each flowchart and keep the one whose text prints largest. */
+    mermaidAutofit: boolean;
+    /** Whether autofit may turn a flowchart to the other axis (LR ↔ TB) when it reads far better. */
+    mermaidFlip: MermaidFlip;
     /** Vertical spacing: "compact" tightens line height, paragraph and heading spacing. */
     density: Density;
     /** Base font size of the text, e.g. "10pt"; when unset, the theme's (10.5pt). */

package/dist/options.js

@@ -5,6 +5,7 @@ import { DEFAULT_LANG } from "./i18n.js";
 export const PAGE_SIZES = ["A3", "A4", "A5", "Letter", "Legal", "Tabloid"];
 export const ORIENTATIONS = ["portrait", "landscape"];
 export const MERMAID_THEMES = ["default", "neutral", "dark", "forest", "base"];
+export const MERMAID_FLIPS = ["auto", "never"];
 export const BUILTIN_THEMES = ["light", "dark"];
 export const DENSITIES = ["normal", "compact"];
 export const DEFAULT_OPTIONS = {
@@ -14,6 +15,8 @@ export const DEFAULT_OPTIONS = {
     toc: false,
     tocDepth: 3,
     pageNumbers: true,
+    mermaidAutofit: true,
+    mermaidFlip: "auto",
     density: "normal",
     theme: "light",
     css: [],
@@ -110,6 +113,8 @@ const VALIDATORS = {
     header: text,
     footer: text,
     mermaidTheme: oneOf(MERMAID_THEMES),
+    mermaidAutofit: bool,
+    mermaidFlip: oneOf(MERMAID_FLIPS),
     density: oneOf(DENSITIES),
     fontSize,
     theme: (value, describe, baseDir) => {

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

@@ -0,0 +1,81 @@
+/**
+ * Autofit for Mermaid flowcharts: pick, among several layouts of the same diagram, the one whose
+ * text prints largest once the diagram is scaled to the text column and the page height.
+ *
+ * Mermaid wraps label lines at `flowchart.wrappingWidth`, and a flowchart laid out along one axis
+ * can be far wider (or taller) than the page; the theme then shrinks the whole drawing, text
+ * included. Wider wrapping makes tall diagrams shorter; turning a long left-to-right chain
+ * top-to-bottom makes it fit the column. Neither has one value that suits every diagram, so each
+ * flowchart is rendered a few times and measured. Everything here is pure; the rendering loop is
+ * in render/mermaid.ts.
+ */
+export declare const FLOW_DIRECTIONS: readonly ["TB", "TD", "BT", "LR", "RL"];
+export type FlowDirection = (typeof FLOW_DIRECTIONS)[number];
+/** Label wrapping widths tried, in px; undefined is Mermaid's own default (the layout as today). */
+export declare const WRAPPING_WIDTHS: readonly (number | undefined)[];
+/** Candidates within this scale of the best one read the same; the shorter one wins. */
+export declare const SCALE_TOLERANCE = 0.05;
+/** Only turn a diagram whose best scale in its own direction is below this (text under ~10 px)… */
+export declare const FLIP_BELOW = 0.75;
+/** …and only when turning it raises the scale by at least this much. */
+export declare const FLIP_GAIN = 0.15;
+/** Below this scale the diagram is reported: no layout makes it readable, its content must change. */
+export declare const SMALL_SCALE = 0.5;
+export interface FlowchartHeader {
+    /** Index of the header line in `source.split("\n")`. */
+    line: number;
+    /** Direction as written; flowcharts without one are top-to-bottom. */
+    direction: FlowDirection;
+}
+/**
+ * The flowchart's header line and main direction, or undefined when the source is another kind
+ * of diagram. Blank lines and `%%` comments before the header are skipped.
+ */
+export declare function flowchartHeader(source: string): FlowchartHeader | undefined;
+/** The source with its main direction replaced; subgraph directions are left alone. */
+export declare function withDirection(source: string, header: FlowchartHeader, direction: FlowDirection): string;
+export declare function flippedDirection(direction: FlowDirection): FlowDirection;
+/**
+ * The diagram sets its own Mermaid configuration (an `%%{init: …}%%` directive or `config:` in
+ * its front matter): it is drawn exactly as written.
+ */
+export declare function authorConfigured(source: string): boolean;
+/** Width and height of an SVG from its viewBox. */
+export declare function measureSvg(svg: string): {
+    width: number;
+    height: number;
+} | undefined;
+export interface Fit {
+    /** Text column width in CSS px. */
+    width: number;
+    /** Largest printed height in CSS px; Infinity without pages (HTML). */
+    height: number;
+}
+/** How much the diagram is shrunk when printed: 1 is its natural size. */
+export declare function printScale(size: {
+    width: number;
+    height: number;
+}, fit: Fit): number;
+export interface Candidate {
+    svg: string;
+    /** Label wrapping width in px; undefined is Mermaid's default. */
+    wrap: number | undefined;
+    flipped: boolean;
+    width: number;
+    height: number;
+    scale: number;
+}
+export declare function candidate(svg: string, wrap: number | undefined, flipped: boolean, fit: Fit): Candidate | undefined;
+/** Whether a turned layout is worth trying, given the best layout in the written direction. */
+export declare const flipWorthTrying: (best: Candidate) => boolean;
+/**
+ * The chosen layout. `base` is the diagram as written (Mermaid's default wrapping, its own
+ * direction); the result is never smaller than it. A turned layout wins only when the written
+ * direction stays below FLIP_BELOW and turning gains at least FLIP_GAIN.
+ */
+export declare function chooseCandidate(candidates: Candidate[], base: Candidate): Candidate;
+/**
+ * Whether wider wrapping in this direction can still help: once the diagram is wider than the
+ * column and its scale went down, wider labels only make it wider.
+ */
+export declare function wrapsExhausted(current: Candidate, previous: Candidate | undefined, fit: Fit): boolean;

package/dist/render/mermaid-fit.js

@@ -0,0 +1,135 @@
+/**
+ * Autofit for Mermaid flowcharts: pick, among several layouts of the same diagram, the one whose
+ * text prints largest once the diagram is scaled to the text column and the page height.
+ *
+ * Mermaid wraps label lines at `flowchart.wrappingWidth`, and a flowchart laid out along one axis
+ * can be far wider (or taller) than the page; the theme then shrinks the whole drawing, text
+ * included. Wider wrapping makes tall diagrams shorter; turning a long left-to-right chain
+ * top-to-bottom makes it fit the column. Neither has one value that suits every diagram, so each
+ * flowchart is rendered a few times and measured. Everything here is pure; the rendering loop is
+ * in render/mermaid.ts.
+ */
+export const FLOW_DIRECTIONS = ["TB", "TD", "BT", "LR", "RL"];
+/** Label wrapping widths tried, in px; undefined is Mermaid's own default (the layout as today). */
+export const WRAPPING_WIDTHS = [
+    undefined,
+    200,
+    300,
+    400,
+    600,
+    900,
+];
+/** Candidates within this scale of the best one read the same; the shorter one wins. */
+export const SCALE_TOLERANCE = 0.05;
+/** Only turn a diagram whose best scale in its own direction is below this (text under ~10 px)… */
+export const FLIP_BELOW = 0.75;
+/** …and only when turning it raises the scale by at least this much. */
+export const FLIP_GAIN = 0.15;
+/** Below this scale the diagram is reported: no layout makes it readable, its content must change. */
+export const SMALL_SCALE = 0.5;
+/** The axis-swapped direction: horizontal flowcharts go top-to-bottom, vertical ones left-to-right. */
+const FLIPPED = {
+    LR: "TB",
+    RL: "TB",
+    TB: "LR",
+    TD: "LR",
+    BT: "LR",
+};
+const HEADER = /^(\s*(?:flowchart|graph))(?:[ \t]+(TB|TD|BT|LR|RL))?(?=\s|;|$)/i;
+/** Lines of the diagram after Mermaid's optional front matter (`---` … `---`). */
+function bodyStart(lines) {
+    if (lines[0]?.trim() !== "---")
+        return 0;
+    const end = lines.findIndex((line, i) => i > 0 && line.trim() === "---");
+    return end === -1 ? 0 : end + 1;
+}
+/**
+ * The flowchart's header line and main direction, or undefined when the source is another kind
+ * of diagram. Blank lines and `%%` comments before the header are skipped.
+ */
+export function flowchartHeader(source) {
+    const lines = source.split("\n");
+    for (let i = bodyStart(lines); i < lines.length; i++) {
+        const text = lines[i].trim();
+        if (text === "" || text.startsWith("%%"))
+            continue;
+        const match = HEADER.exec(lines[i]);
+        if (!match)
+            return undefined;
+        const direction = (match[2]?.toUpperCase() ?? "TB");
+        return { line: i, direction };
+    }
+    return undefined;
+}
+/** The source with its main direction replaced; subgraph directions are left alone. */
+export function withDirection(source, header, direction) {
+    const lines = source.split("\n");
+    lines[header.line] = lines[header.line].replace(HEADER, (_m, keyword) => `${keyword} ${direction}`);
+    return lines.join("\n");
+}
+export function flippedDirection(direction) {
+    return FLIPPED[direction];
+}
+/**
+ * The diagram sets its own Mermaid configuration (an `%%{init: …}%%` directive or `config:` in
+ * its front matter): it is drawn exactly as written.
+ */
+export function authorConfigured(source) {
+    if (/%%\{\s*(?:init|initialize)\b/i.test(source))
+        return true;
+    const lines = source.split("\n");
+    const start = bodyStart(lines);
+    return start > 0 && lines.slice(1, start - 1).some((line) => /^\s*config\s*:/.test(line));
+}
+/** Width and height of an SVG from its viewBox. */
+export function measureSvg(svg) {
+    const match = /viewBox="\s*[-\d.e]+[\s,]+[-\d.e]+[\s,]+([\d.e]+)[\s,]+([\d.e]+)\s*"/.exec(svg);
+    if (!match)
+        return undefined;
+    const width = Number(match[1]);
+    const height = Number(match[2]);
+    return width > 0 && height > 0 ? { width, height } : undefined;
+}
+/** How much the diagram is shrunk when printed: 1 is its natural size. */
+export function printScale(size, fit) {
+    return Math.min(1, fit.width / size.width, fit.height / size.height);
+}
+export function candidate(svg, wrap, flipped, fit) {
+    const size = measureSvg(svg);
+    return size && { svg, wrap, flipped, ...size, scale: printScale(size, fit) };
+}
+const printedHeight = (c) => Math.round(c.height * c.scale);
+/**
+ * Best of one direction's candidates: those within SCALE_TOLERANCE of the top scale and never
+ * below the layout as written (`base`), then the shortest printed, then the largest scale.
+ */
+function bestOf(candidates, base) {
+    const top = Math.max(...candidates.map((c) => c.scale));
+    return candidates
+        .filter((c) => c.scale >= top - SCALE_TOLERANCE && c.scale >= base.scale - 1e-9)
+        .sort((a, b) => printedHeight(a) - printedHeight(b) || b.scale - a.scale)[0];
+}
+/** Whether a turned layout is worth trying, given the best layout in the written direction. */
+export const flipWorthTrying = (best) => best.scale < FLIP_BELOW - 1e-9;
+/**
+ * The chosen layout. `base` is the diagram as written (Mermaid's default wrapping, its own
+ * direction); the result is never smaller than it. A turned layout wins only when the written
+ * direction stays below FLIP_BELOW and turning gains at least FLIP_GAIN.
+ */
+export function chooseCandidate(candidates, base) {
+    const written = bestOf(candidates.filter((c) => !c.flipped), base);
+    const best = written ?? base;
+    const turned = candidates.filter((c) => c.flipped);
+    if (turned.length === 0 || !flipWorthTrying(best))
+        return best;
+    const flipped = bestOf(turned, base);
+    return flipped && flipped.scale >= best.scale + FLIP_GAIN - 1e-9 ? flipped : best;
+}
+/**
+ * Whether wider wrapping in this direction can still help: once the diagram is wider than the
+ * column and its scale went down, wider labels only make it wider.
+ */
+export function wrapsExhausted(current, previous, fit) {
+    return previous !== undefined && current.width > fit.width && current.scale < previous.scale;
+}
+//# sourceMappingURL=mermaid-fit.js.map

package/dist/render/mermaid.d.ts

@@ -1,22 +1,54 @@
 import type { Diagnostic } from "../diagnostics.js";
 import type { MermaidBlock } from "../markdown/env.js";
-import type { MermaidTheme } from "../options.js";
+import type { MermaidFlip, MermaidTheme } from "../options.js";
 import type { BrowserSession } from "./browser.js";
 export { MERMAID_THEMES, type MermaidTheme } from "../options.js";
-type DiagramResult = {
+/** How autofit laid out a flowchart (see render/mermaid-fit.ts). */
+export interface DiagramLayout {
+    /** Label wrapping width in px; undefined is Mermaid's default. */
+    wrap: number | undefined;
+    /** Main direction turned to the other axis, e.g. "LR→TB"; undefined when kept. */
+    turned?: string;
+    /** Printed scale and height (CSS px) as written and as chosen. */
+    baseScale: number;
+    scale: number;
+    baseHeight: number;
+    height: number;
+    /** Layouts rendered to choose this one. */
+    tried: number;
+}
+export type DiagramResult = {
     svg: string;
+    /** Printed scale (1 = natural size), when the SVG could be measured. */
+    scale?: number;
+    /** Set for flowcharts considered by autofit. */
+    layout?: DiagramLayout;
 } | {
     error: string;
 };
+export interface MermaidRenderOptions {
+    theme?: MermaidTheme;
+    /** Width of the text column, so diagrams are laid out at their printed size. */
+    widthPx?: number;
+    /** Text size of the document in CSS pixels, so diagram labels match the body text. */
+    fontPx?: number;
+    /** Tallest a diagram may print (the page's text height), in CSS px; Infinity for HTML. */
+    pageHeightPx?: number;
+    /** Search label wrapping widths (and, with `flip`, the other axis) for each flowchart. */
+    autofit?: boolean;
+    flip?: MermaidFlip;
+}
+/**
+ * Room kept for a heading printed together with the diagram below it (see keep-with-heading in
+ * theme.css, where the same allowance is subtracted), in multiples of the text size.
+ */
+export declare const HEADING_ALLOWANCE_EM = 5;
 /**
  * Render Mermaid diagrams to SVG in a blank page that holds no user content: only the diagram
- * sources are passed in, as data. Mermaid runs with `securityLevel: "strict"`.
+ * sources are passed in, as data. Mermaid runs with `securityLevel: "strict"`. With `autofit`,
+ * flowcharts are rendered in several layouts and the one whose text prints largest is kept.
  */
-export declare function renderMermaid(session: BrowserSession, blocks: MermaidBlock[], theme?: MermaidTheme, 
-/** Width of the text column, so diagrams are laid out at their printed size. */
-widthPx?: number, 
-/** Text size of the document in CSS pixels, so diagram labels match the body text. */
-fontPx?: number): Promise<DiagramResult[]>;
+export declare function renderMermaid(session: BrowserSession, blocks: MermaidBlock[], options?: MermaidRenderOptions): Promise<DiagramResult[]>;
 /**
  * Replace the Mermaid placeholders in `html` with rendered SVGs, or with a visible error box.
  * Returns the new HTML and one error diagnostic per failed diagram.

package/dist/render/mermaid.js

@@ -2,21 +2,40 @@ import { MERMAID_JS, readTextAsset } from "../assets.js";
 import { mermaidPlaceholder } from "../markdown/mermaid.js";
 import { fontFaceCss } from "./fonts.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";
 /** Width of the text column on A4 with 20 mm margins. */
 const DEFAULT_WIDTH_PX = 642;
 /** 10.5pt, the built-in themes' text size (Mermaid's own default is 16px). */
 const DEFAULT_FONT_PX = 14;
+/**
+ * Room kept for a heading printed together with the diagram below it (see keep-with-heading in
+ * theme.css, where the same allowance is subtracted), in multiples of the text size.
+ */
+export const HEADING_ALLOWANCE_EM = 5;
 let mermaidJs;
+function mermaidConfig(theme, fontPx, wrap) {
+    return {
+        startOnLoad: false,
+        securityLevel: "strict",
+        theme,
+        fontFamily: "Inter, sans-serif",
+        // Sequence diagrams take their text sizes from here, the others from themeVariables.
+        fontSize: fontPx,
+        themeVariables: { fontFamily: "Inter, sans-serif", fontSize: `${fontPx}px` },
+        htmlLabels: true,
+        // Actors only at the top of sequence diagrams: repeating them below costs height.
+        sequence: { mirrorActors: false },
+        ...(wrap === undefined ? {} : { flowchart: { wrappingWidth: wrap } }),
+    };
+}
 /**
  * Render Mermaid diagrams to SVG in a blank page that holds no user content: only the diagram
- * sources are passed in, as data. Mermaid runs with `securityLevel: "strict"`.
+ * sources are passed in, as data. Mermaid runs with `securityLevel: "strict"`. With `autofit`,
+ * flowcharts are rendered in several layouts and the one whose text prints largest is kept.
  */
-export async function renderMermaid(session, blocks, theme = "neutral", 
-/** Width of the text column, so diagrams are laid out at their printed size. */
-widthPx = DEFAULT_WIDTH_PX, 
-/** Text size of the document in CSS pixels, so diagram labels match the body text. */
-fontPx = DEFAULT_FONT_PX) {
+export async function renderMermaid(session, blocks, options = {}) {
+    const { theme = "neutral", widthPx = DEFAULT_WIDTH_PX, fontPx = DEFAULT_FONT_PX, pageHeightPx = Infinity, autofit = true, flip = "auto", } = options;
     mermaidJs ??= readTextAsset(MERMAID_JS);
     const page = await session.newPage();
     try {
@@ -24,35 +43,85 @@ fontPx = DEFAULT_FONT_PX) {
 body { margin: 0; width: ${widthPx}px; font-family: "Inter", sans-serif; }</style>
 </head><body></body></html>`);
         await page.evaluate(mermaidJs);
-        return await page.evaluate(async (sources, theme, fontPx) => {
+        await page.evaluate(async () => {
             // Runs in the browser. The project is compiled without DOM types, hence PageGlobals.
-            const { document, mermaid } = globalThis;
+            const { document } = globalThis;
             // Load the font weights Mermaid uses before it measures any text.
             await Promise.all(["400", "600", "700"].map((w) => document.fonts.load(`${w} 16px Inter`)));
-            mermaid.initialize({
-                startOnLoad: false,
-                securityLevel: "strict",
-                theme,
-                fontFamily: "Inter, sans-serif",
-                // Sequence diagrams take their text sizes from here, the others from themeVariables.
-                fontSize: fontPx,
-                themeVariables: { fontFamily: "Inter, sans-serif", fontSize: `${fontPx}px` },
-                htmlLabels: true,
-                // Actors only at the top of sequence diagrams: repeating them below costs height.
-                sequence: { mirrorActors: false },
-            });
-            const results = [];
-            for (const [i, source] of sources.entries()) {
-                try {
-                    const { svg } = await mermaid.render(`mermaid-${i + 1}`, source);
-                    results.push({ svg });
-                }
-                catch (error) {
-                    results.push({ error: String(error?.message ?? error) });
+        });
+        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);
+            try {
+                return { svg: (await mermaid.render(id, source)).svg };
+            }
+            catch (error) {
+                return { error: String(error?.message ?? error) };
+            }
+        }, source, id, mermaidConfig(theme, fontPx, wrap));
+        const results = [];
+        for (const [i, block] of blocks.entries()) {
+            const id = `mermaid-${i + 1}`;
+            const fit = {
+                width: widthPx,
+                height: block.afterHeading ? pageHeightPx - HEADING_ALLOWANCE_EM * fontPx : pageHeightPx,
+            };
+            const written = await render(block.source, id, undefined);
+            if ("error" in written) {
+                results.push(written);
+                continue;
+            }
+            const base = candidate(written.svg, undefined, false, fit);
+            const header = flowchartHeader(block.source);
+            if (!autofit || !base || !header || authorConfigured(block.source)) {
+                results.push({ svg: written.svg, scale: base?.scale });
+                continue;
+            }
+            let tried = 1;
+            const candidates = [base];
+            const tryWraps = async (source, flipped) => {
+                let previous = flipped ? undefined : base;
+                for (const wrap of WRAPPING_WIDTHS) {
+                    if (!flipped && wrap === undefined)
+                        continue; // that is `base`
+                    const rendered = await render(source, `${id}-${tried}`, wrap);
+                    tried++;
+                    if ("error" in rendered)
+                        continue;
+                    const next = candidate(rendered.svg, wrap, flipped, fit);
+                    if (!next)
+                        continue;
+                    candidates.push(next);
+                    if (wrapsExhausted(next, previous, fit))
+                        break;
+                    previous = next;
                 }
+            };
+            await tryWraps(block.source, false);
+            let chosen = chooseCandidate(candidates, base);
+            const turnedTo = flippedDirection(header.direction);
+            if (flip === "auto" && flipWorthTrying(chosen)) {
+                await tryWraps(withDirection(block.source, header, turnedTo), true);
+                chosen = chooseCandidate(candidates, base);
             }
-            return results;
-        }, blocks.map((b) => b.source), theme, fontPx);
+            // Candidate ids ("mermaid-2-3") stay unique in the document, and its styles are scoped
+            // to that id, so the chosen SVG is used as rendered.
+            results.push({
+                svg: chosen.svg,
+                scale: chosen.scale,
+                layout: {
+                    wrap: chosen.wrap,
+                    turned: chosen.flipped ? `${header.direction}→${turnedTo}` : undefined,
+                    baseScale: base.scale,
+                    scale: chosen.scale,
+                    baseHeight: Math.round(base.height * base.scale),
+                    height: Math.round(chosen.height * chosen.scale),
+                    tried,
+                },
+            });
+        }
+        return results;
     }
     finally {
         await page.close();

package/dist/run.js

@@ -26,6 +26,12 @@ export async function runJob(job, format, settings, browsers, io) {
         }
         if (io.verbose && result.configFile)
             io.err(`config: ${result.configFile}\n`);
+        if (io.verbose) {
+            for (const note of result.notes) {
+                const location = [displayPath(job.input), note.line].filter((p) => p !== undefined);
+                io.err(`${location.join(":")}: ${note.message}\n`);
+            }
+        }
         if (!io.quiet)
             io.out(`${result.output}\n`);
         if (io.verbose)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imontene/mdrender",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Command-line app for Windows and Linux that renders Markdown — with LaTeX equations and Mermaid diagrams — to PDF and HTML using the Inter typeface",
   "keywords": [
     "markdown",
@@ -60,7 +60,8 @@
     "check": "npm run format:check && npm run lint && npm run typecheck && npm test",
     "build:exe": "npm run build && node scripts/build-sea.mjs",
     "prepublishOnly": "npm run check && npm run build",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "bench:mermaid": "tsx tests/bench/mermaid-autofit.ts"
   },
   "dependencies": {
     "@fontsource/jetbrains-mono": "^5.3.0",