diff --git a/docs/community/code.md b/docs/community/code.md index 7f4b1e105..e77a25467 100644 --- a/docs/community/code.md +++ b/docs/community/code.md @@ -42,7 +42,7 @@ Once the release happens we add a tag to the `release` branch and merge it with 2. Check out the `develop` branch 3. Create a new branch for your work. Please name the branch following our naming convention below. -We use the follow naming convention for branches: +We use the following naming convention for branches: ```txt [feature | bug | chore | docs]/[issue number]_[short description using dashes ('-') or underscores ('_') instead of spaces] diff --git a/docs/community/development.md b/docs/community/development.md index 65ee18660..c9d8dab97 100644 --- a/docs/community/development.md +++ b/docs/community/development.md @@ -22,7 +22,7 @@ In GitHub, you first **fork** a repository when you are going to make changes an Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with. -[Fork mermaid](https://github.com/mermaid-js/mermaid/fork) to start contributing to the main project and its documentaion, or [search for other repositories](https://github.com/orgs/mermaid-js/repositories). +[Fork mermaid](https://github.com/mermaid-js/mermaid/fork) to start contributing to the main project and its documentation, or [search for other repositories](https://github.com/orgs/mermaid-js/repositories). [Here is a GitHub document that gives an overview of the process.](https://docs.github.com/en/get-started/quickstart/fork-a-repo) diff --git a/docs/community/docker-development.md b/docs/community/docker-development.md index 42189a88e..9df0c8d59 100644 --- a/docs/community/docker-development.md +++ b/docs/community/docker-development.md @@ -22,7 +22,7 @@ In GitHub, you first **fork** a repository when you are going to make changes an Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with. -[Fork mermaid](https://github.com/mermaid-js/mermaid/fork) to start contributing to the main project and its documentaion, or [search for other repositories](https://github.com/orgs/mermaid-js/repositories). +[Fork mermaid](https://github.com/mermaid-js/mermaid/fork) to start contributing to the main project and its documentation, or [search for other repositories](https://github.com/orgs/mermaid-js/repositories). [Here is a GitHub document that gives an overview of the process.](https://docs.github.com/en/get-started/quickstart/fork-a-repo) diff --git a/docs/community/newDiagram.md b/docs/community/newDiagram.md index 5dd616e66..b90d192b2 100644 --- a/docs/community/newDiagram.md +++ b/docs/community/newDiagram.md @@ -19,7 +19,7 @@ For instance: #### Store data found during parsing -There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call a object provided to the parser by the user of the parser. This object can be called during parsing for storing data. +There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call an object provided to the parser by the user of the parser. This object can be called during parsing for storing data. ```jison statement @@ -35,7 +35,7 @@ In the extract of the grammar above, it is defined that a call to the setTitle m > **Note** > Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user. -For more info look in the example diagram type: +For more info look at the example diagram type: The `yy` object has the following function: @@ -54,7 +54,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 sequenceRenderer.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 than the flowchart renderer as this is a more generic example. Place the renderer in the diagram folder. @@ -62,7 +62,7 @@ Place the renderer in the diagram folder. The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type. [This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type. -For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader +For example, if your new diagram uses a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram. Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same. @@ -122,7 +122,7 @@ There are a few features that are common between the different types of diagrams - Themes, there is a common way to modify the styling of diagrams in Mermaid. - Comments should follow mermaid standards -Here some pointers on how to handle these different areas. +Here are some pointers on how to handle these different areas. ## Accessibility @@ -140,7 +140,7 @@ See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/ ### accessible title and description -The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md) +The syntax for accessible titles and descriptions is described in [the Accessibility documentation section.](../config/accessibility.md) As a design goal, the jison syntax should be similar between the diagrams. diff --git a/docs/config/directives.md b/docs/config/directives.md index 414565d53..943d51217 100644 --- a/docs/config/directives.md +++ b/docs/config/directives.md @@ -126,7 +126,7 @@ The following code snippet changes `theme` to `forest`: `%%{init: { "theme": "forest" } }%%` -Possible theme values are: `default`,`base`, `dark`, `forest` and `neutral`. +Possible theme values are: `default`, `base`, `dark`, `forest` and `neutral`. Default Value is `default`. Example: @@ -291,7 +291,7 @@ 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 the new book about alien invasion? +Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion? Alice->Bob: Good. Bob->Alice: Cool ``` @@ -300,7 +300,7 @@ Bob->Alice: Cool sequenceDiagram Alice->Bob: Hello Bob, how are you? -Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion? +Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion? Alice->Bob: Good. Bob->Alice: Cool ``` @@ -317,7 +317,7 @@ By applying that snippet to the diagram above, `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 the new book about alien invasion? +Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion? Alice->Bob: Good. Bob->Alice: Cool ``` @@ -326,7 +326,7 @@ Bob->Alice: Cool %%{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 the new book about alien invasion? +Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion? Alice->Bob: Good. Bob->Alice: Cool ``` diff --git a/docs/config/usage.md b/docs/config/usage.md index de88beca5..8bd34345f 100644 --- a/docs/config/usage.md +++ b/docs/config/usage.md @@ -41,7 +41,7 @@ pnpm add mermaid **Hosting mermaid on a web page:** -> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/getting-started.md) +> Note: This topic is explored in greater depth in the [User Guide for Beginners](../intro/getting-started.md) The easiest way to integrate mermaid on a web page requires two elements: @@ -100,7 +100,7 @@ Mermaid can load multiple diagrams, in the same page. ## Enabling Click Event and Tags in Nodes -A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use. +A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduced in version 8.2 as a security improvement, aimed at preventing malicious use. **It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.** @@ -115,13 +115,13 @@ Values: - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled. - **antiscript**: HTML tags in text are allowed (only script elements are removed) and click functionality is enabled. - **loose**: HTML tags in text are allowed and click functionality is enabled. -- **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This prevent any JavaScript from running in the context. This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc. +- **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This prevents any JavaScript from running in the context. This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc. > **Note** > This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled. > **sandbox** security level is still in the beta version. -**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.** +**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing. This allows clicks and tags are allowed.** **To change `securityLevel`, you have to call `mermaid.initialize`:** diff --git a/docs/intro/getting-started.md b/docs/intro/getting-started.md index b768f388b..246e7364c 100644 --- a/docs/intro/getting-started.md +++ b/docs/intro/getting-started.md @@ -103,7 +103,7 @@ When writing the .html file, we give two instructions inside the html code to th a. The mermaid code for the diagram we want to create. -b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process . +b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process. **a. The embedded mermaid diagram definition inside a `
`:**
 
@@ -221,4 +221,4 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
 
 **Comments from Knut Sveidqvist, creator of mermaid:**
 
-- In early versions of mermaid, the `