Replies: 2 comments 6 replies
|
I need to check, but I think the mermaid dependency is pretty huge, that might be a deal breaker. |
3 replies
|
Awesome, thanks! |
|
Can I ask how the checking went? Were there indeed too many dependencies? |
|
Tbh this is a good use case for a plugin, then anyone who doesn't mind the added cost can add the plugin |
|
Here is my solution for mermaid support. File: (function () {
const script = document.createElement("script");
script.src = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js";
script.onload = () => {
mermaid.initialize({
startOnLoad: false,
theme: "dark",
});
async function renderMermaidDiagrams() {
const mermaidBlocks = Array.from(document.querySelectorAll("code.language-mermaid"));
const renderNext = async () => {
if (mermaidBlocks.length === 0) return;
const block = mermaidBlocks.shift();
if (block.dataset.rendered) return renderNext();
const code = block.textContent;
try {
const diagramId = `mermaid-${Date.now()}-${Math.random().toString(36).substring(2)}`;
const { svg } = await mermaid.render(diagramId, code);
const svgContainer = document.createElement("div");
svgContainer.innerHTML = svg;
block.parentElement.replaceWith(svgContainer);
block.dataset.rendered = true;
} catch (err) {
console.error("Mermaid rendering failed:", err);
block.innerHTML = `<pre>Error rendering diagram: ${err.message}</pre>`;
} finally {
requestAnimationFrame(renderNext); // Schedule the next block
}
};
renderNext();
}
let debounceTimeout;
const observer = new MutationObserver(() => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => {
renderMermaidDiagrams();
}, 100);
});
// Observe changes to the entire document
observer.observe(document.body, { childList: true, subtree: true });
// Initial render for the first page load
document.addEventListener("DOMContentLoaded", renderMermaidDiagrams);
};
document.head.appendChild(script);
})();Include script into html at root of Scalar web. <!doctype html>
<html>
<head>
<title>Scalar API Reference</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<script src="/static/mermaid_render.js"></script>
<script
id="api-reference"
data-url="https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.yaml"
data-proxy-url="https://proxy.scalar.com"></script>
<script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>
</body>
</html>Usage: Include mermaids in your documentation like this: ```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
... |
3 replies
|
added "const diagramId = |
|
thanks for sharing the workaround |
|
hey @hanspagel |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Hello,
We're considering using Scalar for our documentation needs. Currently, we use a lot of diagrams (made with Mermaid) in our documentation, which are in Notion and GitHub.
For example, here's a simple Mermaid diagram that we did:
graph LR A((New tool)) --> B[Is it part of the eco-system?] B -- Yes --> C[Is it local?] B -- No --> free C -- Yes --> flexible C -- No --> fixed fixed[Fixed] flexible[Flexible] free[Free]However, I couldn't find a way to integrate or render Mermaid diagrams within Scalar Docs. Am I missing something, or is this functionality not supported? If it's not, this could be a significant limitation for us.
I'm also open to other tools to make diagrams in markdown :)
Any insights would be appreciated!
Thanks!
All reactions