search

lumeland / lume

🔥 Static site generator for Deno 🦕
https://lume.land
MIT License
1.95k stars 94 forks source link

Support for Mermaid #465

Open alaminkouser opened 1 year ago

alaminkouser commented 1 year ago

Enter your suggestions in details:

Mermaid

oscarotero commented 1 year ago

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 https://github.com/mermaid-js/mermaid/issues/3650.

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

alaminkouser commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

oscarotero commented 1 year ago

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 commented 1 year ago

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

alaminkouser commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

Interesting. I will also try this.

oscarotero commented 6 months ago

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

alaminkouser commented 6 months ago

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

alaminkouser commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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

But seems stable.

oscarotero commented 5 months ago

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 commented 4 months ago

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

ooker777 commented 3 months ago

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

foster-hangdaan commented 1 month ago

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.