From 567c09850cedfa12839674b86874316d715f30ad Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Fri, 17 Jul 2020 16:54:23 -0700 Subject: [PATCH 01/32] Update n00b-overview.md - Added copy to make it more friendly to beginners. --- docs/n00b-overview.md | 49 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 40 insertions(+), 9 deletions(-) diff --git a/docs/n00b-overview.md b/docs/n00b-overview.md index 83b5653b1..423bfcfd0 100644 --- a/docs/n00b-overview.md +++ b/docs/n00b-overview.md @@ -1,6 +1,11 @@ -# Overview for n00bs +# Overview for Beginners +**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./n00b-overview.md) -mermaid is a tool that aims to make diagrams and flowcharts for documentation, easier. +## Nothing explains a concept like a Good Diagram + +mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams, Knowledge Transfer and Documentation + +# The primary objective of mermaid is to help in addressing the problem of Documentation Rot. with mermaid, diagrams can be created through comments like this in a script: @@ -15,15 +20,41 @@ And they are rendered into this and made part of the documentation: ![Flowchart](./img/n00b-firstFlow.png) -Most of the similar visuals that you might need to create can be scripted in a similar way, with a varitety of different symbols and chart types available. -Since the diagram source is text based, it can be part of production scripts (and other pieces of code). So less time needs be spent on documenting as a separate task. +## Advantages of Using Mermaid -Comparing with Visio and similar applications, mermaid is a really fast way to create good visualizations. This is especially apparent when editing a complex visualisations, a process that usually takes hours in a desktop application, but only takes minutes (or even less if generation has been scripted) with mermaid. +- The Advantages of mermaid include its ease of generation, modification and rendering. +- The number of integrations that it has. +- It is a package that can be deployed to create -mermaid can potentially cut down the amount of time and effort spent on the process of creating diagrams, to a fraction of what you usually put in. +## Creating and Maintaining Diagrams is an expensive and frustrating process. -However, a lot of the mermaid documentation is geared to professional frontend developers, presuming a skill set which I simply do not have. +Anyone who has used Visio, or (God Forbid) Excel to make a Gantt Chart, knows how hard it is to make, edit and maintain good visualizations. -If you need some basic instructions and introductions, here are a few good places to start: +In an environment of constantly changing information , diagrams/charts become obsolete/inaccurate very fast. This hobbles the information transfer and productivity in teams. -For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted), or you can try out the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/), alternatively, you could also view the [integrations and uses](https://github.com/mermaid-js/mermaid/blob/develop/docs/integrations.md) for mermaid. +The fast setting Doc-Rot in diagrams makes it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts. + +## This is a source of frustration for developers, engineers or any subject matter experts, not to mention it costing companies in missed productivity. + +mermaid can potentially cut down the amount of time, effort and the learning curve that is associated with creating diagrams and charts. Because, the text base for diagrams can be edited easily, to modify the product, it can also be part of production scripts (and other pieces of code). So less time needs be spent on documenting, as a separate task. + + +## The mobility that mermaid provides can help Documentation catch up with Development in quickly changing projects. + +Being based on markdown, mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render simple diagrams, at much faster speeds. +In fact one can pick up the syntax for it quite easily from the examples given. + +## mermaid is a useful charting tool + +For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted). +You can try out the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). +Alternatively, you could also view the [integrations and uses](https://github.com/mermaid-js/mermaid/blob/develop/docs/integrations.md). + +# For anyone who may need video tutorials, here is a list of beginner friendly introductions: + +https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s +https://www.youtube.com/watch?v=5RQqht3NNSE +https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s +https://www.youtube.com/watch?v=9HZzKkAqrX8 +https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s +https://www.youtube.com/watch?v=9HZzKkAqrX8 From 31f890d55ca9aa02567e7571971d91490192656a Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Fri, 17 Jul 2020 16:54:55 -0700 Subject: [PATCH 02/32] Update n00b-overview.md --- docs/n00b-overview.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/n00b-overview.md b/docs/n00b-overview.md index 423bfcfd0..2bfadcafd 100644 --- a/docs/n00b-overview.md +++ b/docs/n00b-overview.md @@ -53,8 +53,13 @@ Alternatively, you could also view the [integrations and uses](https://github.co # For anyone who may need video tutorials, here is a list of beginner friendly introductions: https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s + https://www.youtube.com/watch?v=5RQqht3NNSE + https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s + https://www.youtube.com/watch?v=9HZzKkAqrX8 + https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s + https://www.youtube.com/watch?v=9HZzKkAqrX8 From 615c6cb3883a86af176b4e4e654683480cbd9f3b Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Fri, 17 Jul 2020 20:00:24 -0700 Subject: [PATCH 03/32] Update directives.md --- docs/directives.md | 35 ++++++++++++++++++++++++++++------- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/docs/directives.md b/docs/directives.md index e11f832be..985026d01 100644 --- a/docs/directives.md +++ b/docs/directives.md @@ -1,11 +1,26 @@ ## Directives **Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./directives.md) -### Directives were added in [Version 8.6.0](/8.6.0_docs.md) -#### Init directives -With this version, directives are supported. Technically there are two flavors of directive: init/initialize and everything else. The init/initialize directive is parsed early in the flow enough to be able to re-initialize mermaid with a new configuration object. Example: +## Directives were added in [Version 8.6.0](/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. + +#### Init + + +| Parameter | Description |Type | Required | Values| +| --- | --- | --- | --- | --- | +| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array| + +**Notes:** + +init would be an argument-directive: %%{init: { **insert argument here**}}%% + +The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored. + +The init/initialize directive is parsed early in the flow, enough to be able to re-initialize mermaid with a new configuration object. Example: ``` %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% graph > @@ -14,7 +29,7 @@ A-->B will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart diagram. -Note: init or initialize are both acceptable as init directives. Also note that init directives are coalesced. This means: +Note: 'init' or 'initialize' are both acceptable as init directives. Also note that init directives are coalesced. This means: ``` %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% @@ -33,10 +48,11 @@ will result an init object looking like this: ``` to be sent to `mermaid.initialize(...)` + #### Other directives -The other flavor of directive is everything else. In this category are any directives that follow the graph type declaration. Essentially, these directives will not be processed early in the flow like the init directive. Each individual graph type will handle these directives. As an example: +In this category are any directives that follow the graph type declaration. Essentially, these directives will not be processed early in the flow like the init directive. Each individual graph type will handle these directives. As an example: ``` %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% @@ -45,15 +61,20 @@ sequenceDiagram Alice->>Bob: Hi Bob Bob->>Alice: Hi Alice ``` - +## Chronology This will set the `logLevel` to `debug` and `theme` to `dark` for a sequence diagram. Then, during processing, the config for the sequence diagram is set by the `config` directive. This directive is handled in the `sequenceDb.js`. In this example, the fontFamily, fontSize, and fontWeight are all set for this sequence diagram. #### Backwards Compatibility -Init directives and any other non-multiline directives should be backwards compatible because they will be treated as comments in prior versions of mermaid-js. +Init directives and any other non-multiline directives should be backwards compatible, because they will be treated as comments in prior versions of mermaid-js. Multiline directives, however, will pose an issue and will render an error. This is unavoidable. ### Wrapping The `%%{wrap}%%` directive and the inline `wrap:` text hint have also been added for sequence diagrams. This has been explained in my previous comments and has not materially changed. + +# Wrap +| Parameter | Description |Type | Required | Values| +| --- | --- | --- | --- | --- | +| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%| From 1c6a64caf276cf6144f515b63e1c634d85cad4d1 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Sat, 18 Jul 2020 04:27:17 -0700 Subject: [PATCH 04/32] Update n00b-overview.md --- docs/n00b-overview.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/n00b-overview.md b/docs/n00b-overview.md index 2bfadcafd..3c5433304 100644 --- a/docs/n00b-overview.md +++ b/docs/n00b-overview.md @@ -34,17 +34,19 @@ In an environment of constantly changing information , diagrams/charts become ob The fast setting Doc-Rot in diagrams makes it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts. -## This is a source of frustration for developers, engineers or any subject matter experts, not to mention it costing companies in missed productivity. +## Diagramming and charting is a gigantic waste of developer time, but not having diagrams ruins productivity. -mermaid can potentially cut down the amount of time, effort and the learning curve that is associated with creating diagrams and charts. Because, the text base for diagrams can be edited easily, to modify the product, it can also be part of production scripts (and other pieces of code). So less time needs be spent on documenting, as a separate task. +mermaid can cut down the amount of time, effort and the learning curve that is associated with creating diagrams and charts, by a wide margin. + +Because, the text base for 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 be spent on documenting, as a separate task. -## The mobility that mermaid provides can help Documentation catch up with Development in quickly changing projects. +## mermaid helps Documentation catch up with Development, in quickly changing projects. Being based on markdown, mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render simple diagrams, at much faster speeds. -In fact one can pick up the syntax for it quite easily from the examples given. +In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials in the internet. -## mermaid is a useful charting tool +## mermaid is for everyone. For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted). You can try out the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). From 26dba53d99c18f831593ee0020b36e2f578593be Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Sat, 18 Jul 2020 04:39:33 -0700 Subject: [PATCH 05/32] Update config.js --- src/config.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/config.js b/src/config.js index fb74d8e01..167415ada 100644 --- a/src/config.js +++ b/src/config.js @@ -820,8 +820,6 @@ const siteConfig = assignWithDepth({}, defaultConfig); const currentConfig = assignWithDepth({}, defaultConfig); /** - *## setSiteConfig - *| Function | Description | Type | Values | *| --------- | ------------------- | ------- | ------------------ | *| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array| @@ -842,7 +840,6 @@ export const setSiteConfig = conf => { return getSiteConfig(); }; /** - *## getSiteConfig *| Function | Description | Type | Values | *| --------- | ------------------- | ------- | ------------------ | *| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig| @@ -855,7 +852,6 @@ export const getSiteConfig = () => { return assignWithDepth({}, siteConfig); }; /** - *## setConfig *| Function | Description | Type | Values | *| --------- | ------------------- | ------- | ------------------ | *| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, except ones in secure array| @@ -874,7 +870,6 @@ export const setConfig = conf => { return getConfig(); }; /** - * ## getConfig *| Function | Description | Type | Return Values | *| --------- | ------------------- | ------- | ------------------ | *| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig| @@ -887,7 +882,6 @@ export const getConfig = () => { return assignWithDepth({}, currentConfig); }; /** - *## sanitize *| Function | Description | Type | Values | *| --------- | ------------------- | ------- | ------------------ | *| sanitize |Sets the siteConfig to desired values. | Put Request |None| @@ -910,8 +904,6 @@ export const sanitize = options => { }); }; /** - *## reset - *| Function | Description | Type | Required | Values | *| --------- | ------------------- | ------- | -------- | ------------------ | *| reset|Resets currentConfig to conf| Put Request | Required | None| From 212e0e624faa9d0b0664442a46da2bf0b8bdbf5c Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Sat, 18 Jul 2020 04:59:52 -0700 Subject: [PATCH 06/32] Update n00b-overview.md --- docs/n00b-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/n00b-overview.md b/docs/n00b-overview.md index 3c5433304..cd7145113 100644 --- a/docs/n00b-overview.md +++ b/docs/n00b-overview.md @@ -50,7 +50,7 @@ In fact one can pick up the syntax for it quite easily from the examples given a For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted). You can try out the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). -Alternatively, you could also view the [integrations and uses](https://github.com/mermaid-js/mermaid/blob/develop/docs/integrations.md). +Alternatively, you could also view the [integrations and uses](https://mermaid-js.github.io/mermaid/#/./integrations). # For anyone who may need video tutorials, here is a list of beginner friendly introductions: From ed1c2cb596699dd4ba33691cc5f5a4c928a490d5 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Sat, 18 Jul 2020 05:18:18 -0700 Subject: [PATCH 07/32] Update README.md --- docs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index 6c4ae2c4d..70f043b7a 100644 --- a/docs/README.md +++ b/docs/README.md @@ -24,7 +24,7 @@ For a more detailed introduction to mermaid, look to the [Beginner's Guide](http You should also Check out the list of [Integrations and Usages of Mermaid](./integrations.md) -You can also watch some popular mermaid tutorials. +You can also watch some popular mermaid tutorials on the [mermaid Overview](./n00b-overview.md) ## [CDN](https://unpkg.com/mermaid/) From 07f6572816d7de1e3689e7081649e29f3058d366 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Sat, 18 Jul 2020 18:04:03 -0700 Subject: [PATCH 08/32] Update usage.md --- docs/usage.md | 56 +++++++++++++++++++++++++++++++-------------------- 1 file changed, 34 insertions(+), 22 deletions(-) diff --git a/docs/usage.md b/docs/usage.md index 1e50060da..8f2a0de0b 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -5,7 +5,15 @@ ### npm package ``` -yarn add mermaid +1.You will need to isntall node v10 or 12, which would have npm. + +2. download yarn using npm. + +2. enter the following command: + yarn add mermaid + +3. You can then add mermaid as a dev dependency using this command: + yarn add --dev mermaid ``` ### CDN @@ -35,7 +43,7 @@ Further down on your page mermaid will look for tags with `class="mermaid"`. Fro read the chart definiton and replace it with the svg chart. -### Define a chart like this: +### Define a chart like thi: ```html
@@ -53,26 +61,7 @@ Would end up like this:
``` -An id attribute is also added to mermaid tags without one. - -### To enable click event and tags in nodes - -In version 8.2 a security improvement was introduced. A `securityLevel` configuration was introduced which sets the level of trust to be used on the parsed diagrams. - -* **true**: (default) tags in text are encoded, click functionality is disabled -* false: tags in text are allowed, 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. - -If your application is taking resposibility for the diagram source security you can set the `securityLevel` accordingly. By doing this clicks and tags are again allowed. - -```javascript - mermaidAPI.initialize({ - securityLevel: 'loose' - }); -``` - -### Simple full example: +## Simple full example: ```html @@ -93,6 +82,29 @@ If your application is taking resposibility for the diagram source security you ``` +## Notes: +An id attribute is also added to mermaid tags without one. + +Mermaid can load multiple diagrams, in the same page. + +## To enable click event and tags in nodes: + +In version 8.2 a security improvement was introduced. A `securityLevel` configuration was introduced which sets the level of trust to be used on the parsed diagrams. + +* **true**: (default) tags in text are encoded, click functionality is disabled +* false: tags in text are allowed, 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. + +If your application is taking resposibility for the diagram source security you can set the `securityLevel` accordingly. By doing this clicks and tags are again allowed. + +```javascript + mermaidAPI.initialize({ + securityLevel: 'loose' + }); +``` + + ### Labels out of bounds If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the From 56073fd522b6c8c0dfcffefc1248e88de461749f Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Sat, 18 Jul 2020 20:11:48 -0700 Subject: [PATCH 09/32] Update usage.md --- docs/usage.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docs/usage.md b/docs/usage.md index 8f2a0de0b..49433be93 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -81,6 +81,24 @@ Would end up like this: ``` +An id attribute is also added to mermaid tags without one. ## Simple full example: + +### To enable click event and tags in nodes + +In version 8.2 a security improvement was introduced. A `securityLevel` configuration was introduced which sets the level of trust to be used on the parsed diagrams. + +* **true**: (default) tags in text are encoded, click functionality is disabled +* false: tags in text are allowed, 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. + +If your application is taking resposibility for the diagram source security you can set the `securityLevel` accordingly. By doing this clicks and tags are again allowed. + +```javascript + mermaidAPI.initialize({ + securityLevel: 'loose' + }); +``` ## Notes: An id attribute is also added to mermaid tags without one. From ac2c1e019f67366f023b081158071472baf8bbb5 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Sat, 18 Jul 2020 20:12:08 -0700 Subject: [PATCH 10/32] Update n00b-gettingStarted.md --- docs/n00b-gettingStarted.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md index 594a4d00c..f5d4880f5 100644 --- a/docs/n00b-gettingStarted.md +++ b/docs/n00b-gettingStarted.md @@ -4,11 +4,11 @@ Creating diagrams and charts using mermaid code is simple. But how is the code turned into a diagram in a web page? This is done with the use of a mermaid renderer. -Thankfully the mermaid renderer is very accessible, in essence it is a piece of javascript that can be called. +The mermaid renderer is very accessible, in essence it is a piece of javascript that can be called. Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot. The web browser also needs access to the online mermaid renderer which it downloads from https://cdn.jsdelivr.net/npm/mermaid -# For beginners, there are three relatively easy ways you can use mermaid: +## For beginners, there are three relatively easy ways you can use mermaid: 1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/) 2. Using one of the many mermaid plugins 3. Calling mermaid renderer with HTML, deployed in a friendly browser. @@ -30,12 +30,12 @@ It is also an easier way to develop diagrams. You can also click "Copy Markdown" ![Flowchart](./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](mermaidAPI.md) 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](https://mermaid-js.github.io/mermaid/#/Setup) 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](./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) From 56e328f31f908f73db3511a78b1ea43b4872b42c Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Sat, 18 Jul 2020 20:20:48 -0700 Subject: [PATCH 11/32] Update usage.md --- docs/usage.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/docs/usage.md b/docs/usage.md index 49433be93..945fd101d 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -35,8 +35,8 @@ locate the graphs on the page and transform them to svg files. ### Include mermaid on your web page: ```html - - + + ``` Further down on your page mermaid will look for tags with `class="mermaid"`. From these tags mermaid will try to @@ -47,7 +47,10 @@ read the chart definiton and replace it with the svg chart. ```html
- CHART DEFINITION GOES HERE + graph LR + A --- B + B-->C[fa:fa-ban forbidden] + B-->D(fa:fa-spinner);
``` @@ -76,12 +79,12 @@ Would end up like this: B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner); - - + + ``` -An id attribute is also added to mermaid tags without one. ## Simple full example: +## Try it out, save this code as HTML and load it. ### To enable click event and tags in nodes From e15e34db93685d38e95319f45d1659440a1ecb30 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Sun, 19 Jul 2020 21:13:39 -0700 Subject: [PATCH 12/32] Update n00b-overview.md --- docs/n00b-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/n00b-overview.md b/docs/n00b-overview.md index cd7145113..da388ccdc 100644 --- a/docs/n00b-overview.md +++ b/docs/n00b-overview.md @@ -26,7 +26,7 @@ And they are rendered into this and made part of the documentation: - The number of integrations that it has. - It is a package that can be deployed to create -## Creating and Maintaining Diagrams is an expensive and frustrating process. +## Creating and Maintaining Diagrams should not be an expensive and frustrating process. Anyone who has used Visio, or (God Forbid) Excel to make a Gantt Chart, knows how hard it is to make, edit and maintain good visualizations. From 956ee06ea67fb8b96c257ede030621798a97643f Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Sun, 19 Jul 2020 21:18:36 -0700 Subject: [PATCH 13/32] Update n00b-overview.md --- docs/n00b-overview.md | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/docs/n00b-overview.md b/docs/n00b-overview.md index da388ccdc..1e6e9d4c1 100644 --- a/docs/n00b-overview.md +++ b/docs/n00b-overview.md @@ -3,7 +3,21 @@ ## Nothing explains a concept like a Good Diagram -mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams, Knowledge Transfer and Documentation +A picture is worth a thousand words, a good diagram is worth a little more in my opinion, and there is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so, for documentation. + +mermaid aims to change that. + +## Creating and Maintaining Diagrams should not be an expensive and frustrating process. + +Anyone who has used Visio, or (God Forbid) Excel to make a Gantt Chart, knows how hard it is to make, edit and maintain good visualizations. + +In an environment of constantly changing information , diagrams/charts become obsolete/inaccurate very fast. This hobbles the information transfer and productivity in teams. + +# Doc Rot and Dagrams + +The fast setting Doc-Rot in diagrams makes it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts. + +mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams, # The primary objective of mermaid is to help in addressing the problem of Documentation Rot. @@ -26,13 +40,6 @@ And they are rendered into this and made part of the documentation: - The number of integrations that it has. - It is a package that can be deployed to create -## Creating and Maintaining Diagrams should not be an expensive and frustrating process. - -Anyone who has used Visio, or (God Forbid) Excel to make a Gantt Chart, knows how hard it is to make, edit and maintain good visualizations. - -In an environment of constantly changing information , diagrams/charts become obsolete/inaccurate very fast. This hobbles the information transfer and productivity in teams. - -The fast setting Doc-Rot in diagrams makes it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts. ## Diagramming and charting is a gigantic waste of developer time, but not having diagrams ruins productivity. From 8cda6ede84ab7d3d6c692782a14e593524cc7db6 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 09:30:05 -0700 Subject: [PATCH 14/32] Update 8.6.0_docs.md --- docs/8.6.0_docs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/8.6.0_docs.md b/docs/8.6.0_docs.md index 5918964ab..483fc314e 100644 --- a/docs/8.6.0_docs.md +++ b/docs/8.6.0_docs.md @@ -1,6 +1,6 @@ # Version 8.6.0 Changes -**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./8.6.0_docs.md) +**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/8.6.0_docs.md) ## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ) From 17206fc53885e4c751b05928e1a49c586b6500bd Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 09:31:01 -0700 Subject: [PATCH 15/32] Update CHANGELOG.md --- docs/CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index f5d1bd860..4fcbb9e66 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,5 +1,7 @@ # Change Log +**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/CHANGELOG.md) + ## [Unreleased](https://github.com/knsv/mermaid/tree/HEAD) [Full Changelog](https://github.com/knsv/mermaid/compare/8.1.0...HEAD) @@ -856,4 +858,4 @@ ## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16) -\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)* \ No newline at end of file +\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)* From e43804d9500ecec25dcbdcdbfc5a9dc28dfd21f9 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 09:31:51 -0700 Subject: [PATCH 16/32] Update README.md --- docs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index 70f043b7a..50313a886 100644 --- a/docs/README.md +++ b/docs/README.md @@ -5,7 +5,7 @@ [![Join the chat at https://gitter.im/knsv/mermaid](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/knsv/mermaid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) ![banner](./img/header.png) -**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./README.md) +**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md) **Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.** From 01fe70a29a97307ce14ecd9ddf50ebc340b9c78e Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 09:34:37 -0700 Subject: [PATCH 17/32] Update development.md --- docs/development.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/development.md b/docs/development.md index 1a26f91e8..b4de72489 100644 --- a/docs/development.md +++ b/docs/development.md @@ -1,6 +1,6 @@ # Development - +**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) ## Updating the documentation Please continue writing documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). From 4bca9c63da3bed6ae85ffa38b3327a53a6abc253 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 09:35:12 -0700 Subject: [PATCH 18/32] Update classDiagram.md --- docs/classDiagram.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/classDiagram.md b/docs/classDiagram.md index 3972132b0..ebf0787ab 100644 --- a/docs/classDiagram.md +++ b/docs/classDiagram.md @@ -1,4 +1,5 @@ # Class diagrams +**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/classDiagram.md) > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects." Wikipedia From 3213fbff8b8413b99dd34b029ffcaf7142a84005 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 09:35:46 -0700 Subject: [PATCH 19/32] Update breakingChanges.md --- docs/breakingChanges.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/breakingChanges.md b/docs/breakingChanges.md index 21206dc6d..27e4f2bdf 100644 --- a/docs/breakingChanges.md +++ b/docs/breakingChanges.md @@ -1,5 +1,5 @@ # Breaking changes - +**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/breakingChanges.md) ### Breaking changes from history version to latest version: ## #1 From 56ed31ed6f12c67a4966e1fe99a216194241ba9d Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 11:34:05 -0700 Subject: [PATCH 20/32] Update n00b-syntaxReference.md --- docs/n00b-syntaxReference.md | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/docs/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md index cbc389ed0..c5ee86532 100644 --- a/docs/n00b-syntaxReference.md +++ b/docs/n00b-syntaxReference.md @@ -1,6 +1,26 @@ -## Diagram syntax reference +## Diagram syntax +**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-syntaxReference.md) + +If you are new to mermaid, read [Getting Started](n00b-gettingStarted.md) and [Overview](n00b-overview.md) sections, to learn the basics about the basics. + +This section is a list of diagram types supported by mermaid, each one explains the syntax with which a diagram or chart can be called. +These are called Diagram Definitions, since they describe the manner with which the diagram is to be rendered by the renderer. + +## mermaid tag: +These Diagram Definitions can be entered within a \
tag. +like so : +``` +
+ graph LR + A --- B + B-->C[fa:fa-ban forbidden] + B-->D(fa:fa-spinner); +
+``` +## live ediotr +These definitions can also be entered into the [mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor), to render them immediately. +This would then offer -Having already [gotten started](n00b-gettingStarted.md), existing diagram syntax documentation was easy enough to follow even for a n00b like me.. - [Flowchart](flowchart.md) - [Sequence diagram](sequenceDiagram.md) @@ -8,4 +28,6 @@ Having already [gotten started](n00b-gettingStarted.md), existing diagram syntax - [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) From 815f398ada8e603c5eb3496395aacd5c1bfef797 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 11:39:23 -0700 Subject: [PATCH 21/32] Update n00b-syntaxReference.md --- docs/n00b-syntaxReference.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/docs/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md index c5ee86532..468955b7a 100644 --- a/docs/n00b-syntaxReference.md +++ b/docs/n00b-syntaxReference.md @@ -3,8 +3,11 @@ If you are new to mermaid, read [Getting Started](n00b-gettingStarted.md) and [Overview](n00b-overview.md) sections, to learn the basics about the basics. -This section is a list of diagram types supported by mermaid, each one explains the syntax with which a diagram or chart can be called. -These are called Diagram Definitions, since they describe the manner with which the diagram is to be rendered by the renderer. +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. + +They also detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer. + +### Benefits of a text based diagramming is its speed and modifiability, allowing easy maintenance and adaptations, over time. This allows your documentation to closely follow your code/project. ## mermaid tag: These Diagram Definitions can be entered within a \
tag. @@ -17,7 +20,7 @@ like so : B-->D(fa:fa-spinner);
``` -## live ediotr +## mermaid Live Editor These definitions can also be entered into the [mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor), to render them immediately. This would then offer From 60b8dfaa2d71f0fb1be3cff671a1aee18d4fe062 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 11:39:39 -0700 Subject: [PATCH 22/32] Update n00b-syntaxReference.md --- docs/n00b-syntaxReference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md index 468955b7a..d781c8594 100644 --- a/docs/n00b-syntaxReference.md +++ b/docs/n00b-syntaxReference.md @@ -1,7 +1,7 @@ ## Diagram syntax **Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-syntaxReference.md) -If you are new to mermaid, read [Getting Started](n00b-gettingStarted.md) and [Overview](n00b-overview.md) sections, to learn the basics about the basics. +If you are new to mermaid, read the [Getting Started](n00b-gettingStarted.md) and [Overview](n00b-overview.md) sections, to learn the basics about the basics. 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. From d6baf1b32a30aa9e869bfab0360182433167ed6a Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 11:39:59 -0700 Subject: [PATCH 23/32] Update n00b-syntaxReference.md --- docs/n00b-syntaxReference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md index d781c8594..bc36efdb8 100644 --- a/docs/n00b-syntaxReference.md +++ b/docs/n00b-syntaxReference.md @@ -1,7 +1,7 @@ ## Diagram syntax **Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-syntaxReference.md) -If you are new to mermaid, read the [Getting Started](n00b-gettingStarted.md) and [Overview](n00b-overview.md) sections, to learn the basics about the basics. +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. 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. From 50eb523d8ed1ce3e2fb0a724155a3272e97be862 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 11:45:13 -0700 Subject: [PATCH 24/32] Update n00b-syntaxReference.md --- docs/n00b-syntaxReference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md index bc36efdb8..72366a000 100644 --- a/docs/n00b-syntaxReference.md +++ b/docs/n00b-syntaxReference.md @@ -7,7 +7,7 @@ This section is a list of diagram types supported by mermaid. Below is a list of They also detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer. -### Benefits of a text based diagramming is its speed and modifiability, allowing easy maintenance and adaptations, over time. This allows your documentation to closely follow your code/project. +### The benefits of text based diagramming are its speed and modifiability. mermaid allows for easy maintenance and modification of diagrams. This means your diagrams will always be up to date and closely follow your code and improve your documentation. ## mermaid tag: These Diagram Definitions can be entered within a \
tag. From ced3e5fec886335d41d96fb0a32aa8c1125bf76d Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 11:48:15 -0700 Subject: [PATCH 25/32] Update n00b-overview.md --- docs/n00b-overview.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/n00b-overview.md b/docs/n00b-overview.md index 1e6e9d4c1..c47d6032f 100644 --- a/docs/n00b-overview.md +++ b/docs/n00b-overview.md @@ -1,9 +1,9 @@ # Overview for Beginners -**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./n00b-overview.md) +**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-overview.md) -## Nothing explains a concept like a Good Diagram +## There is no explanation like a Good Diagram -A picture is worth a thousand words, a good diagram is worth a little more in my opinion, and there is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so, for documentation. +A picture is worth a thousand words, a good diagram would be worth more. There is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so, for documentation. mermaid aims to change that. From 9e59d927f277db707b4814ce10bf8ae0bd968466 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 11:51:23 -0700 Subject: [PATCH 26/32] Update n00b-overview.md --- docs/n00b-overview.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/n00b-overview.md b/docs/n00b-overview.md index c47d6032f..96e4e7b99 100644 --- a/docs/n00b-overview.md +++ b/docs/n00b-overview.md @@ -13,15 +13,15 @@ Anyone who has used Visio, or (God Forbid) Excel to make a Gantt Chart, knows ho In an environment of constantly changing information , diagrams/charts become obsolete/inaccurate very fast. This hobbles the information transfer and productivity in teams. -# Doc Rot and Dagrams +# Doc Rot kills Diagrams -The fast setting Doc-Rot in diagrams makes it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts. +The fast setting Doc-Rot in diagrams makes it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts and the people who make them. -mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams, +mermaid seeks to change that. mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than most traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams. -# The primary objective of mermaid is to help in addressing the problem of Documentation Rot. +# The primary objective of mermaid is to help in addressing the problem of Doc Rot. -with mermaid, diagrams can be created through comments like this in a script: +With mermaid, diagrams can be created through comments like this in a script: ``` graph TD From 2f9be335cbf4db99ee3eb614922ea710ccd85e12 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 11:58:36 -0700 Subject: [PATCH 27/32] Update n00b-syntaxReference.md --- docs/n00b-syntaxReference.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md index 72366a000..d8cb5d4d1 100644 --- a/docs/n00b-syntaxReference.md +++ b/docs/n00b-syntaxReference.md @@ -1,7 +1,8 @@ ## Diagram syntax **Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-syntaxReference.md) -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](n00b-gettingStarted.md) and [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. From ae12e65712714c37d0020c6d980c4cedadeb661d Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 12:00:45 -0700 Subject: [PATCH 28/32] Update usage.md --- docs/usage.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/usage.md b/docs/usage.md index 945fd101d..5f6039cbc 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -1,8 +1,9 @@ # Usage +**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md) ## Installation -### npm package +### npm package ``` 1.You will need to isntall node v10 or 12, which would have npm. From 50079670f98e02084a3824f184ca93681d428e2e Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 12:09:02 -0700 Subject: [PATCH 29/32] Update user-journey.md --- docs/user-journey.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/user-journey.md b/docs/user-journey.md index a40af2acd..e466fd3b7 100644 --- a/docs/user-journey.md +++ b/docs/user-journey.md @@ -1,5 +1,5 @@ # User Journey Diagram - +**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/user-journey.md) > User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia) Mermaid can render user journey diagrams: From 4639ec87d25981e00a4285b71fe4818837a4831d Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 12:09:38 -0700 Subject: [PATCH 30/32] Update faq.md --- docs/faq.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/faq.md b/docs/faq.md index c6924b3c2..edda60f60 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -1,3 +1,6 @@ +Frequently Asked Questions: +**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/faq.md) + 1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217) 1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785) 1. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621) From dc8c27b1f97fe454295596b2923f9003c94dc264 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 12:09:49 -0700 Subject: [PATCH 31/32] Update faq.md --- docs/faq.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/faq.md b/docs/faq.md index edda60f60..f7fc5e26d 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -1,4 +1,5 @@ Frequently Asked Questions: + **Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/faq.md) 1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217) From ddee6d2b6a610d530df19a45345716940a85a97b Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Mon, 20 Jul 2020 20:07:57 -0700 Subject: [PATCH 32/32] Update config.js --- src/config.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/config.js b/src/config.js index fbbd2474d..ba06c2146 100644 --- a/src/config.js +++ b/src/config.js @@ -855,16 +855,15 @@ const siteConfig = assignWithDepth({}, defaultConfig); const currentConfig = assignWithDepth({}, defaultConfig); /** + *## setSiteConfig *| Function | Description | Type | Values | *| --------- | ------------------- | ------- | ------------------ | *| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array| - ***Notes:** *Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset *the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig *to the defaultConfig *Note: currentConfig is set in this function - **Default value: At default, will mirror Global Config** * @param conf - the base currentConfig to use as siteConfig * @returns {*} - the siteConfig @@ -877,10 +876,10 @@ export const setSiteConfig = conf => { return getSiteConfig(); }; /** + *## getSiteConfig *| Function | Description | Type | Values | *| --------- | ------------------- | ------- | ------------------ | *| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig| - ***Notes**: *Returns **any** values in siteConfig. * @returns {*} @@ -889,11 +888,10 @@ export const getSiteConfig = () => { return assignWithDepth({}, siteConfig); }; /** + *## setConfig *| Function | Description | Type | Values | *| --------- | ------------------- | ------- | ------------------ | *| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, except ones in secure array| - - ***Notes**: *Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any *values found in conf with key found in siteConfig.secure will be replaced with the corresponding @@ -908,10 +906,10 @@ export const setConfig = conf => { return getConfig(); }; /** + * ## getConfig *| Function | Description | Type | Return Values | *| --------- | ------------------- | ------- | ------------------ | *| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig| - ***Notes**: *Returns **any** the currentConfig * @returns {*} - the currentConfig @@ -920,10 +918,10 @@ export const getConfig = () => { return assignWithDepth({}, currentConfig); }; /** + *## sanitize *| Function | Description | Type | Values | *| --------- | ------------------- | ------- | ------------------ | *| sanitize |Sets the siteConfig to desired values. | Put Request |None| - *Ensures options parameter does not attempt to override siteConfig secure keys *Note: modifies options in-place * @param options - the potential setConfig parameter @@ -942,6 +940,7 @@ export const sanitize = options => { }); }; /** + *## reset *| Function | Description | Type | Required | Values | *| --------- | ------------------- | ------- | -------- | ------------------ | *| reset|Resets currentConfig to conf| Put Request | Required | None|