mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Switching node version to version 16
This commit is contained in:
parent
3fe1f5af60
commit
c29486f515
2
.github/workflows/build.yml
vendored
2
.github/workflows/build.yml
vendored
@ -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
|
||||
|
||||
|
@ -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:
|
||||
|
@ -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
|
||||
</html>
|
||||
```
|
||||
**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
|
||||
<html lang="en">
|
||||
<head>
|
||||
@ -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:**
|
||||
|
@ -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.
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user