mermaid-js / mermaid Goto Github PK
View Code? Open in Web Editor NEWGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
Home Page: https://mermaid.js.org
License: MIT License
Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
Home Page: https://mermaid.js.org
License: MIT License
I think the repo will look more organized, if we moved *.spec.js
in src/
to test/
.
For example, angular.js does this.
The generated SVG contains text encapsulated inside foreignObject elements. Inside the foreignObjects, there are divs to handle text with linebreaks. However, divs doesn't display in other SVG viewers than web browsers.
A related issue is the <br> tags for linebreaks. Those are invalid in XML. They could be replaced by <br/> to allow the SVG to be opened outside web browsers, but the text will still not be rendered.
Currently Mermaid does not handle special characters inside elements.
Not only is it not allowed, but it also breaks the graph.
Building on a simple demo
graph LR;
A[Object]-->B(Thing);
I'd like to use something with parenthesis in the text of an element.
graph LR;
A[Object(foo,bar)]-->B(Thing);
I also attempted to use HTML character codes with no result.
graph LR;
A[Object(foo,bar)]-->B(Thing);
I wanna get js file but [mermaid including dependencies] and [mermaid without dependencies] doesn't work.
error code : ERR_EMPTY_RESPONSE
I just threw together a fun sandbox to play around with the demos in the README. Having it in another window makes the README much more interactive.
Is it possible to use custom SVG icons?
Given the below code (includes special character ?
in the rhombus/decision node, {}
):
graph TB;
Begin-->di{Turn On Switch?};
di-->|yes|f(Light on);
di-->|no|g(Light off);
Graph will render properly using:
<script src="https://cdn.rawgit.com/knsv/mermaid/master/dist/mermaid.full.js"></script>
But not:
<script src="https://cdn.rawgit.com/knsv/mermaid/master/dist/mermaid.full.min.js"></script>
Was the patch applied in below commit not propagated to the minified source?
dabedb3
Working example:
http://jsbin.com/sohezirijo/2/edit
Non working (minified distribution):
http://jsbin.com/tivukogufi/2/edit
Hi there,
First of all thanks for this great lib, it is really handy, as I was looking for a way to do graphs without GUI tools for years. As I tried to explore the potential of this library I found one thing missing: A live demo where you can edit a graph definition and see the changes.
As the example page is not hosted on github I created a separate repository with such a demo, see DanielMSchmidt/mermaid-demo.
Please feel free to link the github page or include the demo in your example page.
The arrows need to be monochromatic and should be more symmetrical and standard-looking.
Will adapt a subset of the synax used by sdedit to support sequence diagrams.
Could the alternative (or replacement) link text syntax be added?
A-->|Link text|B
becomes A--Link Text-->B
And similarly:
A---|Link text|B
becomes A--Link Text--B
The reason being that the suggested syntax looks more like it is sitting on the line.
Can we use markdown syntax for define hyperlink and tooltip for interactive?
I really like the syntax you've made, and I think it could have applications outside the graph rendering stuff. It'd be nice if you provided a parser for the graph itself as a separate module.
Hello,
Could you tell us how (even quickly) the steps to create a new type of diagram/layout?
Thanks for your help!
As an enhancement, mermaid diagrams could use a special character to declare a new graph and direction. This would be more visually obvious than acronyms and would internationalise better. Instead of
graph TB
graph BT
graph RL
graph LR
use these characters:
v
^
<
>
I am trying to make a tool that builds up graphs using AngularJS
$scope.graphScript = "graph TD; "
$scope.addToRun = function(s) {
$scope.graphScript+=" Img-->"+s.name+"; ";
};
which is then rendered in
<div class="mermaid">{{graphScript}}</div>
The problem is this does not render it just displays as text
graph TD; Img-->Neighbors; Img-->Filter;
is there a way to manually force mermaid to render again? Or perhaps a better way entirely for making the graphs?
When run from the js console mermaid.init();
will force the graph to render but afterwards it can't be updated anymore.
Graphs output as text on Wordpress pages. Console reveals extra characters are inserted between lines:
Uncaught Error: Parse error on line 1:
graph LR;<br> A(VUE)–>|SV
---------^
Expecting 'SPACE', 'ALPHA', 'NUM', 'COLON', 'COMMA', 'PLUS', 'EQUALS', 'MULT', 'DOT', 'BRKT', 'CLASSDEF', 'CLASS', 'CLICK', 'STYLE', 'LINKSTYLE', got 'TAGSTART'mermaid.full.min.js:34 X.parseErrormermaid.full.min.js:34 X.parsemermaid.full.min.js:34 pmermaid.full.min.js:34 hmermaid.full.min.js:34 (anonymous function)
After line breaks are removed (meaning, the whole graph is written as one line in the Wordpress HTML editor), the graph does not render at all. Console reveals this error:
Uncaught Error: Lexical error on line 1. Unrecognized text.
graph LR;A(VUE)–>|SVG|B(Illustrator
---------------^mermaid.full.min.js:34 X.parseErrormermaid.full.min.js:34 r.parseErrormermaid.full.min.js:34 r.nextmermaid.full.min.js:34 r.lexmermaid.full.min.js:34 emermaid.full.min.js:34 X.parsemermaid.full.min.js:34 pmermaid.full.min.js:34 hmermaid.full.min.js:34 (anonymous function)
Hello,
linkStyle 3 stroke:#ff3,stroke-width:4px;
What is this magic number 3 ?
How do you specify which link you want to style ?
I think this part of the doc deserves a bit of clarification :]
Uncaught Error: Parse error on line 6:
... A-->|Link text|B[Some URL]; C-->D[Some text
---------------------------^
Expecting 'SPACE', 'SQE', 'PE', 'DIAMOND_STOP', 'TAGEND', 'TAGSTART', 'MINUS', 'ALPHA', 'NUM', 'COLON', 'COMMA', 'PLUS', 'EQUALS', 'MULT', 'DOT', 'BRKT', 'PIPE', got 'DIR'
mermaid.full.min.js:34 X.parseError
mermaid.full.min.js:34 X.parse
mermaid.full.min.js:34 p
mermaid.full.min.js:34 h
mermaid.full.min.js:34 (anonymous function)
#
or --
or even <!-- -->
don't do this.
I will like to contribute to the project and want to know the build process for same. It will be great if you could point me to some reference for building the project. A document or even a section about building the project in Contibuting.md will be good for people like me to serve as a starting point for contribution to the project.
Error at this expression require("./dagre").layout;
when loading the full mermaid script from dist folder of this github project.
instead of the graph statement in the beginning there could be another key word. Something like:
pie title myPieChart
"label1": 15.1
"label2": 10
"label3": 12
As d3.js is already included the rendering should be done using d3.
Hi, first of all I wanna say this library is pretty kick-ass.
I wanna know if I had to integrate font-awesome icons with it or any icon fonts, in general, how should I go about it ?
In browser, i want to use parse
without any module library, how can i do?
Is it possible to change graph direction when viewed in mobile browser? It would be great to have LR direction normally which would be changed on mobiles to TB.
In IE11 I get a NoModificationAllowedError on your demo page at the following command:
bbox.width+=node.paddingLeft+node.paddingRight;
Firstly, great work. I've been tinkering with it the last day and I'm gonna try to build a UI on top of it to make it even easier to use. Especially at a larger scale.
One suggestion i'd make is the styling of lines
How about something like this?
A--(linkStyle)>B;
then then defining the style later
linkStyle stroke:#ff3, stroke-width:4px;
Uncaught Error: Lexical error on line 3. Unrecognized text.
...UE_EMPTY[Queue Empty?]; QUEUE_EMPT
-----------------------^
Along with #17, maybe the lexer/parser is looking into labels more than necessary.
Hi,
I modified mermaid.init() so that it can be applied more than once. This is needed in my case to load content dynamically on the page. You may consider adding this minor change upstream.
var init = function () {
var arr = document.querySelectorAll('.mermaid');
var cnt = 0;
for (i = 0; i < arr.length; i++) {
var element = arr[i];
// added code
if(!element.getAttribute("data-processed")) {
element.setAttribute("data-processed", true);
} else continue;
...
Thanks, v
Would be sweet if I could just $ npm install -g mermaid
and then $ mermaid flowchart.md
and it would save a png of the output. Is this in scope for this project?
Hey, it'd be nice if there was an API available to generate one of these graphs in node (or even at runtime in browser-side js) so that it could be either saved somewhere or sent as part of a response. If this ability already exists, could there be some docs for it?
hi @knsv ,
is there a way to create a architecture diagram? something like:
front-end libraries |
---|
midleware |
| nodejs | other services |
thanks.
It would be nice to (optionally) end statements without a semicolon and use a new line instead. For example, instead of this:
graph LR;
A[Hard edge]-->|Link text|B(Round edge);
B-->C{Decision};
C-->|One|D[Result one];
C-->|Two|E[Result two];
you could just write:
graph LR
A[Hard edge]-->|Link text|B(Round edge)
B-->C{Decision}
C-->|One|D[Result one]
C-->|Two|E[Result two]
The latter is more readable as it is less dense on the eyes.
Furthermore, you could improve readability by allowing optional spaces between parts of a statement. e.g.
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
Uncaught Error: Parse error on line 2:
graph TD; A[URL]-->|Link text|B(R
------------------^
Expecting 'SPACE', 'SQE', 'PE', 'DIAMOND_STOP', 'TAGEND', 'TAGSTART', 'MINUS',
'ALPHA', 'NUM', 'COLON', 'COMMA', 'PLUS', 'EQUALS',
'MULT', 'DOT', 'BRKT', 'PIPE', got 'DIR'
Here is it mistaking RL
in URL
as right-left direction.
If I am right styling label text is not quite possible right now. For me replacing <span style="background:#e8e8e8">
in main.js to <span class="mermaid-label">
solves the problem but in this case to stay compatible with the current output a default .css file should be added to the project.
Am I using it wrong or a PR like that would be welcome?
Hi,
I just made a simple test with sample on the homepage and I cannot get diagram. Without svg tag, I get the diagram definitin text, with svg tag, the page in entier empty. What is needed to use Mermaid ?
Thanks for your help.
<html>
<head>
<title>Test Mermaid</title>
<script src="mermaid.full.min.js"></script>
</head>
<body>
<div class="mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</div>
</body>
</html>
Current master's mermaid.full.js
seems to be picky about whitespace at the end of lines. It wasn't so before.
If it's present, the next line shows error like:
Error: Parse error on line 8: ... id2---id1; id2---i -----------------------^ Expecting 'SPACE', 'ALPHA', 'NUM', 'COLON', 'COMMA', 'PLUS', 'EQUALS', 'MULT', 'DOT', 'BRKT', 'STYLE', 'LINKSTYLE', 'CLASSDEF', 'CLASS', 'CLICK', 'PCT', got 'NEWLINE'
throw new Error(str);
mermaid.full.js (line 14585, col 8)
It's 14'th line in my text editor BTW, not 8'th (unless we are counting from the <div>
instead from the beginning of html file).
Please provide support for non latin chars in labels.
For example this code raise error:
<div class="mermaid">
graph TD;
A(Начало)-->B;
</div>
Error: Lexical error on line 2. Unrecognized text.
graph TD; A(а�аАб�аАаЛаО)-->B;
---------------^
//, / failed the lexical parsing
... en_xtb['googledata/transconsole/xtb/Yo
-----------------------^mermaid.full.min.js:37 at.parseErrormermaid.full.min.js:38 e.parseErrormermaid.full.min.js:38 e.nextmermaid.full.min.js:38 e.lexmermaid.full.min.js:38 tmermaid.full.min.js:38 at.parsemermaid.full.min.js:37 hmermaid.full.min.js:37 dmermaid.full.min.js:37 (anonymous function)
Is it possible to create an image file in png or jpg using this tool from the command line?
example like below can not be render successfully
graph LR;
A[客户经理/设计师接待客户]-->|签单成功|B(客户交定金并办理储值卡);
Sometimes it would be really useful to use dotted links to specify a weak link or temporary break.
Syntax could be:
A-.->B;
Would be nice to do:
.box {
fill: #E1F0FF;
stroke: #138BFF;
}
Or there is an easier way?
It looks like Mermaid is in many ways similar to Graphviz's DOT language. I just came across Viz.js, which attempts to bring that to the Web. Any reason you're not adopting DOT syntax? It seems like it would be more useful to collaborate on this.
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.