mermaidjs / mermaid.cli

Development has been moved to https://github.com/mermaid-js/mermaid-cli

THIS REPO IS NO LONGER BEING ACTIVELY DEVELOPED

Warning

Development has been moved to https://github.com/mermaid-js/mermaid-cli

The mermaid.cli NPM package is no longer being updated and is very out-of-date. Please use the @mermaid-js/mermaid-cli NPM package instead.

---

mermaid.cli

Command-line interface for mermaid.

This CLI tool takes a mermaid definition file as input and generates svg/png/pdf file as output.

Install locally

Some people are having issue installing this tool globally. Installing it locally is an alternative solution:

yarn add mermaid.cli
./node_modules/.bin/mmdc -h

Or use NPM:

npm install mermaid.cli
./node_modules/.bin/mmdc -h

Install globally

❗️ We do NOT recommend installing it globally because both YARN and NPM could fail to install a command line tool globally properly due to weird permission issues.

yarn global add mermaid.cli

Or

npm install -g mermaid.cli

Examples

mmdc -i input.mmd -o output.svg

mmdc -i input.mmd -o output.png

mmdc -i input.mmd -o output.pdf

mmdc -i input.mmd -o output.svg -w 1024 -H 768

mmdc -i input.mmd -t forest

mmdc -i input.mmd -o output.png -b '#FFF000'

mmdc -i input.mmd -o output.png -b transparent

Options

Please run the following command to see the latest options:

mmdc -h

The following is for your quick reference (may not be the latest version):

Usage: mmdc [options]


  Options:

    -V, --version                                   output the version number
    -t, --theme [theme]                             Theme of the chart, could be default, forest, dark or neutral. Optional. Default: default (default: default)
    -w, --width [width]                             Width of the page. Optional. Default: 800 (default: 800)
    -H, --height [height]                           Height of the page. Optional. Default: 600 (default: 600)
    -i, --input <input>                             Input mermaid file. Required.
    -o, --output [output]                           Output file. It should be either svg, png or pdf. Optional. Default: input + ".svg"
    -b, --backgroundColor [backgroundColor]         Background color. Example: transparent, red, '#F0F0F0'. Optional. Default: white
    -c, --configFile [configFile]                   JSON configuration file for mermaid. Optional
    -C, --cssFile [cssFile]                         CSS file for the page. Optional
    -p --puppeteerConfigFile [puppeteerConfigFile]  JSON configuration file for puppeteer. Optional
    -h, --help                                      output usage information

Linux sandbox issue

node:8281) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome!
[0416/092218.828861:ERROR:zygote_host_impl_linux.cc(88)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.

(node:8191) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome!
[0416/091938.210735:FATAL:zygote_host_impl_linux.cc(124)] No usable sandbox! Update your kernel or see https://chromium.googlesource.com/chromium/src/+/master/docs/linux_suid_sandbox_development.md for more information on developing with the SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox.

First and foremost, you should not run as root and you should upgrade your Linux kernel to latest version.

But if you don't want to follow the advice above and just want to disable sandbox, here you go:

Create a puppeteer-config.json file:

{
  "args": ["--no-sandbox"]
}

And when you invoke mmdc:

mmdc -p puppeteer-config.json ...

For contributors

Setup

yarn install
source copy_modules.sh

Test

Use the fixtures in test/ to do manual testing after you change something.

mermaid.cli's Issues

Generated PDFs have blank first and last pages

Not sure whether this is a feature or a bug, but is there any way to avoid those blank pages when generating PDFs?

Is there any way to set dpi for png

in some condition , I have to use png instead of svg
but the default dpi for png is too low (=72)
Is there any way to set dpi for png

how to test mermaid.cli?

I was tryint to test mermaid.cli from the repository, after cloning the repo, I did:

npm install
npm run-script prepublishOnly
node index.bundle.js -i test/flowchart.mmd -o test.png

That gives me the following error:

(node:9500) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Evaluation failed: TypeError: Cannot read property 'init
' of undefined
    at <anonymous>:4:20

I got a warning on npm install about fsevents but it said it was optional.

I'm using node v6.11.0 and npm 3.10.10

Am I missing any step? or should I use a higher node version?
Is there a way of testing it without going through babel?

Thanks!

Feature: Add streaming support

It would be nice to be able to pipe data into the cli rather than have to use a file

Hexagon node syntax leads to UnhandledPromiseRejectionWarning

When using Hexagon Node syntax in input file MermaidJS CLI (v0.5.1) throws UnhandledPromiseRejectionWarning and the whole process hangs.

input.mmd

graph LR
    id1{{This is the text in the box}}

command
mmdc -i input.mmd -o output.png

error message

(node:95078) UnhandledPromiseRejectionWarning: Error: Evaluation failed: Error: Parse error on line 2:
graph LR    id1{{This is the text in
----------------^
Expecting 'SPACE', 'GRAPH', 'DIR', 'TAGEND', 'TAGSTART', 'UP', 'DOWN', 'subgraph', 'end', 'MINUS', '--', '==', 'STR', 'STYLE', 'LINKSTYLE', 'CLASSDEF', 'CLASS', 'CLICK', 'DEFAULT', 'NUM', 'PCT', 'COMMA', 'ALPHA', 'COLON', 'BRKT', 'DOT', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', got 'DIAMOND_START'
    at Yt.parseError (file:///Users/john.doe/.config/yarn/global/node_modules/mermaid.cli/mermaid.min.js:1:486512)
    at Yt.parse (file:///Users/john.doe/.config/yarn/global/node_modules/mermaid.cli/mermaid.min.js:1:487678)
    at Object.e.getClasses (file:///Users/john.doe/.config/yarn/global/node_modules/mermaid.cli/mermaid.min.js:1:749437)
    at Object.render (file:///Users/john.doe/.config/yarn/global/node_modules/mermaid.cli/mermaid.min.js:1:759998)
    at s (file:///Users/john.doe/.config/yarn/global/node_modules/mermaid.cli/mermaid.min.js:8:233)
    at Object.init (file:///Users/john.doe/.config/yarn/global/node_modules/mermaid.cli/mermaid.min.js:8:318)
    at __puppeteer_evaluation_script__:17:20
    at ExecutionContext._evaluateInternal (/Users/john.doe/.config/yarn/global/node_modules/puppeteer/lib/ExecutionContext.js:122:13)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async ExecutionContext.evaluate (/Users/john.doe/.config/yarn/global/node_modules/puppeteer/lib/ExecutionContext.js:48:12)
    at async ElementHandle.evaluate (/Users/john.doe/.config/yarn/global/node_modules/puppeteer/lib/JSHandle.js:55:12)
    at async ElementHandle.$eval (/Users/john.doe/.config/yarn/global/node_modules/puppeteer/lib/JSHandle.js:478:20)
  -- ASYNC --
    at ExecutionContext.<anonymous> (/Users/john.doe/.config/yarn/global/node_modules/puppeteer/lib/helper.js:111:15)
    at ElementHandle.evaluate (/Users/john.doe/.config/yarn/global/node_modules/puppeteer/lib/JSHandle.js:55:42)
    at ElementHandle.<anonymous> (/Users/john.doe/.config/yarn/global/node_modules/puppeteer/lib/helper.js:112:23)
    at ElementHandle.$eval (/Users/john.doe/.config/yarn/global/node_modules/puppeteer/lib/JSHandle.js:478:40)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
  -- ASYNC --
    at ElementHandle.<anonymous> (/Users/john.doe/.config/yarn/global/node_modules/puppeteer/lib/helper.js:111:15)
    at DOMWorld.$eval (/Users/john.doe/.config/yarn/global/node_modules/puppeteer/lib/DOMWorld.js:156:21)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
  -- ASYNC --
    at Frame.<anonymous> (/Users/john.doe/.config/yarn/global/node_modules/puppeteer/lib/helper.js:111:15)
    at Page.$eval (/Users/john.doe/.config/yarn/global/node_modules/puppeteer/lib/Page.js:347:29)
    at Page.<anonymous> (/Users/john.doe/.config/yarn/global/node_modules/puppeteer/lib/helper.js:112:23)
    at /Users/john.doe/.config/yarn/global/node_modules/mermaid.cli/index.bundle.js:83:14
    at Generator.next (<anonymous>)
    at step (/Users/john.doe/.config/yarn/global/node_modules/mermaid.cli/index.bundle.js:4:191)
    at /Users/john.doe/.config/yarn/global/node_modules/mermaid.cli/index.bundle.js:4:361
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:95078) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:95078) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Incorrect JSON config may hang mermaid.cli

If the user creates a syntactically incorrect json, mermaid.cli could hang:

$ node index.bundle.js -i input.mmd -o output.png -c config.json -C CSS.css -w 1500
(node:9056) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): SyntaxError: Unexpected token / in JSON at position 63
(node:9056) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I have a fix ready for throwing a proper error and exiting if the json is incorrect.

Will PR shortly

Text on links is clipped in svg

All text on links in the flowchart is clipped

What's the difference between mermaidjs and mermaid-js?

https://github.com/mermaid-js/mermaid.cli and https://github.com/mermaidjs/mermaid.cli both exist.

I can see mermaid-js/mermaid.cli was forked from here. mermaid.cli on npm points to this repo. But the npm package hasn't been updated in 2 years. I don't really get what the difference between mermaidjs and mermaid-js is. The hyphen one seems to be the core package (i.e. npm install mermaid)?

gantt: pdf output page is too big and the -w and -H options don't seem to affect it

The gantt chart is printed at the top of the page and the rest is just blank space. Also, the -w and -H don't seem to affect the output pdf. It would be great if the output pdf would be cropped to fit just the chart. A partial solution would be to have the option to create a landscape pdf.

Cannot parse participant with dash in sequence diagram

The following syntax "participant API (test-dev)" failed with:

(node:9217) UnhandledPromiseRejectionWarning: Error: Evaluation failed: Error: Lexical error on line 5. Unrecognized text.
...rth participant API (test-dev)
----------------------^
at x.parseError (file:///Users/tbeauquier/mermaid.cli/node_modules/mermaid.cli/mermaid.min.js:1:423219)
at Object.parseError (file:///Users/tbeauquier/mermaid.cli/node_modules/mermaid.cli/mermaid.min.js:1:425417)
at Object.next (file:///Users/tbeauquier/mermaid.cli/node_modules/mermaid.cli/mermaid.min.js:1:429413)
at Object.lex (file:///Users/tbeauquier/mermaid.cli/node_modules/mermaid.cli/mermaid.min.js:1:429580)
at Object.lex (file:///Users/tbeauquier/mermaid.cli/node_modules/mermaid.cli/mermaid.min.js:1:429602)
at x.parse (file:///Users/tbeauquier/mermaid.cli/node_modules/mermaid.cli/mermaid.min.js:1:423938)
at Object.e.draw (file:///Users/tbeauquier/mermaid.cli/node_modules/mermaid.cli/mermaid.min.js:1:720085)
at Object.render (file:///Users/tbeauquier/mermaid.cli/node_modules/mermaid.cli/mermaid.min.js:1:760928)
at s (file:///Users/tbeauquier/mermaid.cli/node_modules/mermaid.cli/mermaid.min.js:8:233)
at Object.init (file:///Users/tbeauquier/mermaid.cli/node_modules/mermaid.cli/mermaid.min.js:8:318)
at ExecutionContext.evaluateHandle (/Users/tbeauquier/mermaid.cli/node_modules/puppeteer/lib/ExecutionContext.js:88:13)
at processTicksAndRejections (internal/process/task_queues.js:86:5)

Do not accept quoted subgraph

I installed mermaid.cli with latest mermaidjs. Here is my package.json

{
  "dependencies": {
    "mermaid.cli": "^0.5.1",
    "mermaid": "knsv/mermaid#f506c795"
  }
}

Attempting to render something like this:

graph TD
  subgraph "groupA1"
    balancer[Balancer] --> backend[Backend]
    balancer --> frontend[Frontend]
  end

Failed with this:

$ /Users/phuongnd08/code/maps/node_modules/.bin/mmdc -i sample.mmd -o sample.pdf
(node:48326) UnhandledPromiseRejectionWarning: Error: Evaluation failed: Error: Parse error on line 2:
...raph TD  subgraph "groupA1"    balance
----------------------^
Expecting 'SEMI', 'NEWLINE', 'SPACE', 'EOF', 'GRAPH', 'DIR', 'TAGEND', 'TAGSTART', 'UP', 'DOWN', 'subgraph', 'end', 'SQE', 'PE', '-)', 'DIAMOND_STOP', 'MINUS', '--', 'ARROW_POINT', 'ARROW_CIRCLE', 'ARROW_CROSS', 'ARROW_OPEN', 'DOTTED_ARROW_POINT', 'DOTTED_ARROW_CIRCLE', 'DOTTED_ARROW_CROSS', 'DOTTED_ARROW_OPEN', '==', 'THICK_ARROW_POINT', 'THICK_ARROW_CIRCLE', 'THICK_ARROW_CROSS', 'THICK_ARROW_OPEN', 'PIPE', 'STYLE', 'LINKSTYLE', 'CLASSDEF', 'CLASS', 'CLICK', 'DEFAULT', 'NUM', 'PCT', 'COMMA', 'ALPHA', 'COLON', 'BRKT', 'DOT', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', got 'STR'
    at Yt.parseError (file:///Users/phuongnd08/code/maps/node_modules/mermaid.cli/mermaid.min.js:1:486512)
    at Yt.parse (file:///Users/phuongnd08/code/maps/node_modules/mermaid.cli/mermaid.min.js:1:487678)

Also apparently mermaid.cli is using its bundled version of mermaid.min.js. It should have used the mermaid specified by package.json

Install on Windows

Hi all,
Is it possible to install it on windows?
(yarn and npm are repositories not available by default on Windows systems).

Can you guys let me know how I can get it on a Windows system? (like, via a downloadable MSI file for example?)

theme option in json config is not working

Right now, if you add the theme configuration to the json config, it is ignored, and either default or the theme given in the commandline with -t is used.

The theme configuration in the json should be taken into account, as per mermaid documentation.

Note that if -t command line is used, it should take precedence over the json theme config

I'll add a PR shortly

When using a <code> tag, the text overflows in the PNG output

Source:

graph TD
pc(<code>.pre-commit-config.yaml</code>)

Result:

Mermaid for Atom Package Styling?

Is there an easy way to get the styling used by the Mermaid for Atom Package to be used here. Both are convenient, of course.

Thanks!

Suggest removing warning about global installs

Re: #47, this line in the readme

We do NOT recommend installing it globally because both YARN and NPM could fail to install a command line tool globally properly due to weird permission issues.

seems like an unneeded warning; no one will have "weird permission issues" if they have installed node/npm in a reasonable way.

npm i -g mermaid.cli works just fine.

Why would someone who is [ostensibly] a JS developer not know how to set their permissions correctly? Don't assume your users don't know what they are doing.

width / height options do not alter the size of the generated PNG

Hi.

I'm not sure if this is a bug or feature request,
but currently it is not posible to generate a bigger PNG using the -w / -H flags

Allow for mermaid configuration

I'm sorry if this is already possible, I didn't see a way of specifying mermaid's configuration as explained in Mermaid API and Mermaid Usage when using mermaid.cli

If it's not currently possible, would it make sense to add this feature to the cli?

It would make life easier for all users of mermaid.cli

Thanks!

Unhandled exception when trying to convert mmd file

When executing mmdc -i my_file.mmd with node 6.11.5 in mermaidCLI 0.3.1, the following exception happens:

(node:29742) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: spawn EACCES

Same issue when using node 8 and 9

The minimal file I tried:

graph LR
A-->B;

Allow for css configuration of mermaid

Right now the css is hardcoded in mermaid.cli.
It would be nice to be able to indicate a local css to take precedence and thus modify the resulting images.

I will try to propose something.

Background option doesn't work with svg

the -b <color> option works fine with png and pdf, but not with svg where the output always has a white background.

Version 0.5.1 on a Mac 10.13.5

blank output (whether svg, pdf, or png)

I don't get any errors, but running mmdc input.mmd -o output.png (or .svg or .pdf) the program runs quietly and produces the expected file but it's always a white blank file.

I had to rename the input mmd file to .txt to upload it here.
I'm new to node/js so I'm not sure where to being to help debug this but i'm excited to use this tool!

input.mmd.txt

Fresh mermaid install crashes

I had to completely reinstall my ubuntu partition and as a result tried to install mermaid cli again, using these lines:

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
apt-get install -y build-essential nodejs
npm install -g mermaid.cli
mmdc -i test.mermaid -o test.png

Resulting in

(node:19211) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: spawn EACCES
(node:19211) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Node version is 8.9.0, NPM is 5.5.1

Any idea what the problem might be?
Thanks in advance!

NPM Install Error

When installing on Ubuntu 17.04, I get:

sudo npm install -g mermaid.cli
/usr/bin/mmdc -> /usr/lib/node_modules/mermaid.cli/index.js

> [email protected] install /usr/lib/node_modules/mermaid.cli/node_modules/puppeteer
> node install.js

fs.js:892
  return binding.mkdir(pathModule._makeLong(path),
                 ^

Error: EACCES: permission denied, mkdir '/usr/lib/node_modules/mermaid.cli/node_modules/puppeteer/.local-chromium'
    at Object.fs.mkdirSync (fs.js:892:18)
    at Object.downloadRevision (/usr/lib/node_modules/mermaid.cli/node_modules/puppeteer/utils/ChromiumDownloader.js:97:10)
    at Object.<anonymous> (/usr/lib/node_modules/mermaid.cli/node_modules/puppeteer/install.js:33:12)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Function.Module.runMain (module.js:665:10)
    at startup (bootstrap_node.js:201:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/eljefe6a/.npm/_logs/2017-09-13T15_40_16_847Z-debug.log

Error: Failed to launch Chrome

This happens whether I install globally or locally. I'll attach the whole log, but the first two lines seem the most important:

(node:6152) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome!
[0504/091123.638219:FATAL:zygote_host_impl_linux.cc(124)] No usable sandbox! Update your kernel or see https://chromium.googlesource.com/chromium/src/+/master/docs/linux_suid_sandbox_developm
ent.md for more information on developing with the SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox.  

I'm using Node v9.11.1, NPM v5.8.0, on a vanilla Arch Linux x64 installation. Mermaid used to work for me (like a year ago when I last used it).

logs.log

CSS option does not properly apply the CSS to the SVG

In the mermaid setup, the choice of theme pulls one of the CSS files from the mermaid install during the process into the style element of the SVG tag. The existing logic in the CLI pulls the CSS into the style sheet of the surrounding HTML page.

To make the CSS apply, this CSS needs to replace the CSS inside the SVG. I was able to make this work by adding the code below after the window.mermaid.init(undefined, container) call so as to replace CSS embedded in there by mermaid with the desired style sheet.

I don't know the setup well enough to know how brittle this is. But it did work.

    if (myCSS) {
      window.document.getElementById('mermaidChart0').getElementsByTagName('style')[0].innerHTML = myCSS;
    }

Is really necessary to have chromium ?

Hi,
I am included mermaid and mermaid.cli inside my CI platform. Every time someone push on master a new clone of the project is place on a workdir and npm install is performed. Now every time more that 100MB was downloaded for chromium that is not used... why coupling a small tool like this to a big bundle like chromium? There is way to avoid it?

Configue puppeteer

It'd be really nice if we were able to configure Puppeteer's runtime settings. In my use case, I'd like to install Chromium into a docker image, set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD and then pass through the executablePath option to puppeteer.launch().

How do you think we could do this? Happy to do the legwork :)

Use installed mermaid package

Instead of copying in a static version of mermaid is it not possible to move mermaid to a normal (non-dev) dependency and have the JS code pull in the package version? Or perhaps better yet make it a peer dependency and then the installer can pick the version they want?

gantt charts - setting the font size in a mermaid json config file or a css file doesn't work

Setting the font size in a mermaid json config file passed to mermaid.cli via its -c option doesn't change the font size in the output when generating gantt charts. The same happens when passing a css file using the -C option with the following content:

html { font-size: 14px; }

It seems the css imposed by the theme (even if you chose no theme) overrides the font size given in the json config file or the css file. The only workaround that I've found is to pass the following css instead

html { font: 14px/14px "Open-Sans" !important; }

The !important bit is key to make it work.

Exit on failure

Description
mmdc doesn't exit when input file is invalid. It is probably okay for interactive user session, but makes it harder to use for any automation usage.

Example

gantt
   dateFormat  YYYY-MM-DD

abc

Expect
mmdc exits with non-zero exit code

Actual
mmdc hangs with the following output, and user has to press ctrl-c to exit

(node:7583) UnhandledPromiseRejectionWarning: Error: Evaluation failed: Error: Parse error on line 4:
...mat  YYYY-MM-DDabc
...

Generated PDF width/height

The width and height (-w / -H) options are not working when generating a pdf.

Simple test mmdc -i in -o out.pdf -H 200

With in file containing:

graph TD
A(test) --> B
B(test) --> C
C(test) --> D
D(test) --> E
E(test) --> F
F(test) --> G
G(test) --> H
H(test) --> I
I(test) --> J
J(test) --> K
K(test) --> L
L(test) --> M
M(test) --> N
N(test) --> O
O(test) --> P
P(test) --> Q
Q(test) --> R
R(test) --> S
S(test) --> T
T(test) --> U
U(test) --> V
V(test) --> W
W(test) --> X
X(test) --> Y
Y(test) --> Z
Z(test)

Please restore the ability to configure sequence and gantt options

Is it possible to restore the --sequenceConfig and --ganttConfig options to the CLI. I was making use of them in the 7.0.x versions and have had to remain on pre 7.1 mermaid due to this CLI change. Thanks.

Allow a markdown file as input

I'd love to be able to specify a markdown file as input and have mmdc generate its output based on mermaid code blocks within the file.

Example input markdown file:

# My Project

My project provides this service:

```mermaid
graph TB
    A(Input) --> B[Processing]
    B --> C(Output)
```

And this service:

```mermaid
graph TB
    A(Blue) --> B[Yellow]
    B --> C(Green)
```

It would be great if running the following command generated two PNG files, one for each mermaid code block found in the file.

mmdc -i readme.md -o output.png

The files could be sequentially named output-1.png and output-2.png, or it could be made a requirement to specify a placeholder in the filename for numeric replacement, eg:

mmdc -i readme.md -o output-%s.png

Thoughts?

svg generated file is not scrollable

I am generating svg file from cli for my sequence diagram and its not scrollable. I am using default config json file while running cli. Any idea how to make svg scrollable using custom css in config file or using any other property in config file?

Question - How to change flowchart width?

Whats the best way to change the width of flowchart being rendered? I tried to specify the width property via -w but doesn't look like they were being honored.

mmdc -i sample.mmd -o output.png -w 1500

I also tried to specify it in the json config file and that didn't work too

{
  "flowchart": {
    "width": "1500"
  }
}

Am I missing something really trivial here? Please help me out. Thanks in advance!

Config file no longer seems to have any effect

After upgrading mermaid.cli from 0.3.6 to 0.4.2 the --configFile option no longer seems to have any effect. I noticed this when the asciidoctor-diagram CI build started failing. Build #597 with 0.3.6 worked, build #598 with 0.4.2 fails.

I can reproduce this locally as well. Using the input file

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    Bob->>Claire: Hello Claire, how are you?
    Claire->>Doug: Hello Doug, how are you?

and the config file

{
  "sequenceDiagram": {
    "diagramMarginX": 500,
    "diagramMarginY": 500,
    "actorMargin": 500,
    "boxMargin": 500,
    "boxTextMargin": 500,
    "noteMargin": 500,
    "messageMargin": 500
  }
}

running mmdc with and without the --configFile produces identical output.

Passing an optional stylesheet does nothing on sequence diagrams

As the title says, I am trying to pass an optional stylesheet for a sequence diagram but it outputs a file, svg, png or pdf without applying it. Tried several configurations on the .css file without success. Here is a simple one I tried:

.actor {
  stroke:black;
  fill:none;
}

text.actor {
  fill:black;
  stroke:none;
  font-family:Arial, Helvetica, sans-serif;
}

.actor-line {
  stroke:black;
}

And on the command line:

mmdc -i seqdiagram.mmd -o seqdiagram.png -C stylesheet.css

I do not seem to be doing anything wrong. I wonder if everyone else is unable to apply an optional stylesheet to sequence diagrams?

Parsing subgraph fails on brackets

Using subgraph node_title[Better title] works in the mermaid editor based on 8.40.
It does not work on mmdc.

Example

$ mmdc -i dummy.mmd -o dummy.svg
(node:1616) UnhandledPromiseRejectionWarning: Error: Evaluation failed: Error: Parse error on line 2:
...raph TBsubgraph BIG[better]A-->Bend
----------------------^
Expecting 'SEMI', 'NEWLINE', 'SPACE', 'EOF', 'GRAPH', 'DIR', 'TAGEND', 'TAGSTART', 'UP', 'DOWN', 'subgraph', 'end', 'SQE', 'PE', '-)', 'DIAMOND_STOP', 'MINUS', '--', 'ARROW_POINT', 'ARROW_CIRCLE', 'ARROW_CROSS', 'ARROW_OPEN', 'DOTTED_ARROW_POINT', 'DOTTED_ARROW_CIRCLE', 'DOTTED_ARROW_CROSS', 'DOTTED_ARROW_OPEN', '==', 'THICK_ARROW_POINT', 'THICK_ARROW_CIRCLE', 'THICK_ARROW_CROSS', 'THICK_ARROW_OPEN', 'PIPE', 'STYLE', 'LINKSTYLE', 'CLASSDEF', 'CLASS', 'CLICK', 'DEFAULT', 'NUM', 'PCT', 'COMMA', 'ALPHA', 'COLON', 'BRKT', 'DOT', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', got 'SQS'
    at Yt.parseError (file:///C:/Users/[CENSORED]/AppData/Local/Yarn/Data/global/node_modules/mermaid.cli/mermaid.min.js:1:486512)
[...]
    at processTicksAndRejections (internal/process/task_queues.js:89:5)
(node:1616) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:1616) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

where dummy.mmd contains:

graph TB
subgraph BIG[better]
A-->B
end

For example see mermaid live editor with this example.

Finally,

$ mmdc -V
0.5.1

libraryize & wrap CLI around library

I think it'd be neat to programmatically use mermaid, in node. Maybe call it "mermaid-serverside".

I'd like to make an img-url parser, so you can inline the source of the graph in the URL and get an image. It would also mean that I can pre-render graphs, so there is no flash of graph-source on pages (I made a gatsby plugin, for example, that has some hacks to make it work browser-only, but I'd prefer they were pre-built.)

If we had this, it'd be really simple to just wrap the CLI around that bit. If there is interest, I'd be happy to write it, and make a PR for this project to use the lib.

Read in the diagram as a string instead of a .mmd file?

I'm using Node. I'm wondering how I can have the prorgam read in my string instead of specifying a file? I have the string in memory and would prefer to just use it directly somehow instead of writing it to a file.

Those exported svg files can be viewed in chrome, but not in IE or Visio

mmdc doesn't support stateDiagram?

I'm trying to use mermaid.cli for generating state diagrams. A minimal state diagram file from the examples:

stateDiagram
    [*] --> Still
    Still --> [*]

run with mmdc -i test.mmd -o test.mmd results in this crash:

(node:68719) UnhandledPromiseRejectionWarning: Error: Evaluation failed: Error: Parse error on line 1:
stateDiagram    [*]
^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'ALPHA'
    at Yt.parseError (file:///Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/mermaid.min.js:1:486512)
    at Yt.parse (file:///Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/mermaid.min.js:1:487678)
    at Object.e.getClasses (file:///Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/mermaid.min.js:1:749437)
    at Object.render (file:///Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/mermaid.min.js:1:759998)
    at s (file:///Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/mermaid.min.js:8:233)
    at Object.init (file:///Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/mermaid.min.js:8:318)
    at __puppeteer_evaluation_script__:17:20
    at ExecutionContext._evaluateInternal (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/ExecutionContext.js:122:13)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async ExecutionContext.evaluate (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/ExecutionContext.js:48:12)
    at async ElementHandle.evaluate (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:55:12)
    at async ElementHandle.$eval (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:478:20)
  -- ASYNC --
    at ExecutionContext.<anonymous> (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:111:15)
    at ElementHandle.evaluate (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:55:42)
    at ElementHandle.<anonymous> (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:112:23)
    at ElementHandle.$eval (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:478:40)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
  -- ASYNC --
    at ElementHandle.<anonymous> (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:111:15)
    at DOMWorld.$eval (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/DOMWorld.js:156:21)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
  -- ASYNC --
    at Frame.<anonymous> (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:111:15)
    at Page.$eval (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/Page.js:347:29)
    at Page.<anonymous> (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:112:23)
    at /Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/index.bundle.js:83:14
    at Generator.next (<anonymous>)
    at step (/Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/index.bundle.js:4:191)
    at /Users/me/.nvm/versions/node/v12.13.1/lib/node_modules/mermaid.cli/index.bundle.js:4:361
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
(node:68719) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:68719) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

It actually hangs at this point and requires a ctrl-C to exit.

Is this because mermaid.cli bundles an old version of the library that doesn't support state diagrams, as mentioned in #71 ?

Promise or async/await

For now, most developers are still using Node 6 LTS. This means that implementing async/await seems too radical. Maybe it's better use promise.then until Node 8 moves into LTS stage in October?

Azure Functions (docker) support

I have created an Azure Functions v2 docker project, mermaidfunc, that runs mermaid for users who need an API due to the restrictions Puppeteer brings along.

Thought you and the community should know about it and also to thank you for a fantastic tool.

Installing globally is good.

Instead of asking people not to install globally, why not teach them how to do it properly? https://docs.npmjs.com/getting-started/fixing-npm-permissions

Font-awesome icons

How can I display the font-awesome icons when using mermaid.cli?

Do not validate argument filenames

Very few CLI tools bother validating the extensions of the files providing using the command line, extensions mean nothing, it's just a convention.

A good example is generating css on the fly for a specific invocation using shell substitution:

$ mmdc -i analysis_reseller-transfer-validation.md -o analysis_reseller-transfer-validation.md.svg --cssFile <(echo 'text { font-family: monospace }')

CSS file must end with ".css"

Custom stylesheet not being used when generating SVGs

The custom styles from a stylesheet seem to not be properly appended when generating an SVG.

I think the issue has to do with the output type logic, mainly:

  if (output.endsWith('svg')) {
    const svg = yield page.$eval('#container', function (container) {
      return container.innerHTML;
    });
    fs.writeFileSync(output, svg);
  }

The container.innerHTML only has styles that come from Mermaid, as the custom stylesheet is being appended to the head of the HTML document.

I think the workaround would be to append the styles to the style element of the SVG container, I was able to monkey patch it in my project with:

1. moving style to the outer scope of if (myCSS) block

2. adding the style in for SVG

  if (output.endsWith('svg')) {
    const svg = yield page.$eval('#container', function (container) {
      if (style) {
        const styles = container.getElementsByTagName('style')[0];
        styles.innerHTML += style.innerHTML;
      }
      return container.innerHTML;
    });
    fs.writeFileSync(output, svg);
  }

Not sure if that's the direction you want to go with - I can create a PR if it seems reasonable.

Error: Failed to launch Chrome

Hi.

Same problem as in #37 . Remains after full update:
4.16.13-1-ARCH

$ mmdc -i flowchart.mmd -o output.svg

(node:23812) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome!
[0604/132833.412465:FATAL:zygote_host_impl_linux.cc(126)] No usable sandbox! Update your kernel or see https://chromium.googlesource.com/chromium/src/+/master/docs/linux_suid_sandbox_development.md for more information on developing with the SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox.
#0 0x560ba482482c base::debug::StackTrace::StackTrace()
#1 0x560ba47ab290 logging::LogMessage::~LogMessage()
#2 0x560ba37a15d1 content::ZygoteHostImpl::Init()
#3 0x560ba44dad91 content::ContentMainRunnerImpl::Initialize()
#4 0x560ba44e4c12 service_manager::Main()
#5 0x560ba44d9184 content::ContentMain()
#6 0x560ba86b1a39 headless::(anonymous namespace)::RunContentMain()
#7 0x560ba86b1ac2 headless::HeadlessBrowserMain()
#8 0x560ba44e1f8f headless::HeadlessShellMain()
#9 0x560ba2a5a1ac ChromeMain
#10 0x7f9a18c3e06b __libc_start_main
#11 0x560ba2a5a02a _start

Received signal 6
#0 0x560ba482482c base::debug::StackTrace::StackTrace()
#1 0x560ba4824391 base::debug::(anonymous namespace)::StackDumpSignalHandler()
#2 0x7f9a1ec16a80 <unknown>
#3 0x7f9a18c5186b __GI_raise
#4 0x7f9a18c3c40e __GI_abort
#5 0x560ba48231e5 base::debug::BreakDebugger()
#6 0x560ba47ab6da logging::LogMessage::~LogMessage()
#7 0x560ba37a15d1 content::ZygoteHostImpl::Init()
#8 0x560ba44dad91 content::ContentMainRunnerImpl::Initialize()
#9 0x560ba44e4c12 service_manager::Main()
#10 0x560ba44d9184 content::ContentMain()
#11 0x560ba86b1a39 headless::(anonymous namespace)::RunContentMain()
#12 0x560ba86b1ac2 headless::HeadlessBrowserMain()
#13 0x560ba44e1f8f headless::HeadlessShellMain()
#14 0x560ba2a5a1ac ChromeMain
#15 0x7f9a18c3e06b __libc_start_main
#16 0x560ba2a5a02a _start
  r8: 0000000000000000  r9: 00007ffcf45df0d0 r10: 0000000000000008 r11: 0000000000000246
 r12: 00007ffcf45df7d8 r13: 0000000000000161 r14: 00007ffcf45df7e0 r15: 00007ffcf45df379
  di: 0000000000000002  si: 00007ffcf45df0d0  bp: 00007ffcf45df320  bx: 0000000000000006
  dx: 0000000000000000  ax: 0000000000000000  cx: 00007f9a18c5186b  sp: 00007ffcf45df0d0
  ip: 00007f9a18c5186b efl: 0000000000000246 cgf: 002b000000000033 erf: 0000000000000000
 trp: 0000000000000000 msk: 0000000000000000 cr2: 0000000000000000
[end of stack trace]
Calling _exit(1). Core file will not be generated.