marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-26 16:34:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use monaco-mermaid for syntax highlighting and many syntax highlighting improvements

Browse Source
This commit is contained in:
Yash-Singh1
2021-10-31 14:45:41 -07:00
parent 66d4d9d5b8
commit 1b7e690ec1
19 changed files with 356 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/8.6.0_docs.md
View File

@@ -73,7 +73,7 @@ When deployed within code, init is called before the graph/diagram description.
``` ```
**for example**: **for example**:
``` ```mermaid-code
%%{init: {"theme": "default", "logLevel": 1 }}%% %%{init: {"theme": "default", "logLevel": 1 }}%%
graph LR graph LR
a-->b a-->b

4
docs/CHANGELOG.md
View File

@@ -39,7 +39,7 @@ It is also possible to override site-wide theme settings locally, for a specific
**Following is an example:** **Following is an example:**
``` ```mermaid-code
%%{init: {'theme':'base'}}%% %%{init: {'theme':'base'}}%%
graph TD graph TD
a --> b a --> b
@@ -56,7 +56,7 @@ The easiest way to make a custom theme is to start with the base theme, and just
Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`. Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
``` ```mermaid-code
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)

24
docs/README.md
View File

@@ -48,7 +48,7 @@ For a more detailed introduction to Mermaid and some of it's basic uses, refer t
### [Flowchart](./flowchart.md?id=flowcharts-basic-syntax) ### [Flowchart](./flowchart.md?id=flowcharts-basic-syntax)
``` ```mermaid-code
graph TD; graph TD;
A-->B; A-->B;
A-->C; A-->C;
@@ -60,7 +60,7 @@ graph TD;
### [Sequence diagram](./sequenceDiagram.md) ### [Sequence diagram](./sequenceDiagram.md)
``` ```mermaid-code
sequenceDiagram sequenceDiagram
participant Alice participant Alice
participant Bob participant Bob
@@ -78,7 +78,7 @@ sequenceDiagram
### [Gantt diagram](./gantt.md) ### [Gantt diagram](./gantt.md)
``` ```mermaid-code
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid title Adding GANTT diagram to mermaid
@@ -95,7 +95,7 @@ Future task2 : des4, after des3, 5d
### [Class diagram](./classDiagram.md) ### [Class diagram](./classDiagram.md)
``` ```mermaid-code
classDiagram classDiagram
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04 Class03 *-- Class04
@@ -116,7 +116,7 @@ Class08 <--> C2: Cool label
### Git graph - :exclamation: experimental ### Git graph - :exclamation: experimental
``` ```mermaid-code
gitGraph: gitGraph:
options options
{ {
@@ -139,7 +139,7 @@ merge newbranch
### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md) ### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md)
``` ```mermaid-code
erDiagram erDiagram
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains ORDER ||--|{ LINE-ITEM : contains
@@ -151,7 +151,7 @@ erDiagram
### [User Journey Diagram](./user-journey.md) ### [User Journey Diagram](./user-journey.md)
```markdown ```mermaid-code
journey journey
title My working day title My working day
section Go to work section Go to work
@@ -229,19 +229,19 @@ Don't hesitate to contact me if you want to get involved!
### Setup ### Setup
``` ```sh
yarn install yarn install
``` ```
### Build ### Build
``` ```sh
yarn build:watch yarn build:watch
``` ```
### Lint ### Lint
``` ```sh
yarn lint yarn lint
``` ```
@@ -250,7 +250,7 @@ We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/
### Test ### Test
``` ```sh
yarn test yarn test
``` ```
Manual test in browser: open `dist/index.html` Manual test in browser: open `dist/index.html`
@@ -261,7 +261,7 @@ For those who have the permission to do so:
Update version number in `package.json`. Update version number in `package.json`.
``` ```sh
npm publish npm publish
``` ```

44
docs/classDiagram.md
View File

@@ -7,7 +7,7 @@ The class diagram is the main building block of object-oriented modeling. It is
Mermaid can render class diagrams. Mermaid can render class diagrams.
``` ```mermaid-code
classDiagram classDiagram
Animal <|-- Duck Animal <|-- Duck
Animal <|-- Fish Animal <|-- Fish
@@ -68,7 +68,7 @@ A single instance of a class in the diagram contains three compartments:
- The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase. - The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase.
The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase. The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.
``` ```mermaid-code
classDiagram classDiagram
class BankAccount class BankAccount
BankAccount : +String owner BankAccount : +String owner
@@ -94,7 +94,7 @@ There are two ways to define a class:
- Explicitly defining a class using keyword **class** like `class Animal`. This defines the Animal class - Explicitly defining a class using keyword **class** like `class Animal`. This defines the Animal class
- Define two classes via a **relationship** between them `Vehicle <|-- Car`. This defines two classes Vehicle and Car along with their relationship. - Define two classes via a **relationship** between them `Vehicle <|-- Car`. This defines two classes Vehicle and Car along with their relationship.
``` ```mermaid-code
classDiagram classDiagram
class Animal class Animal
Vehicle <|-- Car Vehicle <|-- Car
@@ -118,7 +118,7 @@ There are two ways to define the members of a class, and regardless of whichever
- Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example: - Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example:
``` ```mermaid-code
class BankAccount class BankAccount
BankAccount : +String owner BankAccount : +String owner
BankAccount : +BigDecimal balance BankAccount : +BigDecimal balance
@@ -137,7 +137,7 @@ There are two ways to define the members of a class, and regardless of whichever
- Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example: - Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example:
``` ```mermaid-code
class BankAccount{ class BankAccount{
+String owner +String owner
+BigDecimal balance +BigDecimal balance
@@ -161,7 +161,7 @@ class BankAccount{
Optionally you can end the method/function definition with the data type that will be returned (note: there must be a space between the final `)` of the method definition and return type Optionally you can end the method/function definition with the data type that will be returned (note: there must be a space between the final `)` of the method definition and return type
example: example:
``` ```mermaid-code
class BankAccount{ class BankAccount{
+String owner +String owner
+BigDecimal balance +BigDecimal balance
@@ -186,7 +186,7 @@ Members can be defined using generic types, such as `List<int>`, for fields, par
This can be done as part of either class definition method: This can be done as part of either class definition method:
``` ```mermaid-code
classDiagram classDiagram
class Square~Shape~{ class Square~Shape~{
int id int id
@@ -240,7 +240,7 @@ To specify the visibility of a class member (i.e. any attribute or method), thes
A relationship is a general term covering the specific types of logical connections found on class and object diagrams. A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
``` ```mermaid-code
[classA][Arrow][ClassB] [classA][Arrow][ClassB]
``` ```
@@ -257,7 +257,7 @@ There are different types of relations defined for classes under UML which are c
| ..\|> | Realization | | ..\|> | Realization |
| .. | Link (Dashed) | | .. | Link (Dashed) |
``` ```mermaid-code
classDiagram classDiagram
classA <|-- classB classA <|-- classB
classC *-- classD classC *-- classD
@@ -285,7 +285,7 @@ classO .. classP
We can use the labels to describe nature of relation between two classes. Also, arrowheads can be used in opposite directions as well : We can use the labels to describe nature of relation between two classes. Also, arrowheads can be used in opposite directions as well :
``` ```mermaid-code
classDiagram classDiagram
classA --|> classB : Inheritance classA --|> classB : Inheritance
classC --* classD : Composition classC --* classD : Composition
@@ -318,7 +318,7 @@ It is possible to add a label text to a relation:
[classA][Arrow][ClassB]:LabelText [classA][Arrow][ClassB]:LabelText
``` ```
``` ```mermaid-code
classDiagram classDiagram
classA <|-- classB : implements classA <|-- classB : implements
classC *-- classD : composition classC *-- classD : composition
@@ -336,7 +336,7 @@ classE o-- classF : association
Relations can go in multiple ways: Relations can go in multiple ways:
``` ```mermaid-code
classDiagram classDiagram
Animal <|--|> Zebra Animal <|--|> Zebra
``` ```
@@ -388,7 +388,7 @@ Cardinality can be easily defined by placing cardinality text within quotes `"`
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText [classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
``` ```
``` ```mermaid-code
classDiagram classDiagram
Customer "1" --> "*" Ticket Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course Student "1" --> "1..*" Course
@@ -415,7 +415,7 @@ Annotations are defined within the opening `<<` and closing `>>`. There are two
- In a **_separate line_** after a class is defined. For example: - In a **_separate line_** after a class is defined. For example:
``` ```mermaid-code
classDiagram classDiagram
class Shape class Shape
<<interface>> Shape <<interface>> Shape
@@ -431,7 +431,7 @@ Shape : draw()
- In a **_nested structure_** along with class definition. For example: - In a **_nested structure_** along with class definition. For example:
``` ```mermaid-code
classDiagram classDiagram
class Shape{ class Shape{
<<interface>> <<interface>>
@@ -470,7 +470,7 @@ class Color{
Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any class diagram syntax Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any class diagram syntax
``` ```mermaid-code
classDiagram classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>> %% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{ class Shape{
@@ -485,7 +485,7 @@ class Shape{
With class diagrams you can use the direction statement to set the direction which the diagram will render like in this example. With class diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
``` ```mermaid-code
classDiagram classDiagram
direction RL direction RL
class Student { class Student {
@@ -542,7 +542,7 @@ click className href "url" "tooltip"
_URL Link:_ _URL Link:_
``` ```mermaid-code
classDiagram classDiagram
class Shape class Shape
link Shape "http://www.github.com" "This is a tooltip for a link" link Shape "http://www.github.com" "This is a tooltip for a link"
@@ -552,7 +552,7 @@ click Shape2 href "http://www.github.com" "This is a tooltip for a link"
_Callback:_ _Callback:_
``` ```mermaid-code
classDiagram classDiagram
class Shape class Shape
callback Shape "callbackFunction" "This is a tooltip for a callback" callback Shape "callbackFunction" "This is a tooltip for a callback"
@@ -584,7 +584,7 @@ classDiagram
Beginners tip, a full example using interactive links in an html context: Beginners tip, a full example using interactive links in an html context:
``` ```html
<body> <body>
<div class="mermaid"> <div class="mermaid">
classDiagram classDiagram
@@ -658,14 +658,14 @@ It is also possible to attach a class to a list of nodes in one statement:
A shorter form of adding a class is to attach the classname to the node using the `:::` operator as per below: A shorter form of adding a class is to attach the classname to the node using the `:::` operator as per below:
``` ```mermaid-code
classDiagram classDiagram
class Animal:::cssClass class Animal:::cssClass
``` ```
Or: Or:
``` ```mermaid-code
classDiagram classDiagram
class Animal:::cssClass { class Animal:::cssClass {
-int sizeInFeet -int sizeInFeet

94
docs/diagrams-and-syntax-and-examples/flowchart.md
View File

@@ -11,7 +11,7 @@ This statement declares the direction of the Flowchart.
This declares the graph is oriented from top to bottom (`TD` or `TB`). This declares the graph is oriented from top to bottom (`TD` or `TB`).
``` ```mermaid-code
graph TD graph TD
Start --> Stop Start --> Stop
``` ```
@@ -22,7 +22,7 @@ graph TD
This declares the graph is oriented from left to right (`LR`). This declares the graph is oriented from left to right (`LR`).
``` ```mermaid-code
graph LR graph LR
Start --> Stop Start --> Stop
``` ```
@@ -55,7 +55,7 @@ Apart from the graph type, the syntax is the same. This is currently experimenta
### A node (default) ### A node (default)
``` ```mermaid-code
graph LR graph LR
id id
``` ```
@@ -73,7 +73,7 @@ It is also possible to set text in the box that differs from the id. If this is
found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The 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. one previously defined will be used when rendering the box.
``` ```mermaid-code
graph LR graph LR
id1[This is the text in the box] id1[This is the text in the box]
``` ```
@@ -86,7 +86,7 @@ graph LR
### A node with round edges ### A node with round edges
``` ```mermaid-code
graph LR graph LR
id1(This is the text in the box) id1(This is the text in the box)
``` ```
@@ -97,7 +97,7 @@ graph LR
### A stadium-shaped node ### A stadium-shaped node
``` ```mermaid-code
graph LR graph LR
id1([This is the text in the box]) id1([This is the text in the box])
``` ```
@@ -108,7 +108,7 @@ graph LR
### A node in a subroutine shape ### A node in a subroutine shape
``` ```mermaid-code
graph LR graph LR
id1[[This is the text in the box]] id1[[This is the text in the box]]
``` ```
@@ -119,7 +119,7 @@ graph LR
### A node in a cylindrical shape ### A node in a cylindrical shape
``` ```mermaid-code
graph LR graph LR
id1[(Database)] id1[(Database)]
``` ```
@@ -130,7 +130,7 @@ graph LR
### A node in the form of a circle ### A node in the form of a circle
``` ```mermaid-code
graph LR graph LR
id1((This is the text in the circle)) id1((This is the text in the circle))
``` ```
@@ -141,7 +141,7 @@ graph LR
### A node in an asymmetric shape ### A node in an asymmetric shape
``` ```mermaid-code
graph LR graph LR
id1>This is the text in the box] id1>This is the text in the box]
``` ```
@@ -153,7 +153,7 @@ Currently only the shape above is possible and not its mirror. *This might chang
### A node (rhombus) ### A node (rhombus)
``` ```mermaid-code
graph LR graph LR
id1{This is the text in the box} id1{This is the text in the box}
``` ```
@@ -164,7 +164,7 @@ graph LR
### A hexagon node ### A hexagon node
{% raw %} {% raw %}
``` ```mermaid-code
graph LR graph LR
id1{{This is the text in the box}} id1{{This is the text in the box}}
``` ```
@@ -179,7 +179,7 @@ graph LR
### Parallelogram ### Parallelogram
``` ```mermaid-code
graph TD graph TD
id1[/This is the text in the box/] id1[/This is the text in the box/]
``` ```
@@ -190,7 +190,7 @@ graph TD
### Parallelogram alt ### Parallelogram alt
``` ```mermaid-code
graph TD graph TD
id1[\This is the text in the box\] id1[\This is the text in the box\]
``` ```
@@ -201,7 +201,7 @@ graph TD
### Trapezoid ### Trapezoid
``` ```mermaid-code
graph TD graph TD
A[/Christmas\] A[/Christmas\]
``` ```
@@ -211,7 +211,7 @@ graph TD
``` ```
### Trapezoid alt ### Trapezoid alt
``` ```mermaid-code
graph TD graph TD
B[\Go shopping/] B[\Go shopping/]
``` ```
@@ -226,7 +226,7 @@ Nodes can be connected with links/edges. It is possible to have different types
### A link with arrow head ### A link with arrow head
``` ```mermaid-code
graph LR graph LR
A-->B A-->B
``` ```
@@ -237,7 +237,7 @@ graph LR
### An open link ### An open link
``` ```mermaid-code
graph LR graph LR
A --- B A --- B
``` ```
@@ -248,7 +248,7 @@ graph LR
### Text on links ### Text on links
``` ```mermaid-code
graph LR graph LR
A-- This is the text! ---B A-- This is the text! ---B
``` ```
@@ -259,7 +259,7 @@ graph LR
or or
``` ```mermaid-code
graph LR graph LR
A---|This is the text|B A---|This is the text|B
``` ```
@@ -270,7 +270,7 @@ graph LR
### A link with arrow head and text ### A link with arrow head and text
``` ```mermaid-code
graph LR graph LR
A-->|text|B A-->|text|B
``` ```
@@ -281,7 +281,7 @@ graph LR
or or
``` ```mermaid-code
graph LR graph LR
A-- text -->B A-- text -->B
``` ```
@@ -292,7 +292,7 @@ graph LR
### Dotted link ### Dotted link
``` ```mermaid-code
graph LR; graph LR;
A-.->B; A-.->B;
``` ```
@@ -303,7 +303,7 @@ graph LR;
### Dotted link with text ### Dotted link with text
``` ```mermaid-code
graph LR graph LR
A-. text .-> B A-. text .-> B
``` ```
@@ -314,7 +314,7 @@ graph LR
### Thick link ### Thick link
``` ```mermaid-code
graph LR graph LR
A ==> B A ==> B
``` ```
@@ -325,7 +325,7 @@ graph LR
### Thick link with text ### Thick link with text
``` ```mermaid-code
graph LR graph LR
A == text ==> B A == text ==> B
``` ```
@@ -337,7 +337,7 @@ graph LR
### Chaining of links ### Chaining of links
It is possible to declare many links in the same line as per below: It is possible to declare many links in the same line as per below:
``` ```mermaid-code
graph LR graph LR
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C
``` ```
@@ -347,7 +347,7 @@ graph LR
``` ```
It is also possible to declare multiple nodes links in the same line as per below: It is also possible to declare multiple nodes links in the same line as per below:
``` ```mermaid-code
graph LR graph LR
a --> b & c--> d a --> b & c--> d
``` ```
@@ -357,7 +357,7 @@ graph LR
``` ```
You can then describe dependencies in a very expressive way. Like the one-liner below: You can then describe dependencies in a very expressive way. Like the one-liner below:
``` ```mermaid-code
graph TB graph TB
A & B--> C & D A & B--> C & D
``` ```
@@ -369,7 +369,7 @@ If you describe the same diagram using the the basic syntax, it will take four l
word of warning, one could go overboard with this making the graph harder to read in word of warning, one could go overboard with this making the graph harder to read in
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little. markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
This goes for expressive syntaxes as well. This goes for expressive syntaxes as well.
``` ```mermaid-code
graph TB graph TB
A --> C A --> C
A --> D A --> D
@@ -381,7 +381,7 @@ graph TB
When using flowchart instead of graph there are new types of arrows supported as per below: When using flowchart instead of graph there are new types of arrows supported as per below:
``` ```mermaid-code
flowchart LR flowchart LR
A --o B A --o B
B --x C B --x C
@@ -398,7 +398,7 @@ flowchart LR
When using flowchart instead of graph there is the possibility to use multidirectional arrows. When using flowchart instead of graph there is the possibility to use multidirectional arrows.
``` ```mermaid-code
flowchart LR flowchart LR
A o--o B A o--o B
B <--> C B <--> C
@@ -423,7 +423,7 @@ than the others by adding extra dashes in the link definition.
In the following example, two extra dashes are added in the link from node _B_ In the following example, two extra dashes are added in the link from node _B_
to node _E_, so that it spans two more ranks than regular links: to node _E_, so that it spans two more ranks than regular links:
``` ```mermaid-code
graph TD graph TD
A[Start] --> B{Is it?}; A[Start] --> B{Is it?};
B -->|Yes| C[OK]; B -->|Yes| C[OK];
@@ -448,7 +448,7 @@ When the link label is written in the middle of the link, the extra dashes must
be added on the right side of the link. The following example is equivalent to be added on the right side of the link. The following example is equivalent to
the previous one: the previous one:
``` ```mermaid-code
graph TD graph TD
A[Start] --> B{Is it?}; A[Start] --> B{Is it?};
B -- Yes --> C[OK]; B -- Yes --> C[OK];
@@ -482,7 +482,7 @@ as summed up in the following table:
It is possible to put text within quotes in order to render more troublesome characters. As in the example below: It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
``` ```mermaid-code
graph LR graph LR
id1["This is the (text) in the box"] id1["This is the (text) in the box"]
``` ```
@@ -495,7 +495,7 @@ graph LR
It is possible to escape characters using the syntax exemplified here. It is possible to escape characters using the syntax exemplified here.
``` ```mermaid-code
graph LR graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"] A["A double quote:#quot;"] -->B["A dec char:#9829;"]
``` ```
@@ -514,7 +514,7 @@ end
An example below: An example below:
``` ```mermaid-code
graph TB graph TB
c1-->a2 c1-->a2
subgraph one subgraph one
@@ -543,7 +543,7 @@ graph TB
You can also set an explicit id for the subgraph. You can also set an explicit id for the subgraph.
``` ```mermaid-code
graph TB graph TB
c1-->a2 c1-->a2
subgraph ide1 [one] subgraph ide1 [one]
@@ -562,7 +562,7 @@ graph TB
With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below. With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below.
``` ```mermaid-code
flowchart TB flowchart TB
c1-->a2 c1-->a2
subgraph one subgraph one
@@ -618,7 +618,7 @@ Examples of tooltip usage below:
</script> </script>
``` ```
``` ```mermaid-code
graph LR; graph LR;
A-->B; A-->B;
B-->C; B-->C;
@@ -646,7 +646,7 @@ graph LR
?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/). ?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported): Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
``` ```mermaid-code
graph LR; graph LR;
A-->B; A-->B;
B-->C; B-->C;
@@ -707,7 +707,7 @@ Beginners tip, a full example using interactive links in a html context:
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
``` ```mermaid-code
graph LR graph LR
%% this is a comment A -- text --> B{node} %% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C
@@ -751,7 +751,7 @@ linkStyle default interpolate cardinal stroke:#ff3,stroke-width:4px,color:red;
It is possible to apply specific styles such as a thicker border or a different background color to a node. It is possible to apply specific styles such as a thicker border or a different background color to a node.
``` ```mermaid-code
graph LR graph LR
id1(Start)-->id2(Stop) id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px style id1 fill:#f9f,stroke:#333,stroke-width:4px
@@ -791,7 +791,7 @@ It is also possible to attach a class to a list of nodes in one statement:
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below: A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
``` ```mermaid-code
graph LR graph LR
A:::someclass --> B A:::someclass --> B
classDef someclass fill:#f96; classDef someclass fill:#f96;
@@ -822,7 +822,7 @@ below:
**Example definition** **Example definition**
``` ```mermaid-code
graph LR; graph LR;
A-->B[AAA<span>BBB</span>]; A-->B[AAA<span>BBB</span>];
B-->D; B-->D;
@@ -851,7 +851,7 @@ It is possible to add icons from fontawesome.
The icons are accessed via the syntax fa:#icon class name#. The icons are accessed via the syntax fa:#icon class name#.
``` ```mermaid-code
graph TD graph TD
B["fa:fa-twitter for peace"] B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden] B-->C[fa:fa-ban forbidden]
@@ -875,7 +875,7 @@ graph TD
Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges. Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
``` ```mermaid-code
graph LR graph LR
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision} B --> C{Decision}

8
docs/directives.md
View File

@@ -21,7 +21,7 @@ The json object that is passed as {**argument** } must be valid key value pairs
Valid Key Value pairs can be found in config. Valid Key Value pairs can be found in config.
The init/initialize directive is parsed earlier in the flow, this allows the incorporation of `%%init%%` directives into the mermaid diagram that is being rendered. Example: The init/initialize directive is parsed earlier in the flow, this allows the incorporation of `%%init%%` directives into the mermaid diagram that is being rendered. Example:
``` ```mermaid-code
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
graph > graph >
A-->B A-->B
@@ -31,7 +31,7 @@ will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart dia
Note: 'init' or 'initialize' are both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means: Note: 'init' or 'initialize' are both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:
``` ```mermaid-code
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%% %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
... ...
@@ -39,7 +39,7 @@ Note: 'init' or 'initialize' are both acceptable as init directives. Also note t
parsing the above generates the `%%init%%` object below, combining the two directives and carrying over the last value given for `loglevel`: parsing the above generates the `%%init%%` object below, combining the two directives and carrying over the last value given for `loglevel`:
``` ```json5
{ {
logLevel: 'fatal', logLevel: 'fatal',
theme: 'dark', theme: 'dark',
@@ -54,7 +54,7 @@ This will then be sent to `mermaid.initialize(...)` for rendering.
In this category are any directives that come after the graph type declaration. Essentially, these directives will only be processed after the init directive. Each individual graph type will handle these directives. As an example: In this category are any directives that come after the graph type declaration. Essentially, these directives will only be processed after the init directive. Each individual graph type will handle these directives. As an example:
``` ```mermaid-code
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
sequenceDiagram sequenceDiagram
%%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%% %%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%%

8
docs/entityRelationshipDiagram.md
View File

@@ -117,7 +117,7 @@ Cardinality is a property that describes how many elements of another entity can
Relationships may be classified as either *identifying* or *non-identifying* and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line: Relationships may be classified as either *identifying* or *non-identifying* and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
``` ```mermaid-code
CAR ||--o{ NAMED-DRIVER : allows CAR ||--o{ NAMED-DRIVER : allows
PERSON ||--o{ NAMED-DRIVER : is PERSON ||--o{ NAMED-DRIVER : is
``` ```
@@ -126,7 +126,7 @@ Relationships may be classified as either *identifying* or *non-identifying* and
Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. For example: Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. For example:
``` ```mermaid-code
erDiagram erDiagram
CAR ||--o{ NAMED-DRIVER : allows CAR ||--o{ NAMED-DRIVER : allows
CAR { CAR {
@@ -158,7 +158,7 @@ erDiagram
``` ```
The attributes are rendered inside the entity boxes: The attributes are rendered inside the entity boxes:
``` ```mermaid-code
erDiagram erDiagram
CAR ||--o{ NAMED-DRIVER : allows CAR ||--o{ NAMED-DRIVER : allows
CAR { CAR {
@@ -195,7 +195,7 @@ The `type` and `name` values must begin with an alphabetic character and may con
Attributes may also have a `key` or comment defined. Keys can be "PK" or "FK", for Primary Key or Foreign Key. And a `comment` is defined by quotes at the end of an attribute. Comments themselves cannot have quote characters in them. Attributes may also have a `key` or comment defined. Keys can be "PK" or "FK", for Primary Key or Foreign Key. And a `comment` is defined by quotes at the end of an attribute. Comments themselves cannot have quote characters in them.
``` ```mermaid-code
erDiagram erDiagram
CAR ||--o{ NAMED-DRIVER : allows CAR ||--o{ NAMED-DRIVER : allows
CAR { CAR {

14
docs/examples.md
View File

@@ -8,7 +8,7 @@ This page contains a collection of examples of diagrams and charts that can be c
## Basic Pie Chart ## Basic Pie Chart
``` ```mermaid-code
pie title NETFLIX pie title NETFLIX
"Time spent looking for movie" : 90 "Time spent looking for movie" : 90
"Time spent watching it" : 10 "Time spent watching it" : 10
@@ -18,7 +18,7 @@ pie title NETFLIX
"Time spent looking for movie" : 90 "Time spent looking for movie" : 90
"Time spent watching it" : 10 "Time spent watching it" : 10
``` ```
``` ```mermaid-code
pie title What Voldemort doesn't have? pie title What Voldemort doesn't have?
"FRIENDS" : 2 "FRIENDS" : 2
"FAMILY" : 3 "FAMILY" : 3
@@ -32,7 +32,7 @@ pie title What Voldemort doesn't have?
``` ```
## Basic sequence diagram ## Basic sequence diagram
``` ```mermaid-code
sequenceDiagram sequenceDiagram
Alice ->> Bob: Hello Bob, how are you? Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John? Bob-->>John: How about you John?
@@ -57,7 +57,7 @@ sequenceDiagram
## Basic flowchart ## Basic flowchart
``` ```mermaid-code
graph LR graph LR
A[Square Rect] -- Link text --> B((Circle)) A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect) A --> C(Round Rect)
@@ -75,7 +75,7 @@ graph LR
## Larger flowchart with some styling ## Larger flowchart with some styling
``` ```mermaid-code
graph TB graph TB
sq[Square shape] --> ci((Circle shape)) sq[Square shape] --> ci((Circle shape))
@@ -125,7 +125,7 @@ graph TB
## SequenceDiagram: Loops, alt and opt ## SequenceDiagram: Loops, alt and opt
``` ```mermaid-code
sequenceDiagram sequenceDiagram
loop Daily query loop Daily query
Alice->>Bob: Hello Bob, how are you? Alice->>Bob: Hello Bob, how are you?
@@ -159,7 +159,7 @@ sequenceDiagram
## SequenceDiagram: Message to self in loop ## SequenceDiagram: Message to self in loop
``` ```mermaid-code
sequenceDiagram sequenceDiagram
participant Alice participant Alice
participant Bob participant Bob

98
docs/flowchart.md
View File

@@ -10,7 +10,7 @@ It can also accomodate different arrow types, multi directional arrows, and link
Node Node
### A node (default) ### A node (default)
``` ```mermaid-code
flowchart LR flowchart LR
id id
``` ```
@@ -28,7 +28,7 @@ It is also possible to set text in the box that differs from the id. If this is
found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The 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. one previously defined will be used when rendering the box.
``` ```mermaid-code
flowchart LR flowchart LR
id1[This is the text in the box] id1[This is the text in the box]
``` ```
@@ -43,7 +43,7 @@ This statement declares the direction of the Flowchart.
This declares the flowchart is oriented from top to bottom (`TD` or `TB`). This declares the flowchart is oriented from top to bottom (`TD` or `TB`).
``` ```mermaid-code
flowchart TD flowchart TD
Start --> Stop Start --> Stop
``` ```
@@ -54,7 +54,7 @@ flowchart TD
This declares the flowchart is oriented from left to right (`LR`). This declares the flowchart is oriented from left to right (`LR`).
``` ```mermaid-code
flowchart LR flowchart LR
Start --> Stop Start --> Stop
``` ```
@@ -77,7 +77,7 @@ Possible FlowChart orientations are:
### A node with round edges ### A node with round edges
``` ```mermaid-code
flowchart LR flowchart LR
id1(This is the text in the box) id1(This is the text in the box)
``` ```
@@ -88,7 +88,7 @@ flowchart LR
### A stadium-shaped node ### A stadium-shaped node
``` ```mermaid-code
flowchart LR flowchart LR
id1([This is the text in the box]) id1([This is the text in the box])
``` ```
@@ -99,7 +99,7 @@ flowchart LR
### A node in a subroutine shape ### A node in a subroutine shape
``` ```mermaid-code
flowchart LR flowchart LR
id1[[This is the text in the box]] id1[[This is the text in the box]]
``` ```
@@ -110,7 +110,7 @@ flowchart LR
### A node in a cylindrical shape ### A node in a cylindrical shape
``` ```mermaid-code
flowchart LR flowchart LR
id1[(Database)] id1[(Database)]
``` ```
@@ -121,7 +121,7 @@ flowchart LR
### A node in the form of a circle ### A node in the form of a circle
``` ```mermaid-code
flowchart LR flowchart LR
id1((This is the text in the circle)) id1((This is the text in the circle))
``` ```
@@ -132,7 +132,7 @@ flowchart LR
### A node in an asymmetric shape ### A node in an asymmetric shape
``` ```mermaid-code
flowchart LR flowchart LR
id1>This is the text in the box] id1>This is the text in the box]
``` ```
@@ -144,7 +144,7 @@ Currently only the shape above is possible and not its mirror. *This might chang
### A node (rhombus) ### A node (rhombus)
``` ```mermaid-code
flowchart LR flowchart LR
id1{This is the text in the box} id1{This is the text in the box}
``` ```
@@ -154,7 +154,7 @@ flowchart LR
``` ```
### A hexagon node ### A hexagon node
``` ```mermaid-code
flowchart LR flowchart LR
id1{{This is the text in the box}} id1{{This is the text in the box}}
``` ```
@@ -166,7 +166,7 @@ flowchart LR
### Parallelogram ### Parallelogram
``` ```mermaid-code
flowchart TD flowchart TD
id1[/This is the text in the box/] id1[/This is the text in the box/]
``` ```
@@ -177,7 +177,7 @@ flowchart TD
### Parallelogram alt ### Parallelogram alt
``` ```mermaid-code
flowchart TD flowchart TD
id1[\This is the text in the box\] id1[\This is the text in the box\]
``` ```
@@ -188,7 +188,7 @@ flowchart TD
### Trapezoid ### Trapezoid
``` ```mermaid-code
flowchart TD flowchart TD
A[/Christmas\] A[/Christmas\]
``` ```
@@ -198,7 +198,7 @@ flowchart TD
``` ```
### Trapezoid alt ### Trapezoid alt
``` ```mermaid-code
flowchart TD flowchart TD
B[\Go shopping/] B[\Go shopping/]
``` ```
@@ -213,7 +213,7 @@ Nodes can be connected with links/edges. It is possible to have different types
### A link with arrow head ### A link with arrow head
``` ```mermaid-code
flowchart LR flowchart LR
A-->B A-->B
``` ```
@@ -224,7 +224,7 @@ flowchart LR
### An open link ### An open link
``` ```mermaid-code
flowchart LR flowchart LR
A --- B A --- B
``` ```
@@ -235,7 +235,7 @@ flowchart LR
### Text on links ### Text on links
``` ```mermaid-code
flowchart LR flowchart LR
A-- This is the text! ---B A-- This is the text! ---B
``` ```
@@ -246,7 +246,7 @@ flowchart LR
or or
``` ```mermaid-code
flowchart LR flowchart LR
A---|This is the text|B A---|This is the text|B
``` ```
@@ -257,7 +257,7 @@ flowchart LR
### A link with arrow head and text ### A link with arrow head and text
``` ```mermaid-code
flowchart LR flowchart LR
A-->|text|B A-->|text|B
``` ```
@@ -268,7 +268,7 @@ flowchart LR
or or
``` ```mermaid-code
flowchart LR flowchart LR
A-- text -->B A-- text -->B
``` ```
@@ -279,7 +279,7 @@ flowchart LR
### Dotted link ### Dotted link
``` ```mermaid-code
flowchart LR; flowchart LR;
A-.->B; A-.->B;
``` ```
@@ -290,7 +290,7 @@ flowchart LR;
### Dotted link with text ### Dotted link with text
``` ```mermaid-code
flowchart LR flowchart LR
A-. text .-> B A-. text .-> B
``` ```
@@ -301,7 +301,7 @@ flowchart LR
### Thick link ### Thick link
``` ```mermaid-code
flowchart LR flowchart LR
A ==> B A ==> B
``` ```
@@ -312,7 +312,7 @@ flowchart LR
### Thick link with text ### Thick link with text
``` ```mermaid-code
flowchart LR flowchart LR
A == text ==> B A == text ==> B
``` ```
@@ -324,7 +324,7 @@ flowchart LR
### Chaining of links ### Chaining of links
It is possible declare many links in the same line as per below: It is possible declare many links in the same line as per below:
``` ```mermaid-code
flowchart LR flowchart LR
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C
``` ```
@@ -334,7 +334,7 @@ flowchart LR
``` ```
It is also possible to declare multiple nodes links in the same line as per below: It is also possible to declare multiple nodes links in the same line as per below:
``` ```mermaid-code
flowchart LR flowchart LR
a --> b & c--> d a --> b & c--> d
``` ```
@@ -344,7 +344,7 @@ flowchart LR
``` ```
You can then describe dependencies in a very expressive way. Like the one-liner below: You can then describe dependencies in a very expressive way. Like the one-liner below:
``` ```mermaid-code
flowchart TB flowchart TB
A & B--> C & D A & B--> C & D
``` ```
@@ -356,7 +356,7 @@ If you describe the same diagram using the the basic syntax, it will take four l
word of warning, one could go overboard with this making the flowchart harder to read in word of warning, one could go overboard with this making the flowchart harder to read in
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little. markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
This goes for expressive syntaxes as well. This goes for expressive syntaxes as well.
``` ```mermaid-code
flowchart TB flowchart TB
A --> C A --> C
A --> D A --> D
@@ -368,7 +368,7 @@ flowchart TB
There are new types of arrows supported as per below: There are new types of arrows supported as per below:
``` ```mermaid-code
flowchart LR flowchart LR
A --o B A --o B
B --x C B --x C
@@ -385,7 +385,7 @@ flowchart LR
There is the possibility to use multidirectional arrows. There is the possibility to use multidirectional arrows.
``` ```mermaid-code
flowchart LR flowchart LR
A o--o B A o--o B
B <--> C B <--> C
@@ -410,7 +410,7 @@ than the others by adding extra dashes in the link definition.
In the following example, two extra dashes are added in the link from node _B_ In the following example, two extra dashes are added in the link from node _B_
to node _E_, so that it spans two more ranks than regular links: to node _E_, so that it spans two more ranks than regular links:
``` ```mermaid-code
flowchart TD flowchart TD
A[Start] --> B{Is it?}; A[Start] --> B{Is it?};
B -->|Yes| C[OK]; B -->|Yes| C[OK];
@@ -435,7 +435,7 @@ When the link label is written in the middle of the link, the extra dashes must
be added on the right side of the link. The following example is equivalent to be added on the right side of the link. The following example is equivalent to
the previous one: the previous one:
``` ```mermaid-code
flowchart TD flowchart TD
A[Start] --> B{Is it?}; A[Start] --> B{Is it?};
B -- Yes --> C[OK]; B -- Yes --> C[OK];
@@ -469,7 +469,7 @@ as summed up in the following table:
It is possible to put text within quotes in order to render more troublesome characters. As in the example below: It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
``` ```mermaid-code
flowchart LR flowchart LR
id1["This is the (text) in the box"] id1["This is the (text) in the box"]
``` ```
@@ -482,7 +482,7 @@ flowchart LR
It is possible to escape characters using the syntax exemplified here. It is possible to escape characters using the syntax exemplified here.
``` ```mermaid-code
flowchart LR flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"] A["A double quote:#quot;"] -->B["A dec char:#9829;"]
``` ```
@@ -503,7 +503,7 @@ end
An example below: An example below:
``` ```mermaid-code
flowchart TB flowchart TB
c1-->a2 c1-->a2
subgraph one subgraph one
@@ -532,7 +532,7 @@ flowchart TB
You can also set an explicit id for the subgraph. You can also set an explicit id for the subgraph.
``` ```mermaid-code
flowchart TB flowchart TB
c1-->a2 c1-->a2
subgraph ide1 [one] subgraph ide1 [one]
@@ -551,7 +551,7 @@ flowchart TB
With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the flowchart below. With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the flowchart below.
``` ```mermaid-code
flowchart TB flowchart TB
c1-->a2 c1-->a2
subgraph one subgraph one
@@ -589,7 +589,7 @@ flowchart TB
With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example. With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
``` ```mermaid-code
flowchart LR flowchart LR
subgraph TOP subgraph TOP
direction TB direction TB
@@ -646,7 +646,7 @@ Examples of tooltip usage below:
</script> </script>
``` ```
``` ```mermaid-code
flowchart LR; flowchart LR;
A-->B; A-->B;
B-->C; B-->C;
@@ -674,7 +674,7 @@ flowchart LR
?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/). ?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported): Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
``` ```mermaid-code
flowchart LR; flowchart LR;
A-->B; A-->B;
B-->C; B-->C;
@@ -735,7 +735,7 @@ Beginners tip, a full example using interactive links in a html context:
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
``` ```mermaid-code
flowchart LR flowchart LR
%% this is a comment A -- text --> B{node} %% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C
@@ -750,7 +750,7 @@ have no ids in the same way as nodes, some other way of deciding what style the
Instead of ids, the order number of when the link was defined in the graph is used. In the example below the style 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: defined in the linkStyle statement will belong to the fourth link in the graph:
``` ```mermaid-code
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red; linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
``` ```
@@ -759,7 +759,7 @@ linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
It is possible to apply specific styles such as a thicker border or a different background color to a node. It is possible to apply specific styles such as a thicker border or a different background color to a node.
``` ```mermaid-code
flowchart LR flowchart LR
id1(Start)-->id2(Stop) id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px style id1 fill:#f9f,stroke:#333,stroke-width:4px
@@ -799,7 +799,7 @@ It is also possible to attach a class to a list of nodes in one statement:
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below: A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
``` ```mermaid-code
flowchart LR flowchart LR
A:::someclass --> B A:::someclass --> B
classDef someclass fill:#f96; classDef someclass fill:#f96;
@@ -830,7 +830,7 @@ below:
**Example definition** **Example definition**
``` ```mermaid-code
flowchart LR; flowchart LR;
A-->B[AAA<span>BBB</span>]; A-->B[AAA<span>BBB</span>];
B-->D; B-->D;
@@ -859,7 +859,7 @@ It is possible to add icons from fontawesome.
The icons are accessed via the syntax fa:#icon class name#. The icons are accessed via the syntax fa:#icon class name#.
``` ```mermaid-code
flowchart TD flowchart TD
B["fa:fa-twitter for peace"] B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden] B-->C[fa:fa-ban forbidden]
@@ -883,7 +883,7 @@ flowchart TD
Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges. Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
``` ```mermaid-code
flowchart LR flowchart LR
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision} B --> C{Decision}

10
docs/gantt.md
View File

@@ -17,7 +17,7 @@
Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs. Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs.
``` ```mermaid-code
gantt gantt
title A Gantt Diagram title A Gantt Diagram
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@@ -106,13 +106,13 @@ gantt
``` ```
It is possible to set multiple dependencies separated by space: It is possible to set multiple dependencies separated by space:
``` ```mermaid-code
gantt gantt
apple :a, 2017-07-20, 1w apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d cherry :active, c, after b a, 1d
``` ```
``` ```mermaid-code
gantt gantt
apple :a, 2017-07-20, 1w apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d banana :crit, b, 2017-07-23, 1d
@@ -135,7 +135,7 @@ To do so, start a line with the `section` keyword and give it a name. (Note that
You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: *initial date*+*duration*/2. You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: *initial date*+*duration*/2.
``` ```mermaid-code
gantt gantt
dateFormat HH:mm dateFormat HH:mm
axisFormat %H:%M axisFormat %H:%M
@@ -238,7 +238,7 @@ More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
``` ```mermaid-code
gantt gantt
title A Gantt Diagram title A Gantt Diagram
%% this is a comment %% this is a comment

35
docs/index.html
View File

@@ -22,6 +22,12 @@
} }
</script> </script>
<script>var require = { paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' } }</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.nls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
<script>exports = {};</script>
<script src="https://unpkg.com/monaco-mermaid/browser.js"></script>
<style> <style>
.markdown-section { .markdown-section {
@@ -32,6 +38,18 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script> <script>
const initEditor = exports.default;
var currentCodeExample = 0;
var colorize = [];
function colorizeEverything() {
colorize.map((id) => {
monaco.editor.colorizeElement(document.getElementById('code' + id))
})
colorize = colorize.filter(colorizeEl => colorizeEl)
}
window.$docsify = { window.$docsify = {
search: 'auto', search: 'auto',
name: 'mermaid', name: 'mermaid',
@@ -47,6 +65,12 @@
return ( return (
'<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>" '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>"
); );
} else if (lang === 'mermaid-code') {
currentCodeExample++;
colorize.push(currentCodeExample);
return (
'<pre id="code' + currentCodeExample + '" data-lang="mermaid">' + code + '</pre>'
)
} }
return this.origin.code.apply(this, arguments); return this.origin.code.apply(this, arguments);
} }
@@ -59,6 +83,13 @@
var editHtml = '[:memo: Edit this Page](' + url + ')\n' var editHtml = '[:memo: Edit this Page](' + url + ')\n'
return editHtml + html return editHtml + html
}) })
hook.ready(function () {
if (document.readyState !== 'complete') {
return;
}
colorizeEverything()
})
} }
] ]
} }
@@ -78,6 +109,10 @@
ga('send', 'pageview', location.hash); ga('send', 'pageview', location.hash);
} }
} }
window.onload = () => {
initEditor(monaco)
colorizeEverything()
}
</script> </script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

2
docs/n00b-syntaxReference.md
View File

@@ -10,7 +10,7 @@ One would notice that all **Diagrams definitions begin** with a declaration of t
**Example** : The code below is for an Entity Relationship Diagram, specified by the `erDiagram` declaration. What follows is the definition of the different `Entities` represented in it. **Example** : The code below is for an Entity Relationship Diagram, specified by the `erDiagram` declaration. What follows is the definition of the different `Entities` represented in it.
``` ```mermaid-code
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places

4
docs/pie.md
View File

@@ -5,7 +5,7 @@
Mermaid can render Pie Chart diagrams. Mermaid can render Pie Chart diagrams.
``` ```mermaid-code
pie title Pets adopted by volunteers pie title Pets adopted by volunteers
"Dogs" : 386 "Dogs" : 386
"Cats" : 85 "Cats" : 85
@@ -37,7 +37,7 @@ Drawing a pie chart is really simple in mermaid.
. .
## Example ## Example
``` ```mermaid-code
pie pie
title Key elements in Product X title Key elements in Product X
"Calcium" : 42.96 "Calcium" : 42.96

72
docs/requirementDiagram.md
View File

@@ -6,7 +6,7 @@
Rendering requirements is straightforward. Rendering requirements is straightforward.
``` ```mermaid-code
requirementDiagram requirementDiagram
requirement test_req { requirement test_req {
@@ -103,6 +103,76 @@ Each relationship is labeled in the diagram.
## Larger Example ## Larger Example
This example uses all features of the diagram. This example uses all features of the diagram.
```mermaid-code
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
functionalRequirement test_req2 {
id: 1.1
text: the second test text.
risk: low
verifymethod: inspection
}
performanceRequirement test_req3 {
id: 1.2
text: the third test text.
risk: medium
verifymethod: demonstration
}
interfaceRequirement test_req4 {
id: 1.2.1
text: the fourth test text.
risk: medium
verifymethod: analysis
}
physicalRequirement test_req5 {
id: 1.2.2
text: the fifth test text.
risk: medium
verifymethod: analysis
}
designConstraint test_req6 {
id: 1.2.3
text: the sixth test text.
risk: medium
verifymethod: analysis
}
element test_entity {
type: simulation
}
element test_entity2 {
type: word doc
docRef: reqs/test_entity
}
element test_entity3 {
type: "test suite"
docRef: github.com/all_the_tests
}
test_entity - satisfies -> test_req2
test_req - traces -> test_req2
test_req - contains -> test_req3
test_req3 - contains -> test_req4
test_req4 - derives -> test_req5
test_req5 - refines -> test_req6
test_entity3 - verifies -> test_req5
test_req <- copies - test_entity2
```
```mermaid ```mermaid
requirementDiagram requirementDiagram

80
docs/sequenceDiagram.md
View File

@@ -5,7 +5,7 @@
Mermaid can render sequence diagrams. Mermaid can render sequence diagrams.
``` ```mermaid-code
sequenceDiagram sequenceDiagram
Alice->>John: Hello John, how are you? Alice->>John: Hello John, how are you?
John-->>Alice: Great! John-->>Alice: Great!
@@ -34,7 +34,7 @@ rendered in order of appearance in the diagram source text. Sometimes you might
different order than how they appear in the first message. It is possible to specify the actor's order of 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: appearance by doing the following:
``` ```mermaid-code
sequenceDiagram sequenceDiagram
participant Alice participant Alice
participant Bob participant Bob
@@ -53,7 +53,7 @@ sequenceDiagram
### Actors ### Actors
If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below. If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
``` ```mermaid-code
sequenceDiagram sequenceDiagram
actor Alice actor Alice
actor Bob actor Bob
@@ -69,7 +69,7 @@ sequenceDiagram
Bob->>Alice: Hi Alice Bob->>Alice: Hi Alice
``` ```
``` ```mermaid-code
sequenceDiagram sequenceDiagram
actor Alice actor Alice
actor Bob actor Bob
@@ -89,7 +89,7 @@ sequenceDiagram
The actor can have a convenient identifier and a descriptive label. The actor can have a convenient identifier and a descriptive label.
``` ```mermaid-code
sequenceDiagram sequenceDiagram
participant A as Alice participant A as Alice
participant J as John participant J as John
@@ -130,7 +130,7 @@ There are six types of arrows currently supported:
It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations: It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
``` ```mermaid-code
sequenceDiagram sequenceDiagram
Alice->>John: Hello John, how are you? Alice->>John: Hello John, how are you?
activate John activate John
@@ -148,7 +148,7 @@ sequenceDiagram
There is also a shortcut notation by appending `+`/`-` suffix to the message arrow: There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:
``` ```mermaid-code
sequenceDiagram sequenceDiagram
Alice->>+John: Hello John, how are you? Alice->>+John: Hello John, how are you?
John-->>-Alice: Great! John-->>-Alice: Great!
@@ -162,7 +162,7 @@ sequenceDiagram
Activations can be stacked for same actor: Activations can be stacked for same actor:
``` ```mermaid-code
sequenceDiagram sequenceDiagram
Alice->>+John: Hello John, how are you? Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me? Alice->>+John: John, can you hear me?
@@ -185,7 +185,7 @@ Note [ right of | left of | over ] [Actor]: Text in note content
See the example below: See the example below:
``` ```mermaid-code
sequenceDiagram sequenceDiagram
participant John participant John
Note right of John: Text in note Note right of John: Text in note
@@ -199,7 +199,7 @@ sequenceDiagram
It is also possible to create notes spanning two participants: It is also possible to create notes spanning two participants:
``` ```mermaid-code
sequenceDiagram sequenceDiagram
Alice->John: Hello John, how are you? Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction Note over Alice,John: A typical interaction
@@ -223,7 +223,7 @@ end
See the example below: See the example below:
``` ```mermaid-code
sequenceDiagram sequenceDiagram
Alice->John: Hello John, how are you? Alice->John: Hello John, how are you?
loop Every minute loop Every minute
@@ -261,7 +261,7 @@ end
See the example below: See the example below:
``` ```mermaid-code
sequenceDiagram sequenceDiagram
Alice->>Bob: Hello Bob, how are you? Alice->>Bob: Hello Bob, how are you?
alt is sick alt is sick
@@ -305,6 +305,17 @@ end
See the example below: See the example below:
```mermaid-code
sequenceDiagram
par Alice to Bob
Alice->>Bob: Hello guys!
and Alice to John
Alice->>John: Hello guys!
end
Bob-->>Alice: Hi Alice!
John-->>Alice: Hi Alice!
```
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
par Alice to Bob par Alice to Bob
@@ -318,6 +329,20 @@ sequenceDiagram
It is also possible to nest parallel blocks. It is also possible to nest parallel blocks.
```mermaid-code
sequenceDiagram
par Alice to Bob
Alice->>Bob: Go help John
and Alice to John
Alice->>John: I want this done today
par John to Charlie
John->>Charlie: Can we do this today?
and John to Diana
John->>Diana: Can you help us today?
end
end
```
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
par Alice to Bob par Alice to Bob
@@ -352,6 +377,25 @@ end
See the examples below: See the examples below:
```mermaid-code
sequenceDiagram
participant Alice
participant John
rect rgb(191, 223, 255)
note right of Alice: Alice calls John.
Alice->>+John: Hello John, how are you?
rect rgb(200, 150, 255)
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
end
John-->>-Alice: I feel great!
end
Alice ->>+ John: Did you want to go to the game tonight?
John -->>- Alice: Yeah! See you there.
```
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
participant Alice participant Alice
@@ -375,7 +419,7 @@ sequenceDiagram
Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
``` ```mermaid-code
sequenceDiagram sequenceDiagram
Alice->>John: Hello John, how are you? Alice->>John: Hello John, how are you?
%% this is a comment %% this is a comment
@@ -386,7 +430,7 @@ sequenceDiagram
It is possible to escape characters using the syntax exemplified here. It is possible to escape characters using the syntax exemplified here.
``` ```mermaid-code
sequenceDiagram sequenceDiagram
A->>B: I #9829; you! A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more! B->>A: I #9829; you #infin; times more!
@@ -405,7 +449,7 @@ Because semicolons can be used instead of line breaks to define the markup, you
It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below: It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
``` ```html
<script> <script>
mermaid.initialize({ mermaid.initialize({
sequence: { showSequenceNumbers: true }, sequence: { showSequenceNumbers: true },
@@ -415,7 +459,7 @@ It is possible to get a sequence number attached to each arrow in a sequence dia
It can also be be turned on via the diagram code as in the diagram: It can also be be turned on via the diagram code as in the diagram:
``` ```mermaid-code
sequenceDiagram sequenceDiagram
autonumber autonumber
Alice->>John: Hello John, how are you? Alice->>John: Hello John, how are you?
@@ -449,7 +493,7 @@ This can be configured by adding one or more link lines with the format:
link <actor>: <link-label> @ <link-url> link <actor>: <link-label> @ <link-url>
``` ```mermaid-code
sequenceDiagram sequenceDiagram
participant Alice participant Alice
participant John participant John
@@ -471,7 +515,7 @@ This can be configured by adding the links lines with the format:
An example is below: An example is below:
``` ```mermaid-code
sequenceDiagram sequenceDiagram
participant Alice participant Alice
participant John participant John

32
docs/stateDiagram.md
View File

@@ -4,7 +4,7 @@
Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml. Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
``` ```mermaid-code
stateDiagram-v2 stateDiagram-v2
[*] --> Still [*] --> Still
Still --> [*] Still --> [*]
@@ -42,7 +42,7 @@ In state diagrams systems are described in terms of its states and how the syste
A state can be declared in multiple ways. The simplest way is to define a state id as a description. A state can be declared in multiple ways. The simplest way is to define a state id as a description.
```markdown ```mermaid-code
stateDiagram-v2 stateDiagram-v2
s1 s1
``` ```
@@ -54,7 +54,7 @@ stateDiagram-v2
Another way is by using the state keyword with a description as per below: Another way is by using the state keyword with a description as per below:
```markdown ```mermaid-code
stateDiagram-v2 stateDiagram-v2
state "This is a state description" as s2 state "This is a state description" as s2
``` ```
@@ -66,7 +66,7 @@ stateDiagram-v2
Another way to define a state with a description is to define the state id followed by a colon and the description: Another way to define a state with a description is to define the state id followed by a colon and the description:
```markdown ```mermaid-code
stateDiagram-v2 stateDiagram-v2
s2 : This is a state description s2 : This is a state description
``` ```
@@ -82,7 +82,7 @@ Transitions are path/edges when one state passes into another. This is represent
When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way. When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.
``` ```mermaid-code
stateDiagram-v2 stateDiagram-v2
s1 --> s2 s1 --> s2
``` ```
@@ -94,7 +94,7 @@ stateDiagram-v2
It is possible to add text to a transition. To describe what it represents. It is possible to add text to a transition. To describe what it represents.
``` ```mermaid-code
stateDiagram-v2 stateDiagram-v2
s1 --> s2: A transition s1 --> s2: A transition
``` ```
@@ -108,7 +108,7 @@ stateDiagram-v2
There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and the direction of the transition to it defines it either as a start or a stop state. There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
``` ```mermaid-code
stateDiagram-v2 stateDiagram-v2
[*] --> s1 [*] --> s1
s1 --> [*] s1 --> [*]
@@ -127,7 +127,7 @@ have several internal states. These are called composite states in this terminol
In order to define a composite state you need to use the state keyword followed by an id and the body of the composite state between \{\}. See the example below: In order to define a composite state you need to use the state keyword followed by an id and the body of the composite state between \{\}. See the example below:
``` ```mermaid-code
stateDiagram-v2 stateDiagram-v2
[*] --> First [*] --> First
state First { state First {
@@ -147,7 +147,7 @@ stateDiagram-v2
You can do this in several layers: You can do this in several layers:
``` ```mermaid-code
stateDiagram-v2 stateDiagram-v2
[*] --> First [*] --> First
@@ -186,7 +186,7 @@ stateDiagram-v2
You can also define transitions also between composite states: You can also define transitions also between composite states:
``` ```mermaid-code
stateDiagram-v2 stateDiagram-v2
[*] --> First [*] --> First
First --> Second First --> Second
@@ -232,7 +232,7 @@ stateDiagram-v2
Sometimes you need to model a choice between two or more paths, you can do so using &lt;&lt;choice&gt;&gt;. Sometimes you need to model a choice between two or more paths, you can do so using &lt;&lt;choice&gt;&gt;.
``` ```mermaid-code
stateDiagram-v2 stateDiagram-v2
state if_state <<choice>> state if_state <<choice>>
[*] --> IsPositive [*] --> IsPositive
@@ -254,7 +254,7 @@ stateDiagram-v2
It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&lt;join&gt;&gt;. It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&lt;join&gt;&gt;.
``` ```mermaid-code
stateDiagram-v2 stateDiagram-v2
state fork_state <<fork>> state fork_state <<fork>>
[*] --> fork_state [*] --> fork_state
@@ -289,7 +289,7 @@ Sometimes nothing says it better then a Post-it note. That is also the case in s
Here you can choose to put the note to the *right of* or to the *left of* a node. Here you can choose to put the note to the *right of* or to the *left of* a node.
``` ```mermaid-code
stateDiagram-v2 stateDiagram-v2
State1: The state with a note State1: The state with a note
note right of State1 note right of State1
@@ -316,7 +316,7 @@ Here you can choose to put the note to the *right of* or to the *left of* a node
As in plantUml you can specify concurrency using the -- symbol. As in plantUml you can specify concurrency using the -- symbol.
``` ```mermaid-code
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@@ -358,7 +358,7 @@ stateDiagram-v2
With state diagrams you can use the direction statement to set the direction which the diagram will render like in this example. With state diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
``` ```mermaid-code
stateDiagram stateDiagram
direction LR direction LR
[*] --> A [*] --> A
@@ -389,7 +389,7 @@ stateDiagram
Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
``` ```mermaid-code
stateDiagram-v2 stateDiagram-v2
[*] --> Still [*] --> Still
Still --> [*] Still --> [*]

28
docs/theming.md
View File

@@ -12,7 +12,7 @@ Themes follow and build upon the Levels of Configuration and employ `directives`
Site-wide themes are still declared via `initialize` by site owners. Site-wide themes are still declared via `initialize` by site owners.
Example of `Initalize` call setting `theme` to `base`: Example of `Initalize` call setting `theme` to `base`:
``` ```js
mermaidAPI.initialize({ mermaidAPI.initialize({
'securityLevel': 'loose', 'theme': 'base' 'securityLevel': 'loose', 'theme': 'base'
}); });
@@ -23,7 +23,7 @@ Example of `Initalize` call setting `theme` to `base`:
When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array. When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
``` ```mermaid-code
%%{init: {'theme':'base'}}%% %%{init: {'theme':'base'}}%%
graph TD graph TD
a --> b a --> b
@@ -61,7 +61,7 @@ The easiest way to make a custom theme is to start with the base theme, and just
## Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`. ## Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.
``` ```mermaid-code
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -204,7 +204,7 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
# Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`. # Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
``` ```mermaid-code
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -248,7 +248,7 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
* make the edge label background differ from the subgraph by setting the edgeLabelBackground * make the edge label background differ from the subgraph by setting the edgeLabelBackground
``` ```mermaid-code
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%% %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -296,7 +296,7 @@ When adjusting a theme it might be helpful to look at how your preferred theme g
In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md) In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md)
### Flowchart ### Flowchart
``` ```mermaid-code
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -332,7 +332,7 @@ In the following examples, the directive `init` is used, with the `theme` being
``` ```
### Flowchart (beta) ### Flowchart (beta)
``` ```mermaid-code
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -368,7 +368,7 @@ In the following examples, the directive `init` is used, with the `theme` being
``` ```
### Sequence diagram ### Sequence diagram
``` ```mermaid-code
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
sequenceDiagram sequenceDiagram
autonumber autonumber
@@ -406,7 +406,7 @@ In the following examples, the directive `init` is used, with the `theme` being
``` ```
### Class diagram ### Class diagram
``` ```mermaid-code
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
classDiagram classDiagram
@@ -459,7 +459,7 @@ classDiagram
``` ```
### Gantt ### Gantt
``` ```mermaid-code
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@@ -520,7 +520,7 @@ gantt
``` ```
### State diagram ### State diagram
``` ```mermaid-code
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram stateDiagram
[*] --> Active [*] --> Active
@@ -581,7 +581,7 @@ gantt
### State diagram (beta) ### State diagram (beta)
``` ```mermaid-code
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@@ -640,7 +640,7 @@ stateDiagram-v2
### Entity Relations diagram ### Entity Relations diagram
``` ```mermaid-code
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
@@ -664,7 +664,7 @@ stateDiagram-v2
``` ```
### User journey diagram ### User journey diagram
``` ```mermaid-code
journey journey
title My working day title My working day
section Go to work section Go to work

2
docs/usage.md
View File

@@ -401,7 +401,7 @@ To set some configuration via the mermaid object. The two parameters that are su
* mermaid_config.startOnLoad * mermaid_config.startOnLoad
* mermaid_config.htmlLabels * mermaid_config.htmlLabels
``` ```js
mermaid_config.startOnLoad = true; mermaid_config.startOnLoad = true;
``` ```

2
docs/user-journey.md
View File

@@ -4,7 +4,7 @@
Mermaid can render user journey diagrams: Mermaid can render user journey diagrams:
```markdown ```mermaid-code
journey journey
title My working day title My working day
section Go to work section Go to work