Mermaid.js Integration redux

[dbolack-ab]

Closes #2701

This is a slight rebuild of the orphaned mermaid PR #2740.

As such, from the body of that PR ...

The heavy lifting is done in the marked-mermaid package which I've open-sourced here:
https://github.com/MichielDeMey/marked-mermaid

This has been replaced by marked-mermaidjs which is an updated form of this package living at https://github.com/dbolack-ab/marked-mermaid

Example Homebrewery document:

# Mermaid.js integration examples

::

{{wide
### Working Flowcharts


Example story flow

```mermaid
flowchart TD
A[<h4>Chapter One</h4><h5>For characters level 1-4</h5><p>In tincidunt augue nunc, id pretium eros varius quis. Integer erat leo, efficitur sollicitudin volutpat id, tempor eget neque. Nam euismod velit eu dui accumsan aliquet. Etiam nibh lorem, condimentum ut velit sit amet, dapibus pellentesque augue. Donec a velit quis justo efficitur mollis nec mollis nulla. Nullam non quam commodo nulla volutpat ullamcorper in ac dolor. Donec ullamcorper nibh iaculis posuere luctus. Mauris vehicula eros in fringilla ultrices.</p>] -->|Get money| B(<h4>Chapter 2</h4>)
    B --> C{<h4>Party decides</h4>}
    C -->|EASY| D[<h4>Branch 1</h4><p>Nulla congue et nisi eu dignissim. Praesent ultricies nec arcu eget cursus. Curabitur pharetra tortor ac velit cursus feugiat. Pellentesque imperdiet lacus id dictum tempor. Vestibulum diam tortor, pellentesque a diam et, malesuada sodales sem. Ut dui orci, placerat nec tincidunt nec, volutpat ut libero. Mauris consequat sapien in lectus suscipit feugiat. Vivamus nec dolor vitae dui mattis consequat iaculis eu justo. Donec varius dolor vel ipsum egestas volutpat. Proin ac auctor risus, id laoreet dolor. Nullam sit amet turpis eget risus fringilla mollis in eget lorem. Mauris id ornare magna. Morbi ullamcorper pharetra ultrices. Integer sed vehicula arcu. Fusce at pretium urna. Ut tempor risus ut mauris ullamcorper, in posuere urna mattis.</p>]
    C -->|INTERMEDIATE| E[<h4>Branch 2</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu purus nunc. Nunc ullamcorper ut augue sit amet iaculis. Vestibulum felis risus, convallis auctor libero id, ultricies efficitur dolor. Quisque vel posuere ex. Quisque id odio quis nibh hendrerit dictum. Curabitur nulla enim, dignissim ut enim eu, gravida porta ligula. Ut vestibulum, nisi lacinia semper venenatis, ex nunc rhoncus tellus, nec aliquam diam turpis aliquet felis. Nullam sodales, leo accumsan imperdiet sodales, nisi odio euismod quam, quis tempor mauris mauris eget ex. Proin pharetra nunc ac feugiat sagittis.</p>]
    C -->|DIFFICULT| F[<h4>Branch 3</h4><p>In tincidunt augue nunc, id pretium eros varius quis. Integer erat leo, efficitur sollicitudin volutpat id, tempor eget neque. Nam euismod velit eu dui accumsan aliquet. Etiam nibh lorem, condimentum ut velit sit amet, dapibus pellentesque augue. Donec a velit quis justo efficitur mollis nec mollis nulla. Nullam non quam commodo nulla volutpat ullamcorper in ac dolor. Donec ullamcorper nibh iaculis posuere luctus. Mauris vehicula eros in fringilla ultrices.</p>]
```

::

```mermaid
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
```

:

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
```
}}



\page




### Mermaid syntax error
```mermaid
foo
```

### Other code blocks
```ruby
some other goes code
```

[5e-Cleric]

I never really paid much attention to the other PR, but now i see, does this allow for ruby to be interpreted in our brews? Could this cause a security issue?

[dbolack-ab]

I never really paid much attention to the other PR, but now i see, does this allow for ruby to be interpreted in our brews? Could this cause a security issue?

No, the ruby bit there was just an example that it doesn't break other code spaces...

[Gazook89]

Here is a screenshot of what it looks like on Chrome (and firefox):

My main concern right now is that it cuts off text in certain places. More accurately, it just isn't sizing the foreignObject portions correctly so that they display the inner elements fully. What's more, this isn't really fixable with CSS as far as i can tell, which is basically the only tool available for users.

[ericscheid]

My main concern right now is that it cuts off text in certain places.

Yep, that's something to do with calculating the sizes of the element so the flow of text can be established before they're shown. Something to do with the auto-scaling that mermaid does. Test that by inserting a very long lorm ipsum string into an otherwise very brief mermaid doc.

```mermaid
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus Lorem ipsum dolor sit amet, consectetuer adipiscing elit. }
    C --> D
```

What's more, this isn't really fixable with CSS as far as i can tell, which is basically the only tool available for users.

Authors can change the font-size via css though .. so it might be a case of tweaking that.

A bit of good news is that {curly-injects} work to apply an identifier to the rendered mermaid element. Well, the wrapping pre element .. so authors won't need to go guessing the id that mermaid assigns when rendering.

A bug though is that the insertion of a semicolon ; into a mermaid element's text borks the parsing by mermaid.

This works on the mermaid.js test sandbox

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect; with a semicolon.)
    B --> D{Rhombus Lorem ipsum dolor sit amet, consectetuer adipiscing elit. }
    C --> D

but throws an error here...

[5e-Cleric]

What's more, this isn't really fixable with CSS as far as i can tell, which is basically the only tool available for users.

this can be fixed via CSS, but does cause other issues:

[Gazook89]

this can be fixed via CSS, but does cause other issues:

yeah I would classify this as “can’t be fixed with css”

[dbolack-ab]

These issues may be due to things updated and/or fixed in later than the pinned version of mermaidjs.

I was unable to persuade other versions to properly build as a marked plugin. If someone else with better node-fu can tackle it then maybe we should boot this back to draft until I can manage it.

[Gazook89]

To be sure, is the mermaidjs version that this is relying on "mermaid": "^9.4.1", from your marked-mermaid package?

And latest mermaid as of this writing is 11.2.1.

[dbolack-ab]

To be sure, is the mermaidjs version that this is relying on "mermaid": "^9.4.1", from your marked-mermaid package?

And latest mermaid as of this writing is 11.2.1.

Correct. Though I think I know how to resolve my previous issue now. If not, we're pinned there until the incompatibility between marked and marmaid 11.2.1 is resolved.

[dbolack-ab]

To be sure, is the mermaidjs version that this is relying on "mermaid": "^9.4.1", from your marked-mermaid package?
And latest mermaid as of this writing is 11.2.1.

Correct. Though I think I know how to resolve my previous issue now. If not, we're pinned there until the incompatibility between marked and marmaid 11.2.1 is resolved.

Nope. Can't figure it out. Leaving it on the 9 branch so it works and waiting for someone smarter to figure out why the fais to find mermaid with 10 or later releases.