@ai-gui/plugin-mermaid 0.3.0 → 0.4.1

package/README.md

@@ -17,16 +17,35 @@ import { AIRenderer } from "@ai-gui/react"
 <AIRenderer plugins={[mermaid({ theme: "default" })]} />
 ```
 
-The model emits, e.g.:
+The model can emit flowcharts, UML-style class/sequence/state diagrams, ER diagrams, journeys, Gantt charts, mind maps, timelines, Git graphs, and other Mermaid-supported diagram types.
+
+Flowchart:
 
     ```mermaid
     graph TD; A-->B; A-->C;
     ```
 
+UML class diagram:
+
+    ```mermaid
+    classDiagram
+      class Renderer { +push(chunk) +reset() }
+      Renderer --> AST : produces
+    ```
+
+Sequence diagram:
+
+    ```mermaid
+    sequenceDiagram
+      LLM->>AIGUI: streamed tokens
+      AIGUI-->>App: AST patches
+    ```
+
 ## Options
 
 - `theme?: string` — Mermaid theme. Mermaid has process-global configuration, so the theme of the first render wins across plugin instances; later instances share that initialization.
+- `maxSourceBytes?: number` — maximum UTF-8 source size, default 64 KiB.
 
-Renders are queued across instances because Mermaid mutates global state while rendering. This also guarantees unique diagram IDs for concurrent renders.
+Renders use Mermaid `securityLevel: "strict"`, are complete-gated, and are queued across instances because Mermaid mutates global state while rendering. Errors use a generic non-reflective fallback and diagram IDs remain unique across concurrent renders.
 
 See the [root README](../../README.md) for the full plugin list.

package/dist/index.cjs

@@ -14,39 +14,59 @@ function enqueue(work) {
 function escapeHtml(s) {
 	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function errorHtml(message) {
+function errorHtml() {
 	return {
 		kind: "html",
-		html: `<pre data-aigui-mermaid-error>${escapeHtml(message)}</pre>`
+		html: `<pre data-aigui-mermaid-error>${escapeHtml("Diagram could not be rendered.")}</pre>`
 	};
 }
+function mermaidPromptSpec() {
+	return [
+		"Diagrams (fenced): ```mermaid <Mermaid diagram syntax>```.",
+		"Supported examples include flowchart, sequenceDiagram, classDiagram (UML), stateDiagram-v2, erDiagram, journey, gantt, pie, mindmap, timeline, and gitGraph.",
+		"Use concise labels and valid Mermaid syntax. Never emit HTML, scripts, click handlers, URLs, initialization directives, remote resources, or credentials."
+	].join("\n");
+}
 function mermaid(opts = {}) {
 	const theme = opts.theme ?? "default";
-	const render = (node) => enqueue(async () => {
-		try {
-			const m = await loadMermaid();
-			if (initializedTheme === void 0) {
-				m.initialize({
-					startOnLoad: false,
-					theme
-				});
-				initializedTheme = theme;
+	const maxSourceBytes = opts.maxSourceBytes ?? 64 * 1024;
+	if (!Number.isSafeInteger(maxSourceBytes) || maxSourceBytes <= 0) throw new TypeError("maxSourceBytes must be a positive safe integer");
+	const outputs = new WeakMap();
+	const render = (node) => {
+		const cached = outputs.get(node);
+		if (cached) return cached;
+		const output = enqueue(async () => {
+			try {
+				if (new TextEncoder().encode(node.content ?? "").byteLength > maxSourceBytes) return errorHtml();
+				const m = await loadMermaid();
+				if (initializedTheme === void 0) {
+					m.initialize({
+						startOnLoad: false,
+						theme,
+						securityLevel: "strict"
+					});
+					initializedTheme = theme;
+				}
+				const id = `aigui-mermaid-${nextId++}`;
+				const { svg } = await m.render(id, node.content ?? "");
+				return {
+					kind: "html",
+					html: svg
+				};
+			} catch {
+				return errorHtml();
 			}
-			const id = `aigui-mermaid-${nextId++}`;
-			const { svg } = await m.render(id, node.content ?? "");
-			return {
-				kind: "html",
-				html: svg
-			};
-		} catch (e) {
-			return errorHtml(String(e?.message ?? e));
-		}
-	});
+		});
+		outputs.set(node, output);
+		return output;
+	};
 	return {
 		name: "mermaid",
-		nodeRenderers: { mermaid: render }
+		nodeRenderers: { mermaid: render },
+		promptSpec: mermaidPromptSpec()
 	};
 }
 
 //#endregion
-exports.mermaid = mermaid
+exports.mermaid = mermaid
+exports.mermaidPromptSpec = mermaidPromptSpec

package/dist/index.d.cts

@@ -3,8 +3,10 @@ import { AIGuiPlugin } from "@ai-gui/core";
 //#region src/index.d.ts
 interface MermaidOptions {
   theme?: string;
+  maxSourceBytes?: number;
 }
+declare function mermaidPromptSpec(): string;
 declare function mermaid(opts?: MermaidOptions): AIGuiPlugin;
 
 //#endregion
-export { MermaidOptions, mermaid };
+export { MermaidOptions, mermaid, mermaidPromptSpec };

package/dist/index.d.ts

@@ -3,8 +3,10 @@ import { AIGuiPlugin } from "@ai-gui/core";
 //#region src/index.d.ts
 interface MermaidOptions {
   theme?: string;
+  maxSourceBytes?: number;
 }
+declare function mermaidPromptSpec(): string;
 declare function mermaid(opts?: MermaidOptions): AIGuiPlugin;
 
 //#endregion
-export { MermaidOptions, mermaid };
+export { MermaidOptions, mermaid, mermaidPromptSpec };

package/dist/index.js

@@ -12,39 +12,58 @@ function enqueue(work) {
 function escapeHtml(s) {
 	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function errorHtml(message) {
+function errorHtml() {
 	return {
 		kind: "html",
-		html: `<pre data-aigui-mermaid-error>${escapeHtml(message)}</pre>`
+		html: `<pre data-aigui-mermaid-error>${escapeHtml("Diagram could not be rendered.")}</pre>`
 	};
 }
+function mermaidPromptSpec() {
+	return [
+		"Diagrams (fenced): ```mermaid <Mermaid diagram syntax>```.",
+		"Supported examples include flowchart, sequenceDiagram, classDiagram (UML), stateDiagram-v2, erDiagram, journey, gantt, pie, mindmap, timeline, and gitGraph.",
+		"Use concise labels and valid Mermaid syntax. Never emit HTML, scripts, click handlers, URLs, initialization directives, remote resources, or credentials."
+	].join("\n");
+}
 function mermaid(opts = {}) {
 	const theme = opts.theme ?? "default";
-	const render = (node) => enqueue(async () => {
-		try {
-			const m = await loadMermaid();
-			if (initializedTheme === void 0) {
-				m.initialize({
-					startOnLoad: false,
-					theme
-				});
-				initializedTheme = theme;
+	const maxSourceBytes = opts.maxSourceBytes ?? 64 * 1024;
+	if (!Number.isSafeInteger(maxSourceBytes) || maxSourceBytes <= 0) throw new TypeError("maxSourceBytes must be a positive safe integer");
+	const outputs = new WeakMap();
+	const render = (node) => {
+		const cached = outputs.get(node);
+		if (cached) return cached;
+		const output = enqueue(async () => {
+			try {
+				if (new TextEncoder().encode(node.content ?? "").byteLength > maxSourceBytes) return errorHtml();
+				const m = await loadMermaid();
+				if (initializedTheme === void 0) {
+					m.initialize({
+						startOnLoad: false,
+						theme,
+						securityLevel: "strict"
+					});
+					initializedTheme = theme;
+				}
+				const id = `aigui-mermaid-${nextId++}`;
+				const { svg } = await m.render(id, node.content ?? "");
+				return {
+					kind: "html",
+					html: svg
+				};
+			} catch {
+				return errorHtml();
 			}
-			const id = `aigui-mermaid-${nextId++}`;
-			const { svg } = await m.render(id, node.content ?? "");
-			return {
-				kind: "html",
-				html: svg
-			};
-		} catch (e) {
-			return errorHtml(String(e?.message ?? e));
-		}
-	});
+		});
+		outputs.set(node, output);
+		return output;
+	};
 	return {
 		name: "mermaid",
-		nodeRenderers: { mermaid: render }
+		nodeRenderers: { mermaid: render },
+		promptSpec: mermaidPromptSpec()
 	};
 }
 
 //#endregion
-export { mermaid };
+export { mermaid, mermaidPromptSpec };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/plugin-mermaid",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Mermaid diagram plugin for AIGUI.",
   "keywords": [
     "llm",
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "mermaid": "^11.4.0",
-    "@ai-gui/core": "0.3.0"
+    "@ai-gui/core": "0.4.1"
   },
   "scripts": {
     "build": "tsdown",