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 :]

YES! this is amazing. I've been thinking about this for a while. Any thoughts one how to make neural network pictograms?

For example

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.

Happy coding ;)

Would be nice to do:

.box {
    fill: #E1F0FF;
    stroke: #138BFF;
}

Error at this expression require("./dagre").layout; when loading the full mermaid script from dist folder of this github project.

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;

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)

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)

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?

I think the repo will look more organized, if we moved *.spec.js in src/ to test/.
For example, angular.js does this.

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 ?

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.

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];

graph LR
    A[Hard edge]-->|Link text|B(Round edge)
    B-->C{Decision}
    C-->|One|D[Result one]
    C-->|Two|E[Result two]

graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

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);

graph LR;
    A[Object(foo,bar)]-->B(Thing);

graph LR;
    A[Object(foo,bar)]-->B(Thing);

Is it possible to use custom SVG icons?

hi @knsv ,

is there a way to create a architecture diagram? something like:

| nodejs | other services |

thanks.

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;
---------------^

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;
...

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.

My simple test

<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>

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.

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.

http://jsbin.com/faxunexeku/1/edit?html,output

In IE11 I get a NoModificationAllowedError on your demo page at the following command:

bbox.width+=node.paddingLeft+node.paddingRight;

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 wanna get js file but [mermaid including dependencies] and [mermaid without dependencies] doesn't work.

error code : ERR_EMPTY_RESPONSE

Hello,

Could you tell us how (even quickly) the steps to create a new type of diagram/layout?

Thanks for your help!

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.

Hey there,

do you have a support for containers ?

Sample:

Thanks

Can we use markdown syntax for define hyperlink and tooltip for interactive?

# or -- or even <!-- --> don't do this.

example like below can not be render successfully
graph LR;
A[客户经理/设计师接待客户]-->|签单成功|B(客户交定金并办理储值卡);

• Impossible to write letter with accent (é, è, ê, à, ç, ô, etc..)
• Impossible to write punctuation (., ?, !, etc.)

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?

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?

Sometimes it would be really useful to use dotted links to specify a weak link or temporary break.
Syntax could be:
A-.->B;

The arrows need to be monochromatic and should be more symmetrical and standard-looking.

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.

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+"; ";
    };

<div class="mermaid">{{graphScript}}</div>

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.

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

v
^
<
>

In browser, i want to use parse without any module library, how can i do?

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

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);

<script src="https://cdn.rawgit.com/knsv/mermaid/master/dist/mermaid.full.js"></script>

<script src="https://cdn.rawgit.com/knsv/mermaid/master/dist/mermaid.full.min.js"></script>

Is it possible to create an image file in png or jpg using this tool from the command line?

Will adapt a subset of the synax used by sdedit to support sequence diagrams.

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)

//, / 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)