` 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/Setup.md b/docs/Setup.md
index 952dc5c5d..fd978e928 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -1561,7 +1561,7 @@ Returns **void**
```html
@@ -653,10 +653,10 @@ Beginner's tip—a full example using interactive links in an HTML page:
@@ -727,10 +727,10 @@ Beginner's tip—here's a full example of using interactive links in HTML:
@@ -771,10 +771,10 @@ Beginner's tip—a full example using interactive links in a html context:
-
@@ -50,17 +48,21 @@
+
-
-```
-
-**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);
-
-