Update mermaidjs.html
This commit is contained in:
parent
9b4f6824f2
commit
316b96259a
@ -61,6 +61,70 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Export functions
|
||||
window.exportSyntax = function() {
|
||||
const code = editor.value.trim();
|
||||
if (!code) {
|
||||
alert('Diagram is empty');
|
||||
return;
|
||||
}
|
||||
const blob = new Blob([code], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'diagram.mmd';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
window.exportSVG = function() {
|
||||
const svg = document.querySelector('#preview svg');
|
||||
if (!svg) {
|
||||
alert('Render diagram first');
|
||||
return;
|
||||
}
|
||||
const svgData = new XMLSerializer().serializeToString(svg);
|
||||
const blob = new Blob([svgData], { type: 'image/svg+xml' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'diagram.svg';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
window.exportPNG = function() {
|
||||
const svg = document.querySelector('#preview svg');
|
||||
if (!svg) {
|
||||
alert('Render diagram first');
|
||||
return;
|
||||
}
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const svgData = new XMLSerializer().serializeToString(svg);
|
||||
const img = new Image();
|
||||
|
||||
img.onload = function() {
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
canvas.toBlob(function(blob) {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'diagram.png';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
});
|
||||
};
|
||||
|
||||
img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
|
||||
};
|
||||
|
||||
// Initial render
|
||||
editor.value = `graph TD
|
||||
A[Start] --> B{Decision?}
|
||||
@ -75,5 +139,10 @@
|
||||
<body>
|
||||
<textarea spellcheck="false"></textarea>
|
||||
<div id="preview"></div>
|
||||
<div style="position: fixed; bottom: 1rem; right: 1rem; display: flex; gap: 0.5rem;">
|
||||
<button onclick="exportSyntax()" style="padding: 0.5rem 1rem; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">📥 .mmd</button>
|
||||
<button onclick="exportSVG()" style="padding: 0.5rem 1rem; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">📥 SVG</button>
|
||||
<button onclick="exportPNG()" style="padding: 0.5rem 1rem; background: #FF9800; color: white; border: none; border-radius: 4px; cursor: pointer;">📥 PNG</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user