Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: fix capitalisation of well known technologies #3064

Merged
merged 1 commit into from
May 24, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand All @@ -18,7 +18,7 @@ It is a Javascript based diagramming and charting tool that renders Markdown-ins


<!-- <Main description> -->
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.

Expand Down Expand Up @@ -195,7 +195,7 @@ To Deploy Mermaid:
<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 definitions 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)

Expand Down Expand Up @@ -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.*

Expand Down
8 changes: 4 additions & 4 deletions docs/Setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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({
Expand All @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions docs/diagrams-and-syntax-and-examples/flowchart.md
Original file line number Diff line number Diff line change
Expand Up @@ -400,15 +400,15 @@ 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
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:

Expand Down
4 changes: 2 additions & 2 deletions docs/n00b-gettingStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.**
Expand Down Expand Up @@ -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.

Expand Down
18 changes: 9 additions & 9 deletions docs/usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
<script src="mermaid.js"></script>
Expand All @@ -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) {
Expand All @@ -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();
Expand All @@ -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'
Expand Down