GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Remove docs

Browse Source
This commit is contained in:
Tyler Long 2017-09-01 15:46:40 +08:00
parent b077918832
commit 47be3df96a
36 changed files with 2 additions and 3744 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.ackrc
View File

@ -1,4 +1,3 @@
--ignore-dir=dist
--ignore-dir=docs
--ignore-dir=editor
--ignore-file=match:/^yarn\.lock$/

4
README.md
View File

@ -75,7 +75,7 @@ classDiagram
</pre>
</td>
<td>
<img src='./docs/img/class-diagram.png' alt='Example 3'>
<img src='./img/class-diagram.png' alt='Example 3'>
</td>
</tr>
<tr>
@ -103,7 +103,7 @@ end
</pre>
</td>
<td>
<img src='./docs/img/gitgraph.mm.png' alt='Example 4'>
<img src='./img/gitgraph.mm.png' alt='Example 4'>
</td>
</tr>

159
docs/content/demos.md
View File

@ -1,159 +0,0 @@
---
title: Demos
order: 5
---
# Demos
## Basic flowchart
```
%% Example diagram
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```
```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```
## Larger flowchart with some styling
```
%% Code for flowchart below
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A subgraph
od>Odd shape]-- Two line&lt;br>edge comment --> ro
di{Diamond with &lt;br/> line break} -.-> ro(Rounded&lt;br>square&lt;br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak&lt;br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle&lt;br>and some odd &lt;br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
```
```mermaid
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A subgraph
od>Odd shape]-- Two line&lt;br>edge comment --> ro
di{Diamond with &lt;br/> line break} -.-> ro(Rounded&lt;br>square&lt;br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
```
## Basic sequence diagram
```
%% Sequence diagram code
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long&lt;br/>long time, so long&lt;br/>that the text does&lt;br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
```mermaid
sequenceDiagram
Alice->> Bob: Hello Bob, how are you?
Bob-->> John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
## Loops, alt and opt
```
%% Sequence diagram code
sequenceDiagram
loop Daily query
Alice-&gt;&gt;Bob: Hello Bob, how are you?
alt is sick
Bob-&gt;&gt;Alice: Not so good :(
else is well
Bob-&gt;&gt;Alice: Feeling fresh like a daisy
end
opt Extra response
Bob-&gt;&gt;Alice: Thanks for asking
end
end
```
```mermaid
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
```
%% Sequence diagram code
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&lt;br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
```mermaid
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!
```

114
docs/content/development.md
View File

@ -1,114 +0,0 @@
---
order: 9
---
# Development
## Updating the documentation
## Getting the development environment up
1. Fork the gh-pages branch in the the mermaid repository
2. Do npm install
## Working with the documentation
The html files are generated from the source and the markdown files in the docs folder. The site generation is done
using the docker.js framework with the command below.
```
docker -i ../mermaid/ -x "*git*|*travis*|*bin*|*dist*|*node_modules*|*gulp*|*lib*|*editor*|*conf*|*scripts*|*test*|*htmlDocs*" --extras mermaid -w -o htmlDocs
```
Thus ... One important thing to remember. * Do not edit the html files directly! * Those changes will be overwritten
when the site is re-generated.
## Committing the changes
Do a pull request to merge the changes to the site.
## Things to be done in order to add a new diagram type
### Step 1: Grammar & Parsing
#### Grammar
This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
For instance:
* the flowchart starts with the keyword graph.
* the sequence diagram starts with the keyword sequenceDiagram
#### Store data found during parsing
There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call a object provided to the parser by the user of the parser. This object can be called during parsing for storing data.
```
statement
: 'participant' actor { $$='actor'; }
| signal { $$='signal'; }
| note_statement { $$='note'; }
| 'title' message { yy.setTitle($2); }
;
```
In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered.
**Note:** Make sure that the parseError function for the parser is defined and calling mermaidPAI.parseError this way a common way of detecting parse errors is provided for the end-user.
For more info look in the example diagram type:
The yy object has the following function:
```javascript
exports.parseError = function(err,hash){
mermaidAPI.parseError(err,hash);
};
```
when parsing the yy object is initialized as per below:
```javascript
var parser;
parser = exampleParser.parser;
parser.yy = db;
```
### Step 2: Rendering
Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequendeRenderer.js rather then the flowchart renderer as this is a more generic example.
Place the renderer in the diagram folder.
### Step 3: Detection of the new diagram type
The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
### Step 4: The final piece - triggering the rendering
At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step number 2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument.
## Usage of the parser as a separate module
### Setup
```
var graph = require('./graphDb');
var flow = require('./parser/flow');
flow.parser.yy = graph;
```
### Parsing
```
flow.parser.parse(text);
```
### Data extraction
```
// Javascript example
graph.getDirection();
graph.getVertices();
graph.getEdges();
```
The parser is also exposed in the mermaid api by calling:
```
var parser = mermaid.getParser();
```
Note that the parse needs a graph object to store the data as per:
```
flow.parser.yy = graph;
```
Look at graphDb.js for more details on that object.

448
docs/content/flowchart.md
View File

@ -1,448 +0,0 @@
---
order: 3
---
# Flowcharts - Basic Syntax
## Graph
This statement declares a new graph and the direction of the graph layout.
```
%% Example code
graph TD
```
This declares a graph oriented from top to bottom.
```mermaid
graph TD
Start --> Stop
```
```
%% Example code
graph LR
```
This declares a graph oriented from left to right.
Possible directions are:
* TB - top bottom
* BT - bottom top
* RL - right left
* LR - left right
* TD - same as TB
```mermaid
graph LR
Start --> Stop
```
## Nodes & shapes
### A node (default)
```
graph LR
id1
```
```mermaid
graph LR
id
```
Note that the id is what is displayed in the box.
### A node with text
It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text
found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The
one previously defined will be used when rendering the box.
```
graph LR
id1[This is the text in the box]
```
```mermaid
graph LR
id1[This is the text in the box]
```
### A node with round edges
```
graph LR
id1(This is the text in the box);
```
```mermaid
graph LR
id1(This is the text in the box)
```
### A node in the form of a circle
```
graph LR
id1((This is the text in the circle));
```
```mermaid
graph LR
id1((This is the text in the circle))
```
### A node in an asymetric shape
```
graph LR
id1>This is the text in the box]
```
```mermaid
graph LR
id1>This is the text in the box]
```
Currently only the shape above is possible and not its mirror. *This might change with future releases.*
### A node (rhombus)
```
graph LR
id1{This is the text in the box}
```
```mermaid
graph LR
id1{This is the text in the box}
```
## Links between nodes
Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
### A link with arrow head
```
graph LR
A-->B
```
```
graph LR;
A-->B
```
### An open link
```
graph LR
A --- B
```
```mermaid
graph LR;
A --- B
```
### Text on links
```
A-- This is the text --- B
```
or
```
A---|This is the text|B;
```
```mermaid
graph LR;
A-- This is the text ---B
```
### A link with arrow head and text
```
A-->|text|B
```
```mermaid
graph LR;
A-->|text|B
```
or
```
A-- text -->B
```
```mermaid
graph LR;
A-- text -->B
```
### Dotted link
-.->
```mermaid
graph LR;
A-.->B;
```
### Dotted link with text
-. text .->
```mermaid
graph LR;
A-. text .-> B
```
### Thick link
==>
```mermaid
graph LR;
A ==> B
```
### Thick link with text
== text ==>
```mermaid
graph LR;
A == text ==> B
```
## Special characters that break syntax
It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
```
graph LR
d1["This is the (text) in the box"]
```
```mermaid
graph LR
id1["This is the (text) in the box"]
```
### Entity codes to escape characters
It is possible to escape characters using the syntax examplified here.
The flowchart defined by the following code:
```
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
This would render to the diagram below:
```mermaid
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
## Subgraphs
```
subgraph title
graph definition
end
```
An example below:
```
%% Subgraph example
graph TB
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
c1-->a2
```
```mermaid
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
```
## Interaction
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.
```
click nodeId callback
```
* nodeId is the id of the node
* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
Examples of tooltip usage below:
```
&lt;script&gt;
var callback = function(){
alert(&#39;A callback was triggered&#39;);
}
&lt;script&gt;
```
```
graph LR;
A-->B;
click A callback "Tooltip for a callback"
click B "http://www.github.com" "This is a tooltip for a link"
```
The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
```mermaid
graph LR;
A-->B;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
```
<aside class="success">The tooltip functionality and the ability to link to urls are available from version 0.5.2.</aside>
When integration mermaid using the mermaidAPI #mermaidapi the function that binds the events need to be run when the finished graph has been added to the page. This is described in the [API usage](#api-usage) section.
## Styling and classes
### Styling links
It is possible to style links. For instance you might want to style a link that is going backwards in the flow. As links
have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required.
Instead of ids, the order number of when the link was defined in the graph is used. In the example below the style
defined in the linkStyle statement will belong to the fourth link in the graph:
```
linkStyle 3 stroke:#ff3,stroke-width:4px;
```
### Styling a node
It is possible to apply specific styles such as a thicker border or a different background color to a node.
```
%% Example code
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;
```
```mermaid
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
```
#### Classes
More convenient then defining the style every time is to define a class of styles and attach this class to the nodes that
should have a different look.
a class definition looks like the example below:
```
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
```
Attachment of a class to a node is done as per below:
```
class nodeId1 className;
```
It is also possible to attach a class to a list of nodes in one statement:
```
class nodeId1,nodeId2 className;
```
### Css classes
It is also possible to pre dine classes in css styles that can be applied from the graph definition as in the example
below:
**Example style**
```
<style>
.cssClass > rect{
fill:#FF0000;
stroke:#FFFF00;
stroke-width:4px;
}
</style>
```
**Example definition**
```
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
```
<aside class="warning">Class definitions in the graph defnition is broken in version 0.5.1 but has been fixed in the master branch of mermaid. This fix will be included in 0.5.2</aside>
### Default class
If a class is named default it will be assigned to all classes without specific class definitions.
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
## Basic support for fontawesome
It is possible to add icons from fontawesome. In order to do so, you need to add the fontawesome as described in the instructions at
[the fontawesome web site](https://fortawesome.github.io/Font-Awesome/).
The icons are acessed via the syntax fa:#icon class name#.
The example code below
```
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);
```
Would render the graph below:
```mermaid
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);
```
<aside class="success">Support for fontawesome has been comitted to the master branch and will be included in 0.5.3</aside>
## Graph declarations with spaces between vertices and link and without semicolon
* In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
* A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduce to improve readability.
Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
```
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
```mermaid
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```

254
docs/content/gantt.md
View File

@ -1,254 +0,0 @@
---
order: 4
---
# Gant diagrams
> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project.
Mermaid can render Gantt diagrams. The code snippet below:
```
%% Example of sequence diagram
gantt
title A Gantt Diagram
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
Renders the following diagram:
```mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
## Syntax
```
%% Example with slection of syntaxes
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
Renders like below:
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
### Title
Tbd
## Sections statements
Tbd
## Setting dates
Tbd
### Date format
Tbd
#### Diagram definition
Input Example Description:
```
YYYY 2014 4 digit year
YY 14 2 digit year
Q 1..4 Quarter of year. Sets month to first month in quarter.
M MM 1..12 Month number
MMM MMMM January..Dec Month name in locale set by moment.locale()
D DD 1..31 Day of month
Do 1st..31st Day of month with ordinal
DDD DDDD 1..365 Day of year
X 1410715640.579 Unix timestamp
x 1410715640579 Unix ms timestamp
Input Example Description
H HH 0..23 24 hour time
h hh 1..12 12 hour time used with a A.
a A am pm Post or ante meridiem
m mm 0..59 Minutes
s ss 0..59 Seconds
S 0..9 Tenths of a second
SS 0..99 Hundreds of a second
SSS 0..999 Thousandths of a second
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z
```
More info in: http://momentjs.com/docs/#/parsing/string-format/
#### Scale
```
%a - abbreviated weekday name.
%A - full weekday name.
%b - abbreviated month name.
%B - full month name.
%c - date and time, as "%a %b %e %H:%M:%S %Y".
%d - zero-padded day of the month as a decimal number [01,31].
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
%H - hour (24-hour clock) as a decimal number [00,23].
%I - hour (12-hour clock) as a decimal number [01,12].
%j - day of the year as a decimal number [001,366].
%m - month as a decimal number [01,12].
%M - minute as a decimal number [00,59].
%L - milliseconds as a decimal number [000, 999].
%p - either AM or PM.
%S - second as a decimal number [00,61].
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
%w - weekday as a decimal number [0(Sunday),6].
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
%x - date, as "%m/%d/%Y".
%X - time, as "%H:%M:%S".
%y - year without century as a decimal number [00,99].
%Y - year with century as a decimal number.
%Z - time zone offset, such as "-0700".
%% - a literal "%" character.
```
More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
## Styling
Styling of the a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the
### Classes used
Class | Description
--- | ---
actor | Style for the actor box at the top of the diagram.
text.actor | Styles for text in the actor box at the top of the diagram.
actor-line | The vertical line for an actor.
messageLine0 | Styles for the solid message line.
messageLine1 | Styles for the dotted message line.
messageText | Defines styles for the text on the message arrows.
labelBox | Defines styles label to left in a loop.
labelText | Styles for the text in label for loops.
loopText | Styles for the text in the loop box.
loopLine | Defines styles for the lines in the loop box.
note | Styles for the note box.
noteText | Styles for the text on in the note boxes.
### Sample stylesheet
```css
.grid .tick {
stroke: lightgrey;
opacity: 0.3;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
#tag {
color: white;
background: #FA283D;
width: 150px;
position: absolute;
display: none;
padding:3px 6px;
margin-left: -80px;
font-size: 11px;
}
#tag:before {
border: solid transparent;
content: ' ';
height: 0;
left: 50%;
margin-left: -5px;
position: absolute;
width: 0;
border-width: 10px;
border-bottom-color: #FA283D;
top: -20px;
}
.taskText {
fill:white;
text-anchor:middle;
}
.taskTextOutsideRight {
fill:black;
text-anchor:start;
}
.taskTextOutsideLeft {
fill:black;
text-anchor:end;
}
```
## Configuration
Is it possible to adjust the margins for rendering the sequence diagram.
This is done by defining the **sequenceConfig** part of the configuration object. Read more about it [here](#configuration35).
How to use the CLI is described in the [mermaidCLI](#mermaid-cli8) page.

99
docs/content/index.md
View File

@ -1,99 +0,0 @@
---
order: 0
---
mermaid
=======
![Header Image](images/header.png)
>Generation of diagrams and flowcharts from text in a similar manner as markdown.
Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript. [Try it using our editor][live_editor].
Code examples below:
### An example of a flowchart
```
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
### An example of a sequence diagram
```
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 &lt;br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
```
### Example code for a gantt diagram
```
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
```
Play with mermaid using this [editor](https://danielmschmidt.github.io/mermaid-demo/) or this [live editor][live_editor].
## Credits
Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!
Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams.
*Mermaid was created by Knut Sveidqvist for easier documentation.*
Knut has not done all work by himself, here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors).
# Downstream projects
Mermaid is supported in a number of publishing systems and editors. Please report if a plugin/editor is missing from the list below:
* Support in LightPaper 1.2+. [Howto](https://github.com/42Squares/LightPaper/blob/master/doc/Adding%20Mermaid%20Diagrams.md). Discout with code MERMAID_25
* [gitbook-plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
* light table
* [Confluence plugin](https://marketplace.atlassian.com/plugins/org.anvard.atlassian.mermaid-plugin/server/overview)
* [Using mermaid via docpad](http://nauvalatmaja.com/2015/01/13/rendering-mermaid-in-docpad/)
* [Using mermaid in Jekyll](https://rubygems.org/gems/jekyll-mermaid/versions/1.0.0)
* [Using mermaid via Octopress](http://mostlyblather.com/blog/2015/05/23/mermaid-jekyll-octopress/)
* [Mardown editor Haroopad](http://pad.haroopress.com/user.html)
* [Plugin for atom](https://atom.io/packages/atom-mermaid)
* [Markdown Plus](https://mdp.tylingsoft.com/)
* [Vim Plugin](https://github.com/kannokanno/previm)
* [Sphinx extension](https://github.com/mgaitan/sphinxcontrib-mermaid)
* [Pandoc filter](https://github.com/raghur/mermaid-filter)
* [hads](https://github.com/sinedied/hads)
# Online live editor
An editor is available for creating diagrams. With it you can quickly start writing mermaid diagrams. It is possible to:
* save the result as a svg
* get a link to a viewer of the diagram
* get a link to edit of the diagram to share a diagram so that someone else can tweak it and send a new link back
* [Editor][live_editor]
[live_editor]: https://knsv.github.io/mermaid/live_editor/

77
docs/content/mermaidCLI.md
View File

@ -1,77 +0,0 @@
---
order: 4
---
# mermaid CLI
Installing mermaid globally (`npm install -g mermaid`) will expose the `mermaid` command to your environment, allowing you to generate PNGs from any file containing mermaid markup via the command line.
**Note:** The `mermaid` command requires [PhantomJS](http://phantomjs.org/) (version `^1.9.0`) to be installed and available in your *$PATH*, or you can specify it's location with the `-e` option. For most environments, `npm install -g phantomjs` will satisfy this requirement.
## Usage
```
$ mermaid --help
Usage: mermaid [options] <file>...
file The mermaid description file to be rendered
Options:
-s --svg Output SVG instead of PNG (experimental)
-p --png If SVG was selected, and you also want PNG, set this flag
-o --outputDir Directory to save files, will be created automatically, defaults to `cwd`
-O --outputSuffix Suffix to output filenames in front of '.svg' or '.png', defaults to ''
-e --phantomPath Specify the path to the phantomjs executable
-t --css Specify the path to a CSS file to be included when processing output
-c --sequenceConfig Specify the path to the file with the configuration to be applied in the sequence diagram
-g --ganttConfig Specify the path to the file with the configuration to be applied in the gantt diagram
-h --help Show this message
-v --verbose Show logging
-w --width width of the generated png (number)
--version Print version and quit
```
```
mermaid testGraph.mmd
mermaid testGraph.mmd -w 980
```
## Sequence diagram configuration
The --sequenceConfig option allows overriding the sequence diagram configuration. It could be useful to increase the width between actors, the notes width or the margin to fit some large texts that are not well rendered with the default configuration, for example.
The content of the file must be a JSON like this:
```
{
"diagramMarginX": 100,
"diagramMarginY": 10,
"actorMargin": 150,
"width": 150,
"height": 65,
"boxMargin": 10,
"boxTextMargin": 5,
"noteMargin": 10,
"messageMargin": 35
}
```
These properties will override the default values and if a property is not set in this object, it will left it empty and could raise an error. The current properties (measured in px) are:
- diagramMarginX: Size of the empty space to add at the left-right of the diagram.
- diagramMarginY: Size of the empty space to add at the top-bottom of the diagram.
- actorMargin: Horizontal space between each participant. The arrows between them would have this size too.
- width: Width of the participant box.
- height: Height of the participant box.
- boxMargin: Blank area around loop boxes.
- boxTextMargin: Blank area between the text and the border in a loop box.
- noteMargin: Size of the empty space around a note.
- messageMargin: Space between messages
## CLI Known Issues
- SVG output currently does some replacement on text, as mermaid's SVG output is only appropriate for browsers. Text color and background color is not yet replicated; please use PNGs for most purposes until this is resolved.
- SVG output is decidedly non-standard. It works, but may cause issues in some viewers.

357
docs/content/sequenceDiagram.md
View File

@ -1,357 +0,0 @@
---
title: Sequence Diagram
order: 3
---
# Sequence diagrams
> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
Mermaid can render sequence diagrams. The code snippet below:
```
%% Example of sequence diagram
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
Renders the following diagram:
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
## Syntax
### Participants
The participants can be defined implicitly as in the first example on this page. The participants or actors are
rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a
different order than how they appear in the first message. It is possible to specify the actor's order of
appearance by doing the following:
```
%% Example of sequence diagram
sequenceDiagram
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
Renders to the diagram below:
```mermaid
sequenceDiagram
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
## Messages
Messages can be of two displayed either solid or with a dotted line.
```
[Actor][Arrow][Actor]:Message text
```
There are six types of arrows currently supported:
Type | Description
--- | ---
-> | Solid line without arrow
--> | Dotted line without arrow
->> | Solid line with arrowhead
-->> | Dotted line with arrowhead
-x | Solid line with a cross at the end (async)
--x | Dotted line with a cross at the end (async)
## Activations
It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
```
sequenceDiagram
Alice->>John: Hello John, how are you?
activate John
John-->>Alice: Great!
deactivate John
```
Renders to the diagram below:
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
activate John
John-->>Alice: Great!
deactivate John
```
There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:
```
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
```
Activations can be stacked for same actor:
```
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
```
Stacked activations look like this:
```mermaid
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
```
## Notes
It is possible to add notes to a sequence diagram. This is done by the notation
Note [ right of | left of | over ] [Actor]: Text in note content
See the example below:
```
%% Example of sequence diagram
sequenceDiagram
participant John
Note right of John: Text in note
```
Renders to the diagram below:
```mermaid
sequenceDiagram
participant John
Note right of John: Text in note
```
It is also possible to create notes spanning two participants:
```
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
```
```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
```
## Loops
It is possible to express loops in a sequence diagram. This is done by the notation
```
loop Loop text
... statements ...
end
```
See the example below
```
%% Example of sequence diagram
sequenceDiagram
Alice->John: Hello John, how are you?
loop Reply every minute
John-->Alice: Great!
end
```
```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
```
## Alt
It is possible to express alternative paths in a sequence diagram. This is done by the notation
```
alt Describing text
... statements ...
else
... statements ...
end
```
or if there is sequence that is optional (if without else).
```
opt Describing text
... statements ...
end
```
See the example below
```
%% Example of sequence diagram
sequenceDiagram
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
```
```mermaid
sequenceDiagram
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
```
## Styling
Styling of the a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the
### Classes used
Class | Description
--- | ---
actor | Style for the actor box at the top of the diagram.
text.actor | Styles for text in the actor box at the top of the diagram.
actor-line | The vertical line for an actor.
messageLine0 | Styles for the solid message line.
messageLine1 | Styles for the dotted message line.
messageText | Defines styles for the text on the message arrows.
labelBox | Defines styles label to left in a loop.
labelText | Styles for the text in label for loops.
loopText | Styles for the text in the loop box.
loopLine | Defines styles for the lines in the loop box.
note | Styles for the note box.
noteText | Styles for the text on in the note boxes.
### Sample stylesheet
```css
body {
background: white;
}
.actor {
stroke: #CCCCFF;
fill: #ECECFF;
}
text.actor {
fill:black;
stroke:none;
font-family: Helvetica;
}
.actor-line {
stroke:grey;
}
.messageLine0 {
stroke-width:1.5;
stroke-dasharray: "2 2";
marker-end:"url(#arrowhead)";
stroke:black;
}
.messageLine1 {
stroke-width:1.5;
stroke-dasharray: "2 2";
stroke:black;
}
#arrowhead {
fill:black;
}
.messageText {
fill:black;
stroke:none;
font-family: 'trebuchet ms', verdana, arial;
font-size:14px;
}
.labelBox {
stroke: #CCCCFF;
fill: #ECECFF;
}
.labelText {
fill:black;
stroke:none;
font-family: 'trebuchet ms', verdana, arial;
}
.loopText {
fill:black;
stroke:none;
font-family: 'trebuchet ms', verdana, arial;
}
.loopLine {
stroke-width:2;
stroke-dasharray: "2 2";
marker-end:"url(#arrowhead)";
stroke: #CCCCFF;
}
.note {
stroke: #decc93;
stroke: #CCCCFF;
fill: #fff5ad;
}
.noteText {
fill:black;
stroke:none;
font-family: 'trebuchet ms', verdana, arial;
font-size:14px;
}
```
## Configuration
Is it possible to adjust the margins for rendering the sequence diagram.
This is done by defining **mermaid.sequenceConfig** or by the CLI to use a json file with the configuration.
How to use the CLI is described in the [mermaidCLI](#mermaid-cli8) page.
**mermaid.sequenceConfig** can be set to a JSON string with config parameters or the corresponding object.
```
mermaid.sequenceConfig = {
diagramMarginX:50,
diagramMarginY:10,
boxTextMargin:5,
noteMargin:10,
messageMargin:35,
mirrorActors:true
};
```
### Possible configration params:
Param | Descriotion | Default value
--- | --- | ---
mirrorActor | Turns on/off the rendering of actors below the diagram as well as above it | false
bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists. | 1

27
docs/content/upgrading.md
View File

@ -1,27 +0,0 @@
---
order: 10
---
# Upgrading to from version -0.4.0
Some of the interfaces has been upgraded.
## Initialization
mermaid_config is no longer used. Instead a call to mermaid initialize is done as in the example below:
### version 0.4.0
```
mermaid_config = {
startOnLoad:true
};
```
### will look like below in version 0.5.0
```
mermaid.initialize({
startOnLoad:true
});
```

403
docs/content/usage.md
View File

@ -1,403 +0,0 @@
---
title: Usage
order: 1
---
# Usage
## Installation
Either use the npm or bower package managers as per below:
```
bower install mermaid --save-dev
```
```
npm install mermaid --save-dev
```
Or download a javascript bundle and a stylesheet, e.g. the urls below are for the default style and the all-in-one javascript - note that #version# should be replaced with version of choice:
```
https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.css
https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.min.js
```
Ex:
* [js version 6.0.0](https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.min.js)
Checkout the [latest version](https://github.com/knsv/mermaid/releases) and [other styles](https://github.com/knsv/mermaid/tree/master/dist) such as `forest` and `dark`.
There are some bundles to choose from:
* mermaid.js, mermaid.min.js This bundle contains all the javascript libraries you need to run mermaid
* mermaid.slim.js, mermaid.slim.min.js This bundle does not contain d3 which is useful for sites that already have d3 in place
* mermaidAPI.js, mermaidAPI.min.js, This bundle does not contain the web integration provided in the other packages but has a render function instead returns svg code.
** Important: **
> It's best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request.
Read more about that at [https://rawgit.com/](https://rawgit.com/)
## Simple usage on a web page
The easiest way to integrate mermaid on a web page requires two elements:
1. Inclusion of the mermaid framework in the html page using a script tag
2. A graph definition on the web page
If these things are in place mermaid listens to the page load event and when fires, when the page has loaded, it will
locate the graphs n the page and transform them to svg files.
### Include mermaid on your web page:
```html
<link rel="stylesheet" href="mermaid.css">
&lt;script src=&quot;mermaid.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;mermaid.initialize({startOnLoad:true});&lt;/script&gt;
```
Further down on your page mermaid will look for tags with ```class="mermaid"```. From these tags mermaid will try to
read the chart definiton which will be replaced with the svg chart.
### Define a chart like this:
```
&lt;div class=&quot;mermaid&quot;&gt;
CHART DEFINITION GOES HERE
&lt;/div&gt;
```
Would end up like this:
```
&lt;div class=&quot;mermaid&quot; id=&quot;mermaidChart0&quot;&gt;
&lt;svg&gt;
Chart ends up here
&lt;/svg&gt;
&lt;/div&gt;
```
An id is also added to mermaid tags without id.
### Simple full example:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Downloaded as per http://knsv.github.io/mermaid/#installation -->
<!-- Stored in the same directory as html file -->
<link rel="stylesheet" href="mermaid.css">
<!-- Optional to use fontawesome -->
<!-- Downloaded as per http://fontawesome.io/get-started/ -->
<!-- Stored in the same directory as html file -->
<script src="https://use.fontawesome.com/7065416dc9.js"></script>
</head>
<body>
<!-- Include mermaid on your web page: -->
<script src="mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<div class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
</body>
</html>
```
### Labels out of bounds
If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
whole page to have been loaded (dom + assets, particularly the fonts file).
$(document).load(function() {
mermaid.initialize();
});
over
$(document).ready(function() {
mermaid.initialize();
});
Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration
in mermaid uses the window.load event to start rendering.
### Calling **mermaid.init**
By default, **mermaid.init** will be called when the document is ready, finding all elements with
``class="mermaid"``. If you are adding content after mermaid is loaded, or otherwise need
finer-grained control of this behavior, you can call `init` yourself with:
- a configuration object
- some nodes, as
- a node
- an a array-like of nodes
- or W3C selector that will find your nodes
Example:
```
mermaid.init({noteMargin: 10}, ".someOtherClass");
```
Or with no config object, and a jQuery selection:
```
mermaid.init(undefined, $("#someId .yetAnotherClass"));
```
<aside class="warning">This type of integration is deprecated instead the preferred way of handling more complex integration is to us the mermaidAPI instead.</aside>
## Usage with browserify
The reader is assumed to know about CommonJS style of module handling and how to use browserify. If not a good place
to start would be http://browserify.org/ website.
Minimalistic javascript:
```
mermaid = require('mermaid');
console.log('Test page! mermaid version'+mermaid.version());
```
Bundle the javascript with browserify.
Us the created bundle on a web page as per example below:
```html
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;mermaid.css&quot; /&gt;
&lt;script src=&quot;bundle.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;mermaid&quot;&gt;
graph LR
A--&gt;B
B--&gt;C
C--&gt;A
D--&gt;C
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
```
## API usage
The main idea with the API is to be able to call a render function with graph defintion as a string. The render function
will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to
fetch the graph definition from the site, perhaps from a textarea, render it and place the graph somewhere in the site.
To do this, include mermaidAPI on your web website instead of mermaid.js. The example below show an outline of how this
could be used. The example just logs the resulting svg to the javascript console.
```
&lt;script src=&quot;mermaidAPI.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
mermaidAPI.initialize({
startOnLoad:false
});
$(function(){
// Example of using the API
var element = document.querySelector("#graphDiv");
var insertSvg = function(svgCode, bindFunctions){
element.innerHTML = svgCode;
};
var graphDefinition = 'graph TB\na-->b';
var graph = mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
});
&lt;/script&gt;
```
## Sample of API usage together with browserify
```
$ = require('jquery');
mermaidAPI = require('mermaid').mermaidAPI;
mermaidAPI.initialize({
startOnLoad:false
});
$(function(){
var graphDefinition = 'graph TB\na-->b';
var cb = function(html){
console.log(html);
}
mermaidAPI.render('id1',graphDefinition,cb);
});
```
### Binding events
Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must
add those events after the graph has been inserted into the DOM.
The example code below is an extract of wheat mermaid does when using the API. The example show how it is possible to
bind events to a svg when using the API for rendering.
```
var insertSvg = function(svgCode, bindFunctions){
element.innerHTML = svgCode;
if(typeof callback !== 'undefined'){
callback(id);
}
bindFunctions(element);
};
var id = 'theGraph';
mermaidAPI.render(id,txt,insertSvg, element);
```
1. The graph is generated using the render call.
2. After generation the render function calls the provided callback function, in this case its called insertSvg.
3. The callback function is called with two parameters, the svg code of the generated graph and a function. This
function binds events to the svg **after** it is inserted into the DOM.
4. Insert the svg code into the DOM for presentation
5. Call the binding function that bainds the events
## Example of a marked renderer
This is the renderer used for transforming the documentation from markdown to html with mermaid diagrams in the html.
```
var renderer = new marked.Renderer();
renderer.code = function (code, language) {
if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
return '&lt;div class="mermaid">'+code+'&lt;/div>';
}
else{
return '&lt;pre>&lt;code>'+code+'&lt;/code>&lt;/pre>';
}
};
```
Another example in coffeescript that also includes the mermaid script tag into the generated markup.
```
marked = require &#39;marked&#39;
module.exports = (options) -&gt;
hasMermaid = false
renderer = new marked.Renderer()
renderer.defaultCode = renderer.code
renderer.code = (code, language) -&gt;
if language is &#39;mermaid&#39;
html = &#39;&#39;
if not hasMermaid
hasMermaid = true
html += &#39;&amp;ltscript src=&quot;&#39;+options.mermaidPath+&#39;&quot;&gt;&lt;/script&gt;&#39;
html + &#39;&amp;ltdiv class=&quot;mermaid&quot;&gt;&#39;+code+&#39;&lt;/div&gt;&#39;
else
@defaultCode(code, language)
renderer
```
## Advanced usage
**Error handling**
When the parser encounters invalid syntax the **mermaid.parseError** function is called. It is possible to override this
function in order to handle the error in an application specific way.
**Parsing text without rendering**
It is also possible to validate the syntax before rendering in order to streamline the user experience. The function
**mermaid.parse(txt)** takes a text string as an argument and returns true if the text is syntactically correct and
false if it is not. The parseError function will be called when the parse function returns false.
The code-example below in meta code illustrates how this could work:
```js
mermaid.parseError = function(err,hash){
displayErrorInGui(err);
};
var textFieldUpdated = function(){
var textStr = getTextFromFormField('code');
if(mermaid.parse(textStr)){
reRender(textStr)
}
};
bindEventHandler('change', 'code', textFieldUpdated);
```
# Configuration
Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of
setting the options in mermaid.
1. Instantiation of the configuration using the initialize call
2. *Using the global mermaid object* - deprecated
3. *using the global mermaid_config object* - deprecated
4. Instantiation of the configuration using the **mermaid.init** call
The list above has two ways to many of doing this. Three are deprecated and will eventually be removed. The list of
configuration objects are described [in the mermaidAPI documentation](http://knsv.github.io/mermaid/index.html#configuration28).
## Using the mermaidAPI.initialize/mermaid.initialize call
The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPi depending
on what kind of integration you use.
```
&lt;script src=&quot;../dist/mermaid.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
var config = {
startOnLoad:true,
flowchart:{
useMaxWidth:false,
htmlLabels:true
}
};
mermaid.initialize(config);
&lt;/script&gt;
```
<aside class="success">This is the preferred way of configuring mermaid.</aside>
## Using the mermaid object
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are:
* mermaid.startOnLoad
* mermaid.htmlLabels
```
mermaid.startOnLoad = true;
```
<aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
## Using the mermaid_config
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are:
* mermaid_config.startOnLoad
* mermaid_config.htmlLabels
```
mermaid_config.startOnLoad = true;
```
<aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
## Using the mermaid.init call
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are:
* mermaid_config.startOnLoad
* mermaid_config.htmlLabels
```
mermaid_config.startOnLoad = true;
```
<aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>

BIN
docs/site/fonts/slate.eot
View File

Binary file not shown.

14
docs/site/fonts/slate.svg
View File

@ -1,14 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="slate" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
<glyph unicode="&#xe600;" d="M438.857 877.714q119.429 0 220.286-58.857t159.714-159.714 58.857-220.286-58.857-220.286-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857zM512 165.143v108.571q0 8-5.143 13.429t-12.571 5.429h-109.714q-7.429 0-13.143-5.714t-5.714-13.143v-108.571q0-7.429 5.714-13.143t13.143-5.714h109.714q7.429 0 12.571 5.429t5.143 13.429zM510.857 361.714l10.286 354.857q0 6.857-5.714 10.286-5.714 4.571-13.714 4.571h-125.714q-8 0-13.714-4.571-5.714-3.429-5.714-10.286l9.714-354.857q0-5.714 5.714-10t13.714-4.286h105.714q8 0 13.429 4.286t6 10z" />
<glyph unicode="&#xe602;" d="M585.143 164.571v91.429q0 8-5.143 13.143t-13.143 5.143h-54.857v292.571q0 8-5.143 13.143t-13.143 5.143h-182.857q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h54.857v-182.857h-54.857q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h256q8 0 13.143 5.143t5.143 13.143zM512 676.571v91.429q0 8-5.143 13.143t-13.143 5.143h-109.714q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
<glyph unicode="&#xe606;" d="M733.714 531.428q0 16-10.286 26.286l-52 51.429q-10.857 10.857-25.714 10.857t-25.714-10.857l-233.143-232.571-129.143 129.143q-10.857 10.857-25.714 10.857t-25.714-10.857l-52-51.429q-10.286-10.286-10.286-26.286 0-15.429 10.286-25.714l206.857-206.857q10.857-10.857 25.714-10.857 15.429 0 26.286 10.857l310.286 310.286q10.286 10.286 10.286 25.714zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
<glyph unicode="&#xe607;" d="M658.286 475.428q0 105.714-75.143 180.857t-180.857 75.143-180.857-75.143-75.143-180.857 75.143-180.857 180.857-75.143 180.857 75.143 75.143 180.857zM950.857 0q0-29.714-21.714-51.429t-51.429-21.714q-30.857 0-51.429 21.714l-196 195.429q-102.286-70.857-228-70.857-81.714 0-156.286 31.714t-128.571 85.714-85.714 128.571-31.714 156.286 31.714 156.286 85.714 128.571 128.571 85.714 156.286 31.714 156.286-31.714 128.571-85.714 85.714-128.571 31.714-156.286q0-125.714-70.857-228l196-196q21.143-21.143 21.143-51.429z" horiz-adv-x="951" />
</font></defs></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
docs/site/fonts/slate.ttf
View File

Binary file not shown.

BIN
docs/site/fonts/slate.woff
View File

Binary file not shown.

BIN
docs/site/fonts/slate.woff2
View File

Binary file not shown.

BIN
docs/site/images/header.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 69 KiB

BIN
docs/site/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
docs/site/images/logo.psd
View File

Binary file not shown.

BIN
docs/site/images/navbar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 96 B

146
docs/site/javascripts/all.js
View File

File diff suppressed because one or more lines are too long

44
docs/site/javascripts/all_nosearch.js
View File

File diff suppressed because one or more lines are too long

2
docs/site/javascripts/highlight.pack.js
View File

File diff suppressed because one or more lines are too long

1
docs/site/stylesheets/mermaid.forest.css
View File

@ -1 +0,0 @@
.mermaid .label{font-family:'trebuchet ms', verdana, arial;color:#333333}.node rect,.node circle,.node polygon{fill:#cde498;stroke:#13540c;stroke-width:1px}.edgePath .path{stroke:green;stroke-width:1.5px}.cluster rect{fill:#cdffb2 !important;rx:4 !important;stroke:#6eaa49 !important;stroke-width:1px !important}.cluster text{fill:#333333}.actor{stroke:#13540c;fill:#cde498}text.actor{fill:black;stroke:none}.actor-line{stroke:grey}.messageLine0{stroke-width:1.5;stroke-dasharray:"2 2";marker-end:"url(#arrowhead)";stroke:#333333}.messageLine1{stroke-width:1.5;stroke-dasharray:"2 2";stroke:#333333}#arrowhead{fill:#333333}#crosshead path{fill:#333333 !important;stroke:#333333 !important}.messageText{fill:#333333;stroke:none}.labelBox{stroke:#326932;fill:#cde498}.labelText{fill:black;stroke:none}.loopText{fill:black;stroke:none}.loopLine{stroke-width:2;stroke-dasharray:"2 2";marker-end:"url(#arrowhead)";stroke:#326932}.note{stroke:#6eaa49;fill:#fff5ad}.noteText{fill:black;stroke:none;font-family:'trebuchet ms', verdana, arial;font-size:14px}.section{stroke:none;opacity:0.2}.section0{fill:#6eaa49}.section2{fill:#6eaa49}.section1,.section3{fill:white;opacity:0.2}.sectionTitle0{fill:#333333}.sectionTitle1{fill:#333333}.sectionTitle2{fill:#333333}.sectionTitle3{fill:#333333}.sectionTitle{text-anchor:start;font-size:11px;text-height:14px}.grid .tick{stroke:lightgrey;opacity:0.3;shape-rendering:crispEdges}.grid path{stroke-width:0}.today{fill:none;stroke:red;stroke-width:2px}.task{stroke-width:2}.taskText{text-anchor:middle;font-size:11px}.taskTextOutsideRight{fill:black;text-anchor:start;font-size:11px}.taskTextOutsideLeft{fill:black;text-anchor:end;font-size:11px}.taskText0,.taskText1,.taskText2,.taskText3{fill:white}.task0,.task1,.task2,.task3{fill:#487e3a;stroke:#13540c}.taskTextOutside0,.taskTextOutside2{fill:black}.taskTextOutside1,.taskTextOutside3{fill:black}.active0,.active1,.active2,.active3{fill:#cde498;stroke:#13540c}.activeText0,.activeText1,.activeText2,.activeText3{fill:black !important}.done0,.done1,.done2,.done3{stroke:grey;fill:lightgrey;stroke-width:2}.doneText0,.doneText1,.doneText2,.doneText3{fill:black !important}.crit0,.crit1,.crit2,.crit3{stroke:#ff8888;fill:red;stroke-width:2}.activeCrit0,.activeCrit1,.activeCrit2,.activeCrit3{stroke:#ff8888;fill:#cde498;stroke-width:2}.doneCrit0,.doneCrit1,.doneCrit2,.doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}.doneCritText0,.doneCritText1,.doneCritText2,.doneCritText3{fill:black !important}.activeCritText0,.activeCritText1,.activeCritText2,.activeCritText3{fill:black !important}.titleText{text-anchor:middle;font-size:18px;fill:black}text{font-family:'trebuchet ms', verdana, arial;font-size:14px}

69
docs/site/stylesheets/mono-blue.css
View File

@ -1,69 +0,0 @@
/*
Five-color theme from a single blue hue.
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #eaeef3;
-webkit-text-size-adjust: none;
}
.hljs,
.hljs-list .hljs-built_in {
color: #00193a;
}
.hljs-keyword,
.hljs-title,
.hljs-important,
.hljs-request,
.hljs-header,
.hljs-javadoctag {
font-weight: bold;
}
.hljs-comment,
.hljs-chunk {
color: #738191;
}
.hljs-string,
.hljs-title,
.hljs-parent,
.hljs-built_in,
.hljs-literal,
.hljs-filename,
.hljs-value,
.hljs-addition,
.hljs-tag,
.hljs-argument,
.hljs-link_label,
.hljs-blockquote,
.hljs-header {
color: #0048ab;
}
.hljs-decorator,
.hljs-prompt,
.hljs-yardoctag,
.hljs-subst,
.hljs-symbol,
.hljs-doctype,
.hljs-regexp,
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-attribute,
.hljs-attr_selector,
.hljs-javadoc,
.hljs-xmlDocTag,
.hljs-deletion,
.hljs-shebang,
.hljs-string .hljs-variable,
.hljs-link_url,
.hljs-bullet,
.hljs-sqbracket,
.hljs-phony {
color: #4c81c9;
}

261
docs/site/stylesheets/print.css
View File

@ -1,261 +0,0 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html
{
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body { margin: 0; }
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary { display: block; }
audio,canvas,progress,video
{
display: inline-block;
vertical-align: baseline;
}
audio:not([controls])
{
display: none;
height: 0;
}
[hidden],template { display: none; }
a { background-color: transparent; }
a:active,a:hover { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b,strong { font-weight: bold; }
dfn { font-style: italic; }
h1
{
font-size: 2em;
margin: 0.67em 0;
}
mark
{
background: #ff0;
color: #000;
}
small { font-size: 80%; }
sub,sup
{
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 1em 40px; }
hr
{
box-sizing: content-box;
height: 0;
}
pre { overflow: auto; }
code,kbd,pre,samp
{
font-family: monospace, monospace;
font-size: 1em;
}
button,input,optgroup,select,textarea
{
color: inherit;
font: inherit;
margin: 0;
}
button { overflow: visible; }
button,select { text-transform: none; }
button,html input[type="button"],input[type="reset"],input[type="submit"]
{
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],html input[disabled] { cursor: default; }
button::-moz-focus-inner,input::-moz-focus-inner
{
border: 0;
padding: 0;
}
input { line-height: normal; }
input[type="checkbox"],input[type="radio"]
{
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"]
{
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
fieldset
{
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend
{
border: 0;
padding: 0;
}
textarea { overflow: auto; }
optgroup { font-weight: bold; }
table
{
border-collapse: collapse;
border-spacing: 0;
}
td,th { padding: 0; }
.content h1,.content h2,.content h3,.content h4,body
{
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
font-size: 13px;
}
.content h1,.content h2,.content h3,.content h4 { font-weight: bold; }
.content pre,.content code
{
font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
font-size: 12px;
line-height: 1.5;
}
.content pre,.content code
{
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
@font-face{font-family:'slate';src:url("../fonts/slate.eot?-syv14m");src:url("../fonts/slate.eot?#iefix-syv14m") format("embedded-opentype"),url("../fonts/slate.woff2?-syv14m") format("woff2"),url("../fonts/slate.woff?-syv14m") format("woff"),url("../fonts/slate.ttf?-syv14m") format("truetype"),url("../fonts/slate.svg?-syv14m#slate") format("svg");font-weight:normal;font-style:normal}
.content aside.warning:before,.content aside.notice:before,.content aside.success:before
{
font-family: 'slate';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.content aside.warning:before { content: "\e600"; }
.content aside.notice:before { content: "\e602"; }
.content aside.success:before { content: "\e606"; }
.tocify,.toc-footer,.lang-selector,.search,#nav-button { display: none; }
.tocify-wrapper>img
{
margin: 0 auto;
display: block;
}
.content { font-size: 12px; }
.content pre,.content code
{
border: 1px solid #999;
border-radius: 5px;
font-size: 0.8em;
}
.content pre { padding: 1.3em; }
.content code { padding: 0.2em; }
.content table { border: 1px solid #999; }
.content table tr { border-bottom: 1px solid #999; }
.content table td,.content table th { padding: 0.7em; }
.content p { line-height: 1.5; }
.content a
{
text-decoration: none;
color: #000;
}
.content h1
{
font-size: 2.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
margin-top: 1em;
margin-bottom: 21px;
border: 2px solid #ccc;
border-width: 2px 0;
text-align: center;
}
.content h2
{
font-size: 1.8em;
margin-top: 2em;
border-top: 2px solid #ccc;
padding-top: 0.8em;
}
.content h1+h2,.content h1+div+h2
{
border-top: none;
padding-top: 0;
margin-top: 0;
}
.content h3,.content h4
{
font-size: 0.8em;
margin-top: 1.5em;
margin-bottom: 0.8em;
text-transform: uppercase;
}
.content h5,.content h6 { text-transform: uppercase; }
.content aside
{
padding: 1em;
border: 1px solid #ccc;
border-radius: 5px;
margin-top: 1.5em;
margin-bottom: 1.5em;
line-height: 1.6;
}
.content aside:before
{
vertical-align: middle;
padding-right: 0.5em;
font-size: 14px;
}

908
docs/site/stylesheets/screen.css
View File

@ -1,908 +0,0 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block
}
audio, canvas, progress, video {
display: inline-block;
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden], template {
display: none
}
a {
background-color: transparent
}
a:active, a:hover {
outline: 0
}
abbr[title] {
border-bottom: 1px dotted
}
b, strong {
font-weight: bold
}
dfn {
font-style: italic
}
h1 {
font-size: 2em;
margin: 0.67em 0
}
mark {
background: #ff0;
color: #000
}
small {
font-size: 80%
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -0.5em
}
sub {
bottom: -0.25em
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code, kbd, pre, samp {
font-family: monospace, monospace;
font-size: 1em
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button, select {
text-transform: none
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled], html input[disabled] {
cursor: default
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
height: auto
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em
}
legend {
border: 0;
padding: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: bold
}
table {
border-collapse: collapse;
border-spacing: 0
}
td, th {
padding: 0
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6, html, body {
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
font-size: 13px
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
font-weight: bold
}
.content code, .content pre {
font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
font-size: 12px;
line-height: 1.5
}
.content code {
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto
}
.highlight table td {
padding: 5px
}
.highlight table pre {
margin: 0
}
.highlight, .highlight .w {
color: #f8f8f2;
background-color: #272822
}
.highlight .err {
color: #151515;
background-color: #ac4142
}
.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {
color: #505050
}
.highlight .cp {
color: #f4bf75
}
.highlight .nt {
color: #f4bf75
}
.highlight .o, .highlight .ow {
color: #d0d0d0
}
.highlight .p, .highlight .pi {
color: #d0d0d0
}
.highlight .gi {
color: #90a959
}
.highlight .gd {
color: #ac4142
}
.highlight .gh {
color: #6a9fb5;
background-color: #151515;
font-weight: bold
}
.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
color: #aa759f
}
.highlight .kc {
color: #d28445
}
.highlight .kt {
color: #d28445
}
.highlight .kd {
color: #d28445
}
.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
color: #90a959
}
.highlight .sr {
color: #75b5aa
}
.highlight .si {
color: #8f5536
}
.highlight .se {
color: #8f5536
}
.highlight .nn {
color: #f4bf75
}
.highlight .nc {
color: #f4bf75
}
.highlight .no {
color: #f4bf75
}
.highlight .na {
color: #6a9fb5
}
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx {
color: #90a959
}
.highlight .ss {
color: #90a959
}
.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs {
color: #909090
}
.highlight, .highlight .w {
background-color: #292929
}
@font-face {
font-family: 'slate';
src: url("../fonts/slate.eot?-syv14m");
src: url("../fonts/slate.eot?#iefix-syv14m") format("embedded-opentype"), url("../fonts/slate.woff2?-syv14m") format("woff2"), url("../fonts/slate.woff?-syv14m") format("woff"), url("../fonts/slate.ttf?-syv14m") format("truetype"), url("../fonts/slate.svg?-syv14m#slate") format("svg");
font-weight: normal;
font-style: normal
}
.content aside.warning:before, .content aside.notice:before, .content aside.success:before, .tocify-wrapper > .search:before {
font-family: 'slate';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1
}
.content aside.warning:before {
content: "\e600"
}
.content aside.notice:before {
content: "\e602"
}
.content aside.success:before {
content: "\e606"
}
.tocify-wrapper > .search:before {
content: "\e607"
}
html, body {
color: #333;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #ffffff;
height: 100%;
-webkit-text-size-adjust: none
}
#toc > ul > li > a > span {
float: right;
background-color: #2484FF;
border-radius: 40px;
width: 20px
}
.tocify-wrapper {
transition: left 0.3s ease-in-out;
overflow-y: auto;
overflow-x: hidden;
position: fixed;
z-index: 30;
top: 0;
left: 0;
bottom: 0;
width: 230px;
background-color: #FEFFE0;
border-right: 2px solid #EFEFEF;
font-size: 13px;
font-weight: bold
}
.tocify-wrapper .lang-selector {
display: none
}
.tocify-wrapper .lang-selector a {
padding-top: 0.5em;
padding-bottom: 0.5em
}
.tocify-wrapper > img {
display: block
}
.tocify-wrapper > .search {
position: relative
}
.tocify-wrapper > .search input {
background: #e7e7e7;
border-width: 0 0 1px 0;
border-color: #666;
padding: 6px 0 6px 20px;
box-sizing: border-box;
margin: 10px 15px;
width: 200px;
outline: none;
color: #000;
border-radius: 0
}
.tocify-wrapper > .search:before {
position: absolute;
top: 17px;
left: 15px;
color: #444
}
.tocify-wrapper img + .tocify {
margin-top: 20px
}
.tocify-wrapper .search-results {
margin-top: 0;
box-sizing: border-box;
height: 0;
overflow-y: auto;
overflow-x: hidden;
transition-property: height, margin;
transition-duration: 180ms;
transition-timing-function: ease-in-out;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to bottom, #000, transparent 1.5px), linear-gradient(to top, #939393, rgba(147, 147, 147, 0) 1.5px), #FEFFE0
}
.tocify-wrapper .search-results.visible {
height: 30%;
margin-bottom: 1em
}
.tocify-wrapper .search-results li {
margin: 1em 15px;
line-height: 1
}
.tocify-wrapper .search-results a {
color: #000;
text-decoration: none
}
.tocify-wrapper .search-results a:hover {
text-decoration: underline
}
.tocify-wrapper .tocify-item > a, .tocify-wrapper .toc-footer li {
padding: 0 15px 0 15px;
display: block;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.tocify-wrapper ul, .tocify-wrapper li {
list-style: none;
margin: 0;
padding: 0;
line-height: 28px
}
.tocify-wrapper li {
color: #383838;
transition-property: background;
transition-timing-function: linear;
transition-duration: 230ms
}
.tocify-wrapper .tocify-focus {
box-shadow: 0px 1px 0px #000;
background-color: #2467af;
color: #fff
}
.tocify-wrapper .tocify-subheader {
display: none;
background-color: #FFFFF7;
font-weight: 500;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to bottom, #000, transparent 1.5px), linear-gradient(to top, #939393, rgba(147, 147, 147, 0) 1.5px), #FEFFE0
}
.tocify-wrapper .tocify-subheader .tocify-item > a {
padding-left: 25px;
font-size: 12px
}
.tocify-wrapper .tocify-subheader > li:last-child {
box-shadow: none
}
.tocify-wrapper .toc-footer {
padding: 1em 0;
margin-top: 1em;
border-top: 1px dashed #666
}
.tocify-wrapper .toc-footer li, .tocify-wrapper .toc-footer a {
color: #fff;
text-decoration: none
}
.tocify-wrapper .toc-footer a:hover {
text-decoration: underline
}
.tocify-wrapper .toc-footer li {
font-size: 0.8em;
line-height: 1.7;
text-decoration: none
}
#nav-button {
padding: 0 1.5em 5em 0;
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 100;
color: #000;
text-decoration: none;
font-weight: bold;
opacity: 0.7;
line-height: 16px;
transition: left 0.3s ease-in-out
}
#nav-button span {
display: block;
padding: 6px 6px 6px;
background-color: rgba(234, 242, 246, 0.7);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(-90deg) translate(-100%, 0);
transform: rotate(-90deg) translate(-100%, 0);
border-radius: 0 0 0 5px
}
#nav-button img {
height: 16px;
vertical-align: bottom
}
#nav-button:hover {
opacity: 1
}
#nav-button.open {
left: 230px
}
.page-wrapper {
margin-left: 230px;
position: relative;
z-index: 10;
background-color: #eaf2f6;
min-height: 100%;
padding-bottom: 1px
}
.page-wrapper .dark-box {
width: 50%;
background-color: #393939;
position: absolute;
right: 0;
top: 0;
bottom: 0
}
.page-wrapper .lang-selector {
position: fixed;
z-index: 50;
border-bottom: 5px solid #393939
}
.lang-selector {
background-color: #222;
width: 100%;
font-weight: bold
}
.lang-selector a {
display: block;
float: left;
color: #fff;
text-decoration: none;
padding: 0 10px;
line-height: 30px;
outline: 0
}
.lang-selector a:active, .lang-selector a:focus {
background-color: #111;
color: #fff
}
.lang-selector a.active {
background-color: #393939;
color: #fff
}
.lang-selector:after {
content: '';
clear: both;
display: block
}
.content {
position: relative;
z-index: 30
}
.content:after {
content: '';
display: block;
clear: both
}
.content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6, .content > p, .content > table, .content > ul, .content > ol, .content > aside, .content > dl {
margin-right: 50%;
padding: 0 28px;
box-sizing: border-box;
display: block;
}
.content > ul, .content > ol {
padding-left: 43px
}
.content > h1, .content > h2, .content > div {
clear: both
}
.content h1 {
font-size: 30px;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
margin-bottom: 21px;
margin-top: 2em;
border-top: 1px solid #ddd;
background-image: linear-gradient(to bottom, #fff, #f9f9f9)
}
.content h1:first-child, .content div:first-child + h1 {
border-top-width: 0;
margin-top: 0
}
.content h2 {
font-size: 20px;
margin-top: 4em;
margin-bottom: 0;
border-top: 1px solid #ccc;
padding-top: 1.2em;
padding-bottom: 1.2em;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0))
}
.content h1 + h2, .content h1 + div + h2 {
margin-top: -21px;
border-top: none
}
.content h3, .content h4, .content h5, .content h6 {
font-size: 15px;
margin-top: 2.5em;
margin-bottom: 0.8em
}
.content h4, .content h5, .content h6 {
font-size: 10px
}
.content hr {
margin: 2em 0;
border-top: 2px solid #393939;
border-bottom: 2px solid #eaf2f6
}
.content table {
margin-bottom: 1em;
overflow: auto
}
.content table th, .content table td {
text-align: left;
vertical-align: top;
line-height: 1.6
}
.content table th {
padding: 5px 10px;
border-bottom: 1px solid #ccc;
vertical-align: bottom
}
.content table td {
padding: 10px
}
.content table tr:last-child {
border-bottom: 1px solid #ccc
}
.content table tr:nth-child(odd) > td {
background-color: #f9fbfc
}
.content table tr:nth-child(even) > td {
background-color: #f3f7fa
}
.content dt {
font-weight: bold
}
.content dd {
margin-left: 15px
}
.content p, .content li, .content dt, .content dd {
line-height: 1.6;
margin-top: 0
}
.content img {
max-width: 100%
}
.content code {
background-color: rgba(0, 0, 0, 0.05);
padding: 3px;
border-radius: 3px
}
.content pre > code {
background-color: transparent;
padding: 0
}
.content aside {
padding-top: 1em;
padding-bottom: 1em;
margin-top: 1.5em;
margin-bottom: 1.5em;
background: #8fbcd4;
line-height: 1.6
}
.content aside.warning {
background-color: #c97a7e;
}
.content aside.success {
background-color: #6ac174;
}
.content aside:before {
vertical-align: middle;
padding-right: 0.5em;
font-size: 14px
}
.content .search-highlight {
padding: 2px;
margin: -2px;
border-radius: 4px;
border: 1px solid #F7E633;
background: linear-gradient(to top left, #f7e633 0%, #f1d32f 100%)
}
.content pre, .content blockquote {
/*background-color: #292929;*/
background-color: #FBF8EF;
color: #fff;
padding: 2em 28px;
margin: 0;
width: 50%;
float: right;
clear: right;
box-sizing: border-box;
}
.content pre > p, .content blockquote > p {
margin: 0
}
.content pre a, .content blockquote a {
color: #fff;
text-decoration: none;
border-bottom: dashed 1px #ccc
}
.content blockquote > p {
background-color: #eee;
border-radius: 0px;
padding: 13px;
color: #000;
border-left: 4px solid #f0ad4e;
/*background-color: #eee;*/
/*border-radius: 5px;*/
/*padding: 13px;*/
/*color: #ccc;*/
/*border-top: 1px solid #000;*/
/*border-bottom: 1px solid #404040*/
}
@media (max-width: 930px) {
.tocify-wrapper {
left: -230px
}
.tocify-wrapper.open {
left: 0
}
.page-wrapper {
margin-left: 0
}
#nav-button {
display: block
}
.tocify-wrapper .tocify-item > a {
padding-top: 0.3em;
padding-bottom: 0.3em
}
}
/*@media (max-width: 700px) {*/
.dark-box {
display: none
}
.content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6, .content > p, .content > table, .content > ul, .content > ol, .content > aside, .content > dl {
margin-right: 0
}
.tocify-wrapper .lang-selector {
display: block
}
.page-wrapper .lang-selector {
display: none
}
.content pre, .content blockquote {
width: auto;
float: none
}
.content > pre + h1, .content > blockquote + h1, .content > pre + h2, .content > blockquote + h2, .content > pre + h3, .content > blockquote + h3, .content > pre + h4, .content > blockquote + h4, .content > pre + h5, .content > blockquote + h5, .content > pre + h6, .content > blockquote + h6, .content > pre + p, .content > blockquote + p, .content > pre + table, .content > blockquote + table, .content > pre + ul, .content > blockquote + ul, .content > pre + ol, .content > blockquote + ol, .content > pre + aside, .content > blockquote + aside, .content > pre + dl, .content > blockquote + dl {
margin-top: 28px
}
/*}*/
.content code, .content pre {
font-size: 12px;
/*-webkit-box-shadow: 0 0 0 3px #eee;*/
/*box-shadow: 0 0 0 3px #eee;*/
overflow: auto !important;
margin-bottom: 0;
padding: 10px;
background-color: #fff;
color: #4d4d4c;
margin-bottom: 0;
}
.content pre {
border-radius: 3px;
}
.content pre {
-webkit-box-shadow: 0 0 0 3px #eee;
box-shadow: 0 0 0 3px #eee;
width:900px;
margin-left:auto;
margin-right:auto;
background: #FBF8EF;
}
svg {
margin-left:auto;
margin-right:auto;
}
.content {
background: #FFF;
}

107
docs/site/stylesheets/solarized_light.css
View File

@ -1,107 +0,0 @@
/*
Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #fdf6e3;
color: #657b83;
-webkit-text-size-adjust: none;
}
.hljs-comment,
.diff .hljs-header,
.hljs-doctype,
.hljs-pi,
.lisp .hljs-string {
color: #93a1a1;
}
/* Solarized Green */
.hljs-keyword,
.hljs-winutils,
.method,
.hljs-addition,
.css .hljs-tag,
.hljs-request,
.hljs-status,
.nginx .hljs-title {
color: #859900;
}
/* Solarized Cyan */
.hljs-number,
.hljs-command,
.hljs-string,
.hljs-tag .hljs-value,
.hljs-rule .hljs-value,
.hljs-doctag,
.tex .hljs-formula,
.hljs-regexp,
.hljs-hexcolor,
.hljs-link_url {
color: #2aa198;
}
/* Solarized Blue */
.hljs-title,
.hljs-localvars,
.hljs-chunk,
.hljs-decorator,
.hljs-built_in,
.hljs-identifier,
.vhdl .hljs-literal,
.hljs-id,
.css .hljs-function,
.hljs-name {
color: #268bd2;
}
/* Solarized Yellow */
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body,
.smalltalk .hljs-number,
.hljs-constant,
.hljs-class .hljs-title,
.hljs-parent,
.hljs-type,
.hljs-link_reference {
color: #b58900;
}
/* Solarized Orange */
.hljs-preprocessor,
.hljs-preprocessor .hljs-keyword,
.hljs-pragma,
.hljs-shebang,
.hljs-symbol,
.hljs-symbol .hljs-string,
.diff .hljs-change,
.hljs-special,
.hljs-attr_selector,
.hljs-subst,
.hljs-cdata,
.css .hljs-pseudo,
.hljs-header {
color: #cb4b16;
}
/* Solarized Red */
.hljs-deletion,
.hljs-important {
color: #dc322f;
}
/* Solarized Violet */
.hljs-link_label {
color: #6c71c4;
}
.tex .hljs-formula {
background: #eee8d5;
}

107
docs/tpl/slate.html
View File

@ -1,107 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
<link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
<link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
<link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="javascripts/lib/mermaid.js"></script>
<script src="javascripts/all.js" type="text/javascript"></script>
<script src="javascripts/highlight.pack.js" type="text/javascript"></script>
<script>
var g = function (hljs) {
var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
var keyw = {
keyword: 'graph sequenceDiagram participant loop end',
typename: 'Note',
literal: "false true left right"
};
return {
case_insensitive: false,
aliases: ["mermaid"],
k: keyw,
i: 'for',
c: [{
cN: "function",
b: "^" + r + "\\s*\\(",
e: "->",
rB: !0,
i: "\\(|#|//|/\\*|\\\\|:|;",
starts: {
e: ";|\\.", k: keyw, c: [
{cN: "comment", b: "%", e: "$"}
]
}
},
{cN: "comment", b: "%", e: "$"}
]
};
};
hljs.registerLanguage('mermaid', g);
hljs.initHighlightingOnLoad();
$(function () {
setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
});
var callback = function(){
alert('A callback was triggered');
}
</script>
</head>
<body class="index">
<a href="#" id="nav-button">
<span>
NAV
<img src="images/navbar.png"/>
</span>
</a>
<div class="tocify-wrapper">
<img src="images/logo.png"/>
<div class="lang-selector" style="display:none">
<a href="#" data-language-name="shell">shell</a>
<a href="#" data-language-name="javascript">javascript</a>
<a href="#" data-language-name="html">html</a>
<a href="#" data-language-name="css">css</a>
</div>
<div class="search">
<input type="text" class="search" id="input-search" placeholder="Search">
</div>
<ul class="search-results"></ul>
<div id="toc">
</div>
<ul class="toc-footer">
<div style="margin-left:5px;">
<a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
<a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
<a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
</div>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
<li><a href='http://github.com/tripit/slate' style="color:grey">Documentation Powered by Slate</a></li>
</ul>
</div>
<div class="page-wrapper">
<div class="dark-box"></div>
<div class="content">
{{{contents}}}
</div>
<div class="dark-box">
<div class="lang-selector">
<a href="#" data-language-name="shell">shell</a>
<a href="#" data-language-name="ruby">ruby</a>
<a href="#" data-language-name="python">python</a>
</div>
</div>
</div>
</body>
</html>

135
gulp/tasks/doc.js
View File

@ -1,135 +0,0 @@
var gulp = require('gulp')
var vartree = require('gulp-vartree')
var gmarked = require('gulp-marked')
var concat = require('gulp-concat')
var frontMatter = require('gulp-front-matter')
var hogan = require('hogan.js')
var es = require('event-stream')
var fs = require('fs')
// Compile a template for rendering each page
var template = hogan.compile(String(fs.readFileSync('docs/tpl/slate.html')))
var root = {}
var filelist = []
var iterator = function (obj) {
var i
for (i = 0; i < obj.childs.length; i++) {
var item = obj.childs[i]
if (item.folder) {
iterator(item)
} else {
console.log(item.path + item.name)
filelist.push('build/www' + '/' + item.path + item.name + '.html')
}
}
}
var renderer = {
code: function (code, language) {
if (language === 'mermaid') {
return '<div class="mermaid">' + code + '</div>'
} else {
language = 'css'
return '<pre class="' + language + '"><code>' + code + '</code></pre>'
}
}
}
var filelog = require('gulp-filelog')
gulp.task('vartree', ['dox', 'copyContent', 'copySite'], function () {
gulp.src(['build/content/**/*.md'])
.pipe(filelog())
.pipe(frontMatter({
property: 'order' // will put metadata in the file.meta property
}))
.pipe(vartree({
root: root, // the root in which the vartree will be put
prop: 'order', // metadata property to collect
sortProp: 'order',
parent: 'parent' // keep a ref to the parent scope in the file.parent property
}))
.pipe(gmarked({
renderer: renderer,
sanitize: false
})) // Do whatever you want with the files later
.pipe(gulp.dest('build/www')).on('end', function () {
iterator(root)
gulp.src(filelist)
.pipe(concat('all.html'))
.pipe(gulp.dest('./build/www')).on('end', function () {
filelist.push('build/www' + '/all.html')
gulp.src(filelist)
.pipe(filelog('html files'))
// Run each file through a template
.pipe(es.map(function (file, cb) {
file.contents = Buffer.from(template.render(file))
cb(null, file)
}))
// Output to build directory
.pipe(gulp.dest('./dist/www'))
})
})
})
var dox = require('gulp-dox')
var map = require('map-stream')
var extReplace = require('gulp-ext-replace')
gulp.task('dox', function () {
return gulp.src(['./src/**/mermaidAPI.js'])
.pipe(filelog())
.pipe(dox({
'raw': true
}))
.pipe(map(function (file, done) {
var json = JSON.parse(file.contents.toString())
var i
var str = ''
for (i = 0; i < json.length; i++) {
str = str + json[i].description.full + '\n'
}
file.contents = Buffer.from(str)
done(null, file)
}))
.pipe(extReplace('.md'))
.pipe(gulp.dest('./build/content'))
})
gulp.task('copyContent', function () {
return gulp.src(['./docs/content/**/*.md'])
.pipe(gulp.dest('./build/content'))
})
gulp.task('copyContent', function () {
return gulp.src(['./docs/content/**/*.md'])
.pipe(gulp.dest('./build/content'))
})
gulp.task('copySite', function () {
gulp.src(['./dist/mermaid.js'])
.pipe(filelog())
.pipe(gulp.dest('./dist/www/javascripts/lib'))
gulp.src(['./docs/site/**/*.css'])
.pipe(filelog())
.pipe(gulp.dest('./dist/www'))
gulp.src(['./docs/site/**/*.eot'])
.pipe(gulp.dest('./dist/www'))
gulp.src(['./docs/site/**/*.svg'])
.pipe(gulp.dest('./dist/www'))
gulp.src(['./docs/site/**/*.png'])
.pipe(gulp.dest('./dist/www'))
gulp.src(['./docs/site/**/*.jpg'])
.pipe(gulp.dest('./dist/www'))
gulp.src(['./docs/site/**/*.ttf'])
.pipe(gulp.dest('./dist/www'))
gulp.src(['./docs/site/**/*.woff'])
.pipe(gulp.dest('./dist/www'))
gulp.src(['./docs/site/**/*.woff2'])
.pipe(gulp.dest('./dist/www'))
return gulp.src(['./docs/site/**/*.js'])
.pipe(gulp.dest('./dist/www'))
})

0
docs/img/class-diagram.png → img/class-diagram.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

0
docs/img/gitgraph.mm.png → img/gitgraph.mm.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

0
docs/img/header.png → img/header.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 69 KiB

2
package.json
View File

@ -27,7 +27,6 @@
"live": "live-server ./test/examples",
"jison": "gulp jison_legacy",
"live_server": "gulp live-server",
"doc": "rm -r build;rm -r dist/www;gulp vartree;cp dist/www/all.html ../mermaid-pages/index.html;cp dist/mermaid.js ../mermaid-pages/javascripts/lib;cp dist/mermaid.forest.css ../mermaid-pages/stylesheets",
"pretest": "yarn lint",
"prepublishOnly": "yarn build && yarn dist && yarn test"
},
@ -41,7 +40,6 @@
"ignore": [
"**/parser/*.js",
"dist/**/*.js",
"docs/**/*.js",
"editor/**/*.js"
]
},

5
scripts/genDocs.sh
View File

@ -1,5 +0,0 @@
ulimit -n 1200
rm -r htmlDocs
mkdir htmlDocs
cp -r ./docs/img htmlDocs
../docker/docker -i ../mermaid/ -c emacs -x "*git*|*travis*|*bin*|*dist*|*node_modules*|*gulp*|*lib*|*editor*|*conf*|*scripts*|*test*|*htmlDocs*" --extras mermaid -w -o htmlDocs

2
todo.md
View File

@ -4,7 +4,6 @@
- Make node console output colors like Chrome console
- Don't version control generated content, move them to outside project
- editor
- docs
- What's the correct way to change logLevel as an end user?
- d3 v3 doesn't support 'use strict'
- babel-plugin-transform-remove-strict-mode
@ -13,7 +12,6 @@
- Fix CodeClimate
- What is live-server ?
- Get familar with jison
- How to generate doc?
- webpack warning: lodash too big
- add converalls
- git graph requires a blank line at the end. why?