diff --git a/docs/.debug.yml b/docs/.debug.yml new file mode 100644 index 000000000..3f966318a --- /dev/null +++ b/docs/.debug.yml @@ -0,0 +1,5 @@ +remote_theme: false + +baseurl: /mermaid + +theme: jekyll-rtd-theme diff --git a/docs/Makefile b/docs/Makefile index e2d8beed5..d3677042c 100644 --- a/docs/Makefile +++ b/docs/Makefile @@ -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 diff --git a/docs/README.md b/docs/README.md index 499b89a69..11b1772b0 100644 --- a/docs/README.md +++ b/docs/README.md @@ -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.
-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 `` 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 `
` 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) diff --git a/docs/_config.yml b/docs/_config.yml index f8eaa0ba6..4cff4dcbc 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -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 diff --git a/docs/diagrams-and-syntax-and-examples/classDiagram.md b/docs/diagrams-and-syntax-and-examples/classDiagram.md index a23d527e2..489c7370e 100644 --- a/docs/diagrams-and-syntax-and-examples/classDiagram.md +++ b/docs/diagrams-and-syntax-and-examples/classDiagram.md @@ -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; } diff --git a/docs/diagrams-and-syntax-and-examples/directives.md b/docs/diagrams-and-syntax-and-examples/directives.md index 748798210..d00fc9c4f 100644 --- a/docs/diagrams-and-syntax-and-examples/directives.md +++ b/docs/diagrams-and-syntax-and-examples/directives.md @@ -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. diff --git a/docs/diagrams-and-syntax-and-examples/examples.md b/docs/diagrams-and-syntax-and-examples/examples.md index 9eb7bc59b..c6f33cae2 100644 --- a/docs/diagrams-and-syntax-and-examples/examples.md +++ b/docs/diagrams-and-syntax-and-examples/examples.md @@ -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 diff --git a/docs/diagrams-and-syntax-and-examples/flowchart.md b/docs/diagrams-and-syntax-and-examples/flowchart.md index f785d5c1d..6a9245e23 100644 --- a/docs/diagrams-and-syntax-and-examples/flowchart.md +++ b/docs/diagrams-and-syntax-and-examples/flowchart.md @@ -609,7 +609,7 @@ click nodeId callback Examples of tooltip usage below: -``` +```html +``` [1]: Setup.md?id=render diff --git a/docs/getting-started/Tutorials.md b/docs/getting-started/Tutorials.md index 442a799c8..87ce7d1ab 100644 --- a/docs/getting-started/Tutorials.md +++ b/docs/getting-started/Tutorials.md @@ -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 diff --git a/docs/getting-started/n00b-gettingStarted.md b/docs/getting-started/n00b-gettingStarted.md index 40c9627e6..adb51835f 100644 --- a/docs/getting-started/n00b-gettingStarted.md +++ b/docs/getting-started/n00b-gettingStarted.md @@ -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 ` @@ -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 `
` tag that signifies that it is a mermaid diagram: -``` +```html Here is a mermaid diagram:
@@ -131,7 +131,7 @@ c. The `mermaid.initialize()` API call to start the rendering process. `mermaid.initialize()` calls take all the definitions contained in `
` tags it can find in the html body and starts to render them one by one. It is called this way: -``` +```html @@ -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 @@ -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 - + ``` 7. It should look something like this -``` - - +```html + + ``` 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 diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md index 8a718c984..be7dd127e 100644 --- a/docs/getting-started/usage.md +++ b/docs/getting-started/usage.md @@ -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: - - `` + ```html + + ``` 2. The `mermaidAPI` call, in a separate `script` tag. Example: - - `` + ```html + + ``` 3. A graph definition, inside `
` tags labeled `class=mermaid`. Example: - -```html -
- graph LR - A --- B - B-->C[fa:fa-ban forbidden] - B-->D(fa:fa-spinner); -
-``` + ```html +
+ graph LR + A --- B + B-->C[fa:fa-ban forbidden] + B-->D(fa:fa-spinner); +
+ ``` **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 diff --git a/docs/overview/n00b-overview.md b/docs/overview/n00b-overview.md index 60b924a12..1ac1d2411 100644 --- a/docs/overview/n00b-overview.md +++ b/docs/overview/n00b-overview.md @@ -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 `
` tags, with the `class=mermaid`. -``` + +```html
graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
- ``` +``` **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. diff --git a/docs/tutorials-and-community/CHANGELOG.md b/docs/tutorials-and-community/CHANGELOG.md index 5930710f0..37043f5fb 100644 --- a/docs/tutorials-and-community/CHANGELOG.md +++ b/docs/tutorials-and-community/CHANGELOG.md @@ -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) - diff --git a/docs/tutorials-and-community/development.md b/docs/tutorials-and-community/development.md index e48c7570a..c2319bd24 100644 --- a/docs/tutorials-and-community/development.md +++ b/docs/tutorials-and-community/development.md @@ -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 ? diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 3e9c76ec0..cc307f68c 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -616,9 +616,9 @@ configApi.reset(configApi.getConfig()); export default mermaidAPI; /** * ## mermaidAPI configuration defaults - * 
  *
- * <script>
+ * ```html
+ * 
+ * ```
  */