mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-02-04 07:13:25 +08:00
Knut Sveidqvist
GitHub
commit
aeb6e860bb
@ -23,7 +23,7 @@
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
|
||||
@ -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 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
|
||||
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
a_a --> c --> d_d --> c_c
|
||||
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
class a_a apa;
|
||||
click a_a "http://www.aftonbladet.se" "apa"
|
||||
click a_a "https://www.aftonbladet.se" "apa"
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -203,7 +203,7 @@ Ensures options parameter does not attempt to override siteConfig secure keys.
|
||||
|
||||
| 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
|
||||
default: current siteConfig (optional, default `getSiteConfig()`)
|
||||
|
||||
@ -819,7 +819,7 @@ Default value: 'TB'
|
||||
### entityPadding
|
||||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| ------------- | ----------------------------------------------------------- | ------- | -------- | ------------------ |
|
||||
| ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
|
||||
| entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value |
|
||||
|
||||
**Notes:**
|
||||
@ -1005,8 +1005,8 @@ Pushes in a directive to the configuration
|
||||
## conf
|
||||
|
||||
| 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()`)
|
||||
|
||||
|
||||
@ -384,9 +384,9 @@ _URL Link:_
|
||||
```mmd
|
||||
classDiagram
|
||||
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
|
||||
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:_
|
||||
@ -412,11 +412,11 @@ classDiagram
|
||||
class Class01
|
||||
class Class02
|
||||
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 Class04
|
||||
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.
|
||||
@ -449,7 +449,7 @@ Beginners tip, a full example using interactive links in an html context:
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<script>
|
||||
|
||||
@ -64,7 +64,7 @@ This is important so that, if someone that does not know about this great featur
|
||||
|
||||
### 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:
|
||||
|
||||
@ -98,6 +98,7 @@ it('should render forks and joins', () => {
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### Any Questions or Suggestions?
|
||||
|
||||
@ -428,9 +428,9 @@ graph LR;
|
||||
B-->C;
|
||||
C-->D;
|
||||
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 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.
|
||||
|
||||
@ -443,10 +443,10 @@ graph LR;
|
||||
B-->C;
|
||||
C-->D;
|
||||
D-->E;
|
||||
click A "http://www.github.com" _blank
|
||||
click B "http://www.github.com" "Open this in a new tab" _blank
|
||||
click C href "http://www.github.com" _blank
|
||||
click D href "http://www.github.com" "Open this in a new tab" _blank
|
||||
click A "https://www.github.com" _blank
|
||||
click B "https://www.github.com" "Open this in a new tab" _blank
|
||||
click C href "https://www.github.com" _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:
|
||||
@ -459,9 +459,9 @@ Beginners tip, a full example using interactive links in a html context:
|
||||
B-->C;
|
||||
C-->D;
|
||||
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 D href "http://www.github.com" "This is a link"
|
||||
click D href "https://www.github.com" "This is a link"
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
## Directives
|
||||
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
|
||||
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.
|
||||
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.
|
||||
```
|
||||
@ -173,7 +173,7 @@ Some common flowchart configurations are:
|
||||
- *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.
|
||||
*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:
|
||||
|
||||
@ -196,15 +196,15 @@ A --> C[End]
|
||||
Some common sequence configurations are:
|
||||
- *width*: number
|
||||
- *height*: number
|
||||
- *messgageAlign*: left, center, right
|
||||
- *messageAlign*: left, center, right
|
||||
- *mirrorActors*: boolean
|
||||
- *useMaxWidth*: boolean
|
||||
- *rightAngles*: boolean
|
||||
- *showSequenceNumbers*: boolean
|
||||
- *wrap*: boolean
|
||||
|
||||
For complete list of sequeue 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*
|
||||
For complete list of sequence diagram configurations, see *defaultConfig.js* in the source code.
|
||||
*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.
|
||||
|
||||
@ -214,12 +214,12 @@ Let us see an example:
|
||||
sequenceDiagram
|
||||
|
||||
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.
|
||||
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`:
|
||||
|
||||
@ -232,7 +232,7 @@ Using in the diagram above, the wrap will be enabled.
|
||||
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
|
||||
sequenceDiagram
|
||||
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.
|
||||
Bob->Alice: Cool
|
||||
```
|
||||
|
||||
@ -449,9 +449,9 @@ flowchart LR
|
||||
B-->C
|
||||
C-->D
|
||||
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 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.
|
||||
@ -465,10 +465,10 @@ flowchart LR
|
||||
B-->C
|
||||
C-->D
|
||||
D-->E
|
||||
click A "http://www.github.com" _blank
|
||||
click B "http://www.github.com" "Open this in a new tab" _blank
|
||||
click C href "http://www.github.com" _blank
|
||||
click D href "http://www.github.com" "Open this in a new tab" _blank
|
||||
click A "https://www.github.com" _blank
|
||||
click B "https://www.github.com" "Open this in a new tab" _blank
|
||||
click C href "https://www.github.com" _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:
|
||||
@ -480,9 +480,9 @@ Beginners tip, a full example using interactive links in a html context:
|
||||
B-->C
|
||||
C-->D
|
||||
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 D href "http://www.github.com" "This is a link"
|
||||
click D href "https://www.github.com" "This is a link"
|
||||
</div>
|
||||
|
||||
<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
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
|
||||
@ -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.
|
||||
- `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.
|
||||
- `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.
|
||||
## 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`.
|
||||
|
||||
## 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)
|
||||
- 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.
|
||||
@ -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.
|
||||
Then, `test4` branch is drawn becuase the order of `1`.
|
||||
Then, `main` branch is drawn becuase the order of `2`.
|
||||
And, lastly `test1`is drawn becuase the order of `3`.
|
||||
Then, `test4` branch is drawn because the order of `1`.
|
||||
Then, `main` branch is drawn because the order of `2`.
|
||||
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
|
||||
```
|
||||
> #### 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*
|
||||
### 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.
|
||||
|
||||
@ -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**)
|
||||
- [Notion](https://notion.so) (**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)
|
||||
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
|
||||
- [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
|
||||
|
||||
- [coreBOS](http://blog.corebos.org/blog/december2019)
|
||||
- [coreBOS](https://blog.corebos.org/blog/december2019)
|
||||
|
||||
## 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)
|
||||
- [Sublime Text 3](https://sublimetext.com)
|
||||
- [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-)
|
||||
- [Light Table](http://lighttable.com/)
|
||||
- [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
|
||||
- [Draw.io](http://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
|
||||
- [Inkdrop](http://inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
|
||||
- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
|
||||
- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
|
||||
- [Vim](https://vim.org)
|
||||
- [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
|
||||
- [GNU Emacs](https://www.gnu.org/software/emacs/)
|
||||
- [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
|
||||
- [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)
|
||||
- [Iodide](https://github.com/iodide-project/iodide)
|
||||
- [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 action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
|
||||
- [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)
|
||||
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
|
||||
- [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
|
||||
|
||||
- [coreBOS](http://blog.corebos.org/blog/december2019)
|
||||
- [coreBOS](https://blog.corebos.org/blog/december2019)
|
||||
|
||||
## 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)
|
||||
- [Sublime Text 3](https://sublimetext.com)
|
||||
- [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-)
|
||||
- [Light Table](http://lighttable.com/)
|
||||
- [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
|
||||
- [Draw.io](http://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
|
||||
- [Inkdrop](http://inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
|
||||
- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
|
||||
- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
|
||||
- [Vim](https://vim.org)
|
||||
- [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
|
||||
- [GNU Emacs](https://www.gnu.org/software/emacs/)
|
||||
- [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
|
||||
- [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)
|
||||
- [Iodide](https://github.com/iodide-project/iodide)
|
||||
- [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
|
||||
|
||||
@ -52,7 +52,7 @@ parser.yy = db
|
||||
|
||||
### Step 2: Rendering
|
||||
|
||||
Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequendeRenderer.js rather then the flowchart renderer as this is a more generic example.
|
||||
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.
|
||||
|
||||
|
||||
@ -210,8 +210,8 @@ export const addDirective = (directive) => {
|
||||
* ## conf
|
||||
*
|
||||
* | 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()`)
|
||||
*/
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
* @param 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 cy = node.y;
|
||||
|
||||
@ -3,7 +3,7 @@ const intersectRect = (node, point) => {
|
||||
var y = node.y;
|
||||
|
||||
// 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 dy = point.y - y;
|
||||
var w = node.width / 2;
|
||||
|
||||
@ -943,7 +943,7 @@ const config = {
|
||||
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | ------------- | ----------------------------------------------------------- | ------- | -------- | ------------------ |
|
||||
* | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
|
||||
* | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value |
|
||||
*
|
||||
* **Notes:**
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* MIT license.
|
||||
*
|
||||
* 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)
|
||||
* Simplified BSD license.
|
||||
*/
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* MIT license.
|
||||
*
|
||||
* 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)
|
||||
* Simplified BSD license.
|
||||
*/
|
||||
|
||||
@ -188,7 +188,7 @@ describe('when using mermaid and ', function () {
|
||||
flowDb.clear();
|
||||
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();
|
||||
});
|
||||
|
||||
|
||||
@ -689,7 +689,7 @@ const handleDirective = function (p, directive, type) {
|
||||
|
||||
/** @param {any} 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
|
||||
flowRenderer.setConf(conf.flowchart);
|
||||
|
||||
@ -122,14 +122,14 @@ describe('when using mermaidAPI and ', function () {
|
||||
});
|
||||
describe('test mermaidApi.parse() for checking validity of input ', function () {
|
||||
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(() => 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();
|
||||
});
|
||||
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;
|
||||
// also test setParseErrorHandler() call working to set mermaid.parseError
|
||||
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(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);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user