Corrected typos in documentation
This commit is contained in:
AlwinW
parent
f8c01acd18
commit
8b35745928
|
|
@ -11,7 +11,7 @@ Here are a few things to know to get you started on the right path.
|
|||
We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have *knsv, Knut Sveidqvist* as a main reviewer of changes and merging pull requests. More precisely like this:
|
||||
|
||||
* Large changes reviewed by knsv or other developer asked to review by knsv
|
||||
* Smaller low-risk changes like dependecies, documentation etc can be merged by active collaborators
|
||||
* Smaller low-risk changes like dependencies, documentation etc can be merged by active collaborators
|
||||
* documentation (updates to the docs folder is also allowed via direct commits)
|
||||
|
||||
To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid.
|
||||
|
||||
This section will introduce the different methods of configuring of the behaviors and apperances of Mermaid Diagrams.
|
||||
This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams.
|
||||
The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.
|
||||
|
||||
## Configuration Section in the [Live Editor](./Live-Editor.md).
|
||||
|
|
@ -13,7 +13,7 @@ The Following are the most commonly used methods, and are all tied to Mermaid [D
|
|||
|
||||
## [Directives](./directives.md),
|
||||
|
||||
allows the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. you can pass a directive alongside your defintion inside `%%{ }%%`, either above or below your diagram defintion.
|
||||
allows the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. you can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition.
|
||||
|
||||
## Theme Creation:
|
||||
An application of using Directives to change [Themes](./theming.md). `Theme` is an value within mermaid's configuration that dictates the color scheme for diagrams.
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ To Deploy Mermaid:
|
|||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({startOnLoad:true});</script>
|
||||
```
|
||||
**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitons and render them into svg charts.**
|
||||
**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into svg charts.**
|
||||
|
||||
**Examples can be found at** [Other examples](/examples)
|
||||
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ theme , the CSS style sheet
|
|||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- |
|
||||
| fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Posiable CSS FontFamily |
|
||||
| fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily |
|
||||
|
||||
**Notes:**
|
||||
Default value: '"trebuchet ms", verdana, arial, sans-serif;'.
|
||||
|
|
@ -103,9 +103,9 @@ Default value: '"trebuchet ms", verdana, arial, sans-serif;'.
|
|||
|
||||
## startOnLoad
|
||||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| ----------- | --------------------------------------------- | ------- | -------- | ----------- |
|
||||
| startOnLoad | Dictates whether mermaind starts on Page load | boolean | Required | true, false |
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| ----------- | -------------------------------------------- | ------- | -------- | ----------- |
|
||||
| startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |
|
||||
|
||||
**Notes:** Default value: true
|
||||
|
||||
|
|
@ -204,7 +204,7 @@ Default value 50
|
|||
|
||||
**Notes:**
|
||||
|
||||
Default Vaue: 'basis'
|
||||
Default Value: 'basis'
|
||||
|
||||
### useMaxWidth
|
||||
|
||||
|
|
@ -411,7 +411,7 @@ Default value: false
|
|||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
|
||||
| actorFontFamily | This sets the font family of the actor's description | string | Required | Any Posiable CSS FontFamily |
|
||||
| actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
|
||||
|
||||
**Notes:**
|
||||
Default value: "'Open-Sans", "sans-serif"'
|
||||
|
|
@ -436,7 +436,7 @@ Default value: 14
|
|||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- |
|
||||
| noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Posiable CSS FontFamily |
|
||||
| noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily |
|
||||
|
||||
**Notes:**
|
||||
Default value: ''"trebuchet ms", verdana, arial, sans-serif'
|
||||
|
|
@ -470,7 +470,7 @@ Default value: 16
|
|||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- |
|
||||
| messageFontFamily | This sets the font family of actor messages | string | Required | Any Posiable CSS FontFamily |
|
||||
| messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily |
|
||||
|
||||
**Notes:**
|
||||
Default value: '"trebuchet ms", verdana, arial, sans-serif'
|
||||
|
|
@ -590,9 +590,9 @@ Default value: 11
|
|||
|
||||
### sectionFontSize
|
||||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| --------------- | --------------------- | ------- | -------- | ------------------ |
|
||||
| sectionFontSize | Font size for secions | Integer | Required | Any Positive Value |
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| --------------- | ---------------------- | ------- | -------- | ------------------ |
|
||||
| sectionFontSize | Font size for sections | Integer | Required | Any Positive Value |
|
||||
|
||||
**Notes:**
|
||||
Default value: 11
|
||||
|
|
@ -879,7 +879,7 @@ Default value: 'TB'
|
|||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| -------------- | ---------------------------------- | ------- | -------- | ------------------ |
|
||||
| minEntityWidth | The mimimum width of an entity box | Integer | Required | Any Positive Value |
|
||||
| minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value |
|
||||
|
||||
**Notes:**
|
||||
Expressed in pixels.
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ This means that **you should branch off your pull request from develop** and dir
|
|||
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 dependecies, documentation, etc. can be merged by active collaborators
|
||||
* 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:
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ To do so, start a line with the `section` keyword and give it a name. (Note that
|
|||
|
||||
### Milestones
|
||||
|
||||
You can add milestones to the diagrams. Milestones differ from tasks as they represent a signle instant in time and are identifiedd by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: *initial date*+*duration*/2.
|
||||
You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: *initial date*+*duration*/2.
|
||||
|
||||
```
|
||||
gantt
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
|
||||
- [Joplin](https://joplinapp.org) (**Native support**)
|
||||
- [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)
|
||||
- [GitBook](http://gitbook.com)
|
||||
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
|
||||
|
|
@ -37,7 +37,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||
- [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
|
||||
- [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
|
||||
- [Hexo](https://hexo.io)
|
||||
- [hexo-filter-mermid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
|
||||
- [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
|
||||
- [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid)
|
||||
- [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams)
|
||||
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ Used when Mermaid is called via an API, or through a `<script>` tag.
|
|||
|
||||
|
||||
### [Directives](./directives.md),
|
||||
Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your defintion inside `%%{ }%%`. It can be done either above or below your diagram definition.
|
||||
Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition.
|
||||
|
||||
### [Theme Manipulation](./theming.md):
|
||||
An application of using Directives to change [Themes](./theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ Rendering requirements is straightforward.
|
|||
|
||||
There are three types of components to a requirement diagram: requirement, element, and relationship.
|
||||
|
||||
The grammar for defining each is defined below. Words denoted in angule brackets, such as ```<word>```, are enumerated keywords that have options elaborated in a table. ```user_defined_...``` is use in any place where user input is expected.
|
||||
The grammar for defining each is defined below. Words denoted in angle brackets, such as ```<word>```, are enumerated keywords that have options elaborated in a table. ```user_defined_...``` is use in any place where user input is expected.
|
||||
|
||||
An important note on user text: all input can be surrounded in quotes or not. For example, both ```Id: "here is an example"``` and ```Id: here is an example``` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ Type, risk, and method are enumerations defined in SysML.
|
|||
|---|---|
|
||||
| Type | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint |
|
||||
| Risk | Low, Medium, High |
|
||||
| VerifcationMethod | Analysis, Inspection, Test, Demonstration |
|
||||
| VerificationMethod | Analysis, Inspection, Test, Demonstration |
|
||||
|
||||
### Element
|
||||
An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@ var textFieldUpdated = function(){
|
|||
bindEventHandler('change', 'code', textFieldUpdated);
|
||||
```
|
||||
**Alternative to mermaid.parse():**
|
||||
One effective and more future-proof method of validating your graph deinitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version.
|
||||
One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version.
|
||||
|
||||
|
||||
## Configuration
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ const config = {
|
|||
/**
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | fontFamily | specifies the font to be used in the rendered diagrams| string | Required | Any Posiable CSS FontFamily |
|
||||
* | fontFamily | specifies the font to be used in the rendered diagrams| string | Required | Any Possible CSS FontFamily |
|
||||
*
|
||||
* **Notes:**
|
||||
* Default value: '"trebuchet ms", verdana, arial, sans-serif;'.
|
||||
|
|
@ -98,7 +98,7 @@ const config = {
|
|||
/**
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | startOnLoad | Dictates whether mermaind starts on Page load | boolean | Required | true, false |
|
||||
* | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |
|
||||
*
|
||||
* **Notes:** Default value: true
|
||||
*/
|
||||
|
|
@ -207,7 +207,7 @@ const config = {
|
|||
*
|
||||
* **Notes:**
|
||||
*
|
||||
* Default Vaue: 'basis'
|
||||
* Default Value: 'basis'
|
||||
*/
|
||||
curve: 'basis',
|
||||
// Only used in new experimental rendering
|
||||
|
|
@ -439,7 +439,7 @@ const config = {
|
|||
/**
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | actorFontFamily |This sets the font family of the actor's description | string | Required | Any Posiable CSS FontFamily |
|
||||
* | actorFontFamily |This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
|
||||
*
|
||||
* **Notes:**
|
||||
* Default value: "'Open-Sans", "sans-serif"'
|
||||
|
|
@ -467,7 +467,7 @@ const config = {
|
|||
/**
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | noteFontFamily| This sets the font family of actor-attached notes. | string | Required | Any Posiable CSS FontFamily |
|
||||
* | noteFontFamily| This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily |
|
||||
*
|
||||
* **Notes:**
|
||||
* Default value: ''"trebuchet ms", verdana, arial, sans-serif'
|
||||
|
|
@ -505,7 +505,7 @@ const config = {
|
|||
/**
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | messageFontFamily | This sets the font family of actor messages | string | Required | Any Posiable CSS FontFamily |
|
||||
* | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily |
|
||||
*
|
||||
* **Notes:**
|
||||
* Default value: '"trebuchet ms", verdana, arial, sans-serif'
|
||||
|
|
@ -664,7 +664,7 @@ const config = {
|
|||
/**
|
||||
* | Parameter | Description | Type | Required | Values|
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | sectionFontSize | Font size for secions| Integer | Required | Any Positive Value |
|
||||
* | sectionFontSize | Font size for sections| Integer | Required | Any Positive Value |
|
||||
*
|
||||
* **Notes:**
|
||||
* Default value: 11
|
||||
|
|
@ -1015,7 +1015,7 @@ top of the chart
|
|||
/**
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | minEntityWidth | The mimimum width of an entity box | Integer | Required | Any Positive Value |
|
||||
* | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value |
|
||||
*
|
||||
* **Notes:**
|
||||
* Expressed in pixels.
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ describe('[Style] when parsing', () => {
|
|||
expect(vert['T'].styles[1]).toBe('border:1px solid red');
|
||||
});
|
||||
|
||||
it('should handle styles and graph definitons in a graph', function() {
|
||||
it('should handle styles and graph definitions in a graph', function() {
|
||||
const res = flow.parser.parse(
|
||||
'graph TD;S-->T;\nstyle S background:#aaa;\nstyle T background:#bbb,border:1px solid red;'
|
||||
);
|
||||
|
|
@ -76,7 +76,7 @@ describe('[Style] when parsing', () => {
|
|||
expect(vert['T'].styles[1]).toBe('border:1px solid red');
|
||||
});
|
||||
|
||||
it('should handle styles and graph definitons in a graph', function() {
|
||||
it('should handle styles and graph definitions in a graph', function() {
|
||||
const res = flow.parser.parse('graph TD;style T background:#bbb,border:1px solid red;');
|
||||
// const res = flow.parser.parse('graph TD;style T background: #bbb;');
|
||||
|
||||
|
|
@ -277,7 +277,7 @@ describe('[Style] when parsing', () => {
|
|||
expect(edges[0].type).toBe('arrow_point');
|
||||
});
|
||||
|
||||
it('should handle multi-numbered style definitons with more then 1 digit in a row', function() {
|
||||
it('should handle multi-numbered style definitions with more then 1 digit in a row', function() {
|
||||
const res = flow.parser.parse(
|
||||
'graph TD\n' +
|
||||
'A-->B1\n' +
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ describe('when parsing a gitGraph', function() {
|
|||
afterEach(function() {
|
||||
cryptoRandomString.mockReset();
|
||||
});
|
||||
it('should handle a gitGraph defintion', function() {
|
||||
it('should handle a gitGraph definition', function() {
|
||||
const str = 'gitGraph:\n' + 'commit\n';
|
||||
|
||||
parser.parse(str);
|
||||
|
|
@ -33,7 +33,7 @@ describe('when parsing a gitGraph', function() {
|
|||
expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
|
||||
});
|
||||
|
||||
it('should handle a gitGraph defintion with empty options', function() {
|
||||
it('should handle a gitGraph definition with empty options', function() {
|
||||
const str = 'gitGraph:\n' + 'options\n' + 'end\n' + 'commit\n';
|
||||
|
||||
parser.parse(str);
|
||||
|
|
@ -46,7 +46,7 @@ describe('when parsing a gitGraph', function() {
|
|||
expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
|
||||
});
|
||||
|
||||
it('should handle a gitGraph defintion with valid options', function() {
|
||||
it('should handle a gitGraph definition with valid options', function() {
|
||||
const str = 'gitGraph:\n' + 'options\n' + '{"key": "value"}\n' + 'end\n' + 'commit\n';
|
||||
|
||||
parser.parse(str);
|
||||
|
|
|
|||
Loading…
Reference in New Issue