diff --git a/mermaidjs.html b/mermaidjs.html
index 1d52eef..c574df0 100644
--- a/mermaidjs.html
+++ b/mermaidjs.html
@@ -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 @@
+
+
+
+
+