marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-15 18:24:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

Prettier

Browse Source
This commit is contained in:
Sidharth Vinod
2022-09-03 13:30:16 +05:30
parent 661f283dab
commit f6d69b33b3
78 changed files with 7227 additions and 2379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
docs/n00b-gettingStarted.md
View File

@@ -87,7 +87,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
```html
<body>
<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>
</body>
```
@@ -95,10 +95,10 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
```html
<body>
Here is a mermaid diagram:
<div class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
</div>
Here is a mermaid diagram:
<div class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
</div>
</body>
```
@@ -110,9 +110,9 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
```html
<body>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
</body>
```
@@ -131,23 +131,23 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
```html
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
<body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
Here is one mermaid diagram:
<div class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
</div>
Here is one mermaid diagram:
<div class="mermaid">
graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
</div>
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>
</body>
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>
</body>
</html>
```
@@ -156,19 +156,19 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
```html
<html lang="en">
<head>
<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>
<script src="The\Path\In\Your\Package\mermaid.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
</body>
<head>
<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>
<script src="The\Path\In\Your\Package\mermaid.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
</body>
</html>
```
@@ -189,4 +189,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 `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works.
- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works.