Igor20264
1a5b35eb54
Python application / build (push) Has been cancelled
- add Local Render Mermaid - add page-starе для указания смещения страниц - add Гиперссылки в документе на списки литературы
85 lines
2.8 KiB
HTML
85 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>md2gost mermaid</title>
|
|
<script src="mermaid.min.js"></script>
|
|
<style>
|
|
html, body { margin: 0; padding: 0; background: #fff; }
|
|
#out { display: inline-block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="out"></div>
|
|
<script>
|
|
// Browser: htmlLabels:true — корректные боксы под кириллицу; PNG = screenshot.
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
securityLevel: "loose",
|
|
flowchart: {
|
|
htmlLabels: true,
|
|
wrappingWidth: 320,
|
|
subGraphTitleMargin: { top: 12, bottom: 16 },
|
|
padding: 20,
|
|
},
|
|
themeVariables: {
|
|
fontFamily: '"Segoe UI", "DejaVu Sans", Arial, sans-serif',
|
|
},
|
|
});
|
|
|
|
/** Put subgraph titles above node rows and paint them on top (Mermaid LR quirk). */
|
|
function fixClusterLabels(root) {
|
|
root.querySelectorAll("g.cluster").forEach((cluster) => {
|
|
const label = cluster.querySelector(".cluster-label");
|
|
const rect = cluster.querySelector(":scope > rect, rect");
|
|
if (!label || !rect) return;
|
|
const fo = label.querySelector("foreignObject");
|
|
const rw = parseFloat(rect.getAttribute("width") || "0");
|
|
const rx = parseFloat(rect.getAttribute("x") || "0");
|
|
const ry = parseFloat(rect.getAttribute("y") || "0");
|
|
if (fo && rw > 0) {
|
|
const maxW = Math.max(160, rw - 24);
|
|
fo.setAttribute("width", String(maxW));
|
|
const inner = fo.querySelector("div");
|
|
if (inner) {
|
|
inner.style.maxWidth = maxW + "px";
|
|
inner.style.width = maxW + "px";
|
|
inner.style.whiteSpace = "normal";
|
|
}
|
|
}
|
|
let labelH = 28;
|
|
try {
|
|
const bb = label.getBBox();
|
|
if (bb && bb.height > 0) labelH = bb.height;
|
|
else if (fo) labelH = parseFloat(fo.getAttribute("height") || "48") || 48;
|
|
} catch (e) {
|
|
if (fo) labelH = parseFloat(fo.getAttribute("height") || "48") || 48;
|
|
}
|
|
let labelW = 200;
|
|
try {
|
|
const bb = label.getBBox();
|
|
if (bb && bb.width > 0) labelW = bb.width;
|
|
else if (fo) labelW = parseFloat(fo.getAttribute("width") || "200") || 200;
|
|
} catch (e) {
|
|
if (fo) labelW = parseFloat(fo.getAttribute("width") || "200") || 200;
|
|
}
|
|
const x = rx + Math.max(0, (rw - labelW) / 2);
|
|
const y = ry + 6;
|
|
label.setAttribute("transform", "translate(" + x + ", " + y + ")");
|
|
cluster.appendChild(label);
|
|
});
|
|
}
|
|
|
|
window.__md2gostRender = async function (code) {
|
|
const id = "m" + Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
|
|
const out = await mermaid.render(id, code);
|
|
const box = document.getElementById("out");
|
|
box.innerHTML = out.svg;
|
|
fixClusterLabels(box);
|
|
const svg = box.querySelector("svg");
|
|
return svg ? svg.outerHTML : out.svg;
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|