Use `mermaid.render()` instead of `mermaid.run()` API to avoid removing whitespace from diagrams

:bookmark_tabs: Summary

Use the mermaid.render() function instead of the mermaid.run() function to parse Mermaid diagram definitions directly, without going through HTML first.

fixes the issue of HTML removing newlines
- Resolves https://github.com/mermaid-js/mermaid-cli/issues/532
means we get better error messages!

:straight_ruler: Design Decisions

Currently, mermaid-cli renders mermaid diagrams by:

flowchart LR
    subgraph a ["Removes newlines!!!"]
        div["HTML &lt;div&gt;"]
    end
    MMD --> div["HTML &lt;div&gt;"]
    div -->|"mermaid.run()"| svg["HTML &lt;svg&gt;"]

However, when converting the mmd code to HTML <div>, newlines and whitespace formatting may get removed. For the majority of diagrams, this is no issue, but for some diagrams (e.g. classDiagram), whitespace does matter.

The mermaid API has a mermaid.render() function that we can use instead, which parses in mmd code directly, without having to go through a HTML element first:

flowchart LR
    MMD -->|"mermaid.render()"| svgText["SVG text"] -->svg["HTML &lt;svg&gt;"]

As an additional benefit, we get better error messages from Mermaid too!

:clipboard: Tasks

Make sure you

[x] :book: have read the contribution guidelines
[x] :computer: have added unit/e2e tests (if appropriate)
[x] :bookmark: targeted master branch

mermaid-js / mermaid-cli