Mermaid not rendering properly on Wordpress pages

[mickdee]

Graphs output as text on Wordpress pages. Console reveals extra characters are inserted between lines:

Uncaught Error: Parse error on line 1:
graph LR;<br>    A(VUE)–>|SV
---------^
Expecting 'SPACE', 'ALPHA', 'NUM', 'COLON', 'COMMA', 'PLUS', 'EQUALS', 'MULT', 'DOT', 'BRKT', 'CLASSDEF', 'CLASS', 'CLICK', 'STYLE', 'LINKSTYLE', got 'TAGSTART'mermaid.full.min.js:34 X.parseErrormermaid.full.min.js:34 X.parsemermaid.full.min.js:34 pmermaid.full.min.js:34 hmermaid.full.min.js:34 (anonymous function)

After line breaks are removed (meaning, the whole graph is written as one line in the Wordpress HTML editor), the graph does not render at all. Console reveals this error:

Uncaught Error: Lexical error on line 1. Unrecognized text.
graph LR;A(VUE)–>|SVG|B(Illustrator
---------------^mermaid.full.min.js:34 X.parseErrormermaid.full.min.js:34 r.parseErrormermaid.full.min.js:34 r.nextmermaid.full.min.js:34 r.lexmermaid.full.min.js:34 emermaid.full.min.js:34 X.parsemermaid.full.min.js:34 pmermaid.full.min.js:34 hmermaid.full.min.js:34 (anonymous function)

[mickdee]

Turns out this is a well documented issue with Wordpress. A workaround would be to inject the graph from an external script that targets a div in the html, rather than writing the graph directly in the markup