Background

MermaidJS is a popular (38k ⭐) server-side rendering suite for translating text-based diagram descriptions into scalable vector graphics. No open source rendering library that I tried can render its diagrams (see issue). Kroki is a REST-based service for rendering text-based diagrams, including mermaid, as SVG.

Replicate

1. Copy attached mermaid.svg.txt as samples/mermaid.svg (see Kroki render).
2. Add the following method to SamplesRenderingTest.java:

   @Test
   public void testMermaid() throws TranscoderException, IOException {
   	test("samples/mermaid.svg");
   }

3. Run the unit test method.

Expected

Diagram is rendered.

Actual

Exception while validating the XML: the <div> element is unexpected.

Work around

Comment out XML validation in SAXDocumentFactory.java:

  //parser.setFeature("http://xml.org/sax/features/validation", isValidating);
  //parser.setProperty("http://xml.org/sax/properties/lexical-handler", this);

Continue

1. Re-run the test.

Expected

The diagram renders.

Actual

<style> is expected to be <style type="text/css">.

Work around

Add the missing type attribute. Consider relaxing the DTD.

Continue

1. Re-run the test.

Expected

Diagram is rendered.

Actual

Cannot parse the CSS.

Work around

None. At this point the CSS parser cannot handle the semi-colon. Specifically, in CSSParser.java, the handleSemicolon method fires an endOfPropertyDeclaration. Is parsing the double-quotes for "trebuchet ms" causing the parser to get into an invalid state?

Addendum

Using the W3C validator service, the document validates correctly as an SVG 1.1 document.