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

docs: Add mermaid version to script URL

Browse Source
This commit is contained in:
Sidharth Vinod
2022-10-07 15:52:32 +08:00
parent 883d0d5039
commit 5865c890b5
12 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/README.md
View File

@@ -274,13 +274,13 @@ To Deploy Mermaid:
**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 `mermaidAPI` call into the HTML like so:**
```html ```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc2/dist/mermaid.min.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });
</script> </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) **Examples can be found at** [Other examples](/examples)

4
docs/n00b-gettingStarted.md
View File

@@ -87,7 +87,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
```html ```html
<body> <body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc2/dist/mermaid.min.js"></script>
</body> </body>
``` ```
@@ -135,7 +135,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
```html ```html
<html> <html>
<body> <body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc2/dist/mermaid.min.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });
</script> </script>

4
docs/usage.md
View File

@@ -44,7 +44,7 @@ The easiest way to integrate mermaid on a web page requires three elements:
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example: 1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
```html ```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc2/dist/mermaid.min.js"></script>
``` ```
2. The `mermaidAPI` call, in a separate `script` tag. Example: 2. The `mermaidAPI` call, in a separate `script` tag. Example:
@@ -84,7 +84,7 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
B-->C[fa:fa-ban forbidden] B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner); B-->D(fa:fa-spinner);
</pre> </pre>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc2/dist/mermaid.min.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });
</script> </script>

1
package.json
View File

@@ -97,6 +97,7 @@
"@types/express": "^4.17.14", "@types/express": "^4.17.14",
"@types/jsdom": "^20.0.0", "@types/jsdom": "^20.0.0",
"@types/lodash": "^4.14.186", "@types/lodash": "^4.14.186",
"@types/mdast": "^3.0.10",
"@types/prettier": "^2.7.1", "@types/prettier": "^2.7.1",
"@types/stylis": "^4.0.2", "@types/stylis": "^4.0.2",
"@typescript-eslint/eslint-plugin": "^5.39.0", "@typescript-eslint/eslint-plugin": "^5.39.0",

4
packages/mermaid/src/docs.mts
View File

@@ -41,6 +41,8 @@ import { remark } from 'remark';
// @ts-ignore No typescript declaration file // @ts-ignore No typescript declaration file
import flatmap from 'unist-util-flatmap'; import flatmap from 'unist-util-flatmap';
const version = JSON.parse(readFileSync('package.json', 'utf8')).version;
// These paths are from the root of the mono-repo, not from the // These paths are from the root of the mono-repo, not from the
// mermaid sub-directory // mermaid sub-directory
const SOURCE_DOCS_DIR = 'packages/mermaid/src/docs'; const SOURCE_DOCS_DIR = 'packages/mermaid/src/docs';
@@ -144,7 +146,7 @@ const readSyncedUTF8file = (filename: string): string => {
* @param file {string} name of the file that will be verified * @param file {string} name of the file that will be verified
*/ */
const transformMarkdown = (file: string) => { const transformMarkdown = (file: string) => {
const doc = readSyncedUTF8file(file); const doc = readSyncedUTF8file(file).replace(/<MERMAID_VERSION>/g, version);
const ast: Root = remark.parse(doc); const ast: Root = remark.parse(doc);
const out = flatmap(ast, (c: Code) => { const out = flatmap(ast, (c: Code) => {
if (c.type !== 'code') { if (c.type !== 'code') {

4
packages/mermaid/src/docs/README.md
View File

@@ -190,13 +190,13 @@ To Deploy Mermaid:
**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 `mermaidAPI` call into the HTML like so:**
```html ```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });
</script> </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) **Examples can be found at** [Other examples](/examples)

4
packages/mermaid/src/docs/n00b-gettingStarted.md
View File

@@ -85,7 +85,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
```html ```html
<body> <body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
</body> </body>
``` ```
@@ -133,7 +133,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
```html ```html
<html> <html>
<body> <body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });
</script> </script>

4
packages/mermaid/src/docs/usage.md
View File

@@ -44,7 +44,7 @@ The easiest way to integrate mermaid on a web page requires three elements:
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example: 1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
```html ```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
``` ```
2. The `mermaidAPI` call, in a separate `script` tag. Example: 2. The `mermaidAPI` call, in a separate `script` tag. Example:
@@ -84,7 +84,7 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
B-->C[fa:fa-ban forbidden] B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner); B-->D(fa:fa-spinner);
</pre> </pre>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });
</script> </script>

2
pnpm-lock.yaml generated
View File

@@ -17,6 +17,7 @@ importers:
'@types/express': ^4.17.14 '@types/express': ^4.17.14
'@types/jsdom': ^20.0.0 '@types/jsdom': ^20.0.0
'@types/lodash': ^4.14.186 '@types/lodash': ^4.14.186
'@types/mdast': ^3.0.10
'@types/node': ^18.8.1 '@types/node': ^18.8.1
'@types/prettier': ^2.7.1 '@types/prettier': ^2.7.1
'@types/stylis': ^4.0.2 '@types/stylis': ^4.0.2
@@ -104,6 +105,7 @@ importers:
'@types/express': 4.17.14 '@types/express': 4.17.14
'@types/jsdom': 20.0.0 '@types/jsdom': 20.0.0
'@types/lodash': 4.14.186 '@types/lodash': 4.14.186
'@types/mdast': 3.0.10
'@types/prettier': 2.7.1 '@types/prettier': 2.7.1
'@types/stylis': 4.0.2 '@types/stylis': 4.0.2
'@typescript-eslint/eslint-plugin': 5.39.0_xyciw6oqjoiiono4dhv3uhn5my '@typescript-eslint/eslint-plugin': 5.39.0_xyciw6oqjoiiono4dhv3uhn5my

4
vdocs/config/usage.md
View File

@@ -44,7 +44,7 @@ The easiest way to integrate mermaid on a web page requires three elements:
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example: 1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
```html ```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
``` ```
2. The `mermaidAPI` call, in a separate `script` tag. Example: 2. The `mermaidAPI` call, in a separate `script` tag. Example:
@@ -84,7 +84,7 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
B-->C[fa:fa-ban forbidden] B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner); B-->D(fa:fa-spinner);
</pre> </pre>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });
</script> </script>

2
vdocs/intro/index.md
View File

@@ -265,7 +265,7 @@ To Deploy Mermaid:
**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 `mermaidAPI` call into the HTML like so:**
```html ```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });
</script> </script>

4
vdocs/intro/n00b-gettingStarted.md
View File

@@ -94,7 +94,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
```html ```html
<body> <body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
</body> </body>
``` ```
@@ -142,7 +142,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
```html ```html
<html> <html>
<body> <body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });
</script> </script>