marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-15 02:04:08 +01: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

10
docs/README.md
View File

@@ -10,7 +10,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
<img src="img/header.png" alt="" />
[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
<!-- Mermaid book banner -->
@@ -271,16 +271,16 @@ To Deploy Mermaid:
### [Mermaid API](./Setup.md):
**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:**
**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:**
```html
<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>
```
**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
**Doing so will command the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
**Examples can be found at** [Other examples](/examples)

2
docs/Setup.md
View File

@@ -1561,7 +1561,7 @@ Returns **void**
```html
<script>
var config = {
const config = {
theme: 'default',
logLevel: 'fatal',
securityLevel: 'strict',

6
docs/classDiagram.md
View File

@@ -589,7 +589,7 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"
```html
<script>
var callbackFunction = function () {
const callbackFunction = function () {
alert('A callback was triggered');
};
</script>
@@ -653,10 +653,10 @@ Beginner's tip—a full example using interactive links in an HTML page:
</pre>
<script>
var callback = function () {
const callback = function () {
alert('A callback was triggered');
};
var config = {
const config = {
startOnLoad: true,
securityLevel: 'loose',
};

6
docs/diagrams-and-syntax-and-examples/flowchart.md
View File

@@ -649,7 +649,7 @@ A node can have click events bound that lead to either a JavaScript callback or
```html
<script>
var callback = function (nodeId) {
const callback = function (nodeId) {
alert('A callback was triggered on ' + nodeId);
};
</script>
@@ -727,10 +727,10 @@ Beginner's tip—here's a full example of using interactive links in HTML:
</pre>
<script>
var callback = function () {
const callback = function () {
alert('A callback was triggered');
};
var config = {
const config = {
startOnLoad: true,
flowchart: {
useMaxWidth: true,

26
docs/flowchart.md
View File

@@ -315,13 +315,13 @@ flowchart LR
### Dotted link
```mermaid-example
flowchart LR;
A-.->B;
flowchart LR
A-.->B
```
```mermaid
flowchart LR;
A-.->B;
flowchart LR
A-.->B
```
### Dotted link with text
@@ -695,7 +695,7 @@ Examples of tooltip usage below:
```html
<script>
var callback = function () {
const callback = function () {
alert('A callback was triggered');
};
</script>
@@ -771,10 +771,10 @@ Beginner's tip—a full example using interactive links in a html context:
</pre>
<script>
var callback = function () {
const callback = function () {
alert('A callback was triggered');
};
var config = {
const config = {
startOnLoad: true,
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
securityLevel: 'loose',
@@ -866,13 +866,13 @@ A shorter form of adding a class is to attach the classname to the node using th
```mermaid-example
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96;
classDef someclass fill:#f96
```
```mermaid
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96;
classDef someclass fill:#f96
```
### Css classes
@@ -895,14 +895,14 @@ below:
**Example definition**
```mermaid-example
flowchart LR;
flowchart LR
A-->B[AAA<span>BBB</span>]
B-->D
class A cssClass
```
```mermaid
flowchart LR;
flowchart LR
A-->B[AAA<span>BBB</span>]
B-->D
class A cssClass
@@ -924,7 +924,7 @@ The icons are accessed via the syntax fa:#icon class name#.
flowchart TD
B["fab:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->D(fa:fa-spinner)
B-->E(A fa:fa-camera-retro perhaps?)
```
@@ -932,7 +932,7 @@ flowchart TD
flowchart TD
B["fab:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->D(fa:fa-spinner)
B-->E(A fa:fa-camera-retro perhaps?)
```

6
docs/gantt.md
View File

@@ -391,13 +391,13 @@ Beginner's tip—a full example using interactive links in an html context:
</pre>
<script>
var printArguments = function (arg1, arg2, arg3) {
const printArguments = function (arg1, arg2, arg3) {
alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
};
var printTask = function (taskId) {
const printTask = function (taskId) {
alert('taskId: ' + taskId);
};
var config = {
const config = {
startOnLoad: true,
securityLevel: 'loose',
};

22
docs/index.html
View File

@@ -21,15 +21,13 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
/>
<script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script>
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<script
defer=""
data-domain="mermaid-js.github.io"
src="https://plausible.io/js/plausible.js"
></script>
<script>
var require = {
const require = {
paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
};
</script>
@@ -50,17 +48,21 @@
<body>
<div id="app"></div>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
window.mermaid = mermaid;
</script>
<script>
var initEditor = exports.default;
var parser = new DOMParser();
var currentCodeExample = 0;
var colorize = [];
let initEditor = exports.default;
let parser = new DOMParser();
let currentCodeExample = 0;
let colorize = [];
function colorizeEverything(html) {
initEditor(monaco);
return new Promise((resolve, reject) => {
monaco.editor.setTheme('mermaid');
var parsed = parser.parseFromString(html, 'text/html').body;
const parsed = parser.parseFromString(html, 'text/html').body;
Promise.all(
[...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
monaco.editor.colorize(codeBlock.innerText, 'mermaid')
@@ -99,6 +101,7 @@
colorize.push(currentCodeExample);
return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
} else if (lang === 'mermaid') {
// TODO: This will need to be updated when render is async.
return (
'<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>'
);
@@ -117,7 +120,7 @@
function (hook, vm) {
hook.beforeEach(function (html) {
url = 'https://github.com/mermaid-js/mermaid/blob/develop/src/docs/' + vm.route.file;
var editHtml = '[:memo: Edit this Page](' + url + ')\n';
const editHtml = '[:memo: Edit this Page](' + url + ')\n';
return editHtml + html;
});
@@ -136,7 +139,6 @@
],
};
var num = 0;
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const conf = {

39
docs/n00b-gettingStarted.md
View File

@@ -75,23 +75,13 @@ The API works by pulling rendering instructions from the source `mermaid.js` in
### Requirements for the Mermaid API.
When writing the .html file, we give three instructions inside the html code to the web browser:
When writing the .html file, we give two instructions inside the html code to the web browser:
a. A reference for fetching the online mermaid renderer, through the `mermaid.js` or `mermaid.min.js`.
a. The mermaid code for the diagram we want to create.
b. The mermaid code for the diagram we want to create.
b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process .
c. The `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process .
**a. A reference to the external CDN in a `<script src>` tag, or a reference to mermaid.js as a separate file.:**
```html
<body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</body>
```
**b. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
**a. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
```html
<body>
@@ -107,13 +97,14 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
**Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<pre>` tags.
**c. The `mermaid.initialize()` call.**
**b. The import of mermaid and the `mermaid.initialize()` call.**
`mermaid.initialize()` call takes all the definitions contained in all the `<pre class="mermaid">` tags that it finds in the html body and renders them into diagrams. Example:
```html
<body>
<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>
@@ -135,11 +126,6 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
```html
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
Here is one mermaid diagram:
<pre class="mermaid">
graph TD
@@ -156,6 +142,11 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>
</html>
```
@@ -181,8 +172,8 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
B --> C[Server1]
B --> D[Server2]
</pre>
<script src="The\Path\In\Your\Package\mermaid.js"></script>
<script>
<script type="module">
import mermaid from 'The/Path/In/Your/Package/mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>
@@ -206,4 +197,4 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
**Comments from Knut Sveidqvist, creator of mermaid:**
- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works.
- In early versions of mermaid, the `<script>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works.

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>
```