diff --git a/docs/README.md b/docs/README.md index bc93d68916..1d94901ab2 100644 --- a/docs/README.md +++ b/docs/README.md @@ -2,7 +2,7 @@ **Mermaid lets you create diagrams and visualizations using text and code.** -It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. +It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. >If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md). @@ -18,7 +18,7 @@ It is a Javascript based diagramming and charting tool that renders Markdown-ins -Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. +Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. > Doc-Rot is a Catch-22 that Mermaid helps to solve. @@ -195,7 +195,7 @@ To Deploy Mermaid: ``` -**Doing so will command the mermaid parser to look for the `
` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into svg charts.** +**Doing so will command the mermaid parser to look for the `
` 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) @@ -277,9 +277,9 @@ Detailed information about how to contribute can be found in the [contribution g ## Security and safe diagrams -For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes. +For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes. -As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security. +As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security. *Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.* diff --git a/docs/Setup.md b/docs/Setup.md index f6c84610aa..e1fcc1dd94 100644 --- a/docs/Setup.md +++ b/docs/Setup.md @@ -9,9 +9,9 @@ This is the API to be used when optionally handling the integration with the web using the default integration provided by mermaid.js. The core of this api is the [**render**][2] function which, given a graph -definition as text, renders the graph/diagram and returns an svg element for the graph. +definition as text, renders the graph/diagram and returns an SVG element for the graph. -It is is then up to the user of the API to make use of the svg, either insert it somewhere in the +It is is then up to the user of the API to make use of the SVG, either insert it somewhere in the page or do something completely different. In addition to the render function, a number of behavioral configuration options are available. @@ -1012,7 +1012,7 @@ Pushes in a directive to the configuration ## render -Function that renders an svg with a graph from a chart definition. Usage example below. +Function that renders an SVG with a graph from a chart definition. Usage example below. ```javascript mermaidAPI.initialize({ @@ -1031,7 +1031,7 @@ $(function () { - `id` **any** The id of the element to be rendered - `_txt` **any** The graph definition -- `cb` **any** Callback which is called after rendering is finished with the svg code as inparam. +- `cb` **any** Callback which is called after rendering is finished with the SVG code as inparam. - `container` **any** Selector to element in which a div with the graph temporarily will be inserted. In one is provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is completed. diff --git a/docs/diagrams-and-syntax-and-examples/flowchart.md b/docs/diagrams-and-syntax-and-examples/flowchart.md index 8f4dc4be50..4410215110 100644 --- a/docs/diagrams-and-syntax-and-examples/flowchart.md +++ b/docs/diagrams-and-syntax-and-examples/flowchart.md @@ -400,7 +400,7 @@ flowchart TB ## Interaction -It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. +It is possible to bind a click event to a node, the click can lead to either a JavaScript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. ``` click nodeId callback @@ -408,7 +408,7 @@ click nodeId call callback() ``` * nodeId is the id of the node -* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter. +* callback is the name of a JavaScript function defined on the page displaying the graph, the function will be called with the nodeId as parameter. Examples of tooltip usage below: diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md index 4c3e09047e..8160beac7f 100644 --- a/docs/n00b-gettingStarted.md +++ b/docs/n00b-gettingStarted.md @@ -12,7 +12,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn 1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live). 2. Using [mermaid plugins](./integrations.md) with programs you are familiar with. -3. Calling the Mermaid Javascript API. +3. Calling the Mermaid JavaScript API. 4. Deploying Mermaid as a dependency. **Note: It is our recommendation that you review all approaches, and choose the one that is best for your project.** @@ -63,7 +63,7 @@ You can generate mermaid diagrams from within popular applications using plug-in **This is covered in greater detail in the [Usage section](usage.md)** -## 3. Calling the Javascript API +## 3. Calling the JavaScript API This method can be used with any common web server like Apache, IIS, nginx, node express. diff --git a/docs/usage.md b/docs/usage.md index 3a6ff2697d..3dd18049d7 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -2,7 +2,7 @@ **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md) -Mermaid is a Javascript tool that makes use of a markdown based syntax to render customizable diagrams, charts and visualizations. +Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations. Diagrams can be re-rendered/modified by modifying their descriptions. @@ -114,7 +114,7 @@ Values: - **strict**: (**default**) tags in text are encoded, click functionality is disabled - **loose**: tags in text are allowed, click functionality is enabled - **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled -- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any javascript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. +- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. ```note @@ -198,10 +198,10 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm ## API usage The main idea of the API is to be able to call a render function with the graph definition as a string. The render function -will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to +will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site. -The example below show an outline of how this could be used. The example just logs the resulting svg to the javascript console. +The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console. ```html @@ -221,7 +221,7 @@ Sometimes the generated graph also has defined interactions like tooltip and cli add those events after the graph has been inserted into the DOM. The example code below is an extract of what mermaid does when using the API. The example shows how it is possible to -bind events to an svg when using the API for rendering. +bind events to an SVG when using the API for rendering. ```javascript var insertSvg = function(svgCode, bindFunctions) { @@ -240,14 +240,14 @@ mermaidAPI.render(id,txt,insertSvg, element); 1. The graph is generated using the render call. 2. After generation the render function calls the provided callback function, in this case it's called insertSvg. -3. The callback function is called with two parameters, the svg code of the generated graph and a function. This function binds events to the svg **after** it is inserted into the DOM. -4. Insert the svg code into the DOM for presentation. +3. The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM. +4. Insert the SVG code into the DOM for presentation. 5. Call the binding function that binds the events. ## Example of a marked renderer -This is the renderer used for transforming the documentation from markdown to html with mermaid diagrams in the html. +This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html. ```javascript var renderer = new marked.Renderer(); @@ -261,7 +261,7 @@ renderer.code = function (code, language) { }; ``` -Another example in coffeescript that also includes the mermaid script tag in the generated markup. +Another example in CoffeeScript that also includes the mermaid script tag in the generated markup. ```coffee marked = require 'marked'