Andreas Deininger
Andreas Deininger
parent
ef9740bb38
commit
8e157423e0
|
|
@ -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()`)
|
||||
|
|
|
|||
|
|
@ -818,13 +818,13 @@ Default value: 'TB'
|
|||
|
||||
### entityPadding
|
||||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| ------------- | ----------------------------------------------------------- | ------- | -------- | ------------------ |
|
||||
| entityPadding | Minimum internal padding betweentext in box and box borders | Integer | 4 | Any Positive Value |
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
|
||||
| entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value |
|
||||
|
||||
**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.
|
||||
|
||||
Default value: 15
|
||||
|
|
@ -1004,9 +1004,9 @@ 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 |
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
|
||||
| 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>
|
||||
|
|
|
|||
|
|
@ -1,134 +1,135 @@
|
|||
# Development and Contribution 🙌
|
||||
|
||||
So you want to help? That's great!
|
||||
|
||||
|
||||
|
||||
Here are a few things to know to get you started on the right path.
|
||||
|
||||
**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
|
||||
|
||||
**Note: Commits and Pull Requests should be directed to the develop branch.**
|
||||
|
||||
## Branching
|
||||
|
||||
Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. So development is done in the `develop` branch.
|
||||
|
||||
Once development is done we branch a `release` branch from `develop` for testing.
|
||||
|
||||
Once the release happens we merge the `release` branch with `master` and kill the `release` branch.
|
||||
|
||||
This means that **you should branch off your pull request from develop** and direct all Pull Requests to it.
|
||||
|
||||
## Contributing Code
|
||||
|
||||
We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein *knsv, Knut Sveidqvist* is the primary reviewer of changes and merging pull requests. The process is as follows:
|
||||
|
||||
* Large changes reviewed by knsv or other developer asked to review by knsv
|
||||
* Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
|
||||
* Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
|
||||
|
||||
When you commit code, create a branch with the following naming convention:
|
||||
|
||||
Start with the type, such as **feature** or **bug**, followed by the issue number for reference, and a text that describes the issue.
|
||||
|
||||
**One example:**
|
||||
|
||||
`feature/945_state_diagrams`
|
||||
|
||||
**Another example:**
|
||||
|
||||
`bug/123_nasty_bug_branch`
|
||||
|
||||
## Contributing to Documentation
|
||||
|
||||
If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
|
||||
|
||||
The docs are located in the `docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
|
||||
|
||||
> **All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
|
||||
|
||||
The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
|
||||
|
||||
## How to Contribute to Documentation
|
||||
|
||||
We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
|
||||
|
||||
The documentation is located in the `docs` directory and organized according to relevant subfolder.
|
||||
|
||||
We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
|
||||
|
||||
### Add Unit Tests for Parsing
|
||||
|
||||
This is important so that, if someone that does not know about this great feature suggests a change to the grammar, they get notified early on when that change breaks the parser. Another important aspect is that, without proper parsing, tests refactoring is pretty much impossible.
|
||||
|
||||
### 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!
|
||||
|
||||
To start working with the e2e tests:
|
||||
|
||||
1. Run `yarn dev` to start the dev server
|
||||
2. Start **Cypress** by running `cypress open` in the **mermaid** folder.
|
||||
(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
|
||||
|
||||
The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
|
||||
|
||||
When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag it for review if it differs.
|
||||
|
||||
This is what a rendering test looks like:
|
||||
|
||||
```js
|
||||
it('should render forks and joins', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram
|
||||
state fork_state <<fork>>
|
||||
[*] --> fork_state
|
||||
fork_state --> State2
|
||||
fork_state --> State3
|
||||
|
||||
state join_state <<join>>
|
||||
State2 --> join_state
|
||||
State3 --> join_state
|
||||
join_state --> State4
|
||||
State4 --> [*]
|
||||
`,
|
||||
{ logLevel: 0 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
```
|
||||
|
||||
### Any Questions or Suggestions?
|
||||
|
||||
After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
|
||||
|
||||
### How to Contribute a Suggestion
|
||||
|
||||
Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
|
||||
|
||||
To edit Docs on your computer:
|
||||
|
||||
1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory in the `develop` branch.
|
||||
2. Create a fork of the develop branch.
|
||||
3. Make changes or add new documentation.
|
||||
4. Commit changes to your fork and push it to GitHub.
|
||||
5. Create a Pull Request of your fork.
|
||||
|
||||
To edit Docs on GitHub:
|
||||
|
||||
1. Login to [GitHub.com](https://www.github.com).
|
||||
2. Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
|
||||
3. To edit a file, click the pencil icon at the top-right of the file contents panel.
|
||||
4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
|
||||
5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
|
||||
6. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
|
||||
|
||||
## Last Words
|
||||
|
||||
Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
|
||||
|
||||
[Join our Slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
||||
|
||||
|
||||
# Development and Contribution 🙌
|
||||
|
||||
So you want to help? That's great!
|
||||
|
||||
|
||||
|
||||
Here are a few things to know to get you started on the right path.
|
||||
|
||||
**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
|
||||
|
||||
**Note: Commits and Pull Requests should be directed to the develop branch.**
|
||||
|
||||
## Branching
|
||||
|
||||
Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. So development is done in the `develop` branch.
|
||||
|
||||
Once development is done we branch a `release` branch from `develop` for testing.
|
||||
|
||||
Once the release happens we merge the `release` branch with `master` and kill the `release` branch.
|
||||
|
||||
This means that **you should branch off your pull request from develop** and direct all Pull Requests to it.
|
||||
|
||||
## Contributing Code
|
||||
|
||||
We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein *knsv, Knut Sveidqvist* is the primary reviewer of changes and merging pull requests. The process is as follows:
|
||||
|
||||
* Large changes reviewed by knsv or other developer asked to review by knsv
|
||||
* Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
|
||||
* Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
|
||||
|
||||
When you commit code, create a branch with the following naming convention:
|
||||
|
||||
Start with the type, such as **feature** or **bug**, followed by the issue number for reference, and a text that describes the issue.
|
||||
|
||||
**One example:**
|
||||
|
||||
`feature/945_state_diagrams`
|
||||
|
||||
**Another example:**
|
||||
|
||||
`bug/123_nasty_bug_branch`
|
||||
|
||||
## Contributing to Documentation
|
||||
|
||||
If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
|
||||
|
||||
The docs are located in the `docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
|
||||
|
||||
> **All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
|
||||
|
||||
The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
|
||||
|
||||
## How to Contribute to Documentation
|
||||
|
||||
We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
|
||||
|
||||
The documentation is located in the `docs` directory and organized according to relevant subfolder.
|
||||
|
||||
We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
|
||||
|
||||
### Add Unit Tests for Parsing
|
||||
|
||||
This is important so that, if someone that does not know about this great feature suggests a change to the grammar, they get notified early on when that change breaks the parser. Another important aspect is that, without proper parsing, tests refactoring is pretty much impossible.
|
||||
|
||||
### Add E2E Tests
|
||||
|
||||
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:
|
||||
|
||||
1. Run `yarn dev` to start the dev server
|
||||
2. Start **Cypress** by running `cypress open` in the **mermaid** folder.
|
||||
(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
|
||||
|
||||
The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
|
||||
|
||||
When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag it for review if it differs.
|
||||
|
||||
This is what a rendering test looks like:
|
||||
|
||||
```js
|
||||
it('should render forks and joins', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram
|
||||
state fork_state <<fork>>
|
||||
[*] --> fork_state
|
||||
fork_state --> State2
|
||||
fork_state --> State3
|
||||
|
||||
state join_state <<join>>
|
||||
State2 --> join_state
|
||||
State3 --> join_state
|
||||
join_state --> State4
|
||||
State4 --> [*]
|
||||
`,
|
||||
{ logLevel: 0 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### Any Questions or Suggestions?
|
||||
|
||||
After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
|
||||
|
||||
### How to Contribute a Suggestion
|
||||
|
||||
Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
|
||||
|
||||
To edit Docs on your computer:
|
||||
|
||||
1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory in the `develop` branch.
|
||||
2. Create a fork of the develop branch.
|
||||
3. Make changes or add new documentation.
|
||||
4. Commit changes to your fork and push it to GitHub.
|
||||
5. Create a Pull Request of your fork.
|
||||
|
||||
To edit Docs on GitHub:
|
||||
|
||||
1. Login to [GitHub.com](https://www.github.com).
|
||||
2. Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
|
||||
3. To edit a file, click the pencil icon at the top-right of the file contents panel.
|
||||
4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
|
||||
5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
|
||||
6. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
|
||||
|
||||
## Last Words
|
||||
|
||||
Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
|
||||
|
||||
[Join our Slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -209,9 +209,9 @@ 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 |
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
|
||||
* | 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;
|
||||
|
|
|
|||
|
|
@ -942,13 +942,13 @@ const config = {
|
|||
minEntityHeight: 75,
|
||||
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | ------------- | ----------------------------------------------------------- | ------- | -------- | ------------------ |
|
||||
* | entityPadding | Minimum internal padding betweentext in box and box borders | Integer | 4 | Any Positive Value |
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
|
||||
* | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value |
|
||||
*
|
||||
* **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.
|
||||
*
|
||||
* Default value: 15
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -677,7 +677,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…
Reference in New Issue