🔀
Describe a diagram or write mermaid code
`;
const slot = root.querySelector("slot");
const containerDiv = slot?.parentElement as HTMLElement;
if (containerDiv) {
containerDiv.replaceWith(wrapper);
}
// Cache DOM refs
this.#promptInput = wrapper.querySelector(".prompt-input");
this.#codeInput = wrapper.querySelector(".code-input");
this.#previewArea = wrapper.querySelector(".preview-area");
this.#generateBtn = wrapper.querySelector(".generate-btn");
this.#animateBtn = wrapper.querySelector(".animate-btn");
this.#toggleBtn = wrapper.querySelector(".toggle-btn");
this.#modeSelect = wrapper.querySelector(".mode-select");
this.#themeSelect = wrapper.querySelector(".theme-select");
this.#delayInput = wrapper.querySelector(".delay-input");
this.#delayLabel = wrapper.querySelector(".delay-label");
this.#promptArea = wrapper.querySelector(".prompt-section");
this.#codeArea = wrapper.querySelector(".code-section");
const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement;
// Event listeners
this.#generateBtn?.addEventListener("click", (e) => {
e.stopPropagation();
if (this.#showCode) {
this.#renderFromCode();
} else {
this.#generateFromPrompt();
}
});
this.#animateBtn?.addEventListener("click", (e) => {
e.stopPropagation();
this.#animateGif();
});
this.#toggleBtn?.addEventListener("click", (e) => {
e.stopPropagation();
this.#showCode = !this.#showCode;
this.#updateToggle();
});
this.#modeSelect?.addEventListener("change", () => {
this.#animationMode = (this.#modeSelect?.value as any) || "progressive";
});
this.#themeSelect?.addEventListener("change", () => {
this.#theme = (this.#themeSelect?.value as any) || "default";
});
this.#delayInput?.addEventListener("input", () => {
this.#animationDelay = parseInt(this.#delayInput?.value || "800");
if (this.#delayLabel) this.#delayLabel.textContent = `${this.#animationDelay}ms`;
});
this.#promptInput?.addEventListener("keydown", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
this.#generateFromPrompt();
}
});
this.#codeInput?.addEventListener("keydown", (e) => {
if (e.key === "Enter" && e.ctrlKey) {
e.preventDefault();
this.#renderFromCode();
}
});
// Prevent canvas drag
for (const el of [this.#previewArea, this.#promptInput, this.#codeInput, this.#modeSelect, this.#themeSelect, this.#delayInput]) {
el?.addEventListener("pointerdown", (e) => e.stopPropagation());
}
closeBtn.addEventListener("click", (e) => {
e.stopPropagation();
this.dispatchEvent(new CustomEvent("close"));
});
return root;
}
#updateToggle() {
if (this.#promptArea) this.#promptArea.style.display = this.#showCode ? "none" : "";
if (this.#codeArea) this.#codeArea.style.display = this.#showCode ? "" : "none";
if (this.#toggleBtn) {
this.#toggleBtn.textContent = this.#showCode ? "Prompt" : "Code";
this.#toggleBtn.classList.toggle("active", this.#showCode);
}
if (this.#generateBtn) {
this.#generateBtn.textContent = this.#showCode ? "Render" : "Generate";
}
// Sync code input with current source
if (this.#showCode && this.#codeInput && this.#currentSource) {
this.#codeInput.value = this.#currentSource;
}
}
async #generateFromPrompt() {
const prompt = this.#promptInput?.value.trim();
if (!prompt || this.#isLoading) return;
this.#isLoading = true;
this.#error = null;
this.#setButtonsDisabled(true);
this.#renderLoading("Generating diagram...");
try {
const response = await fetch("/api/prompt", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
model: "llama3.1",
systemPrompt: "You are a Mermaid diagram generator. Output ONLY valid mermaid diagram code, no explanation, no markdown code fences. Start directly with the diagram type (graph, flowchart, sequenceDiagram, etc).",
messages: [{ role: "user", content: `Generate a Mermaid diagram for: ${prompt}` }],
}),
});
if (!response.ok) throw new Error(`AI generation failed: ${response.statusText}`);
const data = await response.json() as { content?: string };
let source = (data.content || "").trim();
// Strip markdown fences if present
source = source.replace(/^```(?:mermaid)?\n?/i, "").replace(/\n?```$/i, "").trim();
if (!source) throw new Error("Empty response from AI");
this.#currentSource = source;
if (this.#codeInput) this.#codeInput.value = source;
await this.#renderMermaidSvg(source, prompt);
} catch (error) {
this.#error = error instanceof Error ? error.message : "Generation failed";
this.#renderError();
} finally {
this.#isLoading = false;
this.#setButtonsDisabled(false);
}
}
async #renderFromCode() {
const source = this.#codeInput?.value.trim();
if (!source || this.#isLoading) return;
this.#currentSource = source;
this.#isLoading = true;
this.#error = null;
this.#setButtonsDisabled(true);
this.#renderLoading("Rendering diagram...");
try {
await this.#renderMermaidSvg(source, "(code edit)");
} catch (error) {
this.#error = error instanceof Error ? error.message : "Render failed";
this.#renderError();
} finally {
this.#isLoading = false;
this.#setButtonsDisabled(false);
}
}
async #renderMermaidSvg(source: string, prompt: string) {
const mermaid = (await import("mermaid")).default;
mermaid.initialize({ startOnLoad: false, theme: this.#theme });
const id = `mermaid-${Date.now()}`;
const { svg } = await mermaid.render(id, source);
const diagram: MermaidDiagram = {
id: crypto.randomUUID(),
prompt,
source,
svgHtml: svg,
timestamp: new Date(),
};
this.#diagrams.unshift(diagram);
this.#renderPreview();
if (this.#animateBtn) this.#animateBtn.disabled = false;
if (this.#promptInput) this.#promptInput.value = "";
}
async #animateGif() {
if (!this.#currentSource || this.#isLoading) return;
this.#isLoading = true;
this.#setButtonsDisabled(true);
this.#renderLoading("Animating GIF...");
try {
const response = await fetch(`${MERMAID_ANIMATOR_URL}/api/render`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
code: this.#currentSource,
mode: this.#animationMode,
delay: this.#animationDelay,
theme: this.#theme,
}),
});
if (!response.ok) throw new Error(`Animation failed: ${response.statusText}`);
const data = await response.json() as { gif: string; frames: number; width: number; height: number };
// Update latest history entry with GIF
if (this.#diagrams.length > 0) {
this.#diagrams[0].gifBase64 = data.gif;
}
this.#renderPreview();
} catch (error) {
this.#error = error instanceof Error ? error.message : "Animation failed";
this.#renderError();
} finally {
this.#isLoading = false;
this.#setButtonsDisabled(false);
}
}
#setButtonsDisabled(disabled: boolean) {
if (this.#generateBtn) this.#generateBtn.disabled = disabled;
if (this.#animateBtn) this.#animateBtn.disabled = disabled || !this.#currentSource;
}
#renderLoading(message: string) {
if (!this.#previewArea) return;
this.#previewArea.innerHTML = `
${preview}
${this.#escapeHtml(d.prompt)}
${downloadLink}
`
: `