# core/formatters/diagram.formatter.ts

> 44 lines of code and 4 definitions.

Tree: Bane's Lab Build Scripts
Language: typescript
Layer: processing
Canonical: https://banes-lab.com/anatomy/build-scripts#file-build-scripts-core-formatters-diagram-formatter-ts
Source text: https://banes-lab.com/source/build-scripts/core/formatters/diagram.formatter.ts.txt

Listed in [core/formatters](https://banes-lab.com/api/source/build-scripts/core/formatters.md), after [core/formatters/data.formatter.ts](https://banes-lab.com/source/build-scripts/core/formatters/data.formatter.ts.md) and before [core/formatters/graph.formatter.ts](https://banes-lab.com/source/build-scripts/core/formatters/graph.formatter.ts.md).

## Definitions

- `fontFaceRules` (lexical_declaration, line 11)
- `fontLoads` (lexical_declaration, line 18)
- `stageMarkup` (lexical_declaration, line 22, exported)
- `config` (lexical_declaration, line 23, exported)

## Contained in

- [core/formatters](https://banes-lab.com/anatomy/build-scripts/folder-build-scripts-core-formatters.md)

## Linked from

- [core/formatters](https://banes-lab.com/anatomy/build-scripts/folder-build-scripts-core-formatters.md)

## Source

```typescript
import {
    ELK_BUNDLE,
    ELK_ROUTE,
    FONT_FACES,
    FONT_ROUTE,
    MERMAID_BUNDLE,
    MERMAID_ROUTE,
} from "#configuration/constants/diagram.constants";
import { themeVariables } from "#core/converters/diagram.converter";

const fontFaceRules = function fontFaceRules(): string {
    return FONT_FACES.map(
        ([family, weight, file]) =>
            `@font-face{font-family:"${family}";font-weight:${weight};src:url("${FONT_ROUTE}${file}") format("woff2");}`,
    ).join("");
};

const fontLoads = function fontLoads(): string {
    return FONT_FACES.map(([family, weight]) => `document.fonts.load('${weight} 16px "${family}"')`).join(",");
};

export const stageMarkup = function stageMarkup(tokens: ReadonlyMap<string, string>): string {
    const config = JSON.stringify({
        elk: { cycleBreakingStrategy: "MODEL_ORDER", nodePlacementStrategy: "BRANDES_KOEPF" },
        flowchart: { curve: "basis", htmlLabels: false, useMaxWidth: false },
        fontFamily: tokens.get("--font-family-base"),
        fontSize: 14,
        layout: "elk",
        startOnLoad: false,
        theme: "base",
        themeVariables: themeVariables(tokens),
    });
    return [
        '<!doctype html><meta charset="utf-8"><title>diagram stage</title>',
        `<style>${fontFaceRules()}</style>`,
        '<body><script type="module">',
        `import mermaid from "${MERMAID_ROUTE}${MERMAID_BUNDLE}";`,
        `import elk from "${ELK_ROUTE}${ELK_BUNDLE}";`,
        "mermaid.registerLayoutLoaders(elk);",
        `mermaid.initialize(${config});`,
        `await Promise.all([${fontLoads()}]);`,
        "await document.fonts.ready;",
        "window.renderDiagram = async (id, source) => (await mermaid.render(id, source)).svg;",
        "window.diagramsReady = true;",
        "</script>",
    ].join("");
};
```