marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-12-10 06:24:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'release/9.4.0'

Browse Source
This commit is contained in:
Per Brolin
2023-02-15 16:20:22 +01:00
parent e8db9b2bd5 97614b8af5
commit 98bec36f81
180 changed files with 8956 additions and 1622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/config/usage.md
View File

@@ -22,24 +22,21 @@ For the majority of users, Using the [Live Editor](https://mermaid.live/) would
We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor.
**Installing and Hosting Mermaid on a Webpage**
### Installing and Hosting Mermaid on a Webpage
**Using the npm package**
**Using the npm package:**
1. You will need to install node v16, which would have npm.
1. You will need to install `node v16`, which would have npm.
2. download yarn using npm.
2. Download `yarn` using npm.
3. enter the following command:
yarn add mermaid
3. Enter the following command: `yarn add mermaid`.
4. At this point, you can add mermaid as a dev dependency using this command:
yarn add --dev mermaid
4. At this point, you can add mermaid as a dev dependency using this command: `yarn add --dev mermaid`.
5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions.
as is shown in the example below
5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions as is shown in the example below.
**Hosting mermaid on a web page.**
**Hosting mermaid on a web page:**
> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md)
@@ -152,7 +149,7 @@ $(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.
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.