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
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 wanna get js file but [mermaid including dependencies] and [mermaid without dependencies] doesn't work.
error code : ERR_EMPTY_RESPONSE
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]
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>
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
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);
//, / 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)
example like below can not be render successfully
graph LR;
A[客户经理/设计师接待客户]-->|签单成功|B(客户交定金并办理储值卡);
#
or --
or even <!-- -->
don't do this.
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;
---------------^
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;
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?
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)
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)
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.
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.
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.
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.
Would be nice to do:
.box {
fill: #E1F0FF;
stroke: #138BFF;
}
Or there is an easier way?
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 ?
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.
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 :]
Sometimes it would be really useful to use dotted links to specify a weak link or temporary break.
Syntax could be:
A-.->B;
In IE11 I get a NoModificationAllowedError on your demo page at the following command:
bbox.width+=node.paddingLeft+node.paddingRight;
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).
The arrows need to be monochromatic and should be more symmetrical and standard-looking.
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
Hello,
Could you tell us how (even quickly) the steps to create a new type of diagram/layout?
Thanks for your help!
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?
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.
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?
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.
Error at this expression require("./dagre").layout;
when loading the full mermaid script from dist folder of this github project.
I think the repo will look more organized, if we moved *.spec.js
in src/
to test/
.
For example, angular.js does this.
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.
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.
Is it possible to use custom SVG icons?
Is it possible to create an image file in png or jpg using this tool from the command line?
Can we use markdown syntax for define hyperlink and tooltip for interactive?
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.
Will adapt a subset of the synax used by sdedit to support sequence diagrams.
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.
In browser, i want to use parse
without any module library, how can i do?
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.