How to use. Any simple, small helloworld.html ? #5667

KnIfER · 2024-07-26T09:32:39Z

KnIfER
Jul 26, 2024

<meta charset="utf8">

<div class="mermaid">
	A --> B
</div>

<script type="module">
	// import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
	// mermaid.initialize({ startOnLoad: false });
	// import mermaid from "https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.esm.min.mjs";
    // import mermaid from "https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js";
    import mermaid from "https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.esm.min.mjs";

    mermaid.initialize({ startOnLoad: false });
	
	
	/* async */ function hey() {
		const elements = document.getElementsByClassName("mermaid");
		debug(elements)
		let id = 0;
		Array.from(elements).forEach(elem => {
			
			console.log((elem.innerText));

			 mermaid.render(`any`, (elem.innerText), (a,b)=>{
				 
			 });
		})
	}
	window.hey =hey

hey();
</script>

Save as test.html and open it in the browser, and I get :

Cannot read properties of undefined (reading 'createElementNS')

KnIfER · 2024-07-26T09:42:16Z

KnIfER
Jul 26, 2024
Author

<!DOCTYPE html>
<html>
<head>
    <!-- <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> -->
    <!-- <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.esm.min.mjs"></script> -->
    <script  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', async function() {
            mermaid.initialize({ startOnLoad: true });
            text = await mermaid.mermaidAPI.render('mermaid-diagram', 'graph TD; A-->B; A-->C; B-->D; C-->D;');
       
			document.body.innerHTML = text.svg
			
			debug(text)
			
			
		});
    </script>
</head>
<body>
    <div id="mermaid-diagram"></div>
</body>
</html>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mermaid-js

How to use. Any simple, small helloworld.html ? #5667

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

mermaid-js

How to use. Any simple, small helloworld.html ? #5667

Uh oh!

KnIfER Jul 26, 2024

Replies: 1 comment

Uh oh!

KnIfER Jul 26, 2024 Author

KnIfER
Jul 26, 2024

KnIfER
Jul 26, 2024
Author