From 5865c890b51eca7aa332f5bfe30aca0b4a41d4b2 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Oct 2022 15:52:32 +0800 Subject: [PATCH 1/7] docs: Add mermaid version to script URL --- docs/README.md | 4 ++-- docs/n00b-gettingStarted.md | 4 ++-- docs/usage.md | 4 ++-- package.json | 1 + packages/mermaid/src/docs.mts | 4 +++- packages/mermaid/src/docs/README.md | 4 ++-- packages/mermaid/src/docs/n00b-gettingStarted.md | 4 ++-- packages/mermaid/src/docs/usage.md | 4 ++-- pnpm-lock.yaml | 2 ++ vdocs/config/usage.md | 4 ++-- vdocs/intro/index.md | 2 +- vdocs/intro/n00b-gettingStarted.md | 4 ++-- 12 files changed, 23 insertions(+), 18 deletions(-) diff --git a/docs/README.md b/docs/README.md index 00e03c76d1c..2b0c558374b 100644 --- a/docs/README.md +++ b/docs/README.md @@ -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:** ```html - + ``` -**Doing so will command the mermaid parser to look for the `
` 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 `
` or `
` 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)
 
diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md
index b82e2ff0170..df637ecfca2 100644
--- a/docs/n00b-gettingStarted.md
+++ b/docs/n00b-gettingStarted.md
@@ -87,7 +87,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
 
 ```html
 
-  
+  
 
 ```
 
@@ -135,7 +135,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 ```html
 
   
-    
+    
     
diff --git a/docs/usage.md b/docs/usage.md
index be986a56b93..aced1c4beea 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -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:
 
     ```html
-    
+    
     ```
 
 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-->D(fa:fa-spinner);
- + diff --git a/package.json b/package.json index c1c33920fee..82b84580c1e 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,7 @@ "@types/express": "^4.17.14", "@types/jsdom": "^20.0.0", "@types/lodash": "^4.14.186", + "@types/mdast": "^3.0.10", "@types/prettier": "^2.7.1", "@types/stylis": "^4.0.2", "@typescript-eslint/eslint-plugin": "^5.39.0", diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index a22dc59e20a..842c2105647 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -41,6 +41,8 @@ import { remark } from 'remark'; // @ts-ignore No typescript declaration file 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 // mermaid sub-directory 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 */ const transformMarkdown = (file: string) => { - const doc = readSyncedUTF8file(file); + const doc = readSyncedUTF8file(file).replace(//g, version); const ast: Root = remark.parse(doc); const out = flatmap(ast, (c: Code) => { if (c.type !== 'code') { diff --git a/packages/mermaid/src/docs/README.md b/packages/mermaid/src/docs/README.md index e8bba38dae9..f2ba13a838f 100644 --- a/packages/mermaid/src/docs/README.md +++ b/packages/mermaid/src/docs/README.md @@ -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:** ```html - + ``` -**Doing so will command the mermaid parser to look for the `
` 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 `
` or `
` 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)
 
diff --git a/packages/mermaid/src/docs/n00b-gettingStarted.md b/packages/mermaid/src/docs/n00b-gettingStarted.md
index 950c4eba654..c0fd4125aa2 100644
--- a/packages/mermaid/src/docs/n00b-gettingStarted.md
+++ b/packages/mermaid/src/docs/n00b-gettingStarted.md
@@ -85,7 +85,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
 
 ```html
 
-  
+  
 
 ```
 
@@ -133,7 +133,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 ```html
 
   
-    
+    
     
diff --git a/packages/mermaid/src/docs/usage.md b/packages/mermaid/src/docs/usage.md
index 02662589480..c219de3df98 100644
--- a/packages/mermaid/src/docs/usage.md
+++ b/packages/mermaid/src/docs/usage.md
@@ -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:
 
     ```html
-    
+    
     ```
 
 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-->D(fa:fa-spinner);
- + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9cb8306ea91..c157bc20f45 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,7 @@ importers: '@types/express': ^4.17.14 '@types/jsdom': ^20.0.0 '@types/lodash': ^4.14.186 + '@types/mdast': ^3.0.10 '@types/node': ^18.8.1 '@types/prettier': ^2.7.1 '@types/stylis': ^4.0.2 @@ -104,6 +105,7 @@ importers: '@types/express': 4.17.14 '@types/jsdom': 20.0.0 '@types/lodash': 4.14.186 + '@types/mdast': 3.0.10 '@types/prettier': 2.7.1 '@types/stylis': 4.0.2 '@typescript-eslint/eslint-plugin': 5.39.0_xyciw6oqjoiiono4dhv3uhn5my diff --git a/vdocs/config/usage.md b/vdocs/config/usage.md index 10b3b72389f..4a671859441 100644 --- a/vdocs/config/usage.md +++ b/vdocs/config/usage.md @@ -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: ```html - + ``` 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-->D(fa:fa-spinner); - + diff --git a/vdocs/intro/index.md b/vdocs/intro/index.md index 030409c6d23..fcf61ff0978 100644 --- a/vdocs/intro/index.md +++ b/vdocs/intro/index.md @@ -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:** ```html - + diff --git a/vdocs/intro/n00b-gettingStarted.md b/vdocs/intro/n00b-gettingStarted.md index 14b49057e66..015be984f46 100644 --- a/vdocs/intro/n00b-gettingStarted.md +++ b/vdocs/intro/n00b-gettingStarted.md @@ -94,7 +94,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an ```html - + ``` @@ -142,7 +142,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac ```html - + From 1f8fb56409846f1ebba43033a0bba4c885623018 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Oct 2022 16:01:33 +0800 Subject: [PATCH 2/7] docs: Add badges --- docs/README.md | 2 +- packages/mermaid/src/docs/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/README.md b/docs/README.md index 2b0c558374b..179f94132c5 100644 --- a/docs/README.md +++ b/docs/README.md @@ -10,7 +10,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins -[![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 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) [![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) diff --git a/packages/mermaid/src/docs/README.md b/packages/mermaid/src/docs/README.md index f2ba13a838f..36e689101de 100644 --- a/packages/mermaid/src/docs/README.md +++ b/packages/mermaid/src/docs/README.md @@ -8,7 +8,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins -[![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 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) [![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) From 8a2aea219e49bf6b39ff570178264fe79fd4fa01 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 8 Oct 2022 09:27:19 +0800 Subject: [PATCH 3/7] docs: ESM import --- README.md | 6 ++- README.zh-CN.md | 4 +- docs/README.md | 8 ++-- docs/index.html | 7 +++- docs/n00b-gettingStarted.md | 39 +++++++------------ docs/usage.md | 36 ++++++++--------- packages/mermaid/src/docs.mts | 4 +- packages/mermaid/src/docs/README.md | 8 ++-- packages/mermaid/src/docs/index.html | 7 +++- .../mermaid/src/docs/n00b-gettingStarted.md | 39 +++++++------------ packages/mermaid/src/docs/usage.md | 36 ++++++++--------- vdocs/config/usage.md | 36 ++++++++--------- vdocs/intro/index.md | 10 ++--- vdocs/intro/n00b-gettingStarted.md | 39 +++++++------------ 14 files changed, 126 insertions(+), 153 deletions(-) diff --git a/README.md b/README.md index b30d8d43874..46b54eec1ac 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ -# mermaid [![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) +# mermaid -# Whoa, whats going on here? +[![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) + +# Whoa, what's going on here? We are transforming the Mermaid repository to a so called mono-repo. This is a part of the effort to decouple the diagrams from the core of mermaid. This will: diff --git a/README.zh-CN.md b/README.zh-CN.md index c00c539e04c..4c88641299f 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,4 +1,6 @@ -# mermaid [![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) +# mermaid + +[![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) [English](./README.md) | 简体中文 diff --git a/docs/README.md b/docs/README.md index 179f94132c5..40b3638e8b3 100644 --- a/docs/README.md +++ b/docs/README.md @@ -10,7 +10,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins -[![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) [![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) +[![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) @@ -271,11 +271,11 @@ 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 - - ``` diff --git a/docs/index.html b/docs/index.html index c4eb48af8b7..b7044845776 100644 --- a/docs/index.html +++ b/docs/index.html @@ -21,8 +21,6 @@ rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" /> - - - -``` - -**b. The embedded mermaid diagram definition inside a `
`:**
+**a. The embedded mermaid diagram definition inside a `
`:**
 
 ```html
 
@@ -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 `
` 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 `
` tags that it finds in the html body and renders them into diagrams. Example:
 
 ```html
 
-  
 
@@ -135,11 +126,6 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 ```html
 
   
-    
-    
-
     Here is one mermaid diagram:
     
             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]
     

+
+    
   
 
 ```
@@ -181,8 +172,8 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
             B --> C[Server1] 
             B --> D[Server2]
     

-    
-    
   
@@ -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 `
-    ```
-
-2.  The `mermaidAPI` call, in a separate `script` tag. Example:
-
-    ```html
-    
-    ```
-
-3.  A graph definition, inside `
` tags labeled `class=mermaid`. Example:
+- A graph definition, inside `
` tags labeled `class=mermaid`. Example:
 
 ```html
 
@@ -66,8 +52,18 @@ The easiest way to integrate mermaid on a web page requires three elements:
 

 ```
 
-**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
+
+```
+
+**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);
     

-    
-    
   
diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index 842c2105647..2d1aa76209d 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -41,7 +41,9 @@ import { remark } from 'remark';
 // @ts-ignore No typescript declaration file
 import flatmap from 'unist-util-flatmap';
 
-const version = JSON.parse(readFileSync('package.json', 'utf8')).version;
+const version = (
+  JSON.parse(readFileSync('packages/mermaid/package.json', 'utf8')).version as string
+).split('.')[0];
 
 // These paths are from the root of the mono-repo, not from the
 // mermaid sub-directory
diff --git a/packages/mermaid/src/docs/README.md b/packages/mermaid/src/docs/README.md
index 36e689101de..0d4d24a013b 100644
--- a/packages/mermaid/src/docs/README.md
+++ b/packages/mermaid/src/docs/README.md
@@ -8,7 +8,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 
 
 
-[![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) [![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)
+[![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)
 
 
 
@@ -187,11 +187,11 @@ 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
-
-
 ```
diff --git a/packages/mermaid/src/docs/index.html b/packages/mermaid/src/docs/index.html
index ea3969c7771..d884c22a929 100644
--- a/packages/mermaid/src/docs/index.html
+++ b/packages/mermaid/src/docs/index.html
@@ -21,8 +21,6 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
     />
-    
-    
     
     
-
-```
-
-**b. The embedded mermaid diagram definition inside a `
`:**
+**a. The embedded mermaid diagram definition inside a `
`:**
 
 ```html
 
@@ -105,13 +95,14 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
 
 **Notes**: Every Mermaid chart/graph/diagram definition, should have separate `
` 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 `
` tags that it finds in the html body and renders them into diagrams. Example:
 
 ```html
 
-  
 
@@ -133,11 +124,6 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 ```html
 
   
-    
-    
-
     Here is one mermaid diagram:
     
             graph TD 
@@ -154,6 +140,11 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
             B -->|tcp_456| C[Server1] 
             B -->|tcp_456| D[Server2]
     

+
+    
   
 
 ```
@@ -179,8 +170,8 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
             B --> C[Server1] 
             B --> D[Server2]
     

-    
-    
   
@@ -204,4 +195,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 `
-    ```
-
-2.  The `mermaidAPI` call, in a separate `script` tag. Example:
-
-    ```html
-    
-    ```
-
-3.  A graph definition, inside `
` tags labeled `class=mermaid`. Example:
+- A graph definition, inside `
` tags labeled `class=mermaid`. Example:
 
 ```html
 
@@ -66,8 +52,18 @@ The easiest way to integrate mermaid on a web page requires three elements:
 

 ```
 
-**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
+
+```
+
+**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);
     

-    
-    
   
diff --git a/vdocs/config/usage.md b/vdocs/config/usage.md
index 4a671859441..5b76f272907 100644
--- a/vdocs/config/usage.md
+++ b/vdocs/config/usage.md
@@ -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](../intro/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
-    
-    ```
-
-2.  The `mermaidAPI` call, in a separate `script` tag. Example:
-
-    ```html
-    
-    ```
-
-3.  A graph definition, inside `
` tags labeled `class=mermaid`. Example:
+- A graph definition, inside `
` tags labeled `class=mermaid`. Example:
 
 ```html
 
@@ -66,8 +52,18 @@ The easiest way to integrate mermaid on a web page requires three elements:
 

 ```
 
-**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
+
+```
+
+**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);
     

-    
-    
   
diff --git a/vdocs/intro/index.md b/vdocs/intro/index.md
index fcf61ff0978..bd53ae4bda7 100644
--- a/vdocs/intro/index.md
+++ b/vdocs/intro/index.md
@@ -8,7 +8,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 
 
 
-[![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)
 
 
 
@@ -262,16 +262,16 @@ To Deploy Mermaid:
 
 ### [Mermaid API](../config/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
-
-
 ```
 
-**Doing so will command the mermaid parser to look for the `
` 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 `
` or `
` 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](../syntax/examples)
 
diff --git a/vdocs/intro/n00b-gettingStarted.md b/vdocs/intro/n00b-gettingStarted.md
index 015be984f46..b5abe96d679 100644
--- a/vdocs/intro/n00b-gettingStarted.md
+++ b/vdocs/intro/n00b-gettingStarted.md
@@ -82,23 +82,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 `
-
-```
-
-**b. The embedded mermaid diagram definition inside a `
`:**
+**a. The embedded mermaid diagram definition inside a `
`:**
 
 ```html
 
@@ -114,13 +104,14 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
 
 **Notes**: Every Mermaid chart/graph/diagram definition, should have separate `
` 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 `
` tags that it finds in the html body and renders them into diagrams. Example:
 
 ```html
 
-  
 
@@ -142,11 +133,6 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 ```html
 
   
-    
-    
-
     Here is one mermaid diagram:
     
             graph TD 
@@ -163,6 +149,11 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
             B -->|tcp_456| C[Server1] 
             B -->|tcp_456| D[Server2]
     

+
+    
   
 
 ```
@@ -188,8 +179,8 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
             B --> C[Server1] 
             B --> D[Server2]
     

-    
-    
   
@@ -213,4 +204,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 `
-
-
-
-
   

From bc258793ac73cbaf7fc471b74ba627c3088a73f8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Sat, 8 Oct 2022 19:15:01 +0800
Subject: [PATCH 6/7] docs: Add version to doc index.html

---
 docs/index.html                      | 2 +-
 packages/mermaid/src/docs.mts        | 9 ++++++---
 packages/mermaid/src/docs/index.html | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index b7044845776..57bb78d779a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -49,7 +49,7 @@
   
     

     
     
     
   
diff --git a/packages/mermaid/src/docs/README.md b/packages/mermaid/src/docs/README.md
index 0d4d24a013b..35fece35cdd 100644
--- a/packages/mermaid/src/docs/README.md
+++ b/packages/mermaid/src/docs/README.md
@@ -8,7 +8,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 
 
 
-[![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)
+[![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_)
 
 
 
diff --git a/vdocs/intro/index.md b/vdocs/intro/index.md
index bd53ae4bda7..144894f904b 100644
--- a/vdocs/intro/index.md
+++ b/vdocs/intro/index.md
@@ -8,7 +8,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 
 
 
-[![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)
+[![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_)