marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-08 10:06:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix mermaid code formatting in html

Browse Source
This commit is contained in:
Sidharth Vinod
2022-09-05 01:25:28 +05:30
parent 537ce4f630
commit a95f46f513
18 changed files with 249 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/Setup.md
View File

@@ -13,7 +13,7 @@ using the default integration provided by mermaid.js.
The core of this api is the [**render**][2] function which, given a graph The core of this api is the [**render**][2] function which, given a graph
definition as text, renders the graph/diagram and returns an svg element for the graph. definition as text, renders the graph/diagram and returns an svg element for the graph.
It is is then up to the user of the API to make use of the svg, either insert it somewhere in the It is then up to the user of the API to make use of the svg, either insert it somewhere in the
page or do something completely different. page or do something completely different.
In addition to the render function, a number of behavioral configuration options are available. In addition to the render function, a number of behavioral configuration options are available.

35
docs/classDiagram.md
View File

@@ -3,8 +3,7 @@
# Class diagrams # Class diagrams
> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects." > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
> > Wikipedia
> - Wikipedia
The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed. The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
@@ -595,12 +594,32 @@ Beginner's tip—a full example using interactive links in an HTML page:
```html ```html
<body> <body>
<div class="mermaid"> <pre class="mermaid">
classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : classDiagram
+String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() Animal <|-- Duck
+quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } callback Animal <|-- Fish
Duck callback "Tooltip" link Zebra "https://www.github.com" "This is a link" Animal <|-- Zebra
</div> Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
callback Duck callback "Tooltip"
link Zebra "https://www.github.com" "This is a link"
</pre>
<script> <script>
var callback = function () { var callback = function () {

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

@@ -707,11 +707,16 @@ Beginner's tip—here's a full example of using interactive links in HTML:
```html ```html
<body> <body>
<div class="mermaid"> <pre class="mermaid">
graph LR; A-->B; B-->C; C-->D; click A callback "Tooltip" click B "https://www.github.com" "This graph LR;
is a link" click C call callback() "Tooltip" click D href "https://www.github.com" "This is a A-->B;
link" B-->C;
</div> C-->D;
click A callback "Tooltip"
click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link"
</pre>
<script> <script>
var callback = function () { var callback = function () {

15
docs/flowchart.md
View File

@@ -749,11 +749,16 @@ Beginner's tip—a full example using interactive links in a html context:
```html ```html
<body> <body>
<div class="mermaid"> <pre class="mermaid">
flowchart LR A-->B B-->C C-->D click A callback "Tooltip" click B "https://www.github.com" "This flowchart LR
is a link" click C call callback() "Tooltip" click D href "https://www.github.com" "This is a A-->B
link" B-->C
</div> C-->D
click A callback "Tooltip"
click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link"
</pre>
<script> <script>
var callback = function () { var callback = function () {

19
docs/gantt.md
View File

@@ -362,12 +362,19 @@ Beginner's tip—a full example using interactive links in an html context:
```html ```html
<body> <body>
<div class="mermaid"> <pre class="mermaid">
gantt dateFormat YYYY-MM-DD section Clickable Visit mermaidjs :active, cl1, 2014-01-07, 3d Print gantt
arguments :cl2, after cl1, 3d Print task :cl3, after cl2, 3d click cl1 href dateFormat YYYY-MM-DD
"https://mermaidjs.github.io/" click cl2 call printArguments("test1", "test2", test3) click cl3
call printTask() section Clickable
</div> Visit mermaidjs :active, cl1, 2014-01-07, 3d
Print arguments :cl2, after cl1, 3d
Print task :cl3, after cl2, 3d
click cl1 href "https://mermaidjs.github.io/"
click cl2 call printArguments("test1", "test2", test3)
click cl3 call printTask()
</pre>
<script> <script>
var printArguments = function (arg1, arg2, arg3) { var printArguments = function (arg1, arg2, arg3) {

2
docs/index.html
View File

@@ -109,7 +109,7 @@
return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>'; return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
} else if (lang === 'mermaid') { } else if (lang === 'mermaid') {
return ( return (
'<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</div>' '<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>'
); );
} }
return this.origin.code.apply(this, arguments); return this.origin.code.apply(this, arguments);

51
docs/n00b-gettingStarted.md
View File

@@ -91,22 +91,25 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
</body> </body>
``` ```
**b. The embedded mermaid diagram definition inside a `<div class="mermaid">`:** **b. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
```html ```html
<body> <body>
Here is a mermaid diagram: Here is a mermaid diagram:
<div class="mermaid"> <pre class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02] graph TD
</div> A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</pre>
</body> </body>
``` ```
**Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<div>` tags. **Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<pre>` tags.
**c. The `mermaid.initialize()` call.** **c. The `mermaid.initialize()` call.**
`mermaid.initialize()` call takes all the definitions contained in all the `<div class="mermaid">` tags that it finds in the html body and renders them into diagrams. Example: `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 ```html
<body> <body>
@@ -138,15 +141,21 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
</script> </script>
Here is one mermaid diagram: Here is one mermaid diagram:
<div class="mermaid"> <pre class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] graph TD
</div> A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</pre>
And here is another: And here is another:
<div class="mermaid"> <pre class="mermaid">
graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B -->|tcp_456| graph TD
D[Server2] A[Client] -->|tcp_123| B
</div> B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
</pre>
</body> </body>
</html> </html>
``` ```
@@ -160,10 +169,18 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
<meta charset="utf-8" /> <meta charset="utf-8" />
</head> </head>
<body> <body>
<div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> <pre class="mermaid">
<div class="mermaid"> graph LR
graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] A --- B
</div> B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</pre>
<pre class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</pre>
<script src="The\Path\In\Your\Package\mermaid.js"></script> <script src="The\Path\In\Your\Package\mermaid.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });

9
docs/n00b-overview.md
View File

@@ -27,9 +27,12 @@ It is a relatively straightforward solution to a significant hurdle with the sof
> These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`. > These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`.
```html ```html
<div class="mermaid"> <pre class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02] graph TD
</div> A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</pre>
``` ```
**render** **render**

23
docs/usage.md
View File

@@ -56,9 +56,15 @@ The easiest way to integrate mermaid on a web page requires three elements:
``` ```
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example: 3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
```html
<div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> ```html
``` <pre class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</pre>
```
**Following these directions, mermaid starts at page load and (when the page has loaded) it will **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.** locate the graph definitions inside the `div` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.**
@@ -72,7 +78,12 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
<meta charset="utf-8" /> <meta charset="utf-8" />
</head> </head>
<body> <body>
<div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> <pre class="mermaid">
graph LR
A --- B
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 src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });
@@ -245,7 +256,7 @@ This is the renderer used for transforming the documentation from Markdown to ht
var renderer = new marked.Renderer(); var renderer = new marked.Renderer();
renderer.code = function (code, language) { renderer.code = function (code, language) {
if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) { if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
return '<div class="mermaid">' + code + '</div>'; return '<pre class="mermaid">' + code + '</pre>';
} else { } else {
return '<pre><code>' + code + '</code></pre>'; return '<pre><code>' + code + '</code></pre>';
} }
@@ -267,7 +278,7 @@ module.exports = (options) ->
if not hasMermaid if not hasMermaid
hasMermaid = true hasMermaid = true
html += '<script src="'+options.mermaidPath+'"></script>' html += '<script src="'+options.mermaidPath+'"></script>'
html + '<div class="mermaid">'+code+'</div>' html + '<pre class="mermaid">'+code+'</pre>'
else else
@defaultCode(code, language) @defaultCode(code, language)

2
src/docs/Setup.md
View File

@@ -11,7 +11,7 @@ using the default integration provided by mermaid.js.
The core of this api is the [**render**][2] function which, given a graph The core of this api is the [**render**][2] function which, given a graph
definition as text, renders the graph/diagram and returns an svg element for the graph. definition as text, renders the graph/diagram and returns an svg element for the graph.
It is is then up to the user of the API to make use of the svg, either insert it somewhere in the It is then up to the user of the API to make use of the svg, either insert it somewhere in the
page or do something completely different. page or do something completely different.
In addition to the render function, a number of behavioral configuration options are available. In addition to the render function, a number of behavioral configuration options are available.

35
src/docs/classDiagram.md
View File

@@ -1,8 +1,7 @@
# Class diagrams # Class diagrams
> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects." > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
> > Wikipedia
> - Wikipedia
The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed. The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
@@ -424,12 +423,32 @@ Beginner's tip—a full example using interactive links in an HTML page:
```html ```html
<body> <body>
<div class="mermaid"> <pre class="mermaid">
classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : classDiagram
+String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() Animal <|-- Duck
+quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } callback Animal <|-- Fish
Duck callback "Tooltip" link Zebra "https://www.github.com" "This is a link" Animal <|-- Zebra
</div> Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
callback Duck callback "Tooltip"
link Zebra "https://www.github.com" "This is a link"
</pre>
<script> <script>
var callback = function () { var callback = function () {

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

@@ -459,11 +459,16 @@ Beginner's tip—here's a full example of using interactive links in HTML:
```html ```html
<body> <body>
<div class="mermaid"> <pre class="mermaid">
graph LR; A-->B; B-->C; C-->D; click A callback "Tooltip" click B "https://www.github.com" "This graph LR;
is a link" click C call callback() "Tooltip" click D href "https://www.github.com" "This is a A-->B;
link" B-->C;
</div> C-->D;
click A callback "Tooltip"
click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link"
</pre>
<script> <script>
var callback = function () { var callback = function () {

15
src/docs/flowchart.md
View File

@@ -481,11 +481,16 @@ Beginner's tip—a full example using interactive links in a html context:
```html ```html
<body> <body>
<div class="mermaid"> <pre class="mermaid">
flowchart LR A-->B B-->C C-->D click A callback "Tooltip" click B "https://www.github.com" "This flowchart LR
is a link" click C call callback() "Tooltip" click D href "https://www.github.com" "This is a A-->B
link" B-->C
</div> C-->D
click A callback "Tooltip"
click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link"
</pre>
<script> <script>
var callback = function () { var callback = function () {

19
src/docs/gantt.md
View File

@@ -312,12 +312,19 @@ Beginner's tip—a full example using interactive links in an html context:
```html ```html
<body> <body>
<div class="mermaid"> <pre class="mermaid">
gantt dateFormat YYYY-MM-DD section Clickable Visit mermaidjs :active, cl1, 2014-01-07, 3d Print gantt
arguments :cl2, after cl1, 3d Print task :cl3, after cl2, 3d click cl1 href dateFormat YYYY-MM-DD
"https://mermaidjs.github.io/" click cl2 call printArguments("test1", "test2", test3) click cl3
call printTask() section Clickable
</div> Visit mermaidjs :active, cl1, 2014-01-07, 3d
Print arguments :cl2, after cl1, 3d
Print task :cl3, after cl2, 3d
click cl1 href "https://mermaidjs.github.io/"
click cl2 call printArguments("test1", "test2", test3)
click cl3 call printTask()
</pre>
<script> <script>
var printArguments = function (arg1, arg2, arg3) { var printArguments = function (arg1, arg2, arg3) {

2
src/docs/index.html
View File

@@ -109,7 +109,7 @@
return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>'; return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
} else if (lang === 'mermaid') { } else if (lang === 'mermaid') {
return ( return (
'<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</div>' '<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>'
); );
} }
return this.origin.code.apply(this, arguments); return this.origin.code.apply(this, arguments);

51
src/docs/n00b-gettingStarted.md
View File

@@ -89,22 +89,25 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
</body> </body>
``` ```
**b. The embedded mermaid diagram definition inside a `<div class="mermaid">`:** **b. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
```html ```html
<body> <body>
Here is a mermaid diagram: Here is a mermaid diagram:
<div class="mermaid"> <pre class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02] graph TD
</div> A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</pre>
</body> </body>
``` ```
**Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<div>` tags. **Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<pre>` tags.
**c. The `mermaid.initialize()` call.** **c. The `mermaid.initialize()` call.**
`mermaid.initialize()` call takes all the definitions contained in all the `<div class="mermaid">` tags that it finds in the html body and renders them into diagrams. Example: `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 ```html
<body> <body>
@@ -136,15 +139,21 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
</script> </script>
Here is one mermaid diagram: Here is one mermaid diagram:
<div class="mermaid"> <pre class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] graph TD
</div> A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</pre>
And here is another: And here is another:
<div class="mermaid"> <pre class="mermaid">
graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B -->|tcp_456| graph TD
D[Server2] A[Client] -->|tcp_123| B
</div> B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
</pre>
</body> </body>
</html> </html>
``` ```
@@ -158,10 +167,18 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
<meta charset="utf-8" /> <meta charset="utf-8" />
</head> </head>
<body> <body>
<div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> <pre class="mermaid">
<div class="mermaid"> graph LR
graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] A --- B
</div> B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</pre>
<pre class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</pre>
<script src="The\Path\In\Your\Package\mermaid.js"></script> <script src="The\Path\In\Your\Package\mermaid.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });

9
src/docs/n00b-overview.md
View File

@@ -25,9 +25,12 @@ It is a relatively straightforward solution to a significant hurdle with the sof
> These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`. > These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`.
```html ```html
<div class="mermaid"> <pre class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02] graph TD
</div> A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</pre>
``` ```
**render** **render**

45
src/docs/usage.md
View File

@@ -41,24 +41,30 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
The easiest way to integrate mermaid on a web page requires three elements: 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/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:
```html ```html
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });
</script> </script>
``` ```
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example: 3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
```html
<div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> ```html
``` <pre class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</pre>
```
**Following these directions, mermaid starts at page load and (when the page has loaded) it will **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.** locate the graph definitions inside the `div` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.**
@@ -72,7 +78,12 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
<meta charset="utf-8" /> <meta charset="utf-8" />
</head> </head>
<body> <body>
<div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> <pre class="mermaid">
graph LR
A --- B
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 src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });
@@ -245,7 +256,7 @@ This is the renderer used for transforming the documentation from Markdown to ht
var renderer = new marked.Renderer(); var renderer = new marked.Renderer();
renderer.code = function (code, language) { renderer.code = function (code, language) {
if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) { if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
return '<div class="mermaid">' + code + '</div>'; return '<pre class="mermaid">' + code + '</pre>';
} else { } else {
return '<pre><code>' + code + '</code></pre>'; return '<pre><code>' + code + '</code></pre>';
} }
@@ -267,7 +278,7 @@ module.exports = (options) ->
if not hasMermaid if not hasMermaid
hasMermaid = true hasMermaid = true
html += '<script src="'+options.mermaidPath+'"></script>' html += '<script src="'+options.mermaidPath+'"></script>'
html + '<div class="mermaid">'+code+'</div>' html + '<pre class="mermaid">'+code+'</pre>'
else else
@defaultCode(code, language) @defaultCode(code, language)