Support for Mermaid

[alaminkouser]

Enter your suggestions in details:

Mermaid

• A Graph Generator

[oscarotero]

This came up on Discord server some time ago (https://discord.com/channels/794537085641818124/1111980136691146773) but looks like it's not possible to run Mermaid on server side due mermaid-js/mermaid#3650.

There are a couple of alternative options that you can use:

• Serea plugin: https://github.com/idris-maps/serea
• OI Lume Viz plugin: https://open-innovations.github.io/oi-lume-viz/

[alaminkouser]

I found this article: https://css-tricks.com/making-mermaid-diagrams-in-markdown/

Mermaid has cdn. And It can be used in browser. I tested in this page:
https://alaminkouser.github.io/mermaid/
Source: https://github.com/alaminkouser/alaminkouser.github.io/tree/b2ed2c811bfea580b20f89d2625306a00d0db27c

Although I can not find a way to generate SVG and link/embed the svg, but this currently works.

[oscarotero]

Yes, the only way to run mermaid is in the browser.
But it would be great to have a way to run it in build time, so there's no need to import any script in the html because the code is already generated. That's the problem with mermaid. I hope they implement server side support soon.

[alaminkouser]

Any thoughts regarding this:
https://github.com/mermaid-js/mermaid-cli

[oscarotero]

Seems that it uses puppeteer for rendering.
I'm not sure about performance (specially if there are many diagrams and charts) but I guess we can give a try.

[alaminkouser]

deno has puppeteer. So we may avoid npm and use puppeteer in deno. I will test it.

[alaminkouser]

Here is a quick code for running puppeteer in deno and getting all svg and save the svgs in a dir:
https://github.com/alaminkouser/deno-mermaid/tree/61d526f78d71bd9ab3b1cf12f40a9b39c90e1bbc

[oscarotero]

Okay, thanks!
I'm getting this error:

➜  deno-mermaid git:(main) deno run -A main.ts
error: Uncaught PermissionDenied: Permission denied (os error 13)
    this.proc = Deno.run({
                     ^
    at opRun (ext:runtime/40_process.js:46:14)
    at Object.run (ext:runtime/40_process.js:132:15)
    at BrowserRunner.start (https://deno.land/x/puppeteer@16.2.0/src/deno/BrowserRunner.ts:64:22)
    at ChromeLauncher.launch (https://deno.land/x/puppeteer@16.2.0/src/deno/Launcher.ts:108:12)
    at eventLoopTick (ext:core/01_core.js:183:11)
    at async file:///Users/oscarotero/www/deno-mermaid/main.ts:3:17

[alaminkouser]

Okay, thanks! I'm getting this error:

➜  deno-mermaid git:(main) deno run -A main.ts
error: Uncaught PermissionDenied: Permission denied (os error 13)
    this.proc = Deno.run({
                     ^
    at opRun (ext:runtime/40_process.js:46:14)
    at Object.run (ext:runtime/40_process.js:132:15)
    at BrowserRunner.start (https://deno.land/x/puppeteer@16.2.0/src/deno/BrowserRunner.ts:64:22)
    at ChromeLauncher.launch (https://deno.land/x/puppeteer@16.2.0/src/deno/Launcher.ts:108:12)
    at eventLoopTick (ext:core/01_core.js:183:11)
    at async file:///Users/oscarotero/www/deno-mermaid/main.ts:3:17

Read this: DOC

I am not sure, but you may need to run this command:
PUPPETEER_PRODUCT=chrome deno run -A --unstable https://deno.land/x/puppeteer@16.2.0/install.ts

[oscarotero]

@alaminkouser ok, the problem was the execution permissions for the downloaded binary.

I've been experimenting with puppeteer (Deno already supports the Node version which is more updated).
You can take a look to this experimental plugin:
https://github.com/lumeland/experimental-plugins/tree/main/puppeteer

There are some issues yet but it's a good start.

[alaminkouser]

Interesting. I will also try this.

[oscarotero]

I was able to render mermaid on server side with the Astral experimental plugin:
https://github.com/lumeland/experimental-plugins/tree/main/astral

It runs the javascript code on server side and save the generated HTML code.

For example, this page https://github.com/lumeland/experimental-plugins/blob/main/astral/demo/page.vto#L24-L28

• Run the javascript code
• Remove the script element (all elements with astral-delete attribute are removed)

[alaminkouser]

Amazing! Next week I will try this. It can be powerful and faster. Now generated websites can be without/less JS codes!!!

[alaminkouser]

• I cloned the experimental repo

• went to astral/demo directory

• ran deno task build

• It generated the website.

• It is the output:
  

• It is working.

• I found this output in command line while I ran deno task build:
  

It is downloading chrome. It may not use puppeteer, but uses chrome in server side.

I tested it with a newly deno install in my computer.

[oscarotero]

Yes, it doesn't use puppeteer, but astral https://github.com/lino-levan/astral which is like Puppeteer but for Deno (Puppeteer doesn't work in Deno).

For now, the plugin is just a POC and there are some limitations (for example, it only can load assets from external urls). But for this specific use case it works pretty well.

[alaminkouser]

Only downside being it uses chrome. So cicd will be slow.

But seems stable.

[oscarotero]

I didn't play much with the library, but seems that Firefox is also supported.

If no browser is specified, it downloads chrome automatically.

[ooker777]

Discussion for anyone interested: What makes mermaid.js cannot work on server-side, while other visualization libs can?

[ooker777]

FYI I made a plugin to inject Mermaid script at the front end: https://github.com/ooker777/lume-mermaid-plugin

[foster-hangdaan]

To add to the list of options, I've created a Kroki plugin for Lume which converts codeblocks containing diagram descriptions into an <img/> during the site build. It currently has support for all of the Kroki Diagram Types; Mermaid being one of them.

The images are rendered by a Kroki server. By default, the plugin uses the official instance at https://kroki.io, but can be configured to use a self-hosted instance.