Add mermaid.tiny.min.js. 69.7% size reduction.

.esbuild/build.ts

@@ -27,7 +27,14 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
       // mermaid.js
       { ...iifeOptions },
       // mermaid.min.js
-      { ...iifeOptions, minify: true, metafile: shouldVisualize }
+      { ...iifeOptions, minify: true, metafile: shouldVisualize },
+      // mermaid.tiny.min.js
+      {
+        ...iifeOptions,
+        minify: true,
+        includeLargeFeatures: false,
+        metafile: shouldVisualize,
+      }
     );
   }
 

.esbuild/util.ts

@@ -14,13 +14,15 @@ export interface MermaidBuildOptions {
   metafile: boolean;
   format: 'esm' | 'iife';
   entryName: keyof typeof packageOptions;
+  includeLargeFeatures: boolean;
 }
 
 export const defaultOptions: Omit<MermaidBuildOptions, 'entryName'> = {
   minify: false,
   metafile: false,
   core: false,
   format: 'esm',
+  includeLargeFeatures: true,
 } as const;
 
 const buildOptions = (override: BuildOptions): BuildOptions => {
@@ -34,25 +36,31 @@ const buildOptions = (override: BuildOptions): BuildOptions => {
     external: ['require', 'fs', 'path'],
     outdir: 'dist',
     plugins: [jisonPlugin, jsonSchemaPlugin],
-    sourcemap: 'external',
+    // sourcemap: 'linked',
     ...override,
   };
 };
 
-const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOptions) => {
+const getFileName = (
+  fileName: string,
+  { core, format, minify, includeLargeFeatures }: MermaidBuildOptions
+) => {
   if (core) {
     fileName += '.core';
   } else if (format === 'esm') {
     fileName += '.esm';
   }
+  if (!includeLargeFeatures) {
+    fileName += '.tiny';
+  }
   if (minify) {
     fileName += '.min';
   }
   return fileName;
 };
 
 export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
-  const { core, entryName, metafile, format, minify } = options;
+  const { core, entryName, metafile, format, includeLargeFeatures, minify } = options;
   const external: string[] = ['require', 'fs', 'path'];
   const { name, file, packageName } = packageOptions[entryName];
   const outFileName = getFileName(name, options);
@@ -66,6 +74,8 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
     logLevel: 'info',
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
+      // This needs to be stringified for esbuild
+      includeLargeFeatures: `${includeLargeFeatures}`,
       'import.meta.vitest': 'undefined',
     },
   });

.github/workflows/build.yml

@@ -39,11 +39,13 @@ jobs:
       - name: Upload Mermaid Build as Artifact
         uses: actions/upload-artifact@v4
         with:
-          name: mermaid-build
+          name: mermaid
           path: packages/mermaid/dist
 
-      - name: Upload Mermaid Mindmap Build as Artifact
+      - name: Upload all packages as Artifact
         uses: actions/upload-artifact@v4
         with:
-          name: mermaid-mindmap-build
-          path: packages/mermaid-mindmap/dist
+          name: mermaid-all
+          path: |
+            packages/**/dist
+            !**/node_modules

.vite/build.ts

@@ -93,6 +93,10 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       }),
       ...visualizerOptions(packageName, core),
     ],
+    define: {
+      // Needs to be string
+      includeLargeFeatures: 'true',
+    },
   };
 
   if (watch && config.build) {

docs/config/setup/interfaces/mermaidAPI.ParseOptions.md

@@ -19,4 +19,4 @@ The `parseError` function will not be called.
 
 #### Defined in
 
-[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64)
+[mermaidAPI.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L66)

docs/config/setup/interfaces/mermaidAPI.ParseResult.md

@@ -18,4 +18,4 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 #### Defined in
 
-[mermaidAPI.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L71)
+[mermaidAPI.ts:73](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L73)

docs/config/setup/interfaces/mermaidAPI.RenderResult.md

@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[mermaidAPI.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L94)
+[mermaidAPI.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L96)
 
 ---
 
@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 #### Defined in
 
-[mermaidAPI.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L84)
+[mermaidAPI.ts:86](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L86)
 
 ---
 
@@ -63,4 +63,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80)
+[mermaidAPI.ts:82](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L82)

docs/config/setup/modules/mermaidAPI.md

@@ -26,7 +26,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:74](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L74)
+[mermaidAPI.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L76)
 
 ## Variables
 
@@ -98,7 +98,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:635](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L635)
+[mermaidAPI.ts:637](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L637)
 
 ## Functions
 
@@ -129,7 +129,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:277](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L277)
+[mermaidAPI.ts:279](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L279)
 
 ---
 
@@ -155,7 +155,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L223)
+[mermaidAPI.ts:225](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L225)
 
 ---
 
@@ -180,7 +180,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L153)
+[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)
 
 ---
 
@@ -203,7 +203,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L200)
+[mermaidAPI.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L202)
 
 ---
 
@@ -230,7 +230,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L138)
+[mermaidAPI.ts:140](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L140)
 
 ---
 
@@ -256,7 +256,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:254](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L254)
+[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256)
 
 ---
 
@@ -281,4 +281,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:327](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L327)
+[mermaidAPI.ts:329](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L329)

packages/mermaid/src/diagram-api/diagram-orchestration.ts

@@ -24,6 +24,7 @@ import { packet } from '../diagrams/packet/detector.js';
 import block from '../diagrams/block/blockDetector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
+import '../type.d.ts';
 
 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {
@@ -66,6 +67,11 @@ export const addDiagrams = () => {
       return text.toLowerCase().trimStart().startsWith('---');
     }
   );
+
+  if (includeLargeFeatures) {
+    registerLazyLoadedDiagrams(flowchartElk, mindmap);
+  }
+
   // Ordering of detectors is important. The first one to return true will be used.
   registerLazyLoadedDiagrams(
     c4,
@@ -77,10 +83,8 @@ export const addDiagrams = () => {
     pie,
     requirement,
     sequence,
-    flowchartElk,
     flowchartV2,
     flowchart,
-    mindmap,
     timeline,
     git,
     stateV2,

packages/mermaid/src/diagrams/common/common.ts

@@ -341,27 +341,34 @@ export const renderKatex = async (text: string, config: MermaidConfig): Promise<
     return text.replace(katexRegex, 'MathML is unsupported in this environment.');
   }
 
-  const { default: katex } = await import('katex');
-  return text
-    .split(lineBreakRegex)
-    .map((line) =>
-      hasKatex(line)
-        ? `<div style="display: flex; align-items: center; justify-content: center; white-space: nowrap;">
+  if (includeLargeFeatures) {
+    const { default: katex } = await import('katex');
+    return text
+      .split(lineBreakRegex)
+      .map((line) =>
+        hasKatex(line)
+          ? `<div style="display: flex; align-items: center; justify-content: center; white-space: nowrap;">
               ${line}
             </div>`
-        : `<div>${line}</div>`
-    )
-    .join('')
-    .replace(katexRegex, (_, c) =>
-      katex
-        .renderToString(c, {
-          throwOnError: true,
-          displayMode: true,
-          output: isMathMLSupported() ? 'mathml' : 'htmlAndMathml',
-        })
-        .replace(/\n/g, ' ')
-        .replace(/<annotation.*<\/annotation>/g, '')
-    );
+          : `<div>${line}</div>`
+      )
+      .join('')
+      .replace(katexRegex, (_, c) =>
+        katex
+          .renderToString(c, {
+            throwOnError: true,
+            displayMode: true,
+            output: isMathMLSupported() ? 'mathml' : 'htmlAndMathml',
+          })
+          .replace(/\n/g, ' ')
+          .replace(/<annotation.*<\/annotation>/g, '')
+      );
+  }
+
+  return text.replace(
+    katexRegex,
+    'Katex is unsupported in mermaid.tiny.js. Please use mermaid.js or mermaid.min.js.'
+  );
 };
 
 export default {

packages/mermaid/src/diagrams/error/errorDiagram.ts

@@ -1,7 +1,7 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 import { renderer } from './errorRenderer.js';
 
-const diagram: DiagramDefinition = {
+export const diagram: DiagramDefinition = {
   db: {},
   renderer,
   parser: {

packages/mermaid/src/diagrams/info/infoRenderer.ts

@@ -1,6 +1,6 @@
 import { log } from '../../logger.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
-import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
+import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 
 /**
@@ -15,15 +15,14 @@ const draw: DrawDefinition = (text, id, version) => {
 
   const svg: SVG = selectSvgElement(id);
   configureSvgSize(svg, 100, 400, true);
-
-  const group: Group = svg.append('g');
-  group
+  svg
     .append('text')
-    .attr('x', 100)
-    .attr('y', 40)
+    .attr('x', '50%')
+    .attr('y', '50%')
     .attr('class', 'version')
     .attr('font-size', 32)
-    .style('text-anchor', 'middle')
+    .attr('dominant-baseline', 'middle')
+    .attr('text-anchor', 'middle')
     .text(`v${version}`);
 };
 

packages/mermaid/src/mermaidAPI.ts

@@ -14,7 +14,7 @@
 import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
 // @ts-ignore: TODO Fix ts errors
-import { version } from '../package.json';
+import { version as packageVersion } from '../package.json';
 import * as configApi from './config.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { Diagram } from './Diagram.js';
@@ -32,6 +32,8 @@ import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.
 import { preprocessDiagram } from './preprocess.js';
 import { decodeEntities } from './utils.js';
 
+const version = packageVersion + (includeLargeFeatures ? '' : '-tiny');
+
 const MAX_TEXTLENGTH = 50_000;
 const MAX_TEXTLENGTH_EXCEEDED_MSG =
   'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';

packages/mermaid/src/type.d.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-var
+declare var includeLargeFeatures: boolean;

vite.config.ts

@@ -35,6 +35,8 @@ export default defineConfig({
     },
   },
   define: {
+    // Needs to be string
+    includeLargeFeatures: 'true',
     'import.meta.vitest': 'undefined',
   },
 });