Render mermaid code on websites?

[orschiro]

Dear all,

This is a more general question. I am currently trying to switch my entire digital work to plain text (i.e. Markdown) files and syntax. Thus, I really like mermaid to use plain text syntax for generating diagrams.

Is it somehow possible to add mermaid syntax to a markdown file and have it rendered on an online website instead of embedding a raster image?

Thankfully,

Robert

[knsv]

That it is. One example is the documentation site. http://knsv.github.io/mermaid/

That site is generated from markdown to html. At page load the graph defintions (still as text inte the html) is rendered by mermaid.

Another way could be to do the markdown conversion in the browser as well. With this approach you could have markdown files as content that is loaded by a web app that generates html and displayed the result.

A good start could be to look at the documentation site though. The source files is in the docs folder.

[orschiro]

Dear @knsv,

Thanks for your comment!

That site is generated from markdown to html. At page load the graph defintions (still as text inte the html) is rendered by mermaid.

I looked at the source and it is hosted on Github Pages, correct? Thus, Github Pages can render mermaid code?

~ Robert

[knsv]

Wc!

The docs pages are served from Github Pages but the rendering is not done by Github Pages. The rendering is done in the browser. This means any site can server this kind of content. The web server only sends the graph definition in a div.

When the page has loaded mermaid starts running in the browser and looks for graph definitions. The graphs found are rendered to svg which is displayed in the content by the browser.

Hope that clarifies things.

[orschiro]

Hope that clarifies things.

Indeed it does! Thank you. Basically, one just needs to load the javascript library to render the code in the browser. Cool! ツ

~ Robert

[szrlee]

still have a question about how to render mermaid on github pages directly from jekyll markdown, etc.

[asbjornu]

@szrlee, as mentioned in github/markup#533, that's a feature request you need to send to the GitHub support team.

[IOrlandoni]

This is a 16 month old closed issue. If you have any more questions or issues, please open a new one.