mermaid without browser

Created on 23 Nov 2015  路  9Comments  路  Source: mermaid-js/mermaid

I want to do it in pure node.js:

var mermaidAPI = require('mermaid').mermaidAPI;
var graphDefinition = 'graph TB\na-->b';
var graph = mermaidAPI.render(graphDefinition);
console.log(graph);

Currently it is not possible: https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js#L486

if (typeof document === 'undefined') {
// Todo handle rendering serverside using phantomjs
}

Help wanted!

Most helpful comment

It's not about the issue, but i made a webpack loader that helps to generate PNG files from mermaid diagrams. https://github.com/popul/mermaid-loader

It can help :)

All 9 comments

I agree. That would be a good function. It would impact the CLI in a positive way. It comes down to providing a document containing a DOM object which is used by d3.

I have not worked so much directly with for instance phantomJS. I'll put this as help wanted for now! Lets hope that someone are interested in coding this.

I just have an idea: https://github.com/mhart/react-server-example
React support server side DOM rendering. Can we use React as the 'browser' ?

I have checked the phantomJS project. It seems that it is not being actively developed. It doesn't support OS 10.11 at the moment.

+1

It's not about the issue, but i made a webpack loader that helps to generate PNG files from mermaid diagrams. https://github.com/popul/mermaid-loader

It can help :)

@popul, could you please explain how do you turn *.mmd into png? I checked your code but I really don't get it.

Are you using phantomjs to do the trick or something else?

Update: it seems that node_modules/.bin/mermaid is able to create png

I just run Mermaid CLI into the webpack loader.

https://github.com/popul/mermaid-loader/blob/master/index.js#L8

...
var binPath = './node_modules/.bin/mermaid';
...

https://github.com/popul/mermaid-loader/blob/master/index.js#L87

...
childProcess.execFile(binPath, childArgs, function(err, stdout, stderr) {
...

I tried to generate png server side, but dagre-d3 seems to be not compatible without a browser.

I removed phantomjs-prebuilt in my fork, and added puppeteer.
How is this?

https://github.com/Wreulicke/mermaid/commit/c18c8aad8195f50ebc64c8ff56f6d552c122e097

But, this uses async-await, so this only runs in latest version of Node. (TODO use babel?)

Puppeteer is good! I like it.

I am planning to to replace Phantom with puppeteer in future official release.

Closing it, since I am the creator of this issue.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

knsv picture knsv  路  20Comments

sinedied picture sinedied  路  21Comments

stckcrsh picture stckcrsh  路  15Comments

karthikdav picture karthikdav  路  29Comments

harwoodr picture harwoodr  路  43Comments