Skip to content

Instantly share code, notes, and snippets.

@skysan87

skysan87/mermaid-editor.html

Created April 1, 2023 12:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save skysan87/d0e8febfe1fdf65ca326beb915346927 to your computer and use it in GitHub Desktop.
Save skysan87/d0e8febfe1fdf65ca326beb915346927 to your computer and use it in GitHub Desktop.
Download ZIP
mermaid.js + monaco editor CDN Sample
Raw
mermaid-editor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/editor/editor.main.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/loader.min.js"></script>
<title>mermaid + monaco-editor</title>
</head>
<body>
<div class="h-screen flex flex-col overflow-hidden">
<div class="flex-none">
<!-- header menu -->
</div>
<div class="flex-1 flex flex-row">
<div class="flex-1 overflow-hidden">
<div class="h-full" id="editorPane">
<div id="container" class="h-full"></div>
</div>
</div>
<div class="flex-1 overflow-hidden">
<div class="mermaid overflow-auto">
</div>
</div>
</div>
</div>
</body>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: false });
// require is provided by loader.min.js.
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs' } });
require(["vs/editor/editor.main"], () => {
const editor = monaco.editor.create(document.getElementById('container'), {
value: '',
language: 'markdown',
theme: 'vs-dark',
});
editor.getModel().onDidChangeContent(async (event) => {
await drawDiagram(editor.getValue());
})
});
const drawDiagram = async (text) => {
const element = document.querySelector('.mermaid');
const { svg } = await mermaid.render('graphDiv', text);
element.innerHTML = svg;
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment