Mermaid rendering support?

[mallardduck]

With GitHub's addition of mermaid chart rendering in Markdown I'm wondering about adding similar functionality to Commonmark PHP projects. However I don't really want to loose access to Shiki highlighting to gain Mermaid charts.

Ideally it'd be great to be able to have access to both Shiki highlighting in commonmark and mermaid charts. However I think to accomplish this we'd need to have a custom FencedCodeRenderer and IndentedCodeRenderer which renders via mermaid charts if the code blocks language is set to mermaid.

To accomplish this I could either see:

1. This plugin adapting to support both Shiki highlighting and mermaid charts in code blocks.
2. Someone making a new plugin that includes both and inherits from this plugin.
3. Adding the ability to make this plugin's *Renderer classes extensible (so consumers of this plugin can monkey patch support for other render workflows.

In any case, I figured it'd be good to start a chat about the idea here first.

As long as this library doesn't plan to make classes to final then I could probably do option 2 myself by making a new package. Otherwise, options 1 and 3 are ones I'd be willing to work on Pull Requests for. Would just like to discuss which option is preferred before working on it.

[freekmurze]

As long as this library doesn't plan to make classes to final

This is Spatie, we don't do final 👍

Let's go for option 1. If the code is too complex for us to maintain (we only take on simple things), you could probably use some of the work for option 2.

[mallardduck]

Awesome! I'll start poking around to see how this would look.
Logically I think it will require a new package similar to https://github.com/spatie/shiki-php - but geared towards running mermaid.js instead of shiki. I'll investigate this area too as I work on the PR, I'm willing to maintain a package for that myself, or to transfer it under spaite/ name to mirror the shiki-php library.

[mallardduck]

Ooooooh boy. So as I started playing with mermaid-cli I thought the performance was a bit sluggish. It also seemed odd that I could give the CLI tool input via STDIN, but not get results from STDOUT. So I started looking to see about making it send output to STDOUT instead of a file.

What I found was a bit odd at first TBH. I learned that they actually use puppeteer behind the scenes 😱. So the CLI is project for mermaid is just a wrapper for headless browser running the library.

So when calling the mermaid-CLI tool it's actually launching a headless browser which it then uses to render the chart. Curious on why this was the case, I dug deeper into mermaid.js core library and found it completely requires being inside a browser's JS engine as it requires access to document and other DOM API that aren't included in nodejs by default.

All of this oddness feels like a LOT more steps than I was expecting and hoping for. For me it's not as 'simple' as the shiki rendering in that sense - since that's just PHP calling nodeJS. In this case it would be: PHP launch nodeJS, so nodeJS can launch a headless browser, and execute mermaid in browser.

(Best I can tell it also generates an HTML page for puppeteer to load, execute mermaid and then extracts the rendered DOMElement from the page to save it to an SVG file)

Long story short, I think I'll take a step back and look over options for rendering mermaid in PHP.