Server-side mermaid

Abstract

It would be better if graphs generated on server instead of client. Here are some possible implementations and "pro et contra" for them.

There are several possible solutions:

  • JSDOM — doesn't supports SVGTextElement.getBBox() required by Mermaid.
  • PhantomJS/SlimerJS — dead
  • puppeteer — only option except changing library (patch or switch to other one)

 

JSDOM

Original problem is that mermaid library uses DOM interfaces not only to get graph source text, but also to generate SVG elements. So we can add DOM implementation (aka pseudo-browser) and everybody will be happy...

Pro:

  1. No "heavy" dependencies (like browser installation)
  2. No platform-dependent dependencies (browser for windows/mac/... are very different beasts)
  3. No platform-dependent code (running browser process on windows/mac/... is very different beasts)
  4. Low: ,It requires pushing window and document to global object, but it can be solved by VM or worker process.

Contra:

  1. It's not working, because mermaid requires SVGTextElement.getBBox() which is not implemented (and not easily implemented) in JSDOM.

 

PhantomJS

When alive mermaid-cli used exactly this solution.

Pro:

  1. It's real browser (based on Chromium) with complete DOM.
  2. It's lightweight (contrary to other headless browsers) and not requires system installation.

Contra:

  1. It's not working, because it's duscontinued in 2016.
  2. "Heavy" binary dependencies (security problems)
  3. Binary dependencies (problems with cross-platform)
  4. External process (problems with rinning on different platform)

 

SlimerJS

Pro:

  1. It's API-compatible with PhantomJS, so mermaid-cli could be easily converted to use it.
  2. It uses real browser (Firefox) with complete DOM.

Contra:

  1. It requires Firefox to be installed (system modification).
  2. It's not working, because it supports only Firefox 58 (released in 2018).
  3. "Heavy" binary dependencies (security problems)
  4. Binary dependencies (problems with cross-platform)
  5. External process (problems with rinning on different platform)

 

puppeteer

Pro:

  1. It's alive.
  2. It uses real browser (Chrome) with complete DOM.

Contra:

  1. It requires Chrome to be installed (system modification).
  2. "Heavy" binary dependencies (security problems)
  3. Binary dependencies (problems with cross-platform)
  4. External process (problems with rinning on different platform)
  5. Low: Has API other than phantomjs.