mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-26 23:54:09 +01:00
Merge branch 'develop' into pr/Ronid1/5066
* develop: (122 commits) Cleanup e2e.yml Ignore push events on merge queue Remove :: Remove :: Remove :: Debug Debug Remove spec selector Handle edge cases in E2E Always run combineArtifacts Fix error message Fix cache save Update cache key Notify users Flatten uploaded images Flatten uploaded images Use pixelmatch for image comparison Run all tests Fix lint Update lockfile ...
This commit is contained in:
Sidharth Vinod
BIN
docs/ecosystem/img/python-mermaid-integration.png
Normal file
BIN
docs/ecosystem/img/python-mermaid-integration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@@ -6,18 +6,27 @@
|
||||
|
||||
# Integrations
|
||||
|
||||
## Official integration: [Mermaid Chart](./mermaid-chart.md)
|
||||
## Official integration
|
||||
|
||||
We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid.
|
||||
### Mermaid Chart
|
||||
|
||||
Mermaid Chart is built by the team behind Mermaid JS.
|
||||
|
||||
For more details, visit the [Mermaid Chart page](./mermaid-chart.md), or visit the [Mermaid Chart website](https://www.mermaidchart.com) .
|
||||
|
||||
## Community integrations
|
||||
|
||||
Below are a list of community plugins and integrations created with Mermaid.
|
||||
We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created by the community.
|
||||
|
||||
See the list below of community plugins and integrations created with Mermaid.
|
||||
|
||||
> **Note**
|
||||
> A ✅ indicates Native support for Mermaid on the respective platform.
|
||||
|
||||
To add an integration to this list, see the [Integrations - create page](./integrations-create.md).
|
||||
|
||||
### Productivity tools
|
||||
|
||||
✅ = Native support
|
||||
|
||||
- [Atlassian Products](https://www.atlassian.com)
|
||||
- [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
|
||||
- [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
|
||||
@@ -156,7 +165,6 @@ Communication tools and platforms
|
||||
- [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
|
||||
- [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
|
||||
- [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
|
||||
- [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
|
||||
- [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
|
||||
- [Podlite](https://github.com/zag/podlite-desktop)
|
||||
- [=Diagram block](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
|
||||
@@ -182,7 +190,7 @@ Communication tools and platforms
|
||||
|
||||
- [Codedoc](https://codedoc.cc/)
|
||||
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
|
||||
- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (native support in theme)
|
||||
- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅
|
||||
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
|
||||
- [Gatsby](https://www.gatsbyjs.com/)
|
||||
- [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
|
||||
@@ -203,6 +211,7 @@ Communication tools and platforms
|
||||
- [Type Doc](https://typedoc.org/)
|
||||
- [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
|
||||
- [Typora](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid) ✅
|
||||
- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/) ✅
|
||||
|
||||
### Browser Extensions
|
||||
|
||||
@@ -223,6 +232,7 @@ Communication tools and platforms
|
||||
|
||||
- [Bisheng](https://www.npmjs.com/package/bisheng)
|
||||
- [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
|
||||
- [Codemia: A tool to practice system design problems](https://codemia.io) ✅
|
||||
- [ExDoc](https://github.com/elixir-lang/ex_doc)
|
||||
- [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
|
||||
- [Jekyll](https://jekyllrb.com/)
|
||||
@@ -230,7 +240,7 @@ Communication tools and platforms
|
||||
- [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
|
||||
- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
|
||||
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
|
||||
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
|
||||
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅
|
||||
- [ui.mermaid(...)](https://nicegui.io/documentation/mermaid)
|
||||
- [Reveal.js](https://github.com/hakimel/reveal.js)
|
||||
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
|
||||
@@ -240,6 +250,3 @@ Communication tools and platforms
|
||||
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
|
||||
- [ExDoc](https://github.com/elixir-lang/ex_doc)
|
||||
- [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
|
||||
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
|
||||
- [ui.mermaid(...)](https://nicegui.io/documentation/section_text_elements#markdown_element)
|
||||
- [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/documentation/section_text_elements#mermaid_diagrams)
|
||||
|
||||
@@ -22,9 +22,16 @@
|
||||
|
||||
- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan).
|
||||
|
||||
- **Plugins** - A plugin system for extending the functionality of Mermaid. Currently includes [VS Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart) and [ChatGPT](https://www.mermaidchart.com/plugins/chatgpt).
|
||||
- **Plugins** - A plugin system for extending the functionality of Mermaid.
|
||||
|
||||
- **AI** - An AI chatbot that can generate Mermaid diagrams from text (Pro plan).
|
||||
Plugins are available for:
|
||||
|
||||
- [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
|
||||
- [JetBrains IDE](https://plugins.jetbrains.com/plugin/23043-mermaid-chart)
|
||||
- [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview)
|
||||
- [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
|
||||
|
||||
- **AI diagramming** - A feature for generating Mermaid diagrams from text using AI (Pro plan).
|
||||
|
||||
- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page.
|
||||
|
||||
@@ -40,7 +47,7 @@
|
||||
|
||||
Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
|
||||
|
||||
Mermaid Chart is currently offering a 30-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
|
||||
Mermaid Chart is currently offering a 14-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
|
||||
|
||||
## Mermaid JS contributions
|
||||
|
||||
|
||||
82
docs/ecosystem/tutorials.md
Normal file
82
docs/ecosystem/tutorials.md
Normal file
@@ -0,0 +1,82 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/tutorials.md](../../packages/mermaid/src/docs/ecosystem/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**
|
||||
|
||||
|
||||
Reference in New Issue
Block a user