mermaid-js / mermaid-cli Goto Github PK

View Code? Open in Web Editor NEW

2.0K 31.0 192.0 2.17 MB

Command line tool for the Mermaid library

License: MIT License

Shell 5.49% HTML 1.65% JavaScript 81.10% CSS 2.02% Dockerfile 1.10% Mermaid 7.95% TypeScript 0.70%

diagrams cli mermaid

mermaid-cli's People

Contributors

Stargazers

Watchers

Forkers

salewski melhindi mindaugaslaganeckas fturib bgschiller xertrov juliette-megret elhedran mykiep alexkrolick serkmus capellini joelburton miwadee3153 daladim julianbei 0xflotus bentitopolis asakusuma dwvisser mbrukman drericebert niclas-g nazosnare jb9k62 qize elf-pavlik sw7190 guangminglion chaomu urbanspectra-nyc ghtyrant bikyroy20 smooth80 petitstrawberry dmdeklerk dominicdoty mikesclassicads-dep geffen01 sthagen nicojs jg123 chadfawcett iesoftwaredeveloper business-model-canvas stephenbeckett clickwithclark cyb3r-ca mikeder combinatorist sarvex tmke8 theprincelle sizeoftank tobecheck avineshwar vanimc snosrap nottobe wildmichael metapost schubba zcan11 erikluo 0x00-pl stungkit shanemurphy2 kustomzone aloisklink schulzad craigmac stevenscj sumit0042 davidalphafox markdowncoder adebayoea standardgalactic deriancordobaperez derian-all-win-software skaylink-andreasulm iancaragol shrikantgond snserhello bennytrico bddrey dkurilo emidowojo intensecalm omicoding sec-js thenorthmemory deining erdal-pb elicharlese sidharthv96 daamien fairhopeweb rhirano0715 yohasebe seidchr

mermaid-cli's Issues

Glob pattern support for input files

If would be nice to be able to run a single command that takes multiple input files (glob patterns).
Imagine a package.json build script that would allow the following:

mmdc -i *.mmd
mmdc -i path-to-folder/*.mmd
mmdc -i path-to-folder/**/*.mmd

Any plans to release support for something like this?

Stable svg/png generation

Is your feature request related to a problem? Please describe.
I'd like to use mermaid-cli as part of a build process, however even with the same source files, unchanged, the output changes. This is because the random id's used as part of the svg generation are different with each run of the output.

Describe the solution you'd like
I'd like to seed the random number generator for the cli tool based off a checksum/md5 sum of the input file.

Describe alternatives you've considered
Another alternative would be just to simply fix the seed to a fixed value, and not inspect the input file. However using a checksum will better ensure output changes with input.

Additional context
N/A

Bad PDF layout

As mentioned here : mermaid-js/mermaid#341

Since the SVG output is still corrupt as of '8.8.2-beta.8', I tried the PDF way, just to see, and while the output is correct, the layout is wrong, hence I cannot import the PDF instead of the SVG (LaTeX destination).

expected : generate a SVG file from mermaid to get imported as a figure in LaTeX
actual : SVG works in browser, not in Inkscape, hence translation for LaTeX outputs something weird

temporary fix : use PDF output
expected : figure to fill the page, or page shrink around the picture
actual : PDF layout is wrong, letter size with figure in top left corner

See attached file.

state.pdf

Cannot read property 'initialize' of undefined

Hello! I'm experiencing the following issue:

(etf) rhuemmer@PCAED685:~/etf$ ./node_modules/.bin/mmdc -i ./doc/sphinx/source/hardware/linux/tcp_client.mmd -o test.png -p ./doc/sphinx/source/puppeteer-config.json 
/home/rhuemmer/etf/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:217
            throw new Error('Evaluation failed: ' + helper_js_1.helper.getExceptionMessage(exceptionDetails));
                  ^

Error: Evaluation failed: TypeError: Cannot read property 'initialize' of undefined
    at __puppeteer_evaluation_script__:3:20
    at ExecutionContext._evaluateInternal (/home/rhuemmer/etf/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:217:19)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at async ExecutionContext.evaluate (/home/rhuemmer/etf/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:106:16)
    at async ElementHandle.evaluate (/home/rhuemmer/etf/node_modules/puppeteer/lib/cjs/puppeteer/common/JSHandle.js:102:16)
    at async ElementHandle.$eval (/home/rhuemmer/etf/node_modules/puppeteer/lib/cjs/puppeteer/common/JSHandle.js:650:24)
(etf) rhuemmer@PCAED685:~/etf$

Puppeteer und mermaid.cli are the latest version:

(etf) rhuemmer@PCAED685:~/etf$ npm list --depth=1
etf@ /home/rhuemmer/etf
├─┬ @mermaid-js/[email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
└─┬ [email protected]
  └── [email protected] deduped

Version of node and nodejs:

(etf) rhuemmer@PCAED685:~/etf$ nodejs -v
v8.10.0
(etf) rhuemmer@PCAED685:~/etf$ node -v
v15.0.1

This issue is related to: mermaid-js/mermaid#662
What could be the problem?

Class diagrams with links export to syntactically incorrect SVG files

When a class diagram contains at least one link, the generated SVG contains a syntax error:

XML Parsing Error: prefix not bound to a namespace
Location: FILE
Line Number ROW, Column COLUMN:

Steps to reproduce the behavior:

Store any class diagram with at least one link in a file example.mmd (e.g., the example from the Mermaid website, see below).
Run mmdc -i example.mmd -o example.svg
Open the SVG image in a program that can display SVGs (e.g., Firefox); observe the syntax error.

classDiagram
  class Shape
  link Shape "http://www.github.com" "This is a tooltip for a link"

Expected behavior

SVGs generated with mmdc without errors/warnings to be syntactically valid.

OS: Ubuntu
Browser: Firefox
Version: 8.6.0

Is there a way to download chromium once?

I'm hoping it's possible to get the mermaid cli tool to not download Chromium r800071 every time I run npx -p @mermaid-js/mermaid-cli mmdc .

I'm scratching my head a bit because it feels like it's something that should be possible, but I don't really know how.

It would save me like 20-30 seconds per time I run the command if it just kept a copy of it around somewhere.

I'm on windows. Any help would be appreciated!

Feature: allow `mmdc` to parse Markdown files

Is your feature request related to a problem? Please describe.
I'm always frustrated when editing a Mermaid diagram in VSCode in a Markdown file and I can't export it easily via CLI using mmdc.

Describe the solution you'd like
I'd like mmdc -i diagram.md to produce diagram.md.svg.

Describe alternatives you've considered
One can copy and paste the diagram to a new file without the back ticks, but this is unpleasant.

Additional context
In case more than one diagram is found in the file, multiple files could be generated.

Feature: allow `mmdc` to output Markdown files

Just passing by, excellent project! I was surprised to see that there is no way to output directly to markdown, which would be useful as a build step before deploying to something like a static file server where markdown is still preferred.

Related to #130

Context: here.

I have not considered whether the chosen .match method used above better complies with how markdown is rendered in edge cases (eg. dangling triple-backticks - which in this case will render code blocks even if not closed), but I propose something like the following:

if (/\.md$/.test(output)) {
    const {blocks,outputs,promises}=definition.split('```').reduce((acc, block, i) => {
        // Not MMD block:
        if ( i % 2 == 0 || !block.match(getMermaidBlock) ) {
            acc.blocks.push(block)
            return acc
        }

        // MMD block:
        const file = output.replace(/(\..*)$/, `-${++index}.png`) // Could allow configuration of extension via another option
        acc.promises.push(parseMMD(browser, block.replace(getMermaidBlock, '$1'), file)) // Promise pool for larger docs?
        acc.outputs.push(acc.blocks.join('```')+`\n\n![${file}](./${file} "Mermaid diagram")\n\n`)
        acc.blocks=[]
        return acc
    }, {
        blocks:[], // Adjacent blocks forming non-MMD output sections
        outputs:[], // Output sections
        promises:[], // Corresponding MMD promises
    })
    await Promise.all(promises)
    fs.writeFileSync(output, outputs.join('')+blocks.join('```'))
}

The above should output a markdown file which is a translation of the input file, having mermaid code blocks replaced by image embeds.

A few unrelated notes:

There is no need for if (matches.length > 0), since [].map(f) == [] and Promise.all([]) == Promise.resolve(), so will resolve instantly.

Unless I misunderstood the regex, there is also no need for a non-capturing group ((?:mermaid)), a literal sequence can be used instead (mermaid).

Apologies for the brain dump, I didn't have time to make an optimistic PR, but if there is interest I will fork and PR ASAP.

Running Without Chromium Dependencies

I posted this question to the main mermaid repo two months ago without any response: mermaid-js/mermaid#1494

Please let me know if the issue should remain there, or if this is the best place to handle it.

========================================================

I'm attempting to install and run Mermaid in a light-weight Docker container running Ubuntu 20.04.

When interacting with the container and running mmdc, I'm receiving the following error originating from Puppeteer: UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!
Full error: runtime_error.txt

From the package.json, Puppeteer is a dev dependency only. When installing Mermaid and Mermaid CLI using yarn add, I do not specify inclusion of development dependencies.

ARG MERMAID_VERSION="8.5.2"
ARG MERMAID_CLI_VERSION="8.5.1-2"
RUN yarn add mermaid@${MERMAID_VERSION} \
             @mermaid-js/mermaid-cli@${MERMAID_CLI_VERSION}

The following entry is in the yarn.lock, which does not specify Puppeteer as a dependency:

[email protected]:
  version "8.5.2"
  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-8.5.2.tgz#0f1914cda53d4ea5377380e5ce07a38bef2ea7e8"
  integrity sha512-I+s+8/RzlazF3dGOhDUfU/ERkUV4zfIlTWb3703jNx+2lfACs+4AdY9ULQaw6BPWzW3gB+XlXFOOX/m/vqujIA==
  dependencies:
    "@braintree/sanitize-url" "^3.1.0"
    crypto-random-string "^3.0.1"
    d3 "^5.7.0"
    dagre "^0.8.4"
    dagre-d3 "^0.6.4"
    entity-decode "^2.0.2"
    graphlib "^2.1.7"
    he "^1.2.0"
    minify "^4.1.1"
    moment-mini "^2.22.1"
    scope-css "^1.2.1"

I've tried adding the --prod or --production=true flags to to the yarn add, but mmdc still fails with the same issue. It seems the only way to avoid the error is to include all of the many Chromium dependencies that Puppeteer requires, and then it runs successfully.

Is there any way to avoid pulling in these dependencies just to run mmdc? I'm unfamiliar with yarn, so please let me know if I've missed something.

Running the CLI command without passing any arguments throws an error, when it should probably display the "help" text instead

Describe the bug
Running the CLI command without passing any arguments throws an error.

To Reproduce
Steps to reproduce the behavior:

Install Mermaid-CLI via npm install -g @mermaid-js/mermaid-cli (to test it out since I've never used it before)
Type mmdc (I assume this means "Mermaid CLI"? I'd expect mermaid, which is far more intuitive, but oh well)
An error is printed and as a new user, I'm flabbergasted for a second as I have to guess that it means "I have no file to open"

Expected behavior
I'd expect to see the output of mmdc -h, which is standard behaviour for CLI tools?

Screenshots

I'd expect this to be the first thing any user does (you didn't think people read all the documentation first, did you? 😂 ) and being greeted with an error isn't what most people will be expecting, even if it makes sense (in retrospect) that you'd require some files to be passed as input.

Luckily, it's very easy to fix. I think even just showing the help command's output by default is sufficient for a CLI tool, though it could likely be improved further, e.g. by linking to proper documentation or being easier to parse at a glance (visual improvement).

Running with Docker/Podman: Permission Denied

When I run the Docker image with Docker or Podman I get the following error

› podman run -it -v "$(pwd)":/data:z minlag/mermaid-cli -i /data/diagram.mmd
node:fs:582
  handleErrorFromBinding(ctx);
  ^

Error: EACCES: permission denied, open '/data/diagram.mmd.svg'
    at Object.openSync (node:fs:582:3)
    at Object.writeFileSync (node:fs:2143:35)
    at /home/mermaidcli/node_modules/@mermaid-js/mermaid-cli/index.bundle.js:169:10
    at Generator.next (<anonymous>)
    at step (/home/mermaidcli/node_modules/@mermaid-js/mermaid-cli/index.bundle.js:4:191)
    at /home/mermaidcli/node_modules/@mermaid-js/mermaid-cli/index.bundle.js:4:361
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  errno: -13,
  syscall: 'open',
  code: 'EACCES',
  path: '/data/diagram.mmd.svg'
}

How can I run the CLI without root?

Pie chart?

why i can't write pie chart? maybe i miss something?

if i write this on my terminal:

mmdc -i <(echo 'pie
    title Persone che hanno letto tutto l articolo 
    "Nessuno" : 80.00
    "Nessuno, ma arancio" :  20') -o ciao.png

the output is:

node:internal/process/promises:225
          triggerUncaughtException(err, true /* fromPromise */);
          ^

Error: Evaluation failed: Error: Parse error on line 1:
pie    title Person
^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'ALPHA'
    at Yt.parseError (file:///usr/local/share/.config/yarn/global/node_modules/mermaid.cli/mermaid.min.js:1:486512)
etc..

other diagrams like sequenceDiagram work well

Different png output from docker vs local package

I am using the latest docker image (minlag/mermaid-cli) for converting mmd to png. I am able to obtain an image, but in respect to my local installation (NPM package) the result is quite poor, using the same exact parameters. The quality is a partial issue, the major problem is the presence of large white bands on the top and bottom of the image.

I am using the latest docker image and node v14.8.0

using
docker run -v ${PWD}:/mnt/mmd minlag/mermaid-cli -i /mnt/mmd/Artwork_Name.ttl.mmd -o /mnt/mmd/png/test_docker.png -s 2
I obtain this image

using
mmdc -i Artwork_Name.ttl.mmd -o png/test_classic.png -s 2
I instead obtain this one (preferred)

Am I doing something wrong? How can I have the same quality of the export using docker?

Cli error rendering stateDiagram on MacOs

Describe the bug
Error generating image from .mmd with mmdc installed via npm when input file starts with a state diagram:

(node:63597) UnhandledPromiseRejectionWarning: Error: Evaluation failed: Error: Parse error on line 1:
stateDiagram	[*] --
^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'ALPHA'
    at Yt.parseError (file:///Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/mermaid.min.js:1:486512)
    at Yt.parse (file:///Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/mermaid.min.js:1:487678)
    at Object.e.getClasses (file:///Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/mermaid.min.js:1:749437)
    at Object.render (file:///Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/mermaid.min.js:1:759998)
    at s (file:///Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/mermaid.min.js:8:233)
    at Object.init (file:///Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/mermaid.min.js:8:318)
    at __puppeteer_evaluation_script__:17:20
    at ExecutionContext._evaluateInternal (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/ExecutionContext.js:122:13)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at ExecutionContext.<anonymous> (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/helper.js:111:15)
    at ElementHandle.evaluate (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/JSHandle.js:55:42)
    at ElementHandle.<anonymous> (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/helper.js:112:23)
    at ElementHandle.$eval (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/JSHandle.js:478:40)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at ElementHandle.<anonymous> (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/helper.js:111:15)
    at DOMWorld.$eval (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/DOMWorld.js:156:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at Frame.<anonymous> (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/helper.js:111:15)
    at Page.$eval (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/Page.js:347:29)
    at Page.<anonymous> (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/helper.js:112:23)
    at /Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/index.bundle.js:83:14
    at Generator.next (<anonymous>)
    at step (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/index.bundle.js:4:191)
    at /Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/index.bundle.js:4:361
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:63597) 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:63597) [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.

To Reproduce
Steps to reproduce the behavior:
Test.mmd file content:

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

	Still --> Moving
	Moving --> Still
	Moving --> Crash
	Crash --> [*]

Command line:

./node_modules/.bin/mmdc -i graphs/Test.mmd assets/Test.png

Expected behavior
Test.png is rendered

Desktop (please complete the following information):

OS: macOS Catalina 10.15.2
Node version: v10.16.0 and v13.7.0
Cli Version:

 "mermaid.cli": {
      "version": "0.5.1",
      "resolved": "https://npm.ff3d.com/mermaid.cli/-/mermaid.cli-0.5.1.tgz",
      "integrity": "sha512-03aKyM1nH86Hk16xiP7Hiswg2CuJ4iFkwDdWln00Irx4E81fy1FPUzXon3JVckp1MkxKtDHJlg3SudlLwKsndQ==",
      "dev": true,
      "requires": {
        "chalk": "^2.4.1",
        "commander": "^2.15.1",
        "puppeteer": "^1.4.0"
      }
    }```

**Additional context**
VScode preview and Live editor preview do work with the same file content

Shell error when running latest docker image

Thank you for maintaining mermaidJS.

Describe the bug

When running the latest docker image minlag/mermaid-cli:latest (presumably v8.9.1-beta.2), the following error appears when I run mmdc:

sh: 1: sh: mmdc: not found

To Reproduce

Run the following command:

docker run --rm --entrypoint mmdc minlag/mermaid-cli:latest

Observed response:

docker: Error response from daemon: OCI runtime create failed: 
container_linux.go:370: starting container process caused: 
exec: "mmdc": executable file not found in $PATH: unknown.

Expected behavior

Expected response:

Please specify input file: -i <input>

Workaround

Run version v8.9.0:

docker run --rm --entrypoint mmdc minlag/mermaid-cli:8.9.0 

# output
Please specify input file: -i <input>

If latest is pointing to a beta, perhaps it should only point to the latest stable version of Mermaid.

Desktop:

OS: MacOS 10.15.7
Docker: 3.1.0; engine 20.10.2

autonumber doesn't seem to work

Trying to render a sequence diagram with autonumber.

sequenceDiagram
autonumber
Caller->>+Receiver:Invoke

Throws this error:

(node:13159) UnhandledPromiseRejectionWarning: Error: Evaluation failed: Error: Parse error on line 2:
...agram    autonumber    Caller->>+Recei
----------------------^
Expecting 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', got 'NL'
    at x.parseError (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:1:423219)
    at x.parse (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:1:424385)
    at Object.e.draw (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:1:720085)
    at Object.render (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:1:760928)
    at s (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:8:233)
    at Object.init (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:8:318)
    at __puppeteer_evaluation_script__:17:20
    at ExecutionContext._evaluateInternal (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/ExecutionContext.js:122:13)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

version: '8.7.0',

Top and bottom white margin issue in a generated png

Hi,

Context : When I generate a docx file (pandoc + mermaid-filter), I have top and bottom white margin for one mermaid graph type : sequenceDiagram...

Example :

Does anyone have an idea of the problem ?

I tested directly mmdc in command line which reacts differently in the 2 contexts:

through pandoc + mermaid-filter
in a terminal

I lean towards environment variables issue... Hence my post for an expert on the subject for a little bit help !

Thanks in advance

I'm working un Bulleyes Debian / node 16 / pandoc 2.16.2.1

How to get the Docker image up and running?

Help us help you!

Hi,

I am a novice YARN/NPM user. Could you please tell me how I can use the docker image to generate flowcharts?

Since my compute environment doesn't allow to run Docker images directly (security reasons), I am using Singularity:

(base) test@~/comp_space/testing/mermaid>$ singularity pull docker://minlag/mermaid-cli
INFO:    Converting OCI blobs to SIF format
INFO:    Starting build...
Getting image source signatures
Copying blob 8aff230071c9 done
Copying blob 11e9dbd0ef22 done
Copying blob 4d02a11eb199 done
Copying blob 1e5b0f36ee21 done
Copying blob df64fc6a17b0 done
Copying blob 71536afb99a9 done
Copying blob 1099de8e5e0d done
Copying blob 29fa75085be2 done
Copying blob 4c308c5eead9 done
Copying config bba6818f87 done
Writing manifest to image destination
Storing signatures
2021/02/15 09:44:36  info unpack layer: sha256:8aff230071c97ddc86b6d29fbbb7a4caae7a0183a83f08aa5a06e69e26ce2c81
2021/02/15 09:44:37  warn rootless{usr/local/man} ignoring (usually) harmless EPERM on setxattr "user.rootlesscontainers"
2021/02/15 09:44:38  info unpack layer: sha256:11e9dbd0ef222f420b054133223f98269da27d484f3a60eeac754e15072d4cf7
2021/02/15 09:44:38  info unpack layer: sha256:4d02a11eb199b62846aa02b8323577e467e1b7249847b81fa49badd979719afe
2021/02/15 09:44:39  warn rootless{usr/local/bin/npm} ignoring (usually) harmless EPERM on setxattr "user.rootlesscontainers"
2021/02/15 09:44:39  warn rootless{usr/local/bin/npx} ignoring (usually) harmless EPERM on setxattr "user.rootlesscontainers"
2021/02/15 09:44:40  info unpack layer: sha256:1e5b0f36ee2101c5f61384ef933d1724466847d708a97aa1100987042c803a4a
2021/02/15 09:44:40  info unpack layer: sha256:df64fc6a17b05faf3e8f045afbaed922e083ddc6a1a7b1886f89d76fa2ac9fbe
2021/02/15 09:44:40  info unpack layer: sha256:71536afb99a91a1310de31eec8c68bd705ef8d1f4fed2f5a2a003361303925f2
2021/02/15 09:44:40  info unpack layer: sha256:1099de8e5e0d2a3f2593b8fc4a892abcd45fbdaab01ef3d52f27332fec7416c9
2021/02/15 09:44:40  info unpack layer: sha256:29fa75085be27bbbc313b8602ceb96c69f8711e39e57cf5bc749abca79ba0156
2021/02/15 09:44:40  info unpack layer: sha256:4c308c5eead951c5b0ff4ade71c2e84d0d0944d6746f53c7e4da79b90fe28b9d
INFO:    Creating SIF file...
(base) test@~/comp_space/testing/mermaid>$ ls
mermaid-cli_latest.sif*
(base) test@~/comp_space/testing/mermaid>$ ll
total 417664
-rwxr-xr-x. 1 patis cbica 427651072 Feb 15 09:45 mermaid-cli_latest.sif*
(base) test@~/comp_space/testing/mermaid>$ ./mermaid-cli_latest.sif -h
yarn run v1.22.5
error Couldn't find a package.json file in "~//testing/mermaid"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
(base) test@~/comp_space/testing/mermaid>$ which yarn
/usr/bin/which: no yarn in ()
(base) test@~/comp_space/testing/mermaid>$ ./mermaid-cli_latest.sif
yarn run v1.22.5
error Couldn't find a package.json file in "~/testing/mermaid"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
(base) test@~/comp_space/testing/mermaid>$ ./mermaid-cli_latest.sif --version

Thanks,
Sarthak

Create standalone HTML files

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

If I have a .mmd file with the interactive styling & interactions encoded, it would be nice to be able to either embed a static representation of the "built" diagram in an HTML file via CLI, or include the mermaidjs renderer (optionally via CDN) in the file but still have a standalone page for it.

This is an alternative to setting up your own build pipeline for the HTML.

mmdc -i input.mmd -o output.html

Implementation-wise, I think this would "just" bypass the headless browser phases and return the file that was being rendered there.

End the Debate what does mmd stand for?

There is an ongoing debate amongst our team on what mmd stands for:

going contenders:
MerMaid Diagram
Mermaid MarkDown

mermaid missing text in svg

Describe the bug
i created a simple mmdc file. and when generated to an svg it is missing text.

To Reproduce
i made a file called test.mmdc wit this code:

graph TD id1[This is the text in the box]

then I converted it with this command:
mmdc -i test.mmdc

it then generated this:
https://imgur.com/a/FmDRxV3

Expected behavior
I expected that the text "This is the text in the box" would appear in the box

Screenshots
https://imgur.com/a/FmDRxV3

Desktop (please complete the following information):

OS: windows 10
Browser chrome
Version89.0.4389.90

question on using mermaid cli with npm and gradle

I'm not sure if this is the best way but I'm trying to use mermaid cli (over npm) to generate some svgs and it's honestly easy.

My point comes now that I'm trying to automate this with gradle so that I have a task that just generates the svg.

My point that maybe seems very basic is that I can create a package JSON with the dependencies to the mermaid cli but I have no idea how to execute this. Anyone has any idea?

I want to use the NodeTask setup because it would allow me to manage the node installation and the node modules download because I don't have a docker deamon available.

Quotes around font-family in scss files makes svgs susceptible to line-wrap corruption

Is your feature request related to a problem? Please describe.
When used from https://github.com/asciidoctor/asciidoctor-diagram svgs generated by github.com/mermaid-js/mermaid-cli are line-wrapped which causes them to be corrupted. While clearly asciidoctor-diagram should not be doing this (asciidoctor/asciidoctor-diagram#308) I believe mermaid could make a simple fix to correct this.

Describe the solution you'd like
If the font-family were not surrounded by quotes (") line wrapping in the middle of the name of the default font family (trebuchet ms) seems to be processed fine. I'd propose that themes' scss files drop the quotes.

Describe alternatives you've considered
Fix asciidoctor-diagram. In the interim, specifying a mermaid config file like this causes the quotes to be dropped:

{
  "fontFamily": "trebuchet ms"
}

Additional context
I initially filed this here mermaid-js/mermaid#1788 but @knsv suggested I filed it in this repo.

live editor code, preview and configuration windows should be resizable

Is your feature request related to a problem? Please describe.
When my mermaid code is long, the small window is a hindrance.

Describe the solution you'd like
All sub-windows hence, should be made resizable.

Describe alternatives you've considered
Using other implementations which are worse choices to make!

NPM version vs GitHub

Hi,

I'm currently trying to create a brew formula as requested in #25 and am not sure which URL to use for downloading?

Brew generally prefers npm but the newest stable version there is, as far as I can see, 8.8.1 with GitHub already having 8.8.3. Should I still use npm?

Thanks!

mmdc incorrectly converts to in SVG output

Describe the bug
When converting a .mmd file to a .svg file, XHTML style elements (e.g.  ) are incorrectly converted to HTML 5 style elements (e.g.  ). This breaks SVG rendering in browsers.

Workaround used:

sed -i tmp 's#<br>#<br/>#g' test.svg

To Reproduce
Steps to reproduce the behavior:

Considering the file test.mmd with the following contents:
```
graph LR
 a --> |"line 1 line 2"| b
```
Run npx mmdc --input test.mmd --output test.svg

Expected behavior
Expected is a SVG file with a   tag.

Actual behavior
A SVG file with a   tag, which is incorrect in SVG.

Desktop (please complete the following information):

OS: macOS 11.2.2
Version @mermaid-js/mermaid-cli: ^8.9.0

failed to render svg image of state diagram when there are some strings with '\n'

Describe the bug
failed to render svg image of state diagram when there are some strings with '\n'

To Reproduce
a.mmd:

stateDiagram-v2
    a --> b : link \n note

mmdc -i a.mmd -o a.svg

the generated 'svg' image is invalid.

Expected behavior
render svg image successful

Env

OS: mac os
Version : 8.11.0

mmdc does not show error message

Describe the bug

mmdc detects an error but does not tell my why. I just get a cute svg with a bomb logo telling me that "something" was wrong.

To Reproduce

$ mmdc -i t.mmd

for

graph TD
A[Can Client Secret be kept secret?]
B -->[no] B2[Implicit Grant]

Expected behavior
Some error message telling me that the "[no]" in line 3 is where the error is (as it should have been "|no|").

Screenshots

Desktop (please complete the following information):

OS: macos catalina 10.x
mmdc: 8.9.2 via brew

Take input from STDIN

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

For some diagrams that are generated programatically, it would be great to be able to pipe output from one script straight into mmdc without creating a file.

Describe the solution you'd like

Something like this:

create-dep-graph.sh | mmdc -o deps.pdf

Describe alternatives you've considered

🤔 create an intermediate file

create-dep-graph.sh > file.mmd & mmdc -i file.mmd -o deps.pdf

Additional context

🦖

Implement e2e tests for https://github.com/mermaid-js/mermaid-cli/pull/214

Implement e2e tests for #214

Maximum text size in diagram exceeded

Describe the bug
When I try to generate a diagram for mermaid file of size 757KB what I get is an empty svg/png with text: Maximum text size in diagram exceeded

To Reproduce
Generate input.mmd size greater than 700KB.
Run: docker run -it -v /Users/olegkubrakov/Sites/bulldog/scripts/tx_flowchart:/data minlag/mermaid-cli -i /data/input.mmd -o output.png

Expected behavior
A graphic representation of a diagram expected.

Screenshots

Failing to generate an image from the state diagram

This is the error:

mmdc -i diagram.mmd -o diagram.png
(node:92883) UnhandledPromiseRejectionWarning: Error: Evaluation failed: Error: Parse error on line 1:
stateDiagram	s1: In
^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'ALPHA'
    at Yt.parseError (file:///Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/mermaid.min.js:1:486512)
    at Yt.parse (file:///Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/mermaid.min.js:1:487678)
    at Object.e.getClasses (file:///Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/mermaid.min.js:1:749437)
    at Object.render (file:///Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/mermaid.min.js:1:759998)
    at s (file:///Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/mermaid.min.js:8:233)
    at Object.init (file:///Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/mermaid.min.js:8:318)
    at __puppeteer_evaluation_script__:17:20
    at ExecutionContext._evaluateInternal (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/ExecutionContext.js:122:13)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async ExecutionContext.evaluate (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/ExecutionContext.js:48:12)
    at async ElementHandle.evaluate (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:55:12)
    at async ElementHandle.$eval (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:478:20)
  -- ASYNC --
    at ExecutionContext.<anonymous> (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:111:15)
    at ElementHandle.evaluate (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:55:42)
    at ElementHandle.<anonymous> (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:112:23)
    at ElementHandle.$eval (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:478:40)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
  -- ASYNC --
    at ElementHandle.<anonymous> (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:111:15)
    at DOMWorld.$eval (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/DOMWorld.js:156:21)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
  -- ASYNC --
    at Frame.<anonymous> (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:111:15)
    at Page.$eval (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/Page.js:347:29)
    at Page.<anonymous> (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:112:23)
    at /Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/index.bundle.js:83:14
    at Generator.next (<anonymous>)
    at step (/Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/index.bundle.js:4:191)
    at /Users/dbernardes/.asdf/installs/nodejs/13.8.0/.npm/lib/node_modules/mermaid.cli/index.bundle.js:4:361
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:92883) 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:92883) [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.

The mermaid file:

stateDiagram
	s1: Input Queue
	s2: Function
	s3: Function Success
	s4: Function Fail
	s5: Notification Queue
	s6: Notification Queue Success
	s7: Notification Queue Fail

	[*] --> s1
	s1 --> s2
	s2 --> s3
	s2 --> s4
	s3 --> s5
	s4 --> s5
	s5 --> s6
	s5 --> s7
	s6 --> [*]
	s7 --> s1

But it's working fine at the web editor:

Add brew installation

Is your feature request related to a problem? Please describe.
I want to install mermaid-cli on my MacOS.

Describe the solution you'd like
Please add brew formula, that help mac-users to easy install mermaid-cli.

Width argument not taken into account

As mentioned here : mermaid-js/mermaid#341

npx mmdc --theme "neutral" -w "1000" -i state.mmd -o state.png
npx mmdc --theme "neutral" -w 2048 -i state.mmd -o state.png
npx mmdc --theme "forest" --width "2048" -i state.mmd -o state.png
npx mmdc --theme "neutral" -w "800" -i state.mmd -o state.png
npx mmdc --theme "neutral" -H "2048" -i state.mmd -o state.png
...

None of them change a thing, I'm still getting the same 202x346 pixels picture.

See attached picture below.

I need a better resolution to import into a LaTeX documentation.

PNGs rendered with docker image are missing emojis

Describe the bug
Rendering to PNG with docker-image is missing emojis

To Reproduce
Steps to reproduce the behavior:

fork (or just see) https://github.com/elf-pavlik/data-interoperability-panel
see results of github action https://github.com/elf-pavlik/data-interoperability-panel/blob/gh-pages/primer/diagrams/home.alice.example.flow.mmd.png
see flowchart source: https://github.com/elf-pavlik/data-interoperability-panel/blob/gh-pages/primer/diagrams/home.alice.example.flow.mmd
verify gitub action: https://github.com/elf-pavlik/data-interoperability-panel/blob/main/.github/workflows/publish-proposals.yml#L39

Expected behavior
Rendered PNG should include emojis from the source

Screenshots

rendered as PNG using docker-container in github action

rendered as PNG locally using npm module

Invalid handling of tags

Describe the bug
mermaid-cli generates invalid SVG when the mermaid file contains   tags, although it is supported e.g. in the Mermaid live editor

To Reproduce
Steps to reproduce the behavior:
Save this as basic.mermaid:

graph TD
  subgraph sub
    node(Line 1<br/>Line 2<br/>Line 3)
  end

Grab the latest Docker image: docker pull minlag/mermaid-cli

Run mermaid-cli:

$ docker run -v /home:/mm minlag/mermaid-cli -i /mm/basic.mermaid -o /mm/basic.svg
yarn run v1.22.5
warning package.json: No license field
$ /app/node_modules/.bin/mmdc -p /puppeteer-config.json -i /mm/basic.mermaid -o /mm/basic.svg
Done in 0.42s.

Expected behavior
The SVG should be valid and identical to Mermaid's live editor output

Actual behaviour
The SVG is invalid (no thumbnail preview in Nautilus), and Firefox displays the following error:

XML Parsing Error: mismatched tag. Expected: </br>.
Location: file:///home/basic.svg
Line Number 1, Column 3217:
<svg id="mermaid-1605261674894" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="140" style="max-width: 150px;" viewBox="0 0 150 140"><style>#mermaid-1605261674894{font-family:"trebuchet ms",verdana,arial;font-size:16px;fill:#333;}#mermaid-1605261674894 .error-icon{fill:#552222;}#mermaid-1605261674894 .error-text{fill:#552222;stroke:#552222;}#mermaid-1605261674894 .edge-thickness-normal{stroke-width:2px;}#mermaid-1605261674894 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1605261674894 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1605261674894 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1605261674894 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1605261674894 .marker{fill:#333333;}#mermaid-1605261674894 .marker.cross{stroke:#333333;}#mermaid-1605261674894 svg{font-family:"trebuchet ms",verdana,arial;font-size:16px;}#mermaid-1605261674894 .label{font-family:"trebuchet ms",verdana,arial;color:#333;}#mermaid-1605261674894 .label text{fill:#333;}#mermaid-1605261674894 .node rect,#mermaid-1605261674894 .node circle,#mermaid-1605261674894 .node ellipse,#mermaid-1605261674894 .node polygon,#mermaid-1605261674894 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1605261674894 .node .label{text-align:center;}#mermaid-1605261674894 .node.clickable{cursor:pointer;}#mermaid-1605261674894 .arrowheadPath{fill:#333333;}#mermaid-1605261674894 .edgePath .path{stroke:#333333;stroke-width:1.5px;}#mermaid-1605261674894 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1605261674894 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-1605261674894 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-1605261674894 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1605261674894 .cluster text{fill:#333;}#mermaid-1605261674894 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial;font-size:12px;background:hsl(80,100%,96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1605261674894:root{--mermaid-font-family:"trebuchet ms",verdana,arial;}#mermaid-1605261674894 flowchart{fill:apa;}</style><g><g class="output"><g class="clusters"><g class="cluster" id="flowchart-sub-2" transform="translate(75,70)" style="opacity: 1;"><rect width="134" height="124" x="-67" y="-62"></rect><g class="label" transform="translate(0, -48)" id="mermaid-1605261674894Text"><g transform="translate(-13,-9)"><foreignObject width="26" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">sub</div></foreignObject></g></g></g></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g class="node default" id="flowchart-node-1" transform="translate(75,70)" style="opacity: 1;"><rect rx="5" ry="5" x="-32" y="-37" width="64" height="74" class="label-container"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-22,-27)"><foreignObject width="44" height="54"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Line 1<br>Line 2<br>Line 3</div></foreignObject></g></g></g></g></g></g></svg>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------^

Everything gets fixed if I remove the   tags in the source mermaid file

8.9.3 docker image appears not to work

Describe the bug
When using the 8.9.3 docker image, it immediately exits out with what appear to be a Node issue.

ls -1 diagrams | xargs -I{} sh -c 'docker run -u $(id -u) -v /local-diagram-path:/diagrams" -v "/local-image-output-path:/images" minlag/mermaid-cli:8.9.3 -i "/diagrams/$0" -o "/images/${0%.*}.png"' {}
/usr/local/share/.config/yarn/global/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:194
            reject(new Error([
                   ^

Error: Failed to launch the browser process!
/usr/local/share/.config/yarn/global/node_modules/puppeteer/.local-chromium/linux-869685/chrome-linux/chrome: error while loading shared libraries: libgbm.so.1: cannot open shared object file: No such file or directory


TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md

    at onClose (/usr/local/share/.config/yarn/global/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:194:20)
    at Interface.<anonymous> (/usr/local/share/.config/yarn/global/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:184:68)
    at Interface.emit (node:events:377:35)
    at Interface.close (node:readline:548:8)
    at Socket.onend (node:readline:260:10)
    at Socket.emit (node:events:377:35)
    at endReadableNT (node:internal/streams/readable:1312:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
make: *** [generate-diagrams] Error 123

To Reproduce
Steps to reproduce the behavior:

Use the mermaid-cli docker image to generate an image based on an .mmd file.

Expected behavior
An image should be created by mermaid.

Desktop (please complete the following information):

OS: Mac OS X 11.3.1
Version 8.9.3

Error after installation: TypeError [ERR_INVALID_ARG_TYPE]: The "original" argument must be of type function

Mermaid-cli is not working after install, here is the log:

kotov@kotov-office:~/Apps/mermaid-cli$ ./node_modules/.bin/mmdc -h
internal/util.js:214
    throw new errors.TypeError('ERR_INVALID_ARG_TYPE', 'original', 'function');
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "original" argument must be of type function
    at promisify (internal/util.js:214:11)
    at Object.<anonymous> (/home/kotov/Apps/mermaid-cli/node_modules/extract-zip/index.js:11:18)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/kotov/Apps/mermaid-cli/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:48:39)

To Reproduce
Steps to reproduce the behavior:

Install it locally via yarn add @mermaid-js/mermaid-cli
Run it

My environment:

OS: Ubuntu 20.04

Installation log:

kotov@kotov-office:~/Apps/mermaid-cli$ yarn add @mermaid-js/mermaid-cli
yarn add v1.16.0
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.4", while you're on "1.16.0".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Saved 60 new dependencies.
info Direct dependencies
└─ @mermaid-js/[email protected]
info All dependencies
├─ @mermaid-js/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 3.13s.

-C option for CSS file has no effect (part of potential fix included)

Describe the bug
Using the -C option does not include that CSS into the written-out SVG file anywhere.

To Reproduce
Steps to reproduce the behavior:

echo ".messageText { stroke: transparent !important }" > mermaid.css
../test/node_modules/.bin/mmdc -C mermaid.css -i diag.mmd
grep transparent diag.mmd.svg     # finds nothing

Expected behavior
I expect <style>.messageText { stroke: transparent !important }</style> to be in the SVG.

Desktop (please complete the following information):

OS: OSX Catalina

Additional context
Running puppeteer in headless mode, I don't see the SVG in the created document, either.

I did hack together a workaround for me, where the part that emits SVG now is:

    const svg = yield page.$eval('#container', function (container) { 
      // new line is here; also, made the `style` variable in a higher scope, so can get to here
      container.childNodes[0].appendChild(style); 
      return container.innerHTML; 
    });

I don't understand whether others find their CSS files are includes, or whether I'm doing anything wrong.

Implement an automated test for #165

An automated test for #165 is needed.

Japanese characters don't render when using the Docker image

Describe the bug
Japanese characters don't render when using the Docker image.
It does work when using the live editor and when using an mmdc installed using yarn however.

To Reproduce
in /tmp/try.mmdc:

graph LR
    A -->|こんにちは| B

cat /tmp/try.mmdc | docker run --rm -i -v /tmp:/host minlag/mermaid-cli -o /host/output.pdf

Expected behavior
こんにちは renders correctly

Screenshots

Desktop:

OS: Linux Debian 9

Cardinality / Multiplicity are not shown

Hi there,

I just recognized, that there a no Cardinality / Multiplicity in a class diagramm.
Perhaps I made something wrong, but I also couldn't find the Cardinality / Multiplicity in the example class diagramm on the website: https://mermaid-js.github.io/mermaid/#/classDiagram you

With kong regards
Seb

Todaymarker parameter in gantt chart doesn't work

Describe the bug
The todaymarker parameter can not be turned off.

To Reproduce
This is the mermaid code

gantt
dateFormat YYYY-MM-DD
title 3rd Year project time mangement
todayMarker off

section Modelling
Matlab plotting :des1, 2020-10-21,10d
Gid plotting : 40d
Gid Issues checking :2020-11-08,2020-12-07
QLC3D pre running :2020-11-12,2020-12-17
QLC3D setting file checking:2020-11-15,2020-12-18
GiD running: 2021-01-11,2021-03-15
QLC3D running with issue checking:2021-01-11,2021-03-25
LCview analizing :2021-01-18,2021-03-30
	   
section  
Spring holiday: crit, 2020-12-21,2021-01-10

section Documentation
Progress Report 1 :2020-10-30,2020-11-04
Progress Report 2 :2020-11-20,2020-11-25
December Interim Report :2020-12-04,2020-12-27
Progress Report 3 :2021-02-12,2021-02-17
Impact Statement :2021-02-14,2021-02-24
Final report:2021-02-28,2021-03-31

Screenshots
This is the screenshot of pdf file produced.

Desktop (please complete the following information):

OS: [windows]
Browser [chrome]
Version [8.8.4]

Mermaid 8.0.0-rc.8 creates SVG files that do not display correctly in Inkscape and Latex

We user mermaid.cli from mermaid-filter to generate PDF files from Markdown.

When using mermaild-cli 0.4.6 it was creating black tags for the labels. Firefox version 0.5.6 did display the SVG correctly though.

According to devDependencies mermaid.cli uses mermaid 8.0.0-rc.8.
Replacing the minified mermaid version with 7.1.2 fixed the problem. Mermaid 8.0.0-rc.8 still had the issue.

Flow chart label text is truncated for some objects

Thank you for the great work on Mermaid. This is a great tool.

Describe the bug
Here is the code for my diagram saved as overview-core.mmd.

%%{init: {'theme': 'base'}}%%
graph TD
  RDS[(Inventory DB)]
  UI("Merritt UI")
  ING(Ingest)
  ST(Storage)
  INV(Inventory)
  CLOUD(("Cloud Storage"))
  LDAP[/LDAP\]
  ZOO>Zookeeper]
  EZID(EZID Service)

  RDS --> UI
  UI --> |"file or manifest"| ING
  UI --> |authorization| LDAP
  ING --> |"async deposit"| ST
  ING --> ZOO
  ZOO --> ING
  ZOO --> INV
  UI ---> |download req| ST
  INV --> RDS
  ST --> CLOUD
  CLOUD -.-> |presigned| UI
  ING --> EZID

  style CLOUD fill:#77913C
  style RDS fill:#F68D2F
  style LDAP fill:cyan
  style ZOO fill:cyan
  style EZID fill:cyan

To Reproduce

I am using the following command to generate as svg file.

docker run --rm -v "$(pwd)/diagrams:/data" minlag/mermaid-cli mmdc -w 1200 -i overview-core.mmd

Expected behavior
The results are really nice, but a few text labels are truncated in the svg. Look for the 4 red circles below.

Screenshots

Notes
As a work around, I attempted to use BR tags, but I encountered #79 .

Feature Request: Ability to raise an error when the provided input is invalid

Is your feature request related to a problem? Please describe.
I'm creating a CI pipeline that processes mermaid diagrams

Describe the solution you'd like
I'd the CI pipeline to unambiguously detect when a mermaid diagram has a syntax issue

Describe alternatives you've considered
Running OCR on the image looking for the string "syntax error in graph"

Additional context
Ideally it would returned via exit status and a warning printed to STDERR.

Docker image support for arm64 architecture (M1 Macs)

Is your feature request related to a problem? Please describe.
Unable to use minlag/mermaid-cli docker image on arm64 architecture (M1 Macs)

Describe the solution you'd like
I'd like minlag/mermaid-cli to be built for arm64 architecture in addition to the current build.

Describe alternatives you've considered
None.

Additional context

docker: Error response from daemon: image with reference minlag/mermaid-cli was found but does not match the specified platform: wanted darwin/amd64, actual: linux/amd64.

Should be doable via adding --platform=arm64 to the FROM lines in Dockerfiles as node images support arm64 architecture:

FROM --platform=arm64 node:current-slim AS build

Provide better error message for .md files not containing valid Markdown

Is your feature request related to a problem? Please describe.
I just tried mmdc for the first time, copy-pasted a sequence diagram example from the mermaid documentation and out of habit named my input file test.md.
Running mmdc as follows:
mmdc -i test.md -o test.svg -t dark -b transparent
yields the following output

/usr/lib/node_modules/@mermaid-js/mermaid-cli/index.bundle.js:210
    if (matches.length > 0) {
                ^

TypeError: Cannot read properties of null (reading 'length')
    at /usr/lib/node_modules/@mermaid-js/mermaid-cli/index.bundle.js:210:17
    at Generator.next (<anonymous>)
    at step (/usr/lib/node_modules/@mermaid-js/mermaid-cli/index.bundle.js:4:191)
    at /usr/lib/node_modules/@mermaid-js/mermaid-cli/index.bundle.js:4:361

Describe the solution you'd like
A more descriptive error message, e.g. "Input file expected to contain valid Markdown. Don't use the file extension .md if you just want to render a mermaid diagram." or probably something less clunky would be helpful.

v8.4.8 -> v8.5.1 lower quality

Just upgraded to v8.5.1 from v8.4.8 and regenerated an image from an .mmd file. It seems the quality went down.

See the difference here

Markdown Graph Detection Broken for CRLF Files

Detection of mermaid graphs embedded in markdown does not work for CRLF (\r\n) files.

Saving the file as LF only works as a temporary workaround.

It looks like line 206 in src/index.js is the culprit.

Proposed solutions

Strip all \r from the string str.replace('\r', '')
Modify regex to catch optional carriage return const matches = definition.match(/^```(?:mermaid)(\r?\n([\s\S]*?))```$/gm);

mermaid-js / mermaid-cli Goto Github PK

mermaid-cli's People

Contributors

Stargazers

Watchers

Forkers

mermaid-cli's Issues

A few unrelated notes:

sequenceDiagram autonumber Caller->>+Receiver:Invoke

Help us help you!

Screenshots

Recommend Projects

Recommend Topics

Recommend Org

sequenceDiagram
autonumber
Caller->>+Receiver:Invoke