mermaid-js / mermaid Goto Github PK

View Code? Open in Web Editor NEW

66.7K 632.0 5.7K 224.95 MB

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

JavaScript 49.34% Yacc 5.64% HTML 9.02% Shell 0.14% TypeScript 35.55% CSS 0.09% Vue 0.22% Dockerfile 0.01%

documentation flowchart javascript typescript uml-diagrams diagrams diagrams-as-code mindmap

mermaid's People

Stargazers

Watchers

Forkers

bjowes jkso aydinsakar faddat inno-v nvdnkpr pavelnikolov vanife caichicong bismoy2013 fs-shunsuke-iwamoto zhuowater 3615pipou simonazari silky yelken bradparks darrencauthon 9629831527 imanimalxi aitatanit asmshaon jwoolston eric013 fragote skottk it-configuer oligoform seyyah tariqkewan plainspace emmyisawizard val9 juanleotta sriniavireddy thatchristoph fonorobert erophames llpdzh wuwenvogue serv neommob ht123 derekbarber jlming krvax mikeatm rhiokim menxu thngdude zhangdinet panmengguan summerwind1005 ajaxchai damocles33 zahra-karimi-dehkordi nivertech wooparadog s20021945 illusi0n7 railsuser2014 nullnotfound robinhernandez danielmschmidt ahmedali5530 augustine-tran vijay40 sublimino dtklein hafeez3000 samozihu donfanning arnognulf yashrocky thesobek restimel fardog intfrr xxr3376 shiguol renatoargh eagles125 ricky52529 vnijs lafener teabyii supmind lidaling schvin conqs ashwilliams rmoorman it0a grahack iarnaud badbye nagyist gkchic jcizel jjmr

mermaid's Issues

Styling label texts

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?

Make the new graph declaration more visual

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

tutorial for creating new type of graph/layout

Hello,

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

Thanks for your help!

Container support

Hey there,

do you have a support for containers ?

Sample:

Thanks

How do I do comments?

# or -- or even  don't do this.

Wanted to know build process for the project.

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.

Custom icons

Is it possible to use custom SVG icons?

Support for dotted links

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

Mermaid not rendering properly on Wordpress pages

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)

Improve arrows

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

Styling connector lines

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;

Client utility for mermaid

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?

What are the requirements ?

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>

Create image file via CLI?

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

Publish to NPM

Use classes instead of inline style for easy styling

Would be nice to do:

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

Or there is an easier way?

software architecture diagram

hi @knsv ,

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

front-end libraries
midleware

| nodejs | other services |

thanks.

Provide parse function in browser widthout `require`?

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

Download link in README.MD doesn't work.

I wanna get js file but [mermaid including dependencies] and [mermaid without dependencies] doesn't work.

error code : ERR_EMPTY_RESPONSE

Support for hyperlink and tooltip

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

Generating SVG text blob for use in Node

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?

Special characters break parsing

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&#40;foo,bar&#41;]-->B(Thing);

This characters failed the lexical parsing

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

linkStyle usage is not obvious

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

Generated SVG works poorly outside web browsers

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.

TypeError: Cannot read property 'layout' of undefined

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

Make link text look like it is on the line

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.

Improve readability with new line as terminator and whitespace

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]

Support unicode chars in labels

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

Node Label text mistaken for Direction

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.

Improve example page with live demo

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

Graphviz DOT syntax

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.

Support for pie diagrams

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.

Move *.spec.js in src/ to test/

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

modified init to be applied more than once

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

can not support Chinese description

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

Support for sequence diagrams

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

Question marks don't render properly with /dist/mermaid.full.min.js

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

Provide parser as separate module

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.

Responsive graph layout for mobile viewers

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.

Neural Networks

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

For example

Support for font-awesome

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 ?

NoModificationAllowedError

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

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

Add link to jsbin playground to README

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

Lines routed outside visible area

Trailing whitespace at the end of lines is not ignored

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

Error with some characters

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

Does not render upon AngularJS Updates

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.

Cap-cased words break parser

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)

Better label text support

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.