mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix pre

This commit is contained in:
Sidharth Vinod 2022-09-05 01:33:47 +05:30
parent 98e9f5751a
commit 1f6e4a0887
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
2 changed files with 11 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/n00b-gettingStarted.md
View File

@ -99,8 +99,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
A[Client] --> B[Load Balancer] A[Client] --> B[Load Balancer]
B --> C[Server01] B --> C[Server01]
B --> D[Server02] B --> D[Server02]
</pre </pre>
>
</body> </body>
``` ```
@ -145,8 +144,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
A[Client] --> B[Load Balancer] A[Client] --> B[Load Balancer]
B --> C[Server1] B --> C[Server1]
B --> D[Server2] B --> D[Server2]
</pre </pre>
>
And here is another: And here is another:
<pre class="mermaid"> <pre class="mermaid">
@ -155,8 +153,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
B(Load Balancer) B(Load Balancer)
B -->|tcp_456| C[Server1] B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2] B -->|tcp_456| D[Server2]
</pre </pre>
>
</body> </body>
</html> </html>
``` ```
@ -175,15 +172,13 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
A --- B A --- B
B-->C[fa:fa-ban forbidden] B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner); B-->D(fa:fa-spinner);
</pre </pre>
>
<pre class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Client] --> B[Load Balancer] A[Client] --> B[Load Balancer]
B --> C[Server1] B --> C[Server1]
B --> D[Server2] B --> D[Server2]
</pre </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 });

16
docs/usage.md
View File

@ -1,7 +1,5 @@
# Usage # Usage
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations. Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations.
Diagrams can be re-rendered/modified by modifying their descriptions. Diagrams can be re-rendered/modified by modifying their descriptions.
@ -257,12 +255,11 @@ This is the renderer used for transforming the documentation from Markdown to ht
```javascript ```javascript
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/)) {
<pre class="mermaid">' + code + '</div>'; return '<pre class="mermaid">' + code + '</pre>';
} else { } else {
return '<pre><code>' + code + '</code> return '<pre><code>' + code + '</code></pre>';
return '</pre>'; }
}
}; };
``` ```
@ -281,8 +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+' html + '<pre class="mermaid">'+code+'</pre>'
</pre>'
else else
@defaultCode(code, language) @defaultCode(code, language)