Example export to SVG generates error

[marceloboeira]

The page's example: Larger flowchart with some styling

graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A subgraph
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange

If exported to SVG, it returns this as an error:

This page contains the following errors:
error on line 7 at column 4440: Opening and ending tag mismatch: br line 0 and div
Below is a rendering of the page up to the first error.

[tylerlong]

I confirmed this issue. And there is an easy fix: After you export the svg file, replace all <br> with <br/>.

[tylerlong]

I have updated https://mermaidjs.github.io/mermaid-live-editor/. So if you download a SVG file there, <br>s are already replaced with <br/>s.

[tylerlong]

I also updated the mermaid file so it will auto convert <br> to <br/>.

[marceloboeira]

@tylerlong thanks!

[cdrfun]

@tylerlong I'm still getting the error and using <br/> wont't help. Here's the example from @marceloboeira

• Original
• <br/> Correction

Error when opening the svg with current Chrome: error on line 352 at column 4922: Opening and ending tag mismatch: br line 0 and span

[Vidyut]

I have mismatched tags br, line and div. The svg renders correctly in the editor, obviously, but the downloaded svg doesn't work. Strangely, selecting the correctly rendered svg in the browser and saving it also doesn't work.

[Aneurin]

@tylerlong I'm still getting the error and using <br/> wont't help. Here's the example from @marceloboeira

• Original
• <br/> Correction

Error when opening the svg with current Chrome: error on line 352 at column 4922: Opening and ending tag mismatch: br line 0 and span

Or see here for a minimal example. The "Download SVG" option always seems to convert <br/> to <br> so I guess something's regressed here. Opening the downloaded SVG in a text editor and manually converting back to <br/> fixes it as expected.