I saw the comment in the dockerfile discussion (#8), so I cloned the master branch into my local nginx html folder:

Firefox shows a blank page with the console output:

09:55:05.312 SyntaxError: import declarations may only appear at top level of a module index.js:1

Chrome fails with:

index.js:1 Uncaught SyntaxError: Unexpected identifier

Tried it with http-server, same result. Opening the index.html directly, same result.

OS: macOS 10.13.2 (17C205)
FF: 57.0.4 (64-Bit)
Chrome: 63.0.3239.132 (official build) (64-Bit)

Chart levels 1, 2, 3, and mostly 4 group together nicely. When making a larger chart (e.g. 5+ levels), a level 4 item with 2+ level 5 children will not group the child items together but instead spread them apart.

Attached is a txt file with the code I'm using to create a map of some documentation with the titles removed as an example of what I'm talking about.
demo.txt

In my testing, this occurs with the Mermaid Live editor online as well as in Typora (with Mermaid support enabled). It also occurs regardless of tabs/spaces at the start of the lines.

Is anyone interested in animated diagrams?

I was reading this hackernews thread to find a tool that can create beautiful, animated diagrams like the sequence diagram at Git LFS but didn't really find a tool in the comments that could handle the animation part.

I love Mermaid especially the live editor, making it easy to share diagrams with just a link but I think some larger diagrams can be a bit overwhelming and animations might be able to help with this.

I've created a proof of concept to explore the idea here.

And here's a large sequence diagram.

Looking forward to some feedback, or finding a similar tool to achieve this.

ClassDef and class doesn't change style of elements. See example below:

graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]

style A fill:#f00
classDef def fill: #f00
class B def

Style changes fill color of A element.
But assignment of class def to element B doesn't change fill color of B.

Hi guys,

I noticed that the svg/png/pdf files were not generated incorrectly. When we used the online editor, the preview graph was great but if we wanted to generate a svg, the textboxes were all a bit shorter than the texts so the texts were cut off.
I have also tried to use the mermaid-cli to generate the svg/png/pdf locally and I have encountered the same issue. The issue seems to be caused by a different font size. Would you guys mind fixing it? Thank you so much! It would be a great help!

For example:
https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbkFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG5DIC0tPnxPbmV8IERbTGFwdG9wXVxuQyAtLT58VHdvfCBFW2lQaG9uZV1cbkMgLS0-fFRocmVlfCBGW2ZhOmZhLWNhciBDYXJdXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ

Preview:

Generated svg:

graph TD

action[Star一个项目] -->interface(调用star接口参数【】)

When Chinese: 【】（）。， and so on...

I found a problem about downloaded SVGs of flowcharts. When I clicked "Link to view", they are displayed perfectly. But when I downloaded a SVG file via "Download SVG" and displayed it, they have no style about font size, so node labels are too long.

Some Chinese words have been shown to be messy，like��。
For example ： alt 对比�距离上次下载资源是否超过1天时间
show：alt 对比�距离上次下载资源��
System ： MacOS

The SVG image on IE doesn't scale.
Good stuff @tylerlong.

Url is too long to share.

I could add hover styling with css inside style tags, but in gitlab (and other editors) those styles are omited. Is there another way to add hover styling?

For the class diagram example found here I found a render bug when I do the following:

• Load live-editor

• Delete all text from editor pane like so:
  

• Then paste the class diagram example content from here

  • I then get this image (the bug that I am refering to):
  • But if you reload the page, it renders fine. Like so:
    • Changing the theme also makes the image render fine again.

A similar issue arises when using gitGraph and the example from here.

But it's fine after you reload like so.

I am guessing this is bug. I looked around the other related repos and didn't find anything. Sorry if this is already known.

EDIT: I'm using Chrome Version 64.0.3282.167 at this very moment.

Live editor displays all text correctly:

But downloaded SVG file truncates the texts:

Tested in Chrome and Edge (same picture)

Whenever you change something in the online editor demo, it gives syntax errors.

By the looks of it, it removed new line characters since it's using mermaid 8.3.0

Hi

Is there an official Docker image or Dockerfile available for running the editor in a Docker container?

--tony

The mermaid-live-editor repo is missing a license file. Perhaps copy from: https://github.com/mermaidjs/mermaid.cli/blob/master/LICENSE

Sorry not sure if this is the best place to ask, but:

i really like the live editor. Combined with the viewer i basically don't need anything else.
So I started creating several diagrams and just saving the url - they seem to be "unique" and "saved"; if I share the url other people can see them as well.

Which makes me wonder:

1. what happens to those diagrams?
2. Are they stored indefinitely or do you eventually delete them?
3. Is there an api/request to see all existing ones, or once the link lost access is lost forever?

I'm not asking for (cool) features (such as login to see all of your diagrams for instance).

Just trying to understand how it currently works on mermaidjs.github.io!

Super cool project by the way, big kudos, both the "engine" and the live editor!

graph TD

A
B
A -- <i>mylabel</i> --> B

view of example

Here is gantt the example plot

I would like to:

1. Increase font size
2. Remove the today line.

For 2, . this question suggests transforming the graph object in R with style_widget(m1, "display:none", "line.today"). How do I change that in the live editor??

I just asked for something similar in the cli project.

I'm not sure if the live editor depends on the cli or just on mermaidjs.

Be that as it may, it would be great being able to configure mermaid in the live editor, either by pasting the config json in another textbox, or integrating it with the diagram text.

Thanks!

I tried the example described in "Basic support for fontawesome" here:
https://mermaidjs.github.io/flowchart.html

But the icons do not appear to be loading for me.

I tried 'yarn release' but have no idea how to producitonize? I did install pm2, but can't figure out which or where things are put and what to run. There don't seem to be any docs on what to do after 'yarn release'. I do get working version with yarn dev. I will be happy to create wiki page if someon answers.

I have been finding all charts drawn on online editor overflowing the boxes and not fitting to size.

I'd like to include mermaid graphs in text heavy environments which don't always embed images / attachments well (markdown, wikis, emails, chat, etc). One option is to have the live mermaid editor generate ASCII art which I can then copy paste into my text / markdown documents.

If one insert <br/> into the label of a node in the flowchart graph, it works on the live editor. But when one export the graph to an svg file, then the file can not be correctly displayed

It appears that the <br/> inserted in the editor is changed to <br>, which is the legal line breaker in html, in the output svg file, which causes the problem because svg is more like xml than html.

Dear Mermaid Team,

Thanks for the awesome product! I really want to upload these images into our github wiki and repo docs. Right now, when I try to embed them, I get this:

![Chart](https://mermaidjs.github.io/mermaid-live-editor/#/view/Z3JhcGggVEQKQVtDaHJpc3RtYXNdIC0tPnxHZXQgbW9uZXl8IEIoR28gc2hvcHBpbmcpCkIgLS0-IEN7TGV0IG1lIHRoaW5rfQpDIC0tPnxPbmV8IERbTGFwdG9wXQpDIC0tPnxUd298IEVbaVBob25lXQpDIC0tPnxUaHJlZXwgRltDYXJdCg)

If were made like JS-fiddle, where the url syntax is something like

https://mermaidjs.github.io/<hash>/embed/<image:svg,png,jpg>

it would be super easy. Especially if

https://mermaidjs.github.io/<hash>

would take me to the editor page so I could modify the chart.

Thank you so much for considering!

For usability reason, I think we need to use a better code editor. With the current native text area, it's hard to write codes. For example for indentation, I need to manually fit the space. It happened in my daily use of mermaid.

Can we have this ability? Or mermaid have your own opinion to not to use rich code editor? If we have no other options and you want it, then I'll create a pull request for this.

Is there any way to create a new theme like default, forest, dark, neutral etc as I would like to customize my diagram in a new style?

I red the sources of View.js / Edit.js, but I did not find the css modification.

Thanks.

The atom plugin I use allows me to save as PNG. It would be really nice if the live editor could do the same as SVG isn't well supported. I'd like to introduce the live editor to some non-coders that don't use Atom, Vim, etc, but I don't think it will be helpful to them until there are other file options.

By the way, I love using mermaid. Keep up the good work!

After #17 I tried some yarn commands:
First, yarn install

$ yarn install
yarn install v1.3.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "antd > [email protected]" has unmet peer dependency "immutable@~3.7.4".
warning "antd > react-slick > [email protected]" has unmet peer dependency "jquery@>=1.8.0".
[4/4] 📃  Building fresh packages...
✨  Done in 10.91s.

OK.

yarn dev:

$ yarn dev
yarn run v1.3.2
$ parcel ./index.html -d build
Server running at http://localhost:1234 
🚨  'super' keyword unexpected here
      return 'module.exports = ' + (yield super.load()) + ';';
                                          ^^^^^
SyntaxError: 'super' keyword unexpected here
    at NativeCompileCache._moduleCompile (/Users/iwittkau/html/mermaid-live-editor/node_modules/v8-compile-cache/v8-compile-cache.js:226:18)
    at Module._compile (/Users/iwittkau/html/mermaid-live-editor/node_modules/v8-compile-cache/v8-compile-cache.js:172:36)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (/Users/iwittkau/html/mermaid-live-editor/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Parser.findParser (/Users/iwittkau/html/mermaid-live-editor/node_modules/parcel-bundler/lib/Parser.js:59:45)
    at Parser.getAsset (/Users/iwittkau/html/mermaid-live-editor/node_modules/parcel-bundler/lib/Parser.js:66:22)

Fails, aswell as yarn release:

$ yarn release
yarn run v1.3.2
$ parcel build ./index.html -d docs --public-url ./
⏳  Building antd.css...
Condition always false [0:8,6]
Condition always true [0:28,4]
⏳  Building react-dom.development.js...
Condition always true [0:3,4]
⏳  Building emptyFunction.js...
⏳  Building focusNode.js...
Condition always false [0:62,10]
Node#moveTo was deprecated. Use Container#append.
Side effects in initialization of unused variable a48 [0:92,4]
Side effects in initialization of unused variable a64 [0:112,4]
Declarations in unreachable code! [0:260,8]
Condition always true [0:2750,4]
Condition always true [0:3588,4]
Condition always true [0:4466,4]
Condition always true [0:5346,4]
Condition always true [0:6037,4]
Condition always true [0:7223,4]
Condition always true [0:8064,4]
Side effects in initialization of unused variable a2309 [0:8497,8]
Side effects in initialization of unused variable a3041 [0:10699,8]
Declarations in unreachable code! [0:11400,0]
Declarations in unreachable code! [0:663,4]
Condition always false [0:12,4]
⏳  Building invariant.js...
Condition always false [0:22,4]
Declarations in unreachable code! [0:23,2]
⏳  Building index.js...
Condition always false [0:24,4]
Condition always false [0:10,4]
Declarations in unreachable code! [0:11,2]
Condition always false [0:29,6]
Declarations in unreachable code! [0:30,9]
Declarations in unreachable code! [0:32,8]
Declarations in unreachable code! [0:50,10]
🚨  'super' keyword unexpected here
      return 'module.exports = ' + (yield super.load()) + ';';
                                          ^^^^^
SyntaxError: 'super' keyword unexpected here
    at NativeCompileCache._moduleCompile (/Users/iwittkau/html/mermaid-live-editor/node_modules/v8-compile-cache/v8-compile-cache.js:226:18)
    at Module._compile (/Users/iwittkau/html/mermaid-live-editor/node_modules/v8-compile-cache/v8-compile-cache.js:172:36)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (/Users/iwittkau/html/mermaid-live-editor/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Parser.findParser (/Users/iwittkau/html/mermaid-live-editor/node_modules/parcel-bundler/lib/Parser.js:59:45)
    at Parser.getAsset (/Users/iwittkau/html/mermaid-live-editor/node_modules/parcel-bundler/lib/Parser.js:66:22)
Declarations in unreachable code! [0:5552,4]
Condition left of && always true [0:5830,14]
Condition always false [0:4763,31]
Condition always true [0:8840,12]
Condition always true [0:10050,12]
Condition left of && always true [0:10053,12]
Condition left of && always true [0:10125,16]
Condition left of && always true [0:10167,14]
Condition left of && always true [0:10209,12]
Condition left of && always true [0:10239,12]
Side effects in initialization of unused variable a12317 [0:9704,12]
Side effects in initialization of unused variable a12318 [0:9705,12]
Side effects in initialization of unused variable a12319 [0:9706,12]
Side effects in initialization of unused variable a12320 [0:9707,12]
Side effects in initialization of unused variable a12321 [0:9708,12]
Side effects in initialization of unused variable a12466 [0:10525,16]
Declarations in unreachable code! [0:5556,4]
Condition left of && always true [0:13774,16]
Condition left of && always true [0:14124,16]
Side effects in initialization of unused variable a13266 [0:14156,10]
Condition left of && always true [0:14293,18]
Condition left of && always true [0:14300,18]
Condition left of && always true [0:14308,16]
Declarations in unreachable code! [0:14917,8]
Condition left of && always true [0:15091,14]
Condition left of && always true [0:15105,14]
Condition left of && always true [0:15124,14]
Condition left of && always true [0:15129,14]
Condition always false [0:4757,27]
Side effects in initialization of unused variable a11201 [0:5566,12]
Condition always false [0:12,4]
Condition always false [0:13,4]
error Command failed with exit code 1.

I removed all 283 lines containing Dropping unreachable code etc. to shorten the log from yarn release.

In case windows are accidentally closed/quit.

At the moment the live editor does not word wrap notes for sequence diagrams.

Here's a example to paste in:
sequenceDiagram
participant A
participant B
note left of A: All is looking great until it doesnt word wrap and my diagram looks sad :(

I love this tool and i think with this feature fixed i'd be using it all the time to design diagrams quickly and add to my high level design documents.

I have some code for a gantt chart that I update periodically. Over the holiday, an update must have broken compatibility, because all the dates seem to be squished together.

Copying and pasting the gantt example from https://mermaidjs.github.io/gantt.html will reproduce the error. You can see it here: https://mermaidjs.github.io/mermaid-live-editor/#/edit/Z2FudHQKICAgIHRpdGxlIEEgR2FudHQgRGlhZ3JhbQogICAgZGF0ZUZvcm1hdCAgWVlZWS1NTS1ERAogICAgc2VjdGlvbiBTZWN0aW9uCiAgICBBIHRhc2sgICAgICAgICAgIDphMSwgMjAxNC0wMS0wMSwgMzBkCiAgICBBbm90aGVyIHRhc2sgICAgIDphZnRlciBhMSAgLCAyMGQKICAgIHNlY3Rpb24gQW5vdGhlcgogICAgVGFzayBpbiBzZWMgICAgICA6MjAxNC0wMS0xMiAgLCAxMmQKICAgIGFub3RoZXIgdGFzayAgICAgIDogMjRk

graph TD
A["<img src=a onerror=alert(1) />"] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]

Relates to mermaid-js/mermaid#847

I'd like to be able to generate a new editor session by supplying the massive - I'm assuming the entire graph is encoded - URL. I know there is a "share to edit feature," but assume that the link is shared only to View and I'd like to expand on the graph I've been given.

I don't know if this is intended, but it makes the Live Editor unable to handle big flow charts.
It crashes (page goes white) everytime I wrote the 1200th line, whatever the content of the file.

I tested with Firefox and Chrome on multiple computers : same behaviour.
Here is an example file:
Mermaid Crash.txt

I would like to have a feature where I can pass the mermaidjs code through URL, so It can be displayed on the screen:
Example:
https://mermaidjs.github.io/mermaid-live-editor/#/view/?code=graph TD; A[Christmas] -->|Get money| B(Go shopping);

how could we add feature edit the element relations on visual editor,then save the relationship with the
mermaid draw language,so it's a bidirection editor

through text---> editor
through editor --->text

also,we could hook some clilck event then some node element could define some animation js

sorry for my pool english

Hi there,

I just wanted to point out it would be nice to have a default favicon.ico which is not present even in the dist directory.

Thanks!

Steps to reproduce:

1. Open the Mermaid live editor
2. Delete all text in the text box

Outcome:

• Blank page. No text box. No page header. Nothing. React root is empty.

Expectation:

• The chart should be empty, but the rest of the editor should remain.

Notes:

• Tested in Firefox 54.0 and Chromium 56.0.2924.76 on Ubuntu 16.04

Hi guys:

I saw default theme in https://mermaidjs.github.io/mermaid-live-editor. So I guess there are more build-in themes ?
But I didn't found out any related documents. Could you tell me any links about it? Thanks

Steps to reproduce:
When I run yarn dev, i see the following:

yarn run v1.5.1
$ parcel ./index.html -d build
Server running at http://localhost:1234
∞  Building constructor.js...

It stays at building constructor.js

On the browser (Chrome), going to localhost:1234, the page does not show up. Status says waiting for localhost.

My environment:
Windows 10 64 bit
Node v8.9.4

Example from documentation:

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

https://mermaidjs.github.io/mermaid-live-editor/#/edit/c2VxdWVuY2VEaWFncmFtCiAgICBBbGljZSAtPj4gQm9iOiBIZWxsbyBCb2IsIGhvdyBhcmUgeW91PwogICAgQm9iLS0-PkpvaG46IEhvdyBhYm91dCB5b3UgSm9obj8KICAgIEJvYi0teCBBbGljZTogSSBhbSBnb29kIHRoYW5rcyEKICAgIEJvYi14IEpvaG46IEkgYW0gZ29vZCB0aGFua3MhCiAgICBOb3RlIHJpZ2h0IG9mIEpvaG46IEJvYiB0aGlua3MgYSBsb25nPGJyLz5sb25nIHRpbWUsIHNvIGxvbmc8YnIvPnRoYXQgdGhlIHRleHQgZG9lczxici8-bm90IGZpdCBvbiBhIHJvdy4KICAgIEJvYi0tPkFsaWNlOiBDaGVja2luZyB3aXRoIEpvaG4uLi4KICAgIEFsaWNlLT5Kb2huOiBZZXMuLi4gSm9obiwgaG93IGFyZSB5b3U_/error/dW5kZWZpbmVk

Result: undefined

Not able to run the live-editor

yarn dev
yarn run v1.3.2
$ parcel ./index.html -d build
(node:95377) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): SyntaxError: 'super' keyword unexpected here

I used the following code to create a flow chart Mermaid Live Editor.

graph TD
A(Coding for kids)--> B(Critical thinking)
A --> C(Getting better at basic mathematics)
A --> D(Perseverance)
A --> E(Creators)
A --> F(Future skills)

The image that I received when I clicked on download as SVG button was similar to what the preview option shows when no/wrong option is selected in the theme option under Mermaid Configuration.

I have converted the image to png using (https://svgtopng.com/) since github/imgur etc don't support uploading a image in svg

.

HI there.
Building on @yosshy comment on Jan 5
I found a problem about downloaded SVGs of flowcharts. When I clicked "Link to view", they are displayed perfectly. But when I downloaded a SVG file via "Download SVG" and displayed it, they have no style about font size, so node labels are too long.

@tylerlong requested a sample flowchart

Here is the sample script:
sequenceDiagram
participant CVAV as CVA VCAS
participant HBOV as HBO VCAS

HBOV->>CVAV: FRM key / license push
Note over HBOV,CVAV: Key push is continual process, not part of this total sequence

--
You may paste the script on the code window and then compare the link to view output with the SVG

Dear Mermaid Team,

Thank you for the wonderful editor in advance, I love to use mermaid online editor.

My issue is a novice problem.

Sometimes I have no internet connection and cannot use it, in a previous issue #217
mermaid-js/mermaid#217
I saw one of the solutions is run it locally, but I failed in the very first step yarn install with an error msg: "-bash: yarn: command not found".

I am a non-programmer and have little knowledge about what's going on,
after I asked my friend, I tried: npm install yarn and run yarn install again with + [email protected] but still saw the same error msg.

Then I tried brew install yarn and finally succeeded with yarn install v1.17.0

I think it would be kind if README pointed out you have to install yarn before type yarn install and it would be kinder if add how to install yarn section.

How do you think about it? Thank you so much.

with the lastest version ,when i build on it , occurs below error. help help.

PS E:\Git\mermaid-live-editor> yarn dev
yarn dev v1.0.2
$ node -r babel-register node_modules/.bin/webpack-dev-server
E:\Git\mermaid-live-editor\node_modules.bin\webpack-dev-server:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Module._extensions..js (module.js:579:10)
at Object.require.extensions.(anonymous function) [as .js] (E:\Git\mermaid-live-editor\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:390:7)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

For example this is fine:

graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone?]
C -->|Three| F[Car]
C -->|Four| G[Cookies]
C -->|Five| H[Cake]

Note the ? in iPhone

This next graph below breaks.
Worse, If you have the above and then add a ? after Cookies the code after it goes away:

graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone?]
C -->|Three| F[Car]
C -->|Four| G[Cookies]
C -->|Five| H[Cake]

Tried in Chrome and Firefox.