mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #1664 from saowang/develop 

Fixed broken links and syntax in the document
This commit is contained in:
Knut Sveidqvist 2020-09-09 18:39:18 +02:00 committed by GitHub
parent 137770dc61 5336e98e18
commit 117988d26d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 178 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/.debug.yml Normal file
View File

@ -0,0 +1,5 @@
remote_theme: false
baseurl: /mermaid
theme: jekyll-rtd-theme

10
docs/Makefile
View File

@ -1,5 +1,5 @@
default:
@bundle install
@gem install jekyll bundler && bundle install
update:
@bundle update
@ -7,8 +7,8 @@ update:
clean:
@bundle exec jekyll clean
server: clean
@bundle exec jekyll server
build: clean
@bundle exec jekyll build --profile
@bundle exec jekyll build --profile --config _config.yml,.debug.yml
server: clean
@bundle exec jekyll server --livereload --config _config.yml,.debug.yml

28
docs/README.md
View File

@ -19,19 +19,19 @@ Mermaid addresses this problem by cutting the time, effort and tooling that is r
The text definitions for Mermaid diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code).
So less time needs to be spent on documenting, as a separate and laborious task. <br/>
Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor), visit [Mermaid Overview](./n00b-overview.md) for the video tutorials.
Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor), visit [Mermaid Overview](overview/n00b-overview.md) for the video tutorials.
Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](./integrations.md).
Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](overview/integrations.md).
For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).
For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Beginner's Guide](overview/n00b-overview.md) and [Usage](getting-started/usage.md).
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Version Log](./CHANGELOG.md)
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Version Log](tutorials-and-community/CHANGELOG.md)
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
# Diagrams that mermaid can render:
### [Flowchart](https://mermaid-js.github.io/mermaid/#/flowchart)
### [Flowchart](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/flowchart.html)
```
graph TD;
@ -43,7 +43,7 @@ graph TD;
![Flowchart](assets/img/flow.png)
### [Sequence diagram](https://mermaid-js.github.io/mermaid/#/sequenceDiagram)
### [Sequence diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/sequenceDiagram.html)
```
sequenceDiagram
@ -61,7 +61,7 @@ sequenceDiagram
![Sequence diagram](assets/img/sequence.png)
### [Gantt diagram](https://mermaid-js.github.io/mermaid/#/gantt)
### [Gantt diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/gantt.html)
```
gantt
@ -78,7 +78,7 @@ Future task2 : des4, after des3, 5d
![Gantt diagram](assets/img/gantt.png)
### [Class diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/#/classDiagram)
### [Class diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/classDiagram.html)
```
classDiagram
@ -122,7 +122,7 @@ merge newbranch
```
![Git graph](assets/img/git.png)
### [Entity Relationship Diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram)
### [Entity Relationship Diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/entityRelationshipDiagram.html)
```
erDiagram
@ -134,7 +134,7 @@ erDiagram
![ER diagram](assets/img/simple-er.png)
### [User Journey Diagram](https://mermaid-js.github.io/mermaid/#/user-journey)
### [User Journey Diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/user-journey.html)
```markdown
journey
@ -150,9 +150,9 @@ journey
![Journey diagram](assets/img/user-journey.png)
# Installation
## In depth guides and examples can be found in [Getting Started](./n00b-gettingStarted.md) and [Usage](./usage.md).
## In depth guides and examples can be found in [Getting Started](getting-started/n00b-gettingStarted.md) and [Usage](getting-started/usage.md).
## It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).
## It would also be helpful to learn more about mermaid's [Syntax](diagrams-and-syntax-and-examples/n00b-syntaxReference.md).
### CDN
@ -166,7 +166,7 @@ Replace `<version>` with the desired version number.
Alternatively, you can also adjust the version number in the page itself.
Latest Version: [https://unpkg.com/browse/mermaid@8.6.0/](https://unpkg.com/browse/mermaid@8.6.0/)
Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)
## Incorporating mermaid to a website
To support mermaid on your website, all you have to do is add Mermaid’s JavaScript package
@ -191,7 +191,7 @@ To support mermaid on your website, all you have to do is add Mermaid’s JavaSc
```
## Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"` in your HTML Document. From these tags mermaid will try to read the diagram/chart definitons and render them as svg charts.
## Examples can be found in [Getting Started](./n00b-gettingStarted.md)
## Examples can be found in [Getting Started](getting-started/n00b-gettingStarted.md)
# Sibling projects
- [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor)

4
docs/_config.yml
View File

@ -2,13 +2,13 @@ title: mermaid
lang: en
description: Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
# theme: jekyll-rtd-theme
remote_theme: rundocs/jekyll-rtd-theme
mermaid:
custom: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
copyright:
since: 2014
revision: true
edit: true

2
docs/diagrams-and-syntax-and-examples/classDiagram.md
View File

@ -612,7 +612,7 @@ The main styling of the class diagram is done with a preset number of css classe
#### Sample stylesheet
```css
```scss
body {
background: white;
}

2
docs/diagrams-and-syntax-and-examples/directives.md
View File

@ -4,7 +4,7 @@ sort: 10
## Directives
## Directives were added in [Version 8.6.0](/8.6.0_docs.md). Please Read it for more information.
## Directives were added in [Version 8.6.0](../getting-started/8.6.0_docs.md). Please Read it for more information.
## Directives
With this version, directives are supported. Directives are divided in two sets, by priority. the first set, containing 'init' or 'initialize' directives take priority. While the other set, containing all other kinds of directives are considered only after 'init' and the graph-type declared.

4
docs/diagrams-and-syntax-and-examples/examples.md
View File

@ -6,9 +6,9 @@ sort: 2
This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
## If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
## If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../getting-started/n00b-gettingStarted.md).
## If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) section.
## If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](n00b-syntaxReference.md) section.
## Basic Pie Chart

4
docs/diagrams-and-syntax-and-examples/flowchart.md
View File

@ -609,7 +609,7 @@ click nodeId callback
Examples of tooltip usage below:
```
```html
<script>
var callback = function(){
alert('A callback was triggered');
@ -654,7 +654,7 @@ graph LR;
```
Beginners tip, a full example using interactive links in a html context:
```
```html
<body>
<div class="mermaid">
graph LR;

2
docs/diagrams-and-syntax-and-examples/gantt.md
View File

@ -354,7 +354,7 @@ click taskId href URL
* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified..
Beginners tip, a full example using interactive links in an html context:
```
```html
<body>
<div class="mermaid">
gantt

12
docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md
View File

@ -5,7 +5,7 @@ title: Diagram syntax intro
## Diagram syntax
If you are new to mermaid, read the [Getting Started](n00b-gettingStarted.md) and [Overview](n00b-overview.md) sections, to learn the basics of mermaid.
If you are new to mermaid, read the [Getting Started](../getting-started/n00b-gettingStarted.md) and [Overview](../overview/n00b-overview.md) sections, to learn the basics of mermaid.
Video Tutorials can be found at the bottom of the Overview Section.
This section is a list of diagram types supported by mermaid. Below is a list of links to aricles that explain the syntax of the diagrams or charts that 0can be called.
@ -30,12 +30,4 @@ These definitions can also be entered into the [mermaid live editor](https://mer
This would then offer
- [Flowchart](flowchart.md)
- [Sequence diagram](sequenceDiagram.md)
- [Class Diagram](classDiagram.md)
- [State Diagram](stateDiagram.md)
- [Gantt](gantt.md)
- [Pie Chart](pie.md)
- [Entity Relationship Diagram](entityRelationshipDiagram.md)
- [User Journey Diagram](user-journey.md)
- [Directives](directives.md)
{% include list.liquid %}

6
docs/diagrams-and-syntax-and-examples/sequenceDiagram.md
View File

@ -20,9 +20,11 @@ sequenceDiagram
John-->>Alice: Great!
```
## A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
## If unavoidable, one must use parentheses(), quotation marks "", or brackets {},[], to enclose the word "end". i.e : (end), [end], {end}.
```note
A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
If unavoidable, one must use parentheses(), quotation marks "", or brackets {},[], to enclose the word "end". i.e : (end), [end], {end}.
```
## Syntax

80
docs/diagrams-and-syntax-and-examples/stateDiagram.md
View File

@ -8,7 +8,7 @@ sort: 6
Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
```markdown
```
stateDiagram-v2
[*] --> Still
Still --> [*]
@ -86,7 +86,7 @@ Transitions are path/edges when one state passes into another. This is represent
When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.
```markdown
```
stateDiagram-v2
s1 --> s2
```
@ -98,7 +98,7 @@ stateDiagram-v2
It is possible to add text to a transition. To describe what it represents.
```markdown
```
stateDiagram-v2
s1 --> s2: A transition
```
@ -112,7 +112,7 @@ stateDiagram-v2
There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
```markdown
```
stateDiagram-v2
[*] --> s1
s1 --> [*]
@ -131,7 +131,7 @@ have several internal states. These are called composite states in this terminol
In order to define a composite state you need to use the state keyword followed by and id and the body of the composite state between \{\}. See the example below:
```markdown
```
stateDiagram-v2
[*] --> First
state First {
@ -151,7 +151,7 @@ stateDiagram-v2
You can do this in several layers:
```markdown
```
stateDiagram-v2
[*] --> First
@ -190,7 +190,7 @@ stateDiagram-v2
You can also define transitions also between composite states:
```markdown
```
stateDiagram-v2
[*] --> First
First --> Second
@ -236,7 +236,7 @@ stateDiagram-v2
It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&lt;join&gt;&gt;.
```markdown
```
stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
@ -271,7 +271,7 @@ Sometimes nothing says it better then a Post-it note. That is also the case in s
Here you can choose to put the note to the *right of* or to the *left of* a node.
```markdown
```
stateDiagram-v2
State1: The state with a note
note right of State1
@ -298,42 +298,42 @@ Here you can choose to put the note to the *right of* or to the *left of* a node
As in plantUml you can specify concurrency using the -- symbol.
```markdown
stateDiagram-v2
[*] --> Active
```
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
```
```mermaid
stateDiagram-v2
[*] --> Active
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
```
## Comments

20
docs/getting-started/8.6.0_docs.md
View File

@ -79,15 +79,15 @@ When deployed within code, init is called before the graph/diagram description.
**for example**:
```
%%{init: {"theme": "default", "logLevel": 1 }}%%
graph LR
a-->b
b-->c
c-->d
d-->e
e-->f
f-->g
g-->
%%{init: {"theme": "default", "logLevel": 1 }}%%
graph LR
a-->b
b-->c
c-->d
d-->e
e-->f
f-->g
g-->
```
# Wrap
@ -214,4 +214,4 @@ Ensures options parameter does not attempt to override siteConfig secure keys.
default: current siteConfig (optional, default `getSiteConfig()`)
```
## For more information, read [Setup](https://mermaid-js.github.io/mermaid/#/Setup).
## For more information, read [Setup](Setup.md).

9
docs/getting-started/Setup.md
View File

@ -146,9 +146,8 @@ mermaidAPI.initialize({
## mermaidAPI configuration defaults
<pre>
&lt;script>
```html
<script>
var config = {
theme:'default',
logLevel:'fatal',
@ -203,7 +202,7 @@ mermaidAPI.initialize({
}
};
mermaid.initialize(config);
&lt;/script>
</pre>
</script>
```
[1]: Setup.md?id=render

19
docs/getting-started/Tutorials.md
View File

@ -1,12 +1,12 @@
# Tutorials
# Tutorials
This is list of publicly available Tutorials in Mermaid. This is intended as a basic introduction for the use of the Live Editor and HTML with mermaid.
For the purposes, the Live-Editor is capable of taking care of all diagramming needs, and these are the most common use cases for it.
For the purposes, the Live-Editor is capable of taking care of all diagramming needs, and these are the most common use cases for it.
# Live-Editor Tutorials
The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
## Live-Editor Tutorials
The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s
@ -20,10 +20,10 @@ https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
https://www.youtube.com/watch?v=9HZzKkAqrX8
# Mermaid with HTML:
Examples are provided in [Gettting Started](./docs/n00b-gettingStarted.md)
## Mermaid with HTML:
Examples are provided in [Gettting Started](n00b-gettingStarted.md)
**CodePen Examples:**
**CodePen Examples:**
https://codepen.io/CarlBoneri/pen/BQwZzq
@ -32,7 +32,6 @@ https://codepen.io/tdkn/pen/vZxQzd
https://codepen.io/janzeteachesit/pen/OWWZKN
## Mermaid with Text Area:
https://codepen.io/Ryuno-Ki/pen/LNxwgR
## Mermaid with Text Area:
https://codepen.io/Ryuno-Ki/pen/LNxwgR

36
docs/getting-started/n00b-gettingStarted.md
View File

@ -14,13 +14,13 @@ This then renders a diagram based on that code in SVG, alternatively it
Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot.
## For beginners, there are four relatively easy ways you can use mermaid:
1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). For some popular video tutorials on the live editor go to [Overview](./n00b-overview.md).
2. Using one of the many [mermaid plugins](https://mermaid-js.github.io/mermaid/#/integrations).
1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). For some popular video tutorials on the live editor go to [Overview](../overview/n00b-overview.md).
2. Using one of the many [mermaid plugins](../overview/integrations.md).
3. Hosting mermaid on a webpage, with an absolute link.
4. Downloading mermaid and hosting it on your Web Page.
**Notes**: More in depth information can be found on [Usage](./usage.md).
.
# Following any of these examples, you can get started with creating your own diagrams using mermaid code.
## 1. The mermaid live editor:
@ -31,7 +31,7 @@ In the `Code` section one can write or edit raw mermaid code, and instantly `Pre
**This is a great way to learn how to define a mermaid diagram.**
For some popular video tutorials on the live editor go to [Overview](./n00b-overview.md).
For some popular video tutorials on the live editor go to [Overview](../overview/n00b-overview.md).
![Flowchart](../assets/img/n00b-liveEditor.png)
@ -41,12 +41,12 @@ You can also click "Copy Markdown" to copy the markdown code for the diagram, th
![Flowchart](../assets/img/liveEditorOptions.png)
The `Mermaid configuration` is for controlling mermaid behaviour. An easy introduction to mermaid configuration is found in the [Advanced usage](n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](https://mermaid-js.github.io/mermaid/#/Setup) page.
The `Mermaid configuration` is for controlling mermaid behaviour. An easy introduction to mermaid configuration is found in the [Advanced usage](n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](Setup.md) page.
## 2. Using mermaid plugins:
Thanks to the growing popularity of mermaid, many plugins already exist which incorporate a mermaid renderer. An extensive list can be found [here](./integrations.md).
Thanks to the growing popularity of mermaid, many plugins already exist which incorporate a mermaid renderer. An extensive list can be found [here](../overview/integrations.md).
One example in the list is the [Atlassian Confluence mermaid plugin](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
@ -75,11 +75,11 @@ When the mermaid plugin is installed on a Confluence server, one can insert a me
- Save the page and the diagram appears.
![Flowchart](../../assets/img/n00b-Confluence4.png)
![Flowchart](../assets/img/n00b-Confluence4.png)
---
## The following are two ways of hosting mermaid on a webpage.
**This is covered in greater detail in the [Usage section](https://mermaid-js.github.io/mermaid/#/usage)**
**This is covered in greater detail in the [Usage section](usage.md)**
## 3. Using the Mermaid API: The quick and dirty way of deploying mermaid
@ -106,7 +106,7 @@ c. The `mermaid.initialize()` API call to start the rendering process.
### a. A reference to the address of the `mermaid.js` or the `mermaid.min.js` file has to be contained in a `<script src>` tag like so:
```
```html
<body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</body>
@ -114,7 +114,7 @@ c. The `mermaid.initialize()` API call to start the rendering process.
### b. The embedded mermaid diagram definition needs to be contained inside a `<div>` tag that signifies that it is a mermaid diagram:
```
```html
<body>
Here is a mermaid diagram:
<div class="mermaid">
@ -131,7 +131,7 @@ c. The `mermaid.initialize()` API call to start the rendering process.
`mermaid.initialize()` calls take all the definitions contained in `<div class="mermaid">` tags it can find in the html body and starts to render them one by one. It is called this way:
```
```html
<body>
<script>mermaid.initialize({startOnLoad:true});</script>
</body>
@ -142,7 +142,7 @@ c. The `mermaid.initialize()` API call to start the rendering process.
### If the three steps mentioned are followed you will end up with something like this:
```
```html
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
@ -190,14 +190,14 @@ This method is similar to 3, if only a little more involved. The difference may
c. select copy as path from the options.
6. Paste it within the `script` tag as the `src`.
```
```html
<script src="Paste the mermaid.min.js file address here"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<script>mermaid.initialize({startOnLoad:true});</script>
```
7. It should look something like this
```
<script src="C:\Users\myPC\mermaid\dist\mermaid.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
```html
<script src="C:\Users\myPC\mermaid\dist\mermaid.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
```
8. Add the graph and diagram definitions as you would in number 3.
a. be mindful of the `div` tags.
@ -208,7 +208,7 @@ This method is similar to 3, if only a little more involved. The difference may
**Note** placing the HTML file on the same folder the `mermaid` file you've downloaded is a good practice and allows you to shorten the address on the `src` section.
**As seen here, in this full example:**
```
```html
<html lang="en">
<head>
<meta charset="utf-8">

45
docs/getting-started/usage.md
View File

@ -47,23 +47,24 @@ This topic explored in greater depth in the [User Guide for Beginners](./n00b-ge
The easiest way to integrate mermaid on a web page requires three elements:
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
`<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>`
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
```
2. The `mermaidAPI` call, in a separate `script` tag. Example:
`<script>mermaid.initialize({startOnLoad:true});</script>`
```html
<script>mermaid.initialize({startOnLoad:true});</script>
```
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
```html
<div class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
```
```html
<div class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
```
**If these things are in place mermaid starts at the page load event and when fired (when the page has loaded) it will
locate the graph definitions inside the `div` tags with `class="mermaid"` on the page and transform them to svg charts or diagrams.**
@ -125,9 +126,9 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, if t
## To chage `securityLevel` with `mermaidAPI.initialize`:
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
});
mermaidAPI.initialize({
securityLevel: 'loose'
});
```
@ -153,11 +154,13 @@ $(document).ready(function() {
Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window.load event to start rendering.
If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.
```css
div.mermaid {
font-family: 'trebuchet ms', verdana, arial;
}
```
div.mermaid {
font-family: 'trebuchet ms', verdana, arial;
}
```
# This likely requires a `script.js` file, separate from the `HTML`.
### Calling `mermaid.init`
@ -335,7 +338,7 @@ setting the options in mermaid.
4. Instantiation of the configuration using the **mermaid.init** call
The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of
configuration objects are described [in the mermaidAPI documentation](mermaidAPI.html).
configuration objects are described [in the mermaidAPI documentation](Setup.md).
## Using the `mermaidAPI.initialize`/`mermaid.initialize` call

7
docs/overview/n00b-overview.md
View File

@ -28,14 +28,15 @@ mermaid seeks to change that. mermaid is a javascript based tool that utilizes a
**Mermaid definitions**
>These are the instrunctions for how the diagram is to rendered, written in mermaid, which is based on Markdown. These can be found inside `<div>` tags, with the `class=mermaid`.
```
```html
<div class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</div>
```
```
**render**
@ -55,7 +56,7 @@ mermaid seeks to change that. mermaid is a javascript based tool that utilizes a
## The catch-22 of Diagrams and Charts:
**Diagramming and charting is a gigantic waste of developer time, but not having diagrams ruins productivity. **
**Diagramming and charting is a gigantic waste of developer time, but not having diagrams ruins productivity.**
mermaid solves this by cutting the time, effort and tooling that is required to create diagrams and charts.

31
docs/tutorials-and-community/CHANGELOG.md
View File

@ -13,13 +13,13 @@ Here is the list of the newest versions in Descending Order, beginning from the
## 8.7.0 (2020-08-09)
🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.7.0) |
🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.7.0) |
📜 [Full Changelog](https://github.com/mermaid-js/mermaid/compare/8.6.0...8.7.0)
This version brings with it a system for [dynamic and integrated configuration of the diagram themes](./theming.md).
The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](../getting-started/8.6.0_docs.md).
**These Theming Configurations, similar to directives, will also be made applicable in the Live-Editor, for easier styling.**
@ -30,12 +30,12 @@ Site-wide themes are still declared via `initialize` by site owners.
Example of `Initalize` call setting `theme` to `base`:
```js
mermaidAPI.initialize({
'securityLevel': 'loose', 'theme': 'base'
});
mermaidAPI.initialize({
'securityLevel': 'loose', 'theme': 'base'
});
```
**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
### Themes at the Local or Current Level
@ -86,7 +86,7 @@ Leaving it empty will set all variable values to default.
🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.6.0)
[Version 8.6.0](./8.6.0_docs.md) introduces New Configuration Protocols and Directives and a Beta for the [New Mermaid Live-Editor](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
[Version 8.6.0](../getting-started/8.6.0_docs.md) introduces New Configuration Protocols and Directives and a Beta for the [New Mermaid Live-Editor](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
**With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.**
@ -113,7 +113,7 @@ Version 8.2.0, introduces a security improvement.
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.
### securityLevel
| Parameter | Description | Type | Required | Values |
@ -126,17 +126,17 @@ This was introduced in version 8.2 as a security improvement, aimed at preventin
- **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
⚠️ **Note**: This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
⚠️ **Note**: This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
If you are taking resposibility for the diagram source security you can set the `securityLevel` to a value of your choosing.
By doing this clicks and tags are again allowed.
### To change `securityLevel` with `mermaidAPI.initialize`:
### To change `securityLevel` with `mermaidAPI.initialize`:
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
});
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
});
```
**Closed issues:**
@ -990,4 +990,3 @@ By doing this clicks and tags are again allowed.
[Full Changelog](https://github.com/knsv/mermaid/compare/0.1.0...0.1.1)
## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16)

13
docs/tutorials-and-community/development.md
View File

@ -7,9 +7,18 @@ title: Development and Contribution
## Updating the documentation
Please continue writing documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
Please continue writing documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [jekyll-rtd-theme](https://github.com/rundocs/jekyll-rtd-theme).
We publish documentation using GitHub Pages.
1. Install a full [Ruby development environment](https://jekyllrb.com/docs/installation/)
2. Change into docs directory
```sh
make
```
3. Build the site and make it available on a local server
```sh
make server
```
4. Browse to [http://localhost:4000/mermaid/](http://localhost:4000/mermaid/)
### Questions and/or suggestions ?

8
src/mermaidAPI.js
View File

@ -616,9 +616,9 @@ configApi.reset(configApi.getConfig());
export default mermaidAPI;
/**
* ## mermaidAPI configuration defaults
* <pre>
*
* &lt;script>
* ```html
* <script>
* var config = {
* theme:'default',
* logLevel:'fatal',
@ -673,6 +673,6 @@ export default mermaidAPI;
* }
* };
* mermaid.initialize(config);
* &lt;/script>
*</pre>
* </script>
* ```
*/