@stream-markdown/mermaid 0.7.2

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jing Haihan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.mts

@@ -0,0 +1,68 @@
+import { MaybeGetter, SharedCdnOptions } from "@stream-markdown/core";
+import * as _$beautiful_mermaid0 from "beautiful-mermaid";
+import { RenderOptions, ThemeName } from "beautiful-mermaid";
+import * as _$mermaid from "mermaid";
+import { MermaidConfig } from "mermaid";
+
+//#region src/types.d.ts
+type MermaidRendererType = 'beautiful' | 'vanilla';
+interface MermaidRenderResult {
+  svg?: string;
+  error?: string;
+  valid: boolean;
+}
+interface MermaidParseResult {
+  valid: boolean;
+  error?: string;
+}
+interface MermaidRuntimeOptions {
+  renderer?: MaybeGetter<MermaidRendererType | undefined>;
+  theme?: MaybeGetter<[string, string] | undefined>;
+  beautifulTheme?: MaybeGetter<[ThemeName, ThemeName] | undefined>;
+  config?: MaybeGetter<MermaidConfig | undefined>;
+  beautifulConfig?: MaybeGetter<RenderOptions | undefined>;
+  cdnOptions?: MaybeGetter<SharedCdnOptions | undefined>;
+  isDark?: MaybeGetter<boolean | undefined>;
+  getThemeColors?: () => Promise<Record<string, string> | null>;
+}
+interface MermaidRuntime {
+  installed: Promise<boolean>;
+  preload: () => Promise<void>;
+  load: () => Promise<void>;
+  dispose: () => void;
+  parse: (code: string) => Promise<MermaidParseResult>;
+  render: (code: string) => Promise<MermaidRenderResult>;
+  save: (format: 'svg' | 'png', code: string) => Promise<void>;
+}
+//#endregion
+//#region src/beautiful-cdn.d.ts
+interface BeautifulMermaidCdnLoaderOptions {
+  cdnOptions?: MaybeGetter<SharedCdnOptions | undefined>;
+}
+declare function createBeautifulMermaidCdnLoader(options?: BeautifulMermaidCdnLoaderOptions): {
+  getCdnUrl: () => string | undefined;
+  loadCdn: () => Promise<typeof _$beautiful_mermaid0 | undefined>;
+};
+//#endregion
+//#region src/constants.d.ts
+declare const MERMAID_VERSION: string;
+declare const BEAUTIFUL_MERMAID_VERSION: string;
+declare const BEAUTIFUL_MERMAID_SUPPORTED_PATTERNS: readonly ['flowchart', 'graph', 'stateDiagram', 'sequence', 'classDiagram', 'erDiagram', 'xychart'];
+declare const DEFAULT_MERMAID_THEME: readonly ['neutral', 'dark'];
+declare const PRESET_BEAUTIFUL_MERMAID_CONFIG: RenderOptions;
+declare const DEFAULT_BEAUTIFUL_MERMAID_THEME: [ThemeName, ThemeName];
+//#endregion
+//#region src/mermaid-cdn.d.ts
+interface MermaidCdnLoaderOptions {
+  cdnOptions?: MaybeGetter<SharedCdnOptions | undefined>;
+}
+declare function createMermaidCdnLoader(options?: MermaidCdnLoaderOptions): {
+  getCdnUrl: () => string | undefined;
+  loadCdn: () => Promise<typeof _$mermaid | undefined>;
+};
+//#endregion
+//#region src/runtime.d.ts
+declare function resolveMermaidRendererType(options?: Pick<MermaidRuntimeOptions, 'renderer' | 'cdnOptions'>, hasBeautifulModule?: () => Promise<boolean>): Promise<MermaidRendererType>;
+declare function createMermaidRuntime(options?: MermaidRuntimeOptions): MermaidRuntime;
+//#endregion
+export { BEAUTIFUL_MERMAID_SUPPORTED_PATTERNS, BEAUTIFUL_MERMAID_VERSION, BeautifulMermaidCdnLoaderOptions, DEFAULT_BEAUTIFUL_MERMAID_THEME, DEFAULT_MERMAID_THEME, MERMAID_VERSION, type MaybeGetter, MermaidCdnLoaderOptions, MermaidParseResult, MermaidRenderResult, MermaidRendererType, MermaidRuntime, MermaidRuntimeOptions, PRESET_BEAUTIFUL_MERMAID_CONFIG, createBeautifulMermaidCdnLoader, createMermaidCdnLoader, createMermaidRuntime, resolveMermaidRendererType };

package/dist/index.mjs

@@ -0,0 +1,365 @@
+import { dynamicImport, getModuleFromImport, getModuleStrategy, isClient, isModuleEnabled, isSupportESM, removeTrailingSlash, resolveGetter, save, stripVersionRangePrefix, svgToPngBlob } from "@stream-markdown/core";
+import { randomStr } from "@antfu/utils";
+//#region package.json
+var dependencies = {
+	"@antfu/utils": "catalog:inlined",
+	"@stream-markdown/core": "workspace:*",
+	"beautiful-mermaid": "^1.1.3",
+	"mermaid": "^11.13.0"
+};
+//#endregion
+//#region src/constants.ts
+const MERMAID_VERSION = stripVersionRangePrefix(dependencies.mermaid);
+const BEAUTIFUL_MERMAID_VERSION = stripVersionRangePrefix(dependencies["beautiful-mermaid"]);
+const BEAUTIFUL_MERMAID_SUPPORTED_PATTERNS = [
+	"flowchart",
+	"graph",
+	"stateDiagram",
+	"sequence",
+	"classDiagram",
+	"erDiagram",
+	"xychart"
+];
+const DEFAULT_MERMAID_THEME = ["neutral", "dark"];
+const PRESET_BEAUTIFUL_MERMAID_CONFIG = { padding: 8 };
+const DEFAULT_BEAUTIFUL_MERMAID_THEME = ["github-light", "github-dark"];
+//#endregion
+//#region src/beautiful-cdn.ts
+let beautifulMermaidModule = null;
+function createBeautifulMermaidCdnLoader(options) {
+	function getCdnUrl() {
+		const cdnOptions = resolveGetter(options?.cdnOptions);
+		const enabled = isModuleEnabled(cdnOptions?.beautifulMermaid);
+		const strategy = getModuleStrategy(cdnOptions?.beautifulMermaid);
+		const baseUrl = cdnOptions?.baseUrl ? removeTrailingSlash(cdnOptions.baseUrl) : "";
+		const customGetter = !!cdnOptions?.getUrl;
+		if (!enabled) return void 0;
+		if (!baseUrl && !customGetter) return void 0;
+		if (customGetter) {
+			const url = cdnOptions?.getUrl?.("beautiful-mermaid", BEAUTIFUL_MERMAID_VERSION);
+			if (url) return url;
+		}
+		const umd = `${baseUrl}/beautiful-mermaid@${BEAUTIFUL_MERMAID_VERSION}/dist/beautiful-mermaid.browser.global.min.js`;
+		if (strategy === "umd") return umd;
+		return isSupportESM() ? `${baseUrl}/beautiful-mermaid@${BEAUTIFUL_MERMAID_VERSION}/+esm` : umd;
+	}
+	async function loadCdn() {
+		if (beautifulMermaidModule) return beautifulMermaidModule;
+		const url = getCdnUrl();
+		if (!url) return void 0;
+		const module = await dynamicImport(url);
+		beautifulMermaidModule = getModuleFromImport(module, "beautifulMermaid");
+		return beautifulMermaidModule ?? module;
+	}
+	return {
+		getCdnUrl,
+		loadCdn
+	};
+}
+//#endregion
+//#region src/mermaid-cdn.ts
+let mermaidModule = null;
+function createMermaidCdnLoader(options) {
+	function getCdnUrl() {
+		const cdnOptions = resolveGetter(options?.cdnOptions);
+		const enabled = isModuleEnabled(cdnOptions?.mermaid);
+		const strategy = getModuleStrategy(cdnOptions?.mermaid);
+		const baseUrl = cdnOptions?.baseUrl ? removeTrailingSlash(cdnOptions.baseUrl) : "";
+		const customGetter = !!cdnOptions?.getUrl;
+		if (!enabled) return void 0;
+		if (!baseUrl && !customGetter) return void 0;
+		if (customGetter) {
+			const url = cdnOptions?.getUrl?.("mermaid", MERMAID_VERSION);
+			if (url) return url;
+		}
+		const umd = `${baseUrl}/mermaid@${MERMAID_VERSION}/dist/mermaid.min.js`;
+		if (strategy === "umd") return umd;
+		return isSupportESM() ? `${baseUrl}/mermaid@${MERMAID_VERSION}/+esm` : umd;
+	}
+	async function loadCdn() {
+		if (mermaidModule) return mermaidModule;
+		const url = getCdnUrl();
+		if (!url) return void 0;
+		const module = await dynamicImport(url);
+		mermaidModule = getModuleFromImport(module, "mermaid");
+		return mermaidModule ?? module;
+	}
+	return {
+		getCdnUrl,
+		loadCdn
+	};
+}
+//#endregion
+//#region src/runtime/base.ts
+var MermaidRenderer = class {
+	options;
+	loaded = false;
+	constructor(options = {}) {
+		this.options = options;
+	}
+	isLoaded() {
+		return this.loaded;
+	}
+	async ensureLoaded() {
+		if (!this.loaded) {
+			await this.load();
+			this.loaded = true;
+		}
+	}
+	toError(error) {
+		return error instanceof Error ? error.message : String(error);
+	}
+};
+//#endregion
+//#region src/runtime/vanilla.ts
+async function hasBundledMermaidModule() {
+	try {
+		await import("mermaid");
+		return true;
+	} catch {
+		return false;
+	}
+}
+var VanillaMermaidRenderer = class extends MermaidRenderer {
+	mermaid = null;
+	get currentTheme() {
+		const [light, dark] = resolveGetter(this.options.theme) ?? DEFAULT_MERMAID_THEME;
+		return resolveGetter(this.options.isDark) ? dark : light;
+	}
+	wrapThemeCode(code) {
+		if (code.startsWith("%%{")) return code;
+		return `%%{init: {"theme": "${this.currentTheme}"}}%%\n${code}`;
+	}
+	async load() {
+		if (this.mermaid) return;
+		const cdnLoader = createMermaidCdnLoader({ cdnOptions: this.options.cdnOptions });
+		if (!(cdnLoader.getCdnUrl() ? true : await hasBundledMermaidModule())) throw new Error("Mermaid module is not available");
+		const module = (await cdnLoader.loadCdn() ?? await import("mermaid")).default;
+		module.initialize({
+			startOnLoad: false,
+			securityLevel: "loose",
+			...resolveGetter(this.options.config) ?? {}
+		});
+		this.mermaid = module;
+	}
+	isSupported() {
+		return true;
+	}
+	async parse(code) {
+		try {
+			await this.ensureLoaded();
+			await this.mermaid.parse(this.wrapThemeCode(code));
+			return { valid: true };
+		} catch (error) {
+			return {
+				valid: false,
+				error: this.toError(error)
+			};
+		}
+	}
+	async render(code) {
+		const parseResult = await this.parse(code);
+		if (!parseResult.valid || !isClient()) return {
+			error: parseResult.error,
+			valid: false
+		};
+		const id = `mermaid-${randomStr()}`;
+		try {
+			return {
+				svg: (await this.mermaid.render(id, this.wrapThemeCode(code))).svg,
+				valid: true
+			};
+		} catch (error) {
+			document.getElementById(`d${id}`)?.remove();
+			return {
+				valid: false,
+				error: this.toError(error)
+			};
+		}
+	}
+	async isEnabled() {
+		const cdnLoader = createMermaidCdnLoader({ cdnOptions: this.options.cdnOptions });
+		try {
+			if (await hasBundledMermaidModule()) return true;
+			return !!cdnLoader.getCdnUrl();
+		} catch {
+			return false;
+		}
+	}
+};
+//#endregion
+//#region src/runtime/beautiful.ts
+const DIAGRAM_TYPE_PATTERN = new RegExp(`^(${BEAUTIFUL_MERMAID_SUPPORTED_PATTERNS.join("|")})`);
+async function hasBundledBeautifulMermaidModule$1() {
+	try {
+		await import("beautiful-mermaid");
+		return true;
+	} catch {
+		return false;
+	}
+}
+function extractDiagramType(code) {
+	const lines = code.trim().split("\n");
+	for (const line of lines) {
+		const trimmed = line.trim();
+		if (trimmed && !trimmed.startsWith("%%")) return trimmed.match(DIAGRAM_TYPE_PATTERN)?.[1] ?? "unknown";
+	}
+	return "unknown";
+}
+function mightBeSupported(diagramType) {
+	return BEAUTIFUL_MERMAID_SUPPORTED_PATTERNS.some((pattern) => diagramType.startsWith(pattern));
+}
+var BeautifulMermaidRenderer = class extends MermaidRenderer {
+	beautifulMermaid = null;
+	vanillaRenderer = null;
+	getVanillaRenderer() {
+		if (!this.vanillaRenderer) this.vanillaRenderer = new VanillaMermaidRenderer(this.options);
+		return this.vanillaRenderer;
+	}
+	get currentTheme() {
+		const [light, dark] = resolveGetter(this.options.beautifulTheme) ?? DEFAULT_BEAUTIFUL_MERMAID_THEME;
+		return resolveGetter(this.options.isDark) ? dark : light;
+	}
+	get mergedOptions() {
+		return {
+			...PRESET_BEAUTIFUL_MERMAID_CONFIG,
+			...resolveGetter(this.options.beautifulConfig) ?? {}
+		};
+	}
+	async getRenderOptions() {
+		const presetOptions = this.beautifulMermaid?.THEMES[this.currentTheme];
+		if (presetOptions) return {
+			...presetOptions,
+			...this.mergedOptions
+		};
+		const colors = await this.options.getThemeColors?.();
+		return colors ? {
+			...colors,
+			...this.mergedOptions
+		} : this.mergedOptions;
+	}
+	async load() {
+		if (this.beautifulMermaid) return;
+		const cdnLoader = createBeautifulMermaidCdnLoader({ cdnOptions: this.options.cdnOptions });
+		this.beautifulMermaid = await cdnLoader.loadCdn() ?? await import("beautiful-mermaid");
+	}
+	isSupported(diagramType) {
+		return mightBeSupported(diagramType);
+	}
+	async parse(code) {
+		if (!mightBeSupported(extractDiagramType(code))) return this.getVanillaRenderer().parse(code);
+		try {
+			await this.ensureLoaded();
+			return { valid: true };
+		} catch (error) {
+			return {
+				valid: false,
+				error: this.toError(error)
+			};
+		}
+	}
+	async render(code) {
+		if (!mightBeSupported(extractDiagramType(code))) return this.getVanillaRenderer().render(code);
+		try {
+			await this.ensureLoaded();
+			const renderOptions = await this.getRenderOptions();
+			return {
+				svg: await this.beautifulMermaid.renderMermaidSVGAsync(code, renderOptions),
+				valid: true
+			};
+		} catch (error) {
+			return {
+				valid: false,
+				error: this.toError(error)
+			};
+		}
+	}
+	async isEnabled() {
+		const cdnLoader = createBeautifulMermaidCdnLoader({ cdnOptions: this.options.cdnOptions });
+		try {
+			if (await hasBundledBeautifulMermaidModule$1()) return true;
+			return !!cdnLoader.getCdnUrl();
+		} catch {
+			return false;
+		}
+	}
+};
+//#endregion
+//#region src/runtime.ts
+async function hasBundledBeautifulMermaidModule() {
+	try {
+		await import("beautiful-mermaid");
+		return true;
+	} catch {
+		return false;
+	}
+}
+async function resolveMermaidRendererType(options = {}, hasBeautifulModule = hasBundledBeautifulMermaidModule) {
+	const cdnLoader = createBeautifulMermaidCdnLoader({ cdnOptions: options.cdnOptions });
+	const renderer = resolveGetter(options.renderer);
+	if (renderer === "beautiful") return "beautiful";
+	if (renderer === "vanilla") return "vanilla";
+	if (cdnLoader.getCdnUrl()) return "beautiful";
+	return await hasBeautifulModule() ? "beautiful" : "vanilla";
+}
+function createMermaidRuntime(options = {}) {
+	let beautifulRenderer = null;
+	let vanillaRenderer = null;
+	let activeRenderer = null;
+	let activeRendererType = null;
+	const createRenderer = (rendererType) => {
+		if (rendererType === "beautiful") {
+			if (!beautifulRenderer) beautifulRenderer = new BeautifulMermaidRenderer(options);
+			return beautifulRenderer;
+		}
+		if (!vanillaRenderer) vanillaRenderer = new VanillaMermaidRenderer(options);
+		return vanillaRenderer;
+	};
+	const getRenderer = async () => {
+		const rendererType = await resolveMermaidRendererType(options);
+		if (activeRenderer && activeRendererType === rendererType) return activeRenderer;
+		const renderer = createRenderer(rendererType);
+		activeRenderer = renderer;
+		activeRendererType = rendererType;
+		return renderer;
+	};
+	async function load() {
+		await (await getRenderer()).load();
+	}
+	async function parse(code) {
+		return await (await getRenderer()).parse(code);
+	}
+	async function render(code) {
+		return await (await getRenderer()).render(code);
+	}
+	async function saveDiagram(format, code) {
+		const { svg } = await render(code);
+		if (!svg) throw new Error("SVG not found. Please wait for the diagram to render.");
+		if (format === "svg") {
+			save("diagram.svg", svg, "image/svg+xml");
+			return;
+		}
+		const blob = await svgToPngBlob(svg);
+		if (!blob) throw new Error("Failed to export PNG image");
+		save("diagram.png", blob, "image/png");
+	}
+	async function preload() {
+		const renderer = await getRenderer();
+		if (!await renderer.isEnabled()) return;
+		if (!renderer.isLoaded()) await renderer.load();
+	}
+	return {
+		installed: getRenderer().then((renderer) => renderer.isEnabled()),
+		preload,
+		load,
+		dispose() {
+			activeRenderer = null;
+			activeRendererType = null;
+		},
+		parse,
+		render,
+		save: saveDiagram
+	};
+}
+//#endregion
+export { BEAUTIFUL_MERMAID_SUPPORTED_PATTERNS, BEAUTIFUL_MERMAID_VERSION, DEFAULT_BEAUTIFUL_MERMAID_THEME, DEFAULT_MERMAID_THEME, MERMAID_VERSION, PRESET_BEAUTIFUL_MERMAID_CONFIG, createBeautifulMermaidCdnLoader, createMermaidCdnLoader, createMermaidRuntime, resolveMermaidRendererType };

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@stream-markdown/mermaid",
+  "type": "module",
+  "version": "0.7.2",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@antfu/utils": "^9.3.0",
+    "beautiful-mermaid": "^1.1.3",
+    "mermaid": "^11.13.0",
+    "@stream-markdown/core": "0.7.2"
+  },
+  "devDependencies": {
+    "tsdown": "^0.21.10"
+  },
+  "scripts": {
+    "build": "tsdown"
+  }
+}