diff --git a/notebooks/basics.html b/notebooks/basics.html index 380e176..eed236b 100644 --- a/notebooks/basics.html +++ b/notebooks/basics.html @@ -7331,7 +7331,8 @@ if (!diagrams.length) { return; } - const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.2.3/mermaid.esm.min.mjs")).default; + const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.6.0/mermaid.esm.min.mjs")).default; + const parser = new DOMParser(); mermaid.initialize({ maxTextSize: 100000, @@ -7347,39 +7348,52 @@ let _nextMermaidId = 0; function makeMermaidImage(svg) { - const img = document.createElement('img'); - const maxWidth = svg.match(/max-width: (\d+)/); - if (maxWidth && maxWidth[1]) { - const width = parseInt(maxWidth[1]); - if (width && !Number.isNaN(width) && Number.isFinite(width)) { - img.width = width; - } + const img = document.createElement("img"); + const doc = parser.parseFromString(svg, "image/svg+xml"); + const svgEl = doc.querySelector("svg"); + const { maxWidth } = svgEl?.style || {}; + const firstTitle = doc.querySelector("title"); + const firstDesc = doc.querySelector("desc"); + + img.setAttribute("src", `data:image/svg+xml,${encodeURIComponent(svg)}`); + if (maxWidth) { + img.width = parseInt(maxWidth); + } + if (firstTitle) { + img.setAttribute("alt", firstTitle.textContent); } - img.setAttribute('src', `data:image/svg+xml,${encodeURIComponent(svg)}`); - return img; + if (firstDesc) { + const caption = document.createElement("figcaption"); + caption.className = "sr-only"; + caption.textContent = firstDesc.textContent; + return [img, caption]; + } + return [img]; } async function makeMermaidError(text) { - let errorMessage = ''; + let errorMessage = ""; try { await mermaid.parse(text); } catch (err) { errorMessage = `${err}`; } - const result = document.createElement('details'); - const summary = document.createElement('summary'); - const pre = document.createElement('pre'); - const code = document.createElement('code'); + const result = document.createElement("details"); + result.className = 'jp-RenderedMermaid-Details'; + const summary = document.createElement("summary"); + summary.className = 'jp-RenderedMermaid-Summary'; + const pre = document.createElement("pre"); + const code = document.createElement("code"); code.innerText = text; pre.appendChild(code); summary.appendChild(pre); result.appendChild(summary); - const warning = document.createElement('pre'); + const warning = document.createElement("pre"); warning.innerText = errorMessage; result.appendChild(warning); - return result; + return [result]; } async function renderOneMarmaid(src) { @@ -7389,30 +7403,41 @@ const el = document.createElement("div"); el.style.visibility = "hidden"; document.body.appendChild(el); - let result = null; + let results = null; + let output = null; try { const { svg } = await mermaid.render(id, raw, el); - result = makeMermaidImage(svg); + results = makeMermaidImage(svg); + output = document.createElement("figure"); + results.map(output.appendChild, output); } catch (err) { parent.classList.add("jp-mod-warning"); - result = await makeMermaidError(raw); + results = await makeMermaidError(raw); + output = results[0]; } finally { el.remove(); } parent.classList.add("jp-RenderedMermaid"); - parent.appendChild(result); + parent.appendChild(output); } void Promise.all([...diagrams].map(renderOneMarmaid)); }); @@ -7464,7 +7504,7 @@

Installation
- +