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.