diff --git a/.gitignore b/.gitignore
index 7c9d7b019e..c427f34b78 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,5 @@ bower_components/
*.sublime-project
*.sublime-workspace
.DS_Store
+.idea
+coverage
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 38f9ae8df0..46cb8b79b5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,7 +2,7 @@
Great that you want to be involved in this project! Contributing is fun and contributions are GREAT! :)
-This page is currently a starting point is not so rigorous to start with.
+This page is currently a starting point and is not so rigorous to start with.
Some important guidlines:
@@ -16,7 +16,7 @@ The issue list and the items marked with **help wanted** is a good starting poin
## Guidelines for avoiding duplicate work
Contributing is great. It is not so fun when you are done with your issue and just before you're about to push your
-change you cant because someone else just pushed the same fix so you have wasted your time. The guidelines below are in
+change you can't because someone else just pushed the same fix so you have wasted your time. The guidelines below are in
place to prevent this:
* Comment in the issue that you are working on it. You will then be added as an assignee (eventually).
diff --git a/README.md b/README.md
index c027212de7..95da2e16be 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+
mermaid [](https://travis-ci.org/knsv/mermaid) [](https://codeclimate.com/github/knsv/mermaid)
=======
@@ -8,52 +9,61 @@ Ever wanted to simplify documentation and avoid heavy tools like Visio when expl
This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
The code below would render the following image
-
-```
+
+
Code
Rendered diagram
+
+
+
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
-```
-
-would render this lovely chart:
-
-
-
-A page with a live example can be seen [here](http://www.sveido.com/mermaid/demo/html/web.html). You can also look at mermaid in action using [jsbin](http://jsbin.com/faxunexeku/1/edit?html,output). If you want a live demo, there is an editor provided in the mermaid project or you can simply look at this [great editor](http://danielmschmidt.github.io/mermaid-demo/)
-
-
-# [The main documentation is located in the wiki](https://github.com/knsv/mermaid/wiki)
-
-
-
-# Another graph example
-
-```
-graph LR;
- A[Hard edge]-->|Link text|B(Round edge);
- B-->C{Decision};
- C-->|One|D[Result one];
- C-->|Two|E[Result two];
-```
-
-Below is the new declaration of the graph which since 0.2.16 also is valid along with the old declaration of the graph as described in the graph example on the home wiki page.
-
-```
-graph LR
- A[Hard edge] -->|Link text| B(Round edge)
- B --> C{Decision}
- C -->|One| D[Result one]
- C -->|Two| E[Result two]
-```
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+sequenceDiagram
+ participant Alice
+ participant Bob
+ Alice->John: Hello John, how are you?
+ loop Healthcheck
+ John->John: Fight against hypochondria
+ end
+ Note right of John: Rational thoughts <br/>prevail...
+ John-->Alice: Great!
+ John->Bob: How about you?
+ Bob-->John: Jolly good!
+
+
';
+ spyOn(global.mermaid,'init');
+ //console.log(main);
+ main.contentLoaded();
+ expect(global.mermaid.init).not.toHaveBeenCalled();
});
- it('should not call start anything with an empty document', function () {
+ it('should not start rendering with mermaid.startOnLoad set to false', function () {
+ main = rewire('./main');
+ mermaid.startOnLoad = false;
+ mermaid_config ={startOnLoad : true};
- mermaid_config ={startOnLoad : false};
+ document.body.innerHTML = '
graph TD;\na;
';
+ spyOn(global.mermaid,'init');
+ main.contentLoaded();
+ expect(global.mermaid.init).not.toHaveBeenCalled();
+ });
+
+ it('should start rendering with both startOnLoad set', function () {
main = rewire('./main');
+ mermaid.startOnLoad = true;
+ mermaid_config ={startOnLoad : true};
+ document.body.innerHTML = '
graph TD;\na;
';
+ spyOn(global.mermaid,'init');
+ main.contentLoaded();
+ expect(global.mermaid.init).toHaveBeenCalled();
+ });
- spyOn(utils,'detectType');
- expect(utils.detectType).not.toHaveBeenCalled();
+ it('should start rendering with mermaid.startOnLoad set and no mermaid_config defined', function () {
+ main = rewire('./main');
+ mermaid.startOnLoad = true;
+ document.body.innerHTML = '
graph TD;\na;
';
+ spyOn(global.mermaid,'init');
+ main.contentLoaded();
+ expect(global.mermaid.init).toHaveBeenCalled();
});
- it('should start something with a mermaid document', function () {
- mermaid_config ={startOnLoad : false};
+
+ it('should start rendering as a default with no changes performed', function () {
main = rewire('./main');
document.body.innerHTML = '
+ sequenceDiagram;Alice->>Bob: Hello Bob, how are you?;Bob-->Bob: Hmmm?;Bob-->Alice: Ok;
+
+
+ sequenceDiagram;loop Daily query;Alice->>Bob: Hello Bob, how are you?;alt is sick;Bob->>Alice: Not so good :(;else is well;Bob->>Alice: Feeling fresh like a daisy;end;opt Extra response;Bob->>Alice: Thanks for asking;end;end;
+
+
Message types
+
+
+ sequenceDiagram
+ Alice->>Bob: Hello Bob, how are you?
+ Bob-->>John: How about you John?
+ Bob--xAlice: I am good thanks!
+ Bob-xJohn: I am good thanks!
+ Note right of John: Bob thinks a long long time, so long that the text does not fit on a row.
+
+ Bob-->Alice: Checking with John...
+ Alice->John: Yes... John, how are you?
+
+
Loops, alt and opt
+
+ sequenceDiagram
+ loop Daily query
+ Alice->>Bob: Hello Bob, how are you?
+ alt is sick
+ Bob->>Alice: Not so good :(
+ else is well
+ Bob->>Alice: Feeling fresh like a daisy
+ end
+ opt Extra response
+ Bob->>Alice: Thanks for asking
+ end
+
+ end
+
+
Message to self in loop
+
+ sequenceDiagram
+ participant Alice
+ participant Bob
+ Alice->>John: Hello John, how are you?
+ loop Healthcheck
+ John->>John: Fight against hypochondria
+ end
+ Note right of John: Rational thoughts prevail...
+ John-->>Alice: Great!
+ John->>Bob: How about you?
+ Bob-->>John: Jolly good!
+
+
Bounding test & async message to self
+
+ sequenceDiagram
+ participant Alice
+ participant Bob
+ participant John the Long
+ Alice->Bob: Hello Bob, how are you?
+ loop Outer loop
+ Note left of Alice: Bob thinks about things to think about
+ Bob-xBob: I am good thanks!
+ loop Inner loop
+ Bob->>John the Long: How about you John?
+ Note right of John the Long: Bob thinks a long long time, so long that the text does not fit.
+ end
+ end
+
+ Bob-->>Alice: Checking with John...
+ Alice->>John the Long: Yes... John, how are you?
+ John the Long-->>Alice: Super!
+
- graph TD;
- sq[Square shape]-->ci((Circle shape));
- od>Odd shape]---|Two line <br>edge comment|ro;
- od2>Really long text in an Odd shape]-->od3>Really long text with linebreak <br>in an Odd shape];
- di{Diamond is <br> broken}-->ro(Rounded <br>square <br>shape);
-
- %% Comments after double percent signs
- di-->ro2(Rounded square shape);
- e((Inner circle))-->f(,.?!+-*ز);
- style e red;
-
-
- graph TD;
- sq[Square shape]-->ci((Circle shape));
- od>Odd shape]---|Two line edge comment|ro;
- od2>Really long text in an Odd shape]-->od3>Really long text with linebreak in an Odd shape];
- di{Diamond is broken}-->ro(Rounded square shape);
- di-->ro2(Rounded square shape);
+ graph TD;
+ A-->B;
+ A-->C;
+ A-->D;
+ B-->D;
+ A-->|Link text|B
+ classDef default fill:#9f6,stroke:#333,stroke-width:2px;
+ classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+ class green B;
+
+
Sub graphs
+
graph LR
+ subgraph old sys 1
+ a1(new client)-->b1(sys1 server)
+ oc1(Old client)-->b2
+ end
+
+ subgraph old sys 2
+ a2(new client)-->b2(sys2 server)
+ oc2(Old client)-->b2
+ end
+
+ subgraph old sys 3
+ a3(new client)-->b3(sys3 server)
+ end
+
+ subgraph New sys
+ a1
+ a2
+ a3
+ end
+
+
+
graph TB
+ subgraph one
+ a1-->a2
+ end
+ subgraph two
+ b1-->b2
+ end
+ subgraph three
+ c1-->c2
+ end
+ c1-->a2
+
+
+
graph TB
+ subgraph
+ sq[Square shape] -.-> ci((Circle shape))
+ od>Odd shape]-. Two line edge comment .-> ro
+ di{Diamond with line break} ==> ro(Rounded square shape)
+ di-->ro2(Rounded square shape)
+ end
+
+ %% Notice that no text in shape are added here instead that is appended further down
+ subgraph Go go
+ e --> od3>Really long text with linebreak in an Odd shape]
+
+ e((Inner / circle and some odd special characters)) --> f(,.?!+-*ز)
+
+ cyr[Cyrillic]-->cyr2((Circle shape Начало))
+ end
+ classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+ classDef orange fill:#f96,stroke:#333,stroke-width:4px,font-size:50%,font-style:bold;
+ class sq,e green
+ class di orange
+
+
+ graph TB
+ subgraph
+ sq[Square shape]-->ci((Circle shape))
+ od>Odd shape]---|Two line edge comment|ro
+ end
+ subgraph
+ od2>Really long text in an Odd shape]-->od3>Really long text with linebreak in an Odd shape];
+ di{Diamond is broken}-->ro(Rounded square shape);
+ di-->ro2(Rounded square shape)
+ end
%% Comments after double percent signs
- e((Inner / circle))-->f(,.?!+-*ز);
- cyr[Cyrillic]-->cyr2((Circle shape Начало));
+ subgraph
+ e((Inner / circle))-->f(,.?!+-*ز);
+ cyr[Cyrillic]-->cyr2((Circle shape Начало));
+ A[Object foo,bar]-->B(Thing)
+ end
style e red;
+ classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+ class green sq
+
sequenceDiagram
+ participant John the Long
Alice->Bob: Hello Bob, how are you?
- Note right of Bob: Bob thinks
+ Note left of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Bob-->John the Long: How about you John?
+ Note left of John the Long: Bob thinks
Bob-->Alice: Checking with John...
+
+ loop Multiple status checks
+ loog Naging
Alice->John the Long: Yes... John, how are you?
+ end
John the Long-->Alice: Better then you!
+ end
-
+
sequenceDiagram
- Alice->Bob: Hello Bob, how are you?
- Note left of Bob: Bob thinks about things to think about
- Bob-->Alice: I am good thanks!
- Bob-->John the Long: How about you John?
+ participant Alice
+ Note left of Alice: Bob thinks about things to think about
+
+
+ sequenceDiagram
+ participant Alice
+ participant Bob
+ participant John
+ Alice->>Bob: Hello Bob, how are you?
+ Note left of Alice: Bob thinks about things to think about
+ Bob-->>Alice: I am good thanks!
+ loop Multiple status checks
+ Bob--xJohn: How about you John?
+ Note right of John: Bob thinks
+ end
- Bob-->Alice: Checking with John...
+ Bob--xAlice: Checking with John...
Alice->John the Long: Yes... John, how are you?
- John the Long-->Alice: Better then you!
+ John the Long-->Alice: Better then you!!
+
+
+