marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 14:59:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Neil Cuzon
2020-07-26 23:04:11 -07:00
committed by GitHub
parent dda824856a
commit 3b6f05800d
1 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/README.md
View File

@@ -196,7 +196,10 @@ journey
``` ```
![Journey diagram](./img/user-journey.png) ![Journey diagram](./img/user-journey.png)
## Installation # Installation
## In depth guides and examples can be found in [Getting Started](./n00b-gettingStarted.md) and [Usage](./usage.md).
## It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).
### CDN ### CDN
@@ -212,33 +215,32 @@ Alternatively, you can also adjust the version number in the page itself.
Latest Version: https://unpkg.com/browse/mermaid@8.6.0/ Latest Version: https://unpkg.com/browse/mermaid@8.6.0/
## Incorporating mermaid to a website ## Incorporating mermaid to a website
to support mermaid on your website, all you have to do is add Mermaid’s JavaScript package To support mermaid on your website, all you have to do is add Mermaid’s JavaScript package
``` ```
1.You will need to isntall node v10 or 12, which would have npm 1.You will need to isntall node v10 or 12, which would have npm
2. download yarn using npm. 2. download yarn using npm.
2. enter the following command: 3. enter the following command:
yarn add mermaid yarn add mermaid
3. You can then add mermaid as a dev dependency using this command: 4. You can then add mermaid as a dev dependency using this command:
yarn add --dev mermaid yarn add --dev mermaid
``` ```
## To install mermaid without a bundler, one can use the script tag like so: ## To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:
```
<script src="https://unpkg.com/mermaid/"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script> <script>mermaid.initialize({startOnLoad:true});</script>
```
## doing so will command the mermaid parser to look for the `<div>` 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.
## it can then be followed by the diagram definitions as could be found in the [examples in the documentation](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted). ## Examples can be found in [Getting Started](./n00b-gettingStarted.md)
# Sibling projects
## On your page mermaid will look for tags with class="mermaid". From these tags mermaid will try to read the chart definiton and replace it with an svg chart.
## Sibling projects
- [mermaid live editor](https://github.com/mermaidjs/mermaid-live-editor) - [mermaid live editor](https://github.com/mermaidjs/mermaid-live-editor)
- [mermaid CLI](https://github.com/mermaidjs/mermaid.cli) - [mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
- [mermaid webpack demo](https://github.com/mermaidjs/mermaid-webpack-demo) - [mermaid webpack demo](https://github.com/mermaidjs/mermaid-webpack-demo)