Is your feature request related to a problem? Please describe. <p

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Create standalone HTML files about mermaid-cli HOT 7 OPEN

alexkrolick commented on May 17, 2024 2

Create standalone HTML files

from mermaid-cli.

Comments (7)

aloisklink commented on May 17, 2024 2

Does this exist? I came here looking to see if inline SVG in HTML was available or in the works.

If anybody is looking to convert Markdown to plain HTML with support for ```mermaid code blocks, @remcohaszing has recently released https://github.com/remcohaszing/rehype-mermaidjs, which I'd highly recommend!

Of interest, it has a bunch of useful strategies, i.e. 'inline-svg', which renders the Mermaid diagram on the server, then inlines it into the HTML, or 'pre-mermaid', which will allow you to instead render the Mermaid diagram on the client!

Plus, since it's a rehype plugin, it integrates pretty easily with a bunch of Markdown to HTML site generators, like Docusaurus or Astro, in case you want to convert multiple markdown files into a single website (and/or you want much prettier HTML)!

from mermaid-cli.

alexkrolick commented on May 17, 2024 1

I think the easiest approach is to embed the JS file from a CDN, or render to svg and drop it in the page. The goal would be to preserve all the click-handling and CSS-formatting options you can use with the web version, in a standalone file.

output.html (from Mermaid usage docs)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <div class="mermaid">
  graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
  </div>
 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 <script>mermaid.initialize({startOnLoad:true});</script>
</body>
</html>

output.html embedded svg

<svg>
  output here...
</svg>

It doesn't look like mermaid core has a bin reference in package.json, so you'd have to create a JS file to programmatically interface with it (including reading the graph contents from the fileystem). The CLI seems like the natural place to put file-oriented APIs since it already understands these concepts.

from mermaid-cli.

MindaugasLaganeckas commented on May 17, 2024

@alexkrolick Thank you for your feature proposal. I would like to ask that you include an example of such .mmd file and how an output would look like. Regarding the design of the feature, currently I am not sure if the CLI is the right place for the feature. Would it not be a case, that anyone, using mermaid core library (programmatically), like to have the same feature support? CLI is a very thin and not the only client of the https://github.com/mermaid-js/mermaid core library. If you agree, please, move this feature request to the https://github.com/mermaid-js/mermaid project.

from mermaid-cli.

MindaugasLaganeckas commented on May 17, 2024

OK. Would you be interested in working on this feature? The help is appreciated. 🙂

from mermaid-cli.

alexkrolick commented on May 17, 2024

Yes, I think I can work on it

from mermaid-cli.

chrismajewski commented on May 17, 2024

Does this exist? I came here looking to see if inline SVG in HTML was available or in the works.

from mermaid-cli.

alexkrolick commented on May 17, 2024

@chrismajewski Sorry, have not had time to come back to this issue on my end

from mermaid-cli.

Create standalone HTML files about mermaid-cli HOT 7 OPEN

Comments (7)

output.html (from Mermaid usage docs)

output.html embedded svg

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent