Mermaid Diagram Editor - Create Flowcharts & Diagrams Online

// Mermaid Diagram Rendering and Export in JavaScript (Browser)

/**
 * Initialize mermaid.js with configuration
 */
async function initMermaid(theme = 'default') {
  const mermaid = await import('https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs');
  mermaid.default.initialize({
    startOnLoad: false,
    theme: theme,  // 'default', 'dark', 'forest', 'neutral'
    securityLevel: 'strict',
  });
  return mermaid.default;
}

/**
 * Render Mermaid code to SVG string
 */
async function renderMermaid(mermaidInstance, code, elementId = 'mermaid-output') {
  try {
    const { svg } = await mermaidInstance.render(elementId, code);
    return { svg, error: null };
  } catch (error) {
    return { svg: null, error: error.message };
  }
}

/**
 * Export SVG string as downloadable .svg file
 */
function downloadSvg(svgContent, filename = 'diagram.svg') {
  const blob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const anchor = document.createElement('a');
  anchor.href = url;
  anchor.download = filename;
  anchor.click();
  URL.revokeObjectURL(url);
}

/**
 * Convert SVG to PNG and download
 */
async function downloadPng(svgContent, scale = 2, filename = 'diagram.png') {
  return new Promise((resolve, reject) => {
    const svgBlob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });
    const url = URL.createObjectURL(svgBlob);
    const img = new Image();

    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.naturalWidth * scale;
      canvas.height = img.naturalHeight * scale;
      const ctx = canvas.getContext('2d');

      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.scale(scale, scale);
      ctx.drawImage(img, 0, 0);

      canvas.toBlob((blob) => {
        const pngUrl = URL.createObjectURL(blob);
        const anchor = document.createElement('a');
        anchor.href = pngUrl;
        anchor.download = filename;
        anchor.click();
        URL.revokeObjectURL(pngUrl);
        URL.revokeObjectURL(url);
        resolve();
      }, 'image/png');
    };

    img.onerror = reject;
    img.src = url;
  });
}

/**
 * Encode diagram state for URL sharing
 */
function encodeDiagramState(code, theme) {
  const state = JSON.stringify({ code, theme });
  return btoa(unescape(encodeURIComponent(state)));
}

function decodeDiagramState(encoded) {
  try {
    const json = decodeURIComponent(escape(atob(encoded)));
    return JSON.parse(json);
  } catch {
    return null;
  }
}

// Example usage
(async () => {
  const mermaid = await initMermaid('default');

  const code = `
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
  `;

  const { svg, error } = await renderMermaid(mermaid, code);

  if (error) {
    console.error('Render error:', error);
    return;
  }

  console.log('SVG rendered successfully');

  // Download as SVG
  downloadSvg(svg, 'flowchart.svg');

  // Download as PNG at 2x resolution
  await downloadPng(svg, 2, 'flowchart.png');

  // Create shareable URL
  const encoded = encodeDiagramState(code, 'default');
  console.log(`Share URL: https://ohmyutils.com/en/mermaid-diagram-editor?state=${encoded}`);
})();