Properly handling <br> tags

.github/workflows/compile-mermaid.yml

@@ -42,7 +42,10 @@ jobs:
     - name: Convert all svg files to png before uploading for automatic inspection
       run: |
         npm install convert-svg-to-png
-        $(npm bin)/convert-svg-to-png ${{env.INPUT_DATA}}/*.svg
+        ls -la ${{env.INPUT_DATA}}
+        # This will overwite any PNG files with the same name that have been created by run-tests.sh
+        $(npm bin)/convert-svg-to-png ${{env.INPUT_DATA}}/graph-with-br.mmd.svg
+        $(npm bin)/convert-svg-to-png ${{env.INPUT_DATA}}/graph-with-br.mmd-stdin.svg
 
     - name: Upload diagrams for manual inspection
       uses: actions/upload-artifact@v1

run-tests.sh

@@ -2,10 +2,16 @@
 INPUT_DATA=$1
 IMAGETAG=$2
 
+set -e
+
 # Test if the CLI actually works (PNG)
 for i in $(ls $INPUT_DATA/*.mmd); do docker run -v $(pwd):/data $IMAGETAG -i /data/$i -o /data/$i.png -w 800; done
 for i in $(ls $INPUT_DATA/*.mmd); do cat $i | docker run -i -v $(pwd):/data $IMAGETAG -o /data/$i-stdin.png -w 800; done
 
 # Test if the CLI actually works (PDF)
 for i in $(ls $INPUT_DATA/*.mmd); do docker run -v $(pwd):/data $IMAGETAG -i /data/$i -o /data/$i.pdf; done
 for i in $(ls $INPUT_DATA/*.mmd); do cat $i | docker run -i -v $(pwd):/data $IMAGETAG -o /data/$i-stdin.pdf; done
+
+# Test if the CLI actually works (SVG) for a single pathological file
+docker run -v $(pwd):/data $IMAGETAG -i /data/$INPUT_DATA/graph-with-br.mmd -o /data/$INPUT_DATA/graph-with-br.mmd.svg
+cat $INPUT_DATA/graph-with-br.mmd | docker run -i -v $(pwd):/data $IMAGETAG -o /data/$INPUT_DATA/graph-with-br.mmd-stdin.svg

src/index.js

@@ -52,6 +52,17 @@ const getInputData = async inputFile => new Promise((resolve, reject) => {
   })
 })
 
+const convertToValidXML = html => {
+  var xml = html
+
+  // <br> tags in valid HTML (from innerHTML) look like <br>, but they must look like <br/> to be valid XML (such as SVG)
+  xml.replace(/<br>/gi, '<br/>')
+
+  return xml
+}
+
+
+
 commander
   .version(pkg.version)
   .option('-t, --theme [theme]', 'Theme of the chart, could be default, forest, dark or neutral. Optional. Default: default', /^default|forest|dark|neutral$/, 'default')
@@ -158,7 +169,8 @@ const deviceScaleFactor = parseInt(scale || 1, 10);
 
   if (output.endsWith('svg')) {
     const svg = await page.$eval('#container', container => container.innerHTML)
-    fs.writeFileSync(output, svg)
+    const svg_xml = convertToValidXML(svg)
+    fs.writeFileSync(output, svg_xml)
   } else if (output.endsWith('png')) {
     const clip = await page.$eval('svg', svg => {
       const react = svg.getBoundingClientRect()

test-positive/graph-with-br.mmd

@@ -0,0 +1,4 @@
+graph TD
+  subgraph sub
+    node(Line 1<br>Line 2<br/>Line 3)
+  end