Giter Club home page Giter Club logo

mermaid's Introduction

Mermaid

Generate diagrams from markdown-like text.

Live Editor!

📖 Documentation | 🚀 Getting Started | 🌐 CDN | 🙌 Join Us

简体中文

Try Live Editor previews of future releases: Develop | Next



NPM Build CI Status npm minified gzipped bundle size Coverage Status CDN Status NPM Downloads Join our Discord! Twitter Follow

🏆 Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!!

Thanks to all involved, people committing pull requests, people answering questions! 🙏

Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!

Table of content

Expand contents

About

Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.

Doc-Rot is a Catch-22 that Mermaid helps to solve.

Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams or docs ruins productivity and hurts organizational learning.
Mermaid addresses this problem by enabling users to create easily modifiable diagrams. It can also be made part of production scripts (and other pieces of code).

Mermaid allows even non-programmers to easily create detailed diagrams through the Mermaid Live Editor.
For video tutorials, visit our Tutorials page. Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid.

You can also use Mermaid within GitHub as well many of your other favorite applications—check out the list of Integrations and Usages of Mermaid.

For a more detailed introduction to Mermaid and some of its more basic uses, look to the Beginner's Guide, Usage and Tutorials.

In our release process we rely heavily on visual regression tests using applitools. Applitools is a great service which has been easy to use and integrate with our tests.

Examples

The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the text syntax.

Flowchart [docs - live editor]

flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

Sequence diagram [docs - live editor]

sequenceDiagram
Alice->>John: Hello John, how are you?
loop HealthCheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
sequenceDiagram
Alice->>John: Hello John, how are you?
loop HealthCheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

Gantt chart [docs - live editor]

gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d
gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d

Class diagram [docs - live editor]

classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}

classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}

State diagram [docs - live editor]

stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

Pie chart [docs - live editor]

pie
"Dogs" : 386
"Cats" : 85.9
"Rats" : 15
pie
"Dogs" : 386
"Cats" : 85.9
"Rats" : 15

Git graph [experimental - live editor]

Bar chart (using gantt chart) [docs - live editor]

gantt
    title Git Issues - days since last update
    dateFormat  X
    axisFormat %s

    section Issue19062
    71   : 0, 71
    section Issue19401
    36   : 0, 36
    section Issue193
    34   : 0, 34
    section Issue7441
    9    : 0, 9
    section Issue1300
    5    : 0, 5
gantt
    title Git Issues - days since last update
    dateFormat  X
    axisFormat %s

    section Issue19062
    71   : 0, 71
    section Issue19401
    36   : 0, 36
    section Issue193
    34   : 0, 34
    section Issue7441
    9    : 0, 9
    section Issue1300
    5    : 0, 5

User Journey diagram [docs - live editor]

  journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
  journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me

C4 diagram [docs]

C4Context
title System Context diagram for Internet Banking System

Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

Enterprise_Boundary(b1, "BankBoundary") {

  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

  System_Boundary(b2, "BankBoundary2") {
    System(SystemA, "Banking System A")
    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
  }

  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

  Boundary(b3, "BankBoundary3", "boundary") {
    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
  }
}

BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
C4Context
title System Context diagram for Internet Banking System

Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

Enterprise_Boundary(b1, "BankBoundary") {

  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

  System_Boundary(b2, "BankBoundary2") {
    System(SystemA, "Banking System A")
    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
  }

  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

  Boundary(b3, "BankBoundary3", "boundary") {
    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
  }
}

BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")

Release

For those who have the permission to do so:

Update version number in package.json.

npm publish

The above command generates files into the dist folder and publishes them to https://www.npmjs.com.

Related projects

Contributors Good first issue Contributors Commits

Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at this issue if you want to know where to start helping out.

Detailed information about how to contribute can be found in the contribution guide

Security and safe diagrams

For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.

As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.

Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.

Reporting vulnerabilities

To report a vulnerability, please e-mail [email protected] with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.

Appreciation

A quick note from Knut Sveidqvist:

Many thanks to the d3 and dagre-d3 projects for providing the graphical layout and drawing libraries!

Thanks also to the js-sequence-diagram project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.

Thank you to Tyler Long who has been a collaborator since April 2017.

Thank you to the ever-growing list of contributors that brought the project this far!


Mermaid was created by Knut Sveidqvist for easier documentation.

mermaid's People

Contributors

ad1992 avatar aloisklink avatar ashishjain0512 avatar cmmoran avatar dependabot[bot] avatar emersonbottero avatar erelling avatar gdfaber avatar huynhicode avatar ibrahimwassouf avatar iorlandoni avatar jgreywolf avatar klemmchr avatar knsv avatar mathbraga avatar mmorel-35 avatar neilcuzon avatar nicolasnewman avatar nirname avatar pbrolin47 avatar raghur avatar renovate[bot] avatar seankilleen avatar sidharthv96 avatar spopida avatar subhash-halder avatar tylerlong avatar weedyseadragon avatar yash-singh1 avatar yokozuna59 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mermaid's Issues

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;

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

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]

can not support Chinese description

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

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)

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?

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

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.

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.

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)

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.

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)

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

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

software architecture diagram

hi @knsv ,

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


front-end libraries
midleware

| nodejs | other services |


thanks.

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?

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.

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;

Error with some characters

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

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

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.

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 ?

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

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

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?

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>

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.

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

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.

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.

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

Improve arrows

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

NoModificationAllowedError

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.