marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-30 17:44:08 +01: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

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)