mermaidjs / mermaid-live-editor Goto Github PK
View Code? Open in Web Editor NEWLocation has moved to https://github.com/mermaid-js/mermaid-live-editor
Home Page: https://mermaidjs.github.io/mermaid-live-editor/
License: MIT License
Location has moved to https://github.com/mermaid-js/mermaid-live-editor
Home Page: https://mermaidjs.github.io/mermaid-live-editor/
License: MIT License
I have been finding all charts drawn on online editor overflowing the boxes and not fitting to size.
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.
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.
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:
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!
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);
In case windows are accidentally closed/quit.
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!
Preview:
Generated svg:
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.
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 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?
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
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
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
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.
graph TD
action[Star一个项目] -->interface(调用star接口参数【】)
When Chinese: 【】()。, and so on...
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!
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.
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
graph TD
A
B
A -- <i>mylabel</i> --> B
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
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.
The SVG image on IE doesn't scale.
Good stuff @tylerlong.
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.
Steps to reproduce:
Outcome:
Expectation:
Notes:
Hi
Is there an official Docker image or Dockerfile available for running the editor in a Docker container?
--tony
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!
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!
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.
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
.
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.
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
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)
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.
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
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.
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!
The mermaid-live-editor repo is missing a license file. Perhaps copy from: https://github.com/mermaidjs/mermaid.cli/blob/master/LICENSE
Some Chinese words have been shown to be messy,like��。
For example : alt 对比�距离上次下载资源是否超过1天时间
show:alt 对比�距离上次下载资源��
System : MacOS
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?
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.
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.
Here is gantt the example plot
I would like to:
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??
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
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
.
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.
Url is too long to share.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.