marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-07 09:36:41 +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
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.
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
> "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.
@@ -595,12 +594,32 @@ Beginner's tip—a full example using interactive links in an HTML page:
```html
<body>
<div class="mermaid">
classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra 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"
</div>
<pre class="mermaid">
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
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>
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
<body>
<div class="mermaid">
graph LR; A-->B; B-->C; 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"
</div>
<pre class="mermaid">
graph LR;
A-->B;
B-->C;
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>
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
<body>
<div class="mermaid">
flowchart LR A-->B B-->C 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"
</div>
<pre class="mermaid">
flowchart LR
A-->B
B-->C
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>
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
<body>
<div class="mermaid">
gantt dateFormat YYYY-MM-DD section Clickable 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()
</div>
<pre class="mermaid">
gantt
dateFormat YYYY-MM-DD
section Clickable
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>
var printArguments = function (arg1, arg2, arg3) {

2
docs/index.html
View File

@@ -109,7 +109,7 @@
return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
} else if (lang === 'mermaid') {
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);

51
docs/n00b-gettingStarted.md
View File

@@ -91,22 +91,25 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
</body>
```
**b. The embedded mermaid diagram definition inside a `<div class="mermaid">`:**
**b. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
```html
<body>
Here is a mermaid diagram:
<div class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
</div>
<pre class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</pre>
</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.**
`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
<body>
@@ -138,15 +141,21 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
</script>
Here is one mermaid diagram:
<div class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
</div>
<pre class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</pre>
And here is another:
<div class="mermaid">
graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B -->|tcp_456|
D[Server2]
</div>
<pre class="mermaid">
graph TD
A[Client] -->|tcp_123| B
B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
</pre>
</body>
</html>
```
@@ -160,10 +169,18 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
<meta charset="utf-8" />
</head>
<body>
<div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
<div class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
</div>
<pre class="mermaid">
graph LR
A --- B
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>
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`.
```html
<div class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
</div>
<pre class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</pre>
```
**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:
```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
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" />
</head>
<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>
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();
renderer.code = function (code, language) {
if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
return '<div class="mermaid">' + code + '</div>';
return '<pre class="mermaid">' + code + '</pre>';
} else {
return '<pre><code>' + code + '</code></pre>';
}
@@ -267,7 +278,7 @@ module.exports = (options) ->
if not hasMermaid
hasMermaid = true
html += '<script src="'+options.mermaidPath+'"></script>'
html + '<div class="mermaid">'+code+'</div>'
html + '<pre class="mermaid">'+code+'</pre>'
else
@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
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.
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
> "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.
@@ -424,12 +423,32 @@ Beginner's tip—a full example using interactive links in an HTML page:
```html
<body>
<div class="mermaid">
classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra 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"
</div>
<pre class="mermaid">
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
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>
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
<body>
<div class="mermaid">
graph LR; A-->B; B-->C; 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"
</div>
<pre class="mermaid">
graph LR;
A-->B;
B-->C;
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>
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
<body>
<div class="mermaid">
flowchart LR A-->B B-->C 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"
</div>
<pre class="mermaid">
flowchart LR
A-->B
B-->C
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>
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
<body>
<div class="mermaid">
gantt dateFormat YYYY-MM-DD section Clickable 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()
</div>
<pre class="mermaid">
gantt
dateFormat YYYY-MM-DD
section Clickable
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>
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>';
} else if (lang === 'mermaid') {
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);

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>
```
**b. The embedded mermaid diagram definition inside a `<div class="mermaid">`:**
**b. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
```html
<body>
Here is a mermaid diagram:
<div class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
</div>
<pre class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</pre>
</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.**
`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
<body>
@@ -136,15 +139,21 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
</script>
Here is one mermaid diagram:
<div class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
</div>
<pre class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</pre>
And here is another:
<div class="mermaid">
graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B -->|tcp_456|
D[Server2]
</div>
<pre class="mermaid">
graph TD
A[Client] -->|tcp_123| B
B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
</pre>
</body>
</html>
```
@@ -158,10 +167,18 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
<meta charset="utf-8" />
</head>
<body>
<div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
<div class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
</div>
<pre class="mermaid">
graph LR
A --- B
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>
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`.
```html
<div class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
</div>
<pre class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</pre>
```
**render**

23
src/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:
```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
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" />
</head>
<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>
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();
renderer.code = function (code, language) {
if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
return '<div class="mermaid">' + code + '</div>';
return '<pre class="mermaid">' + code + '</pre>';
} else {
return '<pre><code>' + code + '</code></pre>';
}
@@ -267,7 +278,7 @@ module.exports = (options) ->
if not hasMermaid
hasMermaid = true
html += '<script src="'+options.mermaidPath+'"></script>'
html + '<div class="mermaid">'+code+'</div>'
html + '<pre class="mermaid">'+code+'</pre>'
else
@defaultCode(code, language)