mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
commit
aeb6e860bb
@ -23,7 +23,7 @@
|
|||||||
- Missing fontawesome icon support [\#830](https://github.com/knsv/mermaid/issues/830)
|
- Missing fontawesome icon support [\#830](https://github.com/knsv/mermaid/issues/830)
|
||||||
- Docs for integration with wiki.js? [\#829](https://github.com/knsv/mermaid/issues/829)
|
- Docs for integration with wiki.js? [\#829](https://github.com/knsv/mermaid/issues/829)
|
||||||
- Is this project still maintained? [\#826](https://github.com/knsv/mermaid/issues/826)
|
- Is this project still maintained? [\#826](https://github.com/knsv/mermaid/issues/826)
|
||||||
- typroa [\#823](https://github.com/knsv/mermaid/issues/823)
|
- typora [\#823](https://github.com/knsv/mermaid/issues/823)
|
||||||
- Maintain the order of the nodes in Flowchart [\#815](https://github.com/knsv/mermaid/issues/815)
|
- Maintain the order of the nodes in Flowchart [\#815](https://github.com/knsv/mermaid/issues/815)
|
||||||
- Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814)
|
- Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814)
|
||||||
- How load mermaidApi notejs electron [\#813](https://github.com/knsv/mermaid/issues/813)
|
- How load mermaidApi notejs electron [\#813](https://github.com/knsv/mermaid/issues/813)
|
||||||
|
@ -114,7 +114,7 @@ Finally, if it is not in the documentation, no one will know about it and then *
|
|||||||
|
|
||||||
The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the _navbar.md.
|
The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the _navbar.md.
|
||||||
|
|
||||||
The changes in master is reflected in http://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/
|
The changes in master is reflected in https://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/
|
||||||
|
|
||||||
## Last words
|
## Last words
|
||||||
|
|
||||||
|
@ -78,7 +78,7 @@
|
|||||||
a_a --> c --> d_d --> c_c
|
a_a --> c --> d_d --> c_c
|
||||||
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
|
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
|
||||||
class a_a apa;
|
class a_a apa;
|
||||||
click a_a "http://www.aftonbladet.se" "apa"
|
click a_a "https://www.aftonbladet.se" "apa"
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -203,7 +203,7 @@ Ensures options parameter does not attempt to override siteConfig secure keys.
|
|||||||
|
|
||||||
| Parameter | Description |Type | Required | Values|
|
| Parameter | Description |Type | Required | Values|
|
||||||
| --- | --- | --- | --- | --- |
|
| --- | --- | --- | --- | --- |
|
||||||
| conf| base set of values, which currentConfig coul be reset to.| Dictionary | Required | Any Values, with respect to the secure Array|
|
| conf| base set of values, which currentConfig could be reset to.| Dictionary | Required | Any Values, with respect to the secure Array|
|
||||||
|
|
||||||
```note
|
```note
|
||||||
default: current siteConfig (optional, default `getSiteConfig()`)
|
default: current siteConfig (optional, default `getSiteConfig()`)
|
||||||
|
@ -818,13 +818,13 @@ Default value: 'TB'
|
|||||||
|
|
||||||
### entityPadding
|
### entityPadding
|
||||||
|
|
||||||
| Parameter | Description | Type | Required | Values |
|
| Parameter | Description | Type | Required | Values |
|
||||||
| ------------- | ----------------------------------------------------------- | ------- | -------- | ------------------ |
|
| ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
|
||||||
| entityPadding | Minimum internal padding betweentext in box and box borders | Integer | 4 | Any Positive Value |
|
| entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value |
|
||||||
|
|
||||||
**Notes:**
|
**Notes:**
|
||||||
|
|
||||||
The minimum internal padding betweentext in an entity box and the enclosing box borders,
|
The minimum internal padding between text in an entity box and the enclosing box borders,
|
||||||
expressed in pixels.
|
expressed in pixels.
|
||||||
|
|
||||||
Default value: 15
|
Default value: 15
|
||||||
@ -1004,9 +1004,9 @@ Pushes in a directive to the configuration
|
|||||||
|
|
||||||
## conf
|
## conf
|
||||||
|
|
||||||
| Parameter | Description | Type | Required | Values |
|
| Parameter | Description | Type | Required | Values |
|
||||||
| --------- | ------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
|
| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
|
||||||
| conf | base set of values, which currentConfig coul be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
|
| conf | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
|
||||||
|
|
||||||
**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
|
**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
|
||||||
|
|
||||||
|
@ -384,9 +384,9 @@ _URL Link:_
|
|||||||
```mmd
|
```mmd
|
||||||
classDiagram
|
classDiagram
|
||||||
class Shape
|
class Shape
|
||||||
link Shape "http://www.github.com" "This is a tooltip for a link"
|
link Shape "https://www.github.com" "This is a tooltip for a link"
|
||||||
class Shape2
|
class Shape2
|
||||||
click Shape2 href "http://www.github.com" "This is a tooltip for a link"
|
click Shape2 href "https://www.github.com" "This is a tooltip for a link"
|
||||||
```
|
```
|
||||||
|
|
||||||
_Callback:_
|
_Callback:_
|
||||||
@ -412,11 +412,11 @@ classDiagram
|
|||||||
class Class01
|
class Class01
|
||||||
class Class02
|
class Class02
|
||||||
callback Class01 "callbackFunction" "Callback tooltip"
|
callback Class01 "callbackFunction" "Callback tooltip"
|
||||||
link Class02 "http://www.github.com" "This is a link"
|
link Class02 "https://www.github.com" "This is a link"
|
||||||
class Class03
|
class Class03
|
||||||
class Class04
|
class Class04
|
||||||
click Class03 call callbackFunction() "Callback tooltip"
|
click Class03 call callbackFunction() "Callback tooltip"
|
||||||
click Class04 href "http://www.github.com" "This is a link"
|
click Class04 href "https://www.github.com" "This is a link"
|
||||||
```
|
```
|
||||||
|
|
||||||
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
|
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
|
||||||
@ -449,7 +449,7 @@ Beginners tip, a full example using interactive links in an html context:
|
|||||||
}
|
}
|
||||||
|
|
||||||
callback Duck callback "Tooltip"
|
callback Duck callback "Tooltip"
|
||||||
link Zebra "http://www.github.com" "This is a link"
|
link Zebra "https://www.github.com" "This is a link"
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -64,7 +64,7 @@ This is important so that, if someone that does not know about this great featur
|
|||||||
|
|
||||||
### Add E2E Tests
|
### Add E2E Tests
|
||||||
|
|
||||||
This tests the rendering and visual apearance of the diagrams. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
|
This tests the rendering and visual appearance of the diagrams. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
|
||||||
|
|
||||||
To start working with the e2e tests:
|
To start working with the e2e tests:
|
||||||
|
|
||||||
@ -98,6 +98,7 @@ it('should render forks and joins', () => {
|
|||||||
);
|
);
|
||||||
cy.get('svg');
|
cy.get('svg');
|
||||||
});
|
});
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Any Questions or Suggestions?
|
### Any Questions or Suggestions?
|
||||||
|
@ -428,9 +428,9 @@ graph LR;
|
|||||||
B-->C;
|
B-->C;
|
||||||
C-->D;
|
C-->D;
|
||||||
click A callback "Tooltip for a callback"
|
click A callback "Tooltip for a callback"
|
||||||
click B "http://www.github.com" "This is a tooltip for a link"
|
click B "https://www.github.com" "This is a tooltip for a link"
|
||||||
click A call callback() "Tooltip for a callback"
|
click A call callback() "Tooltip for a callback"
|
||||||
click B href "http://www.github.com" "This is a tooltip for a link"
|
click B href "https://www.github.com" "This is a tooltip for a link"
|
||||||
```
|
```
|
||||||
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
|
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
|
||||||
|
|
||||||
@ -443,10 +443,10 @@ graph LR;
|
|||||||
B-->C;
|
B-->C;
|
||||||
C-->D;
|
C-->D;
|
||||||
D-->E;
|
D-->E;
|
||||||
click A "http://www.github.com" _blank
|
click A "https://www.github.com" _blank
|
||||||
click B "http://www.github.com" "Open this in a new tab" _blank
|
click B "https://www.github.com" "Open this in a new tab" _blank
|
||||||
click C href "http://www.github.com" _blank
|
click C href "https://www.github.com" _blank
|
||||||
click D href "http://www.github.com" "Open this in a new tab" _blank
|
click D href "https://www.github.com" "Open this in a new tab" _blank
|
||||||
```
|
```
|
||||||
|
|
||||||
Beginners tip, a full example using interactive links in a html context:
|
Beginners tip, a full example using interactive links in a html context:
|
||||||
@ -459,9 +459,9 @@ Beginners tip, a full example using interactive links in a html context:
|
|||||||
B-->C;
|
B-->C;
|
||||||
C-->D;
|
C-->D;
|
||||||
click A callback "Tooltip"
|
click A callback "Tooltip"
|
||||||
click B "http://www.github.com" "This is a link"
|
click B "https://www.github.com" "This is a link"
|
||||||
click C call callback() "Tooltip"
|
click C call callback() "Tooltip"
|
||||||
click D href "http://www.github.com" "This is a link"
|
click D href "https://www.github.com" "This is a link"
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -5,9 +5,9 @@
|
|||||||
## Directives
|
## Directives
|
||||||
Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
|
Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
|
||||||
|
|
||||||
The significance of having directives is that you have them available while writing the diagram, and can modify the defualt global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.
|
The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.
|
||||||
|
|
||||||
While directives allow you to change most of the default configuation settings, there are some that are not available, that too for security reasons. Also, you do have the *option to define the set of configurations* that you would allow to be available to the diagram author for overriding with help of directives.
|
While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the *option to define the set of configurations* that you would allow to be available to the diagram author for overriding with help of directives.
|
||||||
|
|
||||||
## Types of Directives options
|
## Types of Directives options
|
||||||
Mermaid basically supports two types of configuration options to be overridden by directives.
|
Mermaid basically supports two types of configuration options to be overridden by directives.
|
||||||
@ -21,7 +21,7 @@ Mermaid basically supports two types of configuration options to be overridden b
|
|||||||
|
|
||||||
|
|
||||||
2) *Diagram specific configurations* : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
|
2) *Diagram specific configurations* : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
|
||||||
For example, `mirrroActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
|
For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
|
||||||
|
|
||||||
**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
|
**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
|
||||||
```
|
```
|
||||||
@ -173,7 +173,7 @@ Some common flowchart configurations are:
|
|||||||
- *useMaxWidth*: number
|
- *useMaxWidth*: number
|
||||||
|
|
||||||
For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
|
For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
|
||||||
*Soon we plan to publis a complete list all diagram specific configurations updated in the docs*
|
*Soon we plan to publish a complete list all diagram specific configurations updated in the docs*
|
||||||
|
|
||||||
The following code snippet changes flowchart config:
|
The following code snippet changes flowchart config:
|
||||||
|
|
||||||
@ -196,15 +196,15 @@ A --> C[End]
|
|||||||
Some common sequence configurations are:
|
Some common sequence configurations are:
|
||||||
- *width*: number
|
- *width*: number
|
||||||
- *height*: number
|
- *height*: number
|
||||||
- *messgageAlign*: left, center, right
|
- *messageAlign*: left, center, right
|
||||||
- *mirrorActors*: boolean
|
- *mirrorActors*: boolean
|
||||||
- *useMaxWidth*: boolean
|
- *useMaxWidth*: boolean
|
||||||
- *rightAngles*: boolean
|
- *rightAngles*: boolean
|
||||||
- *showSequenceNumbers*: boolean
|
- *showSequenceNumbers*: boolean
|
||||||
- *wrap*: boolean
|
- *wrap*: boolean
|
||||||
|
|
||||||
For complete list of sequeue diagram configurations, see *defaultConfig.js* in the source code.
|
For complete list of sequence diagram configurations, see *defaultConfig.js* in the source code.
|
||||||
*Soon we plan to publis a complete list all diagram specific configurations updated in the docs*
|
*Soon we plan to publish a complete list all diagram specific configurations updated in the docs*
|
||||||
|
|
||||||
So, `wrap` by default has a value of `false` for sequence diagrams.
|
So, `wrap` by default has a value of `false` for sequence diagrams.
|
||||||
|
|
||||||
@ -214,12 +214,12 @@ Let us see an example:
|
|||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
|
|
||||||
Alice->Bob: Hello Bob, how are you?
|
Alice->Bob: Hello Bob, how are you?
|
||||||
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invansion?
|
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
|
||||||
Alice->Bob: Good.
|
Alice->Bob: Good.
|
||||||
Bob->Alice: Cool
|
Bob->Alice: Cool
|
||||||
```
|
```
|
||||||
|
|
||||||
Now let us enble wrap for sequence diagrams.
|
Now let us enable wrap for sequence diagrams.
|
||||||
|
|
||||||
The following code snippet changes sequence diagram config for `wrap` to `true`:
|
The following code snippet changes sequence diagram config for `wrap` to `true`:
|
||||||
|
|
||||||
@ -232,7 +232,7 @@ Using in the diagram above, the wrap will be enabled.
|
|||||||
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
|
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
|
||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
Alice->Bob: Hello Bob, how are you?
|
Alice->Bob: Hello Bob, how are you?
|
||||||
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invansion?
|
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
|
||||||
Alice->Bob: Good.
|
Alice->Bob: Good.
|
||||||
Bob->Alice: Cool
|
Bob->Alice: Cool
|
||||||
```
|
```
|
||||||
|
@ -449,9 +449,9 @@ flowchart LR
|
|||||||
B-->C
|
B-->C
|
||||||
C-->D
|
C-->D
|
||||||
click A callback "Tooltip for a callback"
|
click A callback "Tooltip for a callback"
|
||||||
click B "http://www.github.com" "This is a tooltip for a link"
|
click B "https://www.github.com" "This is a tooltip for a link"
|
||||||
click A call callback() "Tooltip for a callback"
|
click A call callback() "Tooltip for a callback"
|
||||||
click B href "http://www.github.com" "This is a tooltip for a link"
|
click B href "https://www.github.com" "This is a tooltip for a link"
|
||||||
```
|
```
|
||||||
|
|
||||||
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
|
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
|
||||||
@ -465,10 +465,10 @@ flowchart LR
|
|||||||
B-->C
|
B-->C
|
||||||
C-->D
|
C-->D
|
||||||
D-->E
|
D-->E
|
||||||
click A "http://www.github.com" _blank
|
click A "https://www.github.com" _blank
|
||||||
click B "http://www.github.com" "Open this in a new tab" _blank
|
click B "https://www.github.com" "Open this in a new tab" _blank
|
||||||
click C href "http://www.github.com" _blank
|
click C href "https://www.github.com" _blank
|
||||||
click D href "http://www.github.com" "Open this in a new tab" _blank
|
click D href "https://www.github.com" "Open this in a new tab" _blank
|
||||||
```
|
```
|
||||||
|
|
||||||
Beginners tip, a full example using interactive links in a html context:
|
Beginners tip, a full example using interactive links in a html context:
|
||||||
@ -480,9 +480,9 @@ Beginners tip, a full example using interactive links in a html context:
|
|||||||
B-->C
|
B-->C
|
||||||
C-->D
|
C-->D
|
||||||
click A callback "Tooltip"
|
click A callback "Tooltip"
|
||||||
click B "http://www.github.com" "This is a link"
|
click B "https://www.github.com" "This is a link"
|
||||||
click C call callback() "Tooltip"
|
click C call callback() "Tooltip"
|
||||||
click D href "http://www.github.com" "This is a link"
|
click D href "https://www.github.com" "This is a link"
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -136,7 +136,7 @@ SSS 0..999 Thousandths of a second
|
|||||||
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z
|
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z
|
||||||
```
|
```
|
||||||
|
|
||||||
More info in: http://momentjs.com/docs/#/parsing/string-format/
|
More info in: https://momentjs.com/docs/#/parsing/string-format/
|
||||||
|
|
||||||
### Output date format on the axis
|
### Output date format on the axis
|
||||||
|
|
||||||
|
@ -187,7 +187,7 @@ In Mermaid, you have the option to configure the gitgraph diagram. You can confi
|
|||||||
- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram.
|
- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram.
|
||||||
- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram.
|
- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram.
|
||||||
- `mainBranchName` : String, default is `main`. The name of the default/root branch.
|
- `mainBranchName` : String, default is `main`. The name of the default/root branch.
|
||||||
- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meanig, by default `main` branch is the first in the order.
|
- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order.
|
||||||
|
|
||||||
Let's look at them one by one.
|
Let's look at them one by one.
|
||||||
## Hiding Branch names and lines
|
## Hiding Branch names and lines
|
||||||
@ -321,11 +321,11 @@ Usage example:
|
|||||||
Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`.
|
Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`.
|
||||||
|
|
||||||
## Customizing branch ordering
|
## Customizing branch ordering
|
||||||
In Mermaid, by default the branches are shown in the order of their defintion or appearance in the diagram code.
|
In Mermaid, by default the branches are shown in the order of their definition or appearance in the diagram code.
|
||||||
|
|
||||||
Sometimes you may want to customize the order of the branches. You can do this by using the `order` keyword next the branch definiton. You can set it to a positive number.
|
Sometimes you may want to customize the order of the branches. You can do this by using the `order` keyword next the branch definition. You can set it to a positive number.
|
||||||
|
|
||||||
Mermaid follows the given precendence order of the `order` keyword.
|
Mermaid follows the given precedence order of the `order` keyword.
|
||||||
- Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config)
|
- Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config)
|
||||||
- Next, All branches without an `order` are shown in the order of their appearance in the diagram code.
|
- Next, All branches without an `order` are shown in the order of their appearance in the diagram code.
|
||||||
- Next, All branches with an `order` are shown in the order of their `order` value.
|
- Next, All branches with an `order` are shown in the order of their `order` value.
|
||||||
@ -357,11 +357,11 @@ Usage example:
|
|||||||
|
|
||||||
```
|
```
|
||||||
Look at the diagram, here, all the branches without a specified order are drawn in their order of definition.
|
Look at the diagram, here, all the branches without a specified order are drawn in their order of definition.
|
||||||
Then, `test4` branch is drawn becuase the order of `1`.
|
Then, `test4` branch is drawn because the order of `1`.
|
||||||
Then, `main` branch is drawn becuase the order of `2`.
|
Then, `main` branch is drawn because the order of `2`.
|
||||||
And, lastly `test1`is drawn becuase the order of `3`.
|
And, lastly `test1`is drawn because the order of `3`.
|
||||||
|
|
||||||
NOTE: Becuase we have overriden the `mainBranchOrder` to `2`, the `main` branch is not drawn in the begining, instead follows the ordering.
|
NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch is not drawn in the beginning, instead follows the ordering.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -641,7 +641,7 @@ See how the default theme is used to set the colors for the branches:
|
|||||||
commit
|
commit
|
||||||
```
|
```
|
||||||
> #### IMPORTANT:
|
> #### IMPORTANT:
|
||||||
> Mermaid supports the theme variables to override the default values for **upto 8 branches**, i.e., you can set the color/styling of upto 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. 9th branch will use the color/styling of 1st branch, or branch at index postion '8' will use the color/styling of branch at index position '0'.
|
> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. 9th branch will use the color/styling of 1st branch, or branch at index position '8' will use the color/styling of branch at index position '0'.
|
||||||
*More on this in the next section. See examples on **Customizing branch label colors** below*
|
*More on this in the next section. See examples on **Customizing branch label colors** below*
|
||||||
### Customizing branch colors
|
### Customizing branch colors
|
||||||
You can customize the branch colors using the `git0` to `git7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `git0` variable will drive the value of the first branch, `git1` will drive the value of the second branch and so on.
|
You can customize the branch colors using the `git0` to `git7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `git0` variable will drive the value of the first branch, `git1` will drive the value of the second branch and so on.
|
||||||
|
@ -17,7 +17,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
- [Joplin](https://joplinapp.org) (**Native support**)
|
- [Joplin](https://joplinapp.org) (**Native support**)
|
||||||
- [Notion](https://notion.so) (**Native support**)
|
- [Notion](https://notion.so) (**Native support**)
|
||||||
- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
|
- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
|
||||||
- [GitBook](http://gitbook.com)
|
- [GitBook](https://gitbook.com)
|
||||||
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
|
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
|
||||||
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
|
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
|
||||||
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
|
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
|
||||||
@ -33,7 +33,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
|
|
||||||
## CRM/ERP/Similar
|
## CRM/ERP/Similar
|
||||||
|
|
||||||
- [coreBOS](http://blog.corebos.org/blog/december2019)
|
- [coreBOS](https://blog.corebos.org/blog/december2019)
|
||||||
|
|
||||||
## Blogs
|
## Blogs
|
||||||
|
|
||||||
@ -104,18 +104,18 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
- [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid)
|
- [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid)
|
||||||
- [Sublime Text 3](https://sublimetext.com)
|
- [Sublime Text 3](https://sublimetext.com)
|
||||||
- [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
|
- [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
|
||||||
- [Astah](http://astah.net)
|
- [Astah](https://astah.net)
|
||||||
- [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
|
- [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
|
||||||
- [Light Table](http://lighttable.com/)
|
- [Light Table](http://lighttable.com/)
|
||||||
- [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
|
- [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
|
||||||
- [Draw.io](http://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
|
- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
|
||||||
- [Inkdrop](http://inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
|
- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
|
||||||
- [Vim](https://vim.org)
|
- [Vim](https://vim.org)
|
||||||
- [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
|
- [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
|
||||||
- [GNU Emacs](https://www.gnu.org/software/emacs/)
|
- [GNU Emacs](https://www.gnu.org/software/emacs/)
|
||||||
- [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
|
- [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
|
||||||
- [Org-Mode integration](https://github.com/arnm/ob-mermaid)
|
- [Org-Mode integration](https://github.com/arnm/ob-mermaid)
|
||||||
- [Brackets](http://brackets.io/)
|
- [Brackets](https://brackets.io/)
|
||||||
- [Mermaid Preview](https://s3.amazonaws.com/extend.brackets/alanhohn.mermaid-preview/alanhohn.mermaid-preview-1.0.2.zip)
|
- [Mermaid Preview](https://s3.amazonaws.com/extend.brackets/alanhohn.mermaid-preview/alanhohn.mermaid-preview-1.0.2.zip)
|
||||||
- [Iodide](https://github.com/iodide-project/iodide)
|
- [Iodide](https://github.com/iodide-project/iodide)
|
||||||
- [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
|
- [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
|
||||||
|
@ -15,7 +15,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
- [GitHub](https://github.com)
|
- [GitHub](https://github.com)
|
||||||
- [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
|
- [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
|
||||||
- [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
|
- [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
|
||||||
- [GitBook](http://gitbook.com)
|
- [GitBook](https://gitbook.com)
|
||||||
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
|
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
|
||||||
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
|
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
|
||||||
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
|
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
|
||||||
@ -30,7 +30,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
|
|
||||||
## CRM/ERP/Similar
|
## CRM/ERP/Similar
|
||||||
|
|
||||||
- [coreBOS](http://blog.corebos.org/blog/december2019)
|
- [coreBOS](https://blog.corebos.org/blog/december2019)
|
||||||
|
|
||||||
## Blogs
|
## Blogs
|
||||||
|
|
||||||
@ -101,18 +101,18 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
- [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid)
|
- [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid)
|
||||||
- [Sublime Text 3](https://sublimetext.com)
|
- [Sublime Text 3](https://sublimetext.com)
|
||||||
- [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
|
- [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
|
||||||
- [Astah](http://astah.net)
|
- [Astah](https://astah.net)
|
||||||
- [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
|
- [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
|
||||||
- [Light Table](http://lighttable.com/)
|
- [Light Table](http://lighttable.com/)
|
||||||
- [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
|
- [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
|
||||||
- [Draw.io](http://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
|
- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
|
||||||
- [Inkdrop](http://inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
|
- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
|
||||||
- [Vim](https://vim.org)
|
- [Vim](https://vim.org)
|
||||||
- [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
|
- [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
|
||||||
- [GNU Emacs](https://www.gnu.org/software/emacs/)
|
- [GNU Emacs](https://www.gnu.org/software/emacs/)
|
||||||
- [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
|
- [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
|
||||||
- [Org-Mode integration](https://github.com/arnm/ob-mermaid)
|
- [Org-Mode integration](https://github.com/arnm/ob-mermaid)
|
||||||
- [Brackets](http://brackets.io/)
|
- [Brackets](https://brackets.io/)
|
||||||
- [Mermaid Preview](https://s3.amazonaws.com/extend.brackets/alanhohn.mermaid-preview/alanhohn.mermaid-preview-1.0.2.zip)
|
- [Mermaid Preview](https://s3.amazonaws.com/extend.brackets/alanhohn.mermaid-preview/alanhohn.mermaid-preview-1.0.2.zip)
|
||||||
- [Iodide](https://github.com/iodide-project/iodide)
|
- [Iodide](https://github.com/iodide-project/iodide)
|
||||||
- [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
|
- [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
|
||||||
|
@ -52,7 +52,7 @@ parser.yy = db
|
|||||||
|
|
||||||
### Step 2: Rendering
|
### 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.
|
Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather then the flowchart renderer as this is a more generic example.
|
||||||
|
|
||||||
Place the renderer in the diagram folder.
|
Place the renderer in the diagram folder.
|
||||||
|
|
||||||
|
@ -209,9 +209,9 @@ export const addDirective = (directive) => {
|
|||||||
*
|
*
|
||||||
* ## conf
|
* ## conf
|
||||||
*
|
*
|
||||||
* | Parameter | Description | Type | Required | Values |
|
* | Parameter | Description | Type | Required | Values |
|
||||||
* | --------- | ------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
|
* | --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
|
||||||
* | conf | base set of values, which currentConfig coul be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
|
* | conf | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
|
||||||
*
|
*
|
||||||
* **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
|
* **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
|
||||||
*/
|
*/
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
* @param point
|
* @param point
|
||||||
*/
|
*/
|
||||||
function intersectEllipse(node, rx, ry, point) {
|
function intersectEllipse(node, rx, ry, point) {
|
||||||
// Formulae from: http://mathworld.wolfram.com/Ellipse-LineIntersection.html
|
// Formulae from: https://mathworld.wolfram.com/Ellipse-LineIntersection.html
|
||||||
|
|
||||||
var cx = node.x;
|
var cx = node.x;
|
||||||
var cy = node.y;
|
var cy = node.y;
|
||||||
|
@ -3,7 +3,7 @@ const intersectRect = (node, point) => {
|
|||||||
var y = node.y;
|
var y = node.y;
|
||||||
|
|
||||||
// Rectangle intersection algorithm from:
|
// Rectangle intersection algorithm from:
|
||||||
// http://math.stackexchange.com/questions/108113/find-edge-between-two-boxes
|
// https://math.stackexchange.com/questions/108113/find-edge-between-two-boxes
|
||||||
var dx = point.x - x;
|
var dx = point.x - x;
|
||||||
var dy = point.y - y;
|
var dy = point.y - y;
|
||||||
var w = node.width / 2;
|
var w = node.width / 2;
|
||||||
|
@ -942,13 +942,13 @@ const config = {
|
|||||||
minEntityHeight: 75,
|
minEntityHeight: 75,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* | Parameter | Description | Type | Required | Values |
|
* | Parameter | Description | Type | Required | Values |
|
||||||
* | ------------- | ----------------------------------------------------------- | ------- | -------- | ------------------ |
|
* | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
|
||||||
* | entityPadding | Minimum internal padding betweentext in box and box borders | Integer | 4 | Any Positive Value |
|
* | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value |
|
||||||
*
|
*
|
||||||
* **Notes:**
|
* **Notes:**
|
||||||
*
|
*
|
||||||
* The minimum internal padding betweentext in an entity box and the enclosing box borders,
|
* The minimum internal padding between text in an entity box and the enclosing box borders,
|
||||||
* expressed in pixels.
|
* expressed in pixels.
|
||||||
*
|
*
|
||||||
* Default value: 15
|
* Default value: 15
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
* MIT license.
|
* MIT license.
|
||||||
*
|
*
|
||||||
* Based on js sequence diagrams jison grammr
|
* Based on js sequence diagrams jison grammr
|
||||||
* http://bramp.github.io/js-sequence-diagrams/
|
* https://bramp.github.io/js-sequence-diagrams/
|
||||||
* (c) 2012-2013 Andrew Brampton (bramp.net)
|
* (c) 2012-2013 Andrew Brampton (bramp.net)
|
||||||
* Simplified BSD license.
|
* Simplified BSD license.
|
||||||
*/
|
*/
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
* MIT license.
|
* MIT license.
|
||||||
*
|
*
|
||||||
* Based on js sequence diagrams jison grammr
|
* Based on js sequence diagrams jison grammr
|
||||||
* http://bramp.github.io/js-sequence-diagrams/
|
* https://bramp.github.io/js-sequence-diagrams/
|
||||||
* (c) 2012-2013 Andrew Brampton (bramp.net)
|
* (c) 2012-2013 Andrew Brampton (bramp.net)
|
||||||
* Simplified BSD license.
|
* Simplified BSD license.
|
||||||
*/
|
*/
|
||||||
|
@ -188,7 +188,7 @@ describe('when using mermaid and ', function () {
|
|||||||
flowDb.clear();
|
flowDb.clear();
|
||||||
flowDb.setGen('gen-2');
|
flowDb.setGen('gen-2');
|
||||||
});
|
});
|
||||||
it('it should throw for an invalid definiton', function () {
|
it('it should throw for an invalid definition', function () {
|
||||||
expect(() => mermaid.parse('this is not a mermaid diagram definition')).toThrow();
|
expect(() => mermaid.parse('this is not a mermaid diagram definition')).toThrow();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -689,7 +689,7 @@ const handleDirective = function (p, directive, type) {
|
|||||||
|
|
||||||
/** @param {any} conf */
|
/** @param {any} conf */
|
||||||
function updateRendererConfigs(conf) {
|
function updateRendererConfigs(conf) {
|
||||||
// Todo remove, all diagrams should get config on demoand from the config object, no need for this
|
// Todo remove, all diagrams should get config on demand from the config object, no need for this
|
||||||
|
|
||||||
// gitGraphRenderer.setConf(conf.git); // Todo Remove all of these
|
// gitGraphRenderer.setConf(conf.git); // Todo Remove all of these
|
||||||
flowRenderer.setConf(conf.flowchart);
|
flowRenderer.setConf(conf.flowchart);
|
||||||
|
@ -122,14 +122,14 @@ describe('when using mermaidAPI and ', function () {
|
|||||||
});
|
});
|
||||||
describe('test mermaidApi.parse() for checking validity of input ', function () {
|
describe('test mermaidApi.parse() for checking validity of input ', function () {
|
||||||
mermaid.parseError = undefined; // ensure it parseError undefined
|
mermaid.parseError = undefined; // ensure it parseError undefined
|
||||||
it('it should throw for an invalid definiton (with no mermaid.parseError() defined)', function () {
|
it('it should throw for an invalid definition (with no mermaid.parseError() defined)', function () {
|
||||||
expect(mermaid.parseError).toEqual(undefined);
|
expect(mermaid.parseError).toEqual(undefined);
|
||||||
expect(() => mermaidAPI.parse('this is not a mermaid diagram definition')).toThrow();
|
expect(() => mermaidAPI.parse('this is not a mermaid diagram definition')).toThrow();
|
||||||
});
|
});
|
||||||
it('it should not throw for a valid definiton', function () {
|
it('it should not throw for a valid definition', function () {
|
||||||
expect(() => mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).not.toThrow();
|
expect(() => mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).not.toThrow();
|
||||||
});
|
});
|
||||||
it('it should return false for invalid definiton WITH a parseError() callback defined', function () {
|
it('it should return false for invalid definition WITH a parseError() callback defined', function () {
|
||||||
var parseErrorWasCalled = false;
|
var parseErrorWasCalled = false;
|
||||||
// also test setParseErrorHandler() call working to set mermaid.parseError
|
// also test setParseErrorHandler() call working to set mermaid.parseError
|
||||||
mermaid.setParseErrorHandler(function (error, hash) {
|
mermaid.setParseErrorHandler(function (error, hash) {
|
||||||
@ -140,7 +140,7 @@ describe('when using mermaidAPI and ', function () {
|
|||||||
expect(mermaidAPI.parse('this is not a mermaid diagram definition')).toEqual(false);
|
expect(mermaidAPI.parse('this is not a mermaid diagram definition')).toEqual(false);
|
||||||
expect(parseErrorWasCalled).toEqual(true);
|
expect(parseErrorWasCalled).toEqual(true);
|
||||||
});
|
});
|
||||||
it('it should return true for valid definiton', function () {
|
it('it should return true for valid definition', function () {
|
||||||
expect(mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).toEqual(true);
|
expect(mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).toEqual(true);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user