Redmine

div.pre-wrapper a.copy-pre-content-link,

div.pre-wrapper a.mermaid-download-link {

div.pre-wrapper a.mermaid-download-link {

  /* To the left of the copy button: its width (18px icon + padding + border) plus a 3px gap */

  inset-inline-end: calc(1em + 3px + 26px + 3px);

}

div.pre-wrapper:hover a.copy-pre-content-link,

div.pre-wrapper:hover a.mermaid-download-link {

      "rm.I18n = Object.freeze({buttonCopy: '#{l(:button_copy)}', buttonDownload: '#{l(:button_download)}'});"

// Diagrams are saved larger than their original size so that they stay sharp when enlarged.

const PNG_SCALE = 2;

// Larger diagrams are scaled down so that saving them does not use up memory.

const MAX_PNG_PIXELS_PER_SIDE = 4096;

const MAX_PNG_TOTAL_PIXELS = 8_000_000;

    this.downloadLink?.remove();

    this.container = this.errorElement = this.downloadLink = null;

      if (this.container === container) this.addDownloadLink(pre, container);

  addDownloadLink(pre, container) {

    const link = document.createElement('a');

    link.className = 'mermaid-download-link icon-only';

    link.title = rm.I18n.buttonDownload;

    // A link without href cannot be operated with the keyboard.

    link.href = '#';

    link.append(createSVGIcon('download'));

    link.addEventListener('click', (event) => {

      event.preventDefault();

      this.download();

    });

    // Put the link next to the copy button that CopypreScrubber adds to div.pre-wrapper.

    const wrapper = pre.closest('.pre-wrapper');

    if (wrapper) {

      wrapper.append(link);

    } else {

      container.insertAdjacentElement('beforebegin', link);

    }

    this.downloadLink = link;

  }

  // The diagram is saved as a PNG image because the SVG generated by Mermaid.js

  // relies on HTML and CSS and is not displayed properly outside web browsers.

  async download() {

    try {

      const svg = this.container.querySelector('svg');

      const scale = this.pngScaleFor(svg);

      const canvas = await this.drawOnCanvas(svg, scale);

      canvas.toBlob((png) => {

        if (png) this.saveAs(png, this.filenameFor(svg, scale));

      }, 'image/png');

    } catch (error) {

      console.error('Failed to save Mermaid diagram:', error);

    }

  }

  pngScaleFor(svg) {

    const { width, height } = svg.viewBox.baseVal;

    return Math.min(

      PNG_SCALE,

      MAX_PNG_PIXELS_PER_SIDE / Math.max(width, height),

      Math.sqrt(MAX_PNG_TOTAL_PIXELS / (width * height))

    );

  }

  // Returns a name like mermaid-flowchart@2x.png, or mermaid-flowchart.png

  // when the image has been scaled down.

  filenameFor(svg, scale) {

    // Mermaid.js sets the diagram type here, such as "sequence" or "flowchart-v2".

    const diagramType = (svg.getAttribute('aria-roledescription') || '').replace(/-v\d+$/, '');

    const name = /^[a-z0-9]+$/i.test(diagramType) ? diagramType : 'diagram';

    const suffix = scale === PNG_SCALE ? `@${PNG_SCALE}x` : '';

    return `mermaid-${name}${suffix}.png`;

  }

  async drawOnCanvas(svg, scale) {

    const { width, height } = svg.viewBox.baseVal;

    // Rounded down so that the limits are never exceeded.

    const pngWidth = Math.floor(width * scale);

    const pngHeight = Math.floor(height * scale);

    // Unlike cloneNode(), this copy does not fetch <img> elements in labels again.

    const standaloneSvg = document.implementation.createHTMLDocument('').importNode(svg, true);

    // Gives the SVG the size of the PNG so that it is rendered at that size from

    // the start, without the max-width that Mermaid.js sets to the original width.

    standaloneSvg.setAttribute('width', pngWidth);

    standaloneSvg.setAttribute('height', pngHeight);

    standaloneSvg.style.removeProperty('max-width');

    const source = new XMLSerializer().serializeToString(standaloneSvg);

    const image = new Image();

    // Not a blob: URL, with which Chrome refuses to export a canvas once an

    // SVG containing <foreignObject> has been drawn on it.

    image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source);

    await image.decode();

    const canvas = document.createElement('canvas');

    canvas.width = pngWidth;

    canvas.height = pngHeight;

    canvas.getContext('2d').drawImage(image, 0, 0);

    return canvas;

  }

  saveAs(blob, filename) {

    const link = document.createElement('a');

    link.href = URL.createObjectURL(blob);

    link.download = filename;

    link.click();

    // Give the browser time to start the download before releasing the blob.

    setTimeout(() => URL.revokeObjectURL(link.href), 1000);

  }

      assert_no_selector 'a.mermaid-download-link', visible: :all

  def test_should_download_mermaid_diagram_as_png

    skip unless mermaid_installed?

    issue = Issue.find(1)

    issue.update_column(:description, "```mermaid\ngraph TD;\nA-->B;\n```")

    log_user('jsmith', 'jsmith')

    visit "/issues/#{issue.id}"

    within('div.description') do

      find('div.mermaid svg').hover

      find('a.mermaid-download-link').click

    end

    png_signature = "\x89PNG\r\n\x1A\n".b

    assert_equal png_signature, File.binread(downloaded_file('mermaid-flowchart@2x.png'))[0, 8]

  end