diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 525d9b8ac..865c56694 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -7,7 +7,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node-version: [12.x, 16.x] + node-version: [16.x] steps: - uses: actions/checkout@v2.3.4 diff --git a/docs/README.md b/docs/README.md index 5c15ee4c1..01eb687d5 100644 --- a/docs/README.md +++ b/docs/README.md @@ -2,7 +2,7 @@ **Mermaid lets you create diagrams and visualizations using text and code.** -It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. +It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. >If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md). @@ -18,7 +18,7 @@ The main purpose of Mermaid is to help with Visualizing Documentation, and helpi > Documentation-Rot is a Catch-22 that Mermaid helps to solve. Diagramming and Documentation costs precious developer time and gets outdated quickly. -But not having diagrams or docs ruins productivity and hurts organizational learning. +But not having diagrams or docs ruins productivity and hurts organizational learning. Mermaid addresses this Catch-22 by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content. Mermaid, as a text-based diagramming tool allows for quick and easy updates, it can also be made part of production scripts (and other pieces of code), to make documentation much easier. @@ -181,7 +181,7 @@ Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/brow ## Deploying Mermaid To Deploy Mermaid: -1. You will need to install node v10 or 12, which would have npm +1. You will need to install node v16, which would have npm 2. Download yarn using npm 3. Enter the following command: `yarn add mermaid` 4. You can then add mermaid as a dev dependency using this command: diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md index 92f50f0ea..2e077071d 100644 --- a/docs/n00b-gettingStarted.md +++ b/docs/n00b-gettingStarted.md @@ -1,14 +1,14 @@ # A Mermaid User-Guide for Beginners -Mermaid is composed of three parts, Deployment, Syntax and Configuration. +Mermaid is composed of three parts, Deployment, Syntax and Configuration. -This section talks about the different ways to deploy Mermaid. Learning the [Syntax](./n00b-syntaxReference.md) ahead of time would be more helpful to the beginner. +This section talks about the different ways to deploy Mermaid. Learning the [Syntax](./n00b-syntaxReference.md) ahead of time would be more helpful to the beginner. ->Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning. +>Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning. **Absolute beginners are recommended to view the Video [Tutorials](./Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.** ## Four ways of using mermaid: -1. Using the mermaid [Live Editor](https://mermaid-js.github.io/mermaid-live-editor/). +1. Using the mermaid [Live Editor](https://mermaid-js.github.io/mermaid-live-editor/). 2. Using [mermaid plugins](./integrations.md) with programs you are familiar with. 3. Calling the Mermaid Javascript API. 4. Deploying Mermaid as a dependency. @@ -21,7 +21,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn ![EditingProcess](./img/Editing-process.png ) -In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it. +In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it. The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. 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. @@ -29,14 +29,14 @@ The `Configuration` Section is for changing the appearance and behavior of merma ![Code,Config and Preview](./img/Code-Preview-Config.png) ### Saving a Diagram: -You may choose any of the methods below, to save it +You may choose any of the methods below, to save it **We recommend that you save your diagram code on top of any method you choose, in order to make edits and modifications further down the line.** ![Flowchart](./img/Live-Editor-Choices.png) ### Editing your diagrams -Editing is as easy as pasting your **Diagram code**, into the `code` section of the `Live Editor`. +Editing is as easy as pasting your **Diagram code**, into the `code` section of the `Live Editor`. ## 2. Using Mermaid Plugins: @@ -51,7 +51,7 @@ This method can be used with any common web server. Apache, IIS, nginx, node exp You will also need a text editting tool like Notepad++, to generate an html file. It is then deployed by a web browser (such as Firefox, Chrome, Safari, but not Internet Explorer). -The API works by pulling rendering instructions from a source from `mermaid.js` to render diagrams in the page. +The API works by pulling rendering instructions from a source from `mermaid.js` to render diagrams in the page. ### Requirements for the Mermaid API. @@ -106,7 +106,7 @@ Mermaid rendering is initalized with `mermaid.initialize()`.You can place `merma | --------- | --------------- | ------ | ---------------------------------------------------- | |startOnLoad| Toggle for Rendering upon loading | Boolean | true, false | -### Working Examples +### Working Examples **Here is a full working example of the mermaidAPI being called through the CDN:** @@ -135,7 +135,7 @@ Mermaid rendering is initalized with `mermaid.initialize()`.You can place `merma ``` **Another Option:** -In this example mermaid.js is referenced in `src` as a separate JavaScript file, in an example Path. +In this example mermaid.js is referenced in `src` as a separate JavaScript file, in an example Path. ```html @@ -164,17 +164,17 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file, --- ## 4. Adding Mermaid as a dependency. -1. install node v10 or 12, which would have npm +1. install node v16, which would have npm 2. download yarn using npm by entering the command below: npm install -g yarn 3. After yarn installs, enter the following command: yarn add mermaid - + 4. To add Mermaid as a Dev Dependency yarn add --dev mermaid - + **Comments from Knut Sveidqvist, creator of mermaid:** diff --git a/docs/usage.md b/docs/usage.md index c416fbc4c..ff4b1dab1 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -4,7 +4,7 @@ Mermaid is a Javascript tool that makes use of a markdown based syntax to render customizable diagrams, charts and visualizations. -Diagrams can be re-rendered/modified by modifying their descriptions. +Diagrams can be re-rendered/modified by modifying their descriptions. ### CDN @@ -16,14 +16,14 @@ Please note that you can switch versions through the dropdown box at the top rig For the majority of users, Using the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./Setup.md). -We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor. +We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor. **Installing and Hosting Mermaid on a Webpage** **Using the npm package** ``` -1.You will need to install node v10 or 12, which would have npm. +1.You will need to install node v16, which would have npm. 2. download yarn using npm.