marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-04 14:49:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge from release/10.8.0

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-02-02 09:55:30 +01:00
parent 976a39ea54 2fa9219353
commit ae307831eb
151 changed files with 7844 additions and 3313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
docs/config/Tutorials.md
View File

@@ -1,82 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/Tutorials.md](../../packages/mermaid/src/docs/config/Tutorials.md).
# Tutorials
This is a list of publicly available Tutorials for using Mermaid.JS and is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
**Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.**
For most purposes, you can use the [Live Editor](https://mermaid.live), to quickly and easily render a diagram.
## Live-Editor Tutorials
The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
[Chris Chinchilla: Hands on - Text-based diagrams with Mermaid](https://www.youtube.com/watch?v=4_LdV1cs2sA)
[GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s)
[GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE)
[World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s)
[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
## Mermaid with OpenAI
[Elle Neal: Mind Mapping with AI: An Accessible Approach for Neurodiverse Learners Tutorial:](https://medium.com/@elle.neal_71064/mind-mapping-with-ai-an-accessible-approach-for-neurodiverse-learners-1a74767359ff), [Demo:](https://databutton.com/v/jk9vrghc)
## Mermaid with HTML
Examples are provided in [Getting Started](../intro/getting-started.md)
**CodePen Examples:**
<https://codepen.io/CarlBoneri/pen/BQwZzq>
<https://codepen.io/tdkn/pen/vZxQzd>
<https://codepen.io/janzeteachesit/pen/OWWZKN>
## Mermaid with Text Area
<https://codepen.io/Ryuno-Ki/pen/LNxwgR>
## Mermaid in open source docs
[K8s.io Diagram Guide](https://kubernetes.io/docs/contribute/style/diagram-guide/)
[K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/)
## Jupyter Integration with mermaid-js
Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook.
```python
import base64
from IPython.display import Image, display
import matplotlib.pyplot as plt
def mm(graph):
graphbytes = graph.encode("utf8")
base64_bytes = base64.b64encode(graphbytes)
base64_string = base64_bytes.decode("ascii")
display(Image(url="https://mermaid.ink/img/" + base64_string))
mm("""
graph LR;
A--> B & C & D;
B--> A & E;
C--> A & E;
D--> A & E;
E--> B & C & D;
""")
```
**Output**
![Example graph of the Python integration](img/python-mermaid-integration.png)

30
docs/config/advanced.md
View File

@@ -1,30 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/advanced.md](../../packages/mermaid/src/docs/config/advanced.md).
# Advanced mermaid (Coming soon..)
## splitting mermaid code from html
A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so:
```html
...
</div>
</body>
</html>
```
The actual mermaid file could for example look like this:
```javascript
mermaid content ...
```
## mermaid configuration options
```markdown
(coming soon)
```

BIN
docs/config/img/python-mermaid-integration.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 38 KiB

2
docs/config/setup/README.md
View File

@@ -4,7 +4,7 @@
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/README.md](../../../packages/mermaid/src/docs/config/setup/README.md).
# @mermaid-chart/mermaid
# mermaid
## Modules

2
docs/config/setup/modules/mermaidAPI.md
View File

@@ -96,7 +96,7 @@ mermaid.initialize(config);
#### Defined in
[mermaidAPI.ts:610](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L610)
[mermaidAPI.ts:609](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L609)
## Functions

2
docs/config/usage.md
View File

@@ -20,7 +20,7 @@ Please note that you can switch versions through the dropdown box at the top rig
For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./setup/README.md).
We have compiled some Video [Tutorials](./Tutorials.md) on how to use the Mermaid Live Editor.
We have compiled some Video [Tutorials](../ecosystem/tutorials.md) on how to use the Mermaid Live Editor.
### Installing and Hosting Mermaid on a Webpage