- Contents in this wiki are for entertainment purposes only
HTML Mermaid Flow Chart
Jump to navigation
Jump to search
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Mermaid via JS Constant</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<style>
body { font-family: sans-serif; padding: 2em; }
</style>
</head>
<body>
<h1>Mermaid Chart Injected via JavaScript</h1>
<div id="chart"></div>
<script>
const chartCode = `
graph TD
A[Start] --> B{Is it working?}
B -- Yes --> C[Celebrate]
B -- No --> D[Fix it]
D --> B
`;
const container = document.getElementById('chart');
container.innerHTML = '<div class="mermaid">' + chartCode + '</div>';
mermaid.initialize({ startOnLoad: true });
mermaid.init(undefined, container.querySelectorAll(".mermaid"));
</script>
</body>
</html>