Add mermaid support?

[tomhundt]

Hey, Mermaid is a diagramming tool that adds the ability to make all sorts of charts and graphs and diagrams within Markdown files. One adds a fenced section which defines the diagram in its own domain-specific language:

```mermaid
  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
```

which (even Github!) turns into a diagram:

  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;

Loading

This seems useful.

At the moment, Sublime support for this is limited to this plugin which relies on mermaid-cli to do its diagram generation. The output is a .png file for each diagram. Your plugin, on the other hand, renders the rest of the markdown but just not these mermaid parts.

Any idea if it would it be possible/worthwhile (or perhaps even easy?) to integrate this with your plugin?

VSCode will give you real-time previews (if you install these:
Markdown Preview Enhanced by Yiyi Wang,
Markdown Preview Mermaid Support by Matt Bierner )

but I'm willing to trade that for PDF generation which Markdown Preview does (Sublime being my preferred editor anyway, even though it seems kind of un-hip these days).

Thanks!

[facelessuser]

Are we talking about "github" mode? Little detail is provided in your post. It is likely that that GitHub uses post processing live in the browser by importing Mermaid. If you are using github parser, we return exactly what GitHub does via their API, but they may have additional JS dependencies required to render everything in the browser.

You would need to include the Mermaid library by default for one, potentially along with a configuration to have them rendered. This can be done within the settings. This doesn't guarantee an exact GitHub look as GitHub ads custom controls for panning etc. (which is shown in your image) on top of what Mermaid does, those controls are not provided by Mermaid, but I am less concerned about those control buttons.

[facelessuser]

Just to add some more info. The GitHub styling, specifically for when the GitHub parser is used, employs the styling provided from here https://github.com/sindresorhus/github-markdown-css/issues. This does not include JS from GitHub. So, adding the mermaid library and targeting the mermaid blocks is probably what we would do.

It seems they have their own separate render for Mermaid, so when they generate the flowcharts, they do so in an iframe. the best we can do, or the most I'm willing to do, is maybe provide provide the Mermaid library, potentially with a custom loader to wrap the renders in a shadow dom (mermaid renders some time have conflicts with other diagrams when not contained in such). If the aforementioned issues have been resolved in current versions of Mermaid, we can maybe avoid the shadow dom, but if not, it will be required. I have no intention of implementing the custom controls.

I don't think I plan on pulling in the Mermaid CLI on the backend to render images.