marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-16 05:49:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into sidv/linkDocsSource

Browse Source 
* develop: (36 commits)
  chore(deps): update actions/setup-node action to v3
  Remove inconsistent and deprecated semicolons
  chore(deps): update actions/checkout action to v3
  docs: Fix initial install step
  docs: Update twitter link
  chore: renovate lint
  Update renovate.json
  chore: Bump node to v18
  chore: Set node v16
  chore: Add volta
  chore(deps): add renovate.json
  Contrbution steps updated
  refactor: use `posix.join()` instead of replacing `\`
  Link added for local setup
  contribution.md updated
  fix: Fix eslint warnings
  fix: docs path in windows
  docs: Add twitter
  docs: Add version to doc index.html
  Update packages/mermaid/src/docs/n00b-gettingStarted.md
  ...
This commit is contained in:
Sidharth Vinod
2022-10-13 13:48:36 +05:30
parent d3de78ffce 57b883c7dd
commit 0d5664cc9b
95 changed files with 487 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
docs/usage.md
View File

@@ -39,23 +39,9 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
> Note:This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
The easiest way to integrate mermaid on a web page requires three elements:
The easiest way to integrate mermaid on a web page requires two elements:
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
```
2. The `mermaidAPI` call, in a separate `script` tag. Example:
```html
<script>
mermaid.initialize({ startOnLoad: true });
</script>
```
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
- A graph definition, inside `<pre>` tags labeled `class=mermaid`. Example:
```html
<pre class="mermaid">
@@ -66,8 +52,18 @@ The easiest way to integrate mermaid on a web page requires three elements:
</pre>
```
**Following these directions, mermaid starts at page load and (when the page has loaded) it will
locate the graph definitions inside the `div` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.**
- Inclusion of the mermaid address in the html page body using a `script` tag as an ESM import, and the `mermaidAPI` call.
Example:
```html
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
```
**Following these directions, mermaid starts at page load and (when the page has loaded) it will locate the graph definitions inside the `pre` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.**
## Simple full example:
@@ -84,8 +80,8 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</pre>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>
@@ -204,18 +200,17 @@ fetch the graph definition from the site (perhaps from a textarea), render it an
The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
```html
<script src="mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.mjs';
mermaid.mermaidAPI.initialize({ startOnLoad: false });
$(function () {
$(async function () {
// Example of using the API var
element = document.querySelector('#graphDiv');
var insertSvg = function (svgCode, bindFunctions) {
const insertSvg = function (svgCode, bindFunctions) {
element.innerHTML = svgCode;
};
var graphDefinition = 'graph TB\na-->b';
var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
const graphDefinition = 'graph TB\na-->b';
const graph = await mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
});
</script>
```
@@ -339,7 +334,7 @@ on what kind of integration you use.
```html
<script src="../dist/mermaid.js"></script>
<script>
var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
mermaid.initialize(config);
</script>
```