@imontene/mdrender 2.1.0 → 2.3.0

package/dist/options.js

@@ -5,7 +5,9 @@ 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 TEXT_FONTS = ["manrope", "inter"];
 export const DENSITIES = ["normal", "compact"];
 export const DEFAULT_OPTIONS = {
     pageSize: "Letter",
@@ -14,6 +16,9 @@ export const DEFAULT_OPTIONS = {
     toc: false,
     tocDepth: 3,
     pageNumbers: true,
+    mermaidAutofit: true,
+    mermaidFlip: "auto",
+    font: "manrope",
     density: "normal",
     theme: "light",
     css: [],
@@ -110,6 +115,9 @@ const VALIDATORS = {
     header: text,
     footer: text,
     mermaidTheme: oneOf(MERMAID_THEMES),
+    mermaidAutofit: bool,
+    mermaidFlip: oneOf(MERMAID_FLIPS),
+    font: oneOf(TEXT_FONTS),
     density: oneOf(DENSITIES),
     fontSize,
     theme: (value, describe, baseDir) => {

package/dist/render/fonts.d.ts

@@ -1,10 +1,24 @@
-/** Inter Regular alone, for page headers/footers (Chrome renders them apart from the page). */
-export declare function interRegularFontFace(): string;
+import type { TextFont } from "../options.js";
+/**
+ * Static (non-variable) font files are used on purpose: Chromium embeds variable fonts in PDFs
+ * as Type 3 fonts, while static fonts are embedded as proper TrueType fonts.
+ *
+ * Text: Manrope (default) from Fontsource, or Inter 4 from the upstream release (full glyph
+ * set). Manrope covers Latin, Greek, Cyrillic and Vietnamese but has no italics (the browser
+ * slants it) nor arrows and math symbols such as → ✓ ≤: those fall back to Inter, which is
+ * embedded too in its regular and bold weights.
+ * Code: JetBrains Mono from Fontsource (split into unicode-range subsets).
+ */
+export declare const FONT_FAMILIES: Record<TextFont, string>;
+/** CSS font-family list for the text: the chosen font, Inter for missing glyphs, the system's. */
+export declare function fontStack(font: TextFont): string;
 /**
  * Inline a Fontsource stylesheet: the woff2 source becomes a data URI (the legacy woff fallback is
  * dropped) so the document needs no network or file access. `font-display: block` makes the
  * browser wait for the real font instead of printing with a fallback.
  */
 export declare function inlineFontStylesheet(cssKey: string): string;
-/** @font-face rules for every bundled font, with the font files embedded. */
-export declare function fontFaceCss(): string;
+/** @font-face rules for every font a document uses, with the font files embedded. */
+export declare function fontFaceCss(font?: TextFont): string;
+/** The text font's regular weight alone, for page headers/footers (rendered apart from the page). */
+export declare function regularFontFace(font?: TextFont): string;

package/dist/render/fonts.js

@@ -1,11 +1,21 @@
-import { INTER_DIR, INTER_FACES, MONO_STYLESHEETS, readAsset, readTextAsset, woff2References, } from "../assets.js";
+import { INTER_DIR, INTER_FACES, MANROPE_STYLESHEETS, MONO_STYLESHEETS, readAsset, readTextAsset, woff2References, } from "../assets.js";
 /**
  * Static (non-variable) font files are used on purpose: Chromium embeds variable fonts in PDFs
  * as Type 3 fonts, while static fonts are embedded as proper TrueType fonts.
  *
- * Text: Inter 4 (the typeface served by Google Fonts) from the upstream release, full glyph set.
+ * Text: Manrope (default) from Fontsource, or Inter 4 from the upstream release (full glyph
+ * set). Manrope covers Latin, Greek, Cyrillic and Vietnamese but has no italics (the browser
+ * slants it) nor arrows and math symbols such as → ✓ ≤: those fall back to Inter, which is
+ * embedded too in its regular and bold weights.
  * Code: JetBrains Mono from Fontsource (split into unicode-range subsets).
  */
+export const FONT_FAMILIES = { manrope: "Manrope", inter: "Inter" };
+/** CSS font-family list for the text: the chosen font, Inter for missing glyphs, the system's. */
+export function fontStack(font) {
+    return font === "inter"
+        ? `"Inter", system-ui, sans-serif`
+        : `"Manrope", "Inter", system-ui, sans-serif`;
+}
 function woff2DataUri(key) {
     return `data:font/woff2;base64,${readAsset(key).toString("base64")}`;
 }
@@ -18,12 +28,6 @@ function interFace({ weight, style, file }) {
   src: url(${woff2DataUri(`${INTER_DIR}/${file}`)}) format("woff2");
 }`;
 }
-let regularFace;
-/** Inter Regular alone, for page headers/footers (Chrome renders them apart from the page). */
-export function interRegularFontFace() {
-    regularFace ??= interFace(INTER_FACES[0]);
-    return regularFace;
-}
 /**
  * Inline a Fontsource stylesheet: the woff2 source becomes a data URI (the legacy woff fallback is
  * dropped) so the document needs no network or file access. `font-display: block` makes the
@@ -38,10 +42,39 @@ export function inlineFontStylesheet(cssKey) {
         .replace(/,\s*url\([^)]+\.woff\)\s*format\(['"]woff['"]\)/g, "")
         .replace(/url\((['"]?)([^)'"]+\.woff2)\1\)/g, () => `url(${woff2DataUri(fonts[index++])})`);
 }
-let cached;
-/** @font-face rules for every bundled font, with the font files embedded. */
-export function fontFaceCss() {
-    cached ??= [...INTER_FACES.map(interFace), ...MONO_STYLESHEETS.map(inlineFontStylesheet)].join("\n");
-    return cached;
+const interUpright = (weight) => INTER_FACES.find((face) => face.weight === weight && face.style === "normal");
+/** @font-face rules for the text font and its fallback, with the font files embedded. */
+function textFaces(font) {
+    if (font === "inter")
+        return INTER_FACES.map(interFace);
+    return [
+        ...MANROPE_STYLESHEETS.map(inlineFontStylesheet),
+        // Fallback for glyphs Manrope lacks; 600 text takes the nearest heavier face, 700.
+        interFace(interUpright(400)),
+        interFace(interUpright(700)),
+    ];
+}
+const cached = new Map();
+/** @font-face rules for every font a document uses, with the font files embedded. */
+export function fontFaceCss(font = "manrope") {
+    let css = cached.get(font);
+    if (css === undefined) {
+        css = [...textFaces(font), ...MONO_STYLESHEETS.map(inlineFontStylesheet)].join("\n");
+        cached.set(font, css);
+    }
+    return css;
+}
+const regularFaces = new Map();
+/** The text font's regular weight alone, for page headers/footers (rendered apart from the page). */
+export function regularFontFace(font = "manrope") {
+    let css = regularFaces.get(font);
+    if (css === undefined) {
+        css =
+            font === "inter"
+                ? interFace(interUpright(400))
+                : [inlineFontStylesheet(MANROPE_STYLESHEETS[0]), interFace(interUpright(400))].join("\n");
+        regularFaces.set(font, css);
+    }
+    return css;
 }
 //# sourceMappingURL=fonts.js.map

package/dist/render/header-footer.d.ts

@@ -1,3 +1,4 @@
+import type { TextFont } from "../options.js";
 /**
  * Header/footer text with placeholders, in up to three columns separated by `|`:
  *
@@ -13,10 +14,10 @@ export interface HeaderFooterValues {
 }
 /**
  * Chrome header/footer template. Chrome renders it apart from the page, so it carries its own
- * styles and its own copy of Inter.
+ * styles and its own copy of the text font.
  */
 export declare function headerFooterTemplate(spec: string | undefined, values: HeaderFooterValues, horizontalMargin: {
     left: string;
     right: string;
-}): string;
+}, font?: TextFont): string;
 export declare const DEFAULT_FOOTER = "{page} / {pages}";

package/dist/render/header-footer.js

@@ -1,5 +1,5 @@
 import { escapeHtml } from "../html.js";
-import { interRegularFontFace } from "./fonts.js";
+import { fontStack, regularFontFace } from "./fonts.js";
 const CHROME_CLASSES = { page: "pageNumber", pages: "totalPages" };
 function renderText(text, values) {
     return escapeHtml(text.trim()).replace(/\{(\w+)\}/g, (match, name) => {
@@ -21,15 +21,15 @@ function columns(spec) {
 }
 /**
  * Chrome header/footer template. Chrome renders it apart from the page, so it carries its own
- * styles and its own copy of Inter.
+ * styles and its own copy of the text font.
  */
-export function headerFooterTemplate(spec, values, horizontalMargin) {
+export function headerFooterTemplate(spec, values, horizontalMargin, font = "manrope") {
     if (!spec)
         return "<span></span>";
     const [left, center, right] = columns(spec).map((c) => renderText(c, values));
-    return `<style>${interRegularFontFace()}</style>
+    return `<style>${regularFontFace(font)}</style>
 <div style="box-sizing: border-box; width: 100%; display: flex; padding: 0 ${horizontalMargin.right} 0 ${horizontalMargin.left};
-  font-family: Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 8pt; color: #59636e;">
+  font-family: ${fontStack(font).replaceAll('"', "'")}; font-size: 8pt; color: #59636e;">
   <span style="flex: 1; text-align: left;">${left}</span>
   <span style="flex: 1; text-align: center;">${center}</span>
   <span style="flex: 1; text-align: right;">${right}</span>

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,56 @@
 import type { Diagnostic } from "../diagnostics.js";
 import type { MermaidBlock } from "../markdown/env.js";
-import type { MermaidTheme } from "../options.js";
+import type { MermaidFlip, MermaidTheme, TextFont } 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;
+    /** Text font of the document, used for diagram labels too. */
+    font?: TextFont;
+}
+/**
+ * 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

@@ -1,58 +1,129 @@
 import { MERMAID_JS, readTextAsset } from "../assets.js";
 import { mermaidPlaceholder } from "../markdown/mermaid.js";
-import { fontFaceCss } from "./fonts.js";
+import { FONT_FAMILIES, fontFaceCss, fontStack } 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, font, fontPx, wrap) {
+    const fontFamily = fontStack(font);
+    return {
+        startOnLoad: false,
+        securityLevel: "strict",
+        theme,
+        fontFamily,
+        // Sequence diagrams take their text sizes from here, the others from themeVariables.
+        fontSize: fontPx,
+        themeVariables: { fontFamily, 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", font = "manrope", } = options;
+    const family = FONT_FAMILIES[font];
     mermaidJs ??= readTextAsset(MERMAID_JS);
     const page = await session.newPage();
     try {
-        await page.setContent(`<!doctype html><html><head><meta charset="utf-8"><style>${fontFaceCss()}
-body { margin: 0; width: ${widthPx}px; font-family: "Inter", sans-serif; }</style>
+        await page.setContent(`<!doctype html><html><head><meta charset="utf-8"><style>${fontFaceCss(font)}
+body { margin: 0; width: ${widthPx}px; font-family: ${fontStack(font)}; }</style>
 </head><body></body></html>`);
         await page.evaluate(mermaidJs);
-        return await page.evaluate(async (sources, theme, fontPx) => {
+        await page.evaluate(async (family) => {
             // 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) });
+            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 { 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, font, 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/render/template.d.ts

@@ -1,4 +1,5 @@
 import { escapeHtml } from "../html.js";
+import type { TextFont } from "../options.js";
 export { escapeHtml };
 /** Stylesheets of a built-in theme ("light" or "dark"). */
 export declare function builtinThemeCss(theme: "light" | "dark"): string[];
@@ -17,6 +18,8 @@ export interface DocumentParts {
     showTitle?: boolean;
     /** Theme stylesheet contents. Defaults to the built-in light theme. */
     themeCss?: string[];
+    /** Text font to embed. Defaults to Manrope. */
+    font?: TextFont;
     /** Layout stylesheets (density, font size, page height), applied after the theme. */
     layoutCss?: string[];
     /** Extra stylesheet contents, applied after the theme and layout. */