Fix linebreak rendering in Mermaid flowcharts

3 files changed, 25 insertions, 1 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
index b23de36f860..dbc28beffbe 100644
--- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js
+++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
@@ -36,7 +36,8 @@ export default function renderMermaid($els) {
       });
 
       $els.each((i, el) => {
-        const source = el.textContent;
+        // Mermaid doesn't like `<br />` tags, so collapse all like tags into `<br>`, which is parsed correctly.
+        const source = el.textContent.replace(/<br\s*\/>/g, '<br>');
 
         /**
          * Restrict the rendering to a certain amount of character to
diff --git a/changelogs/unreleased/mh-mermaid-linebreaks.yml b/changelogs/unreleased/mh-mermaid-linebreaks.yml
new file mode 100644
index 00000000000..e38820d8ce3
--- /dev/null
+++ b/changelogs/unreleased/mh-mermaid-linebreaks.yml
@@ -0,0 +1,5 @@
+---
+title: Fix linebreak rendering in Mermaid flowcharts
+merge_request: 30730
+author:
+type: fixed
diff --git a/spec/features/markdown/mermaid_spec.rb b/spec/features/markdown/mermaid_spec.rb
index 7008b361394..e3bcaca737e 100644
--- a/spec/features/markdown/mermaid_spec.rb
+++ b/spec/features/markdown/mermaid_spec.rb
@@ -21,4 +21,22 @@ describe 'Mermaid rendering', :js do
       expect(page).to have_selector('svg text', text: label)
     end
   end
+
+  it 'renders linebreaks in Mermaid diagrams' do
+    description = <<~MERMAID
+      ```mermaid
+      graph TD;
+        A(Line 1<br>Line 2)-->B(Line 1<br/>Line 2);
+        C(Line 1<br />Line 2)-->D(Line 1<br  />Line 2);
+      ```
+    MERMAID
+
+    project = create(:project, :public)
+    issue = create(:issue, project: project, description: description)
+
+    visit project_issue_path(project, issue)
+
+    expected = '<text><tspan xml:space="preserve" dy="1em" x="1">Line 1</tspan><tspan xml:space="preserve" dy="1em" x="1">Line 2</tspan></text>'
+    expect(page.html.scan(expected).count).to be(4)
+  end
 end