Merge branch 'mermaid-js:develop' into feature/add-point-styling-quadrant-to-charts
This commit is contained in:
ilyes-ced
GitHub
commit
e965507470
|
|
@ -36,7 +36,7 @@ jobs:
|
|||
restore-keys: cache-lychee-
|
||||
|
||||
- name: Link Checker
|
||||
uses: lycheeverse/lychee-action@v1.8.0
|
||||
uses: lycheeverse/lychee-action@v1.9.1
|
||||
with:
|
||||
args: >-
|
||||
--config .github/lychee.toml
|
||||
|
|
|
|||
1
.npmrc
1
.npmrc
|
|
@ -1,2 +1,3 @@
|
|||
registry=https://registry.npmjs.org
|
||||
auto-install-peers=true
|
||||
strict-peer-dependencies=false
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
"città",
|
||||
"classdef",
|
||||
"codedoc",
|
||||
"codemia",
|
||||
"colour",
|
||||
"commitlint",
|
||||
"cpettitt",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ interface CypressConfig {
|
|||
type CypressMermaidConfig = MermaidConfig & CypressConfig;
|
||||
|
||||
interface CodeObject {
|
||||
code: string;
|
||||
code: string | string[];
|
||||
mermaid: CypressMermaidConfig;
|
||||
}
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ const batchId: string =
|
|||
: Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
|
||||
|
||||
export const mermaidUrl = (
|
||||
graphStr: string,
|
||||
graphStr: string | string[],
|
||||
options: CypressMermaidConfig,
|
||||
api: boolean
|
||||
): string => {
|
||||
|
|
@ -82,7 +82,7 @@ export const urlSnapshotTest = (
|
|||
};
|
||||
|
||||
export const renderGraph = (
|
||||
graphStr: string,
|
||||
graphStr: string | string[],
|
||||
options: CypressMermaidConfig = {},
|
||||
api = false
|
||||
): void => {
|
||||
|
|
|
|||
|
|
@ -930,4 +930,36 @@ context('Sequence diagram', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
context('render after error', () => {
|
||||
it('should render diagram after fixing destroy participant error', () => {
|
||||
cy.on('uncaught:exception', (err) => {
|
||||
return false;
|
||||
});
|
||||
|
||||
renderGraph([
|
||||
`sequenceDiagram
|
||||
Alice->>Bob: Hello Bob, how are you ?
|
||||
Bob->>Alice: Fine, thank you. And you?
|
||||
create participant Carl
|
||||
Alice->>Carl: Hi Carl!
|
||||
create actor D as Donald
|
||||
Carl->>D: Hi!
|
||||
destroy Carl
|
||||
Alice-xCarl: We are too many
|
||||
destroy Bo
|
||||
Bob->>Alice: I agree`,
|
||||
`sequenceDiagram
|
||||
Alice->>Bob: Hello Bob, how are you ?
|
||||
Bob->>Alice: Fine, thank you. And you?
|
||||
create participant Carl
|
||||
Alice->>Carl: Hi Carl!
|
||||
create actor D as Donald
|
||||
Carl->>D: Hi!
|
||||
destroy Carl
|
||||
Alice-xCarl: We are too many
|
||||
destroy Bob
|
||||
Bob->>Alice: I agree`,
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
- [GitHub](https://github.com) ✅
|
||||
- [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
|
||||
- [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
|
||||
|
|
@ -61,6 +70,7 @@ Below are a list of community plugins and integrations created with Mermaid.
|
|||
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
|
||||
- [mermerd](https://github.com/KarnerTh/mermerd)
|
||||
- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
|
||||
- Codemia [a tool to practice system design problems](https://codemia.io)
|
||||
|
||||
### CRM/ERP
|
||||
|
||||
|
|
@ -143,7 +153,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)
|
||||
- Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
|
||||
- [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
|
||||
|
|
@ -181,6 +190,7 @@ Communication tools and platforms
|
|||
### Document Generation
|
||||
|
||||
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
|
||||
- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/) ✅
|
||||
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
|
||||
- [Sphinx](https://www.sphinx-doc.org/en/master/)
|
||||
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
|
||||
|
|
@ -197,13 +207,14 @@ Communication tools and platforms
|
|||
- [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
|
||||
- [Type Doc](https://typedoc.org/)
|
||||
- [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
|
||||
- [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) ✅
|
||||
- [Codedoc](https://codedoc.cc/)
|
||||
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
|
||||
- [mdbook](https://rust-lang.github.io/mdBook/index.html)
|
||||
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
|
||||
- [Quarto](https://quarto.org/)
|
||||
- [Typora](https://typora.io/) ([native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
|
||||
- [Typora](https://typora.io/) ✅
|
||||
- [See docs](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid)
|
||||
|
||||
### Browser Extensions
|
||||
|
||||
|
|
@ -235,6 +246,6 @@ 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)
|
||||
- [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
|
||||
|
||||
|
|
|
|||
|
|
@ -4,30 +4,44 @@
|
|||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/getting-started.md](../../packages/mermaid/src/docs/intro/getting-started.md).
|
||||
|
||||
# A Mermaid User-Guide for Beginners
|
||||
# Mermaid User Guide
|
||||
|
||||
Mermaid is composed of three parts: Deployment, Syntax and Configuration.
|
||||
## Mermaid is composed of three parts
|
||||
|
||||
This section talks about the different ways to deploy Mermaid. Learning the [Syntax](syntax-reference.md) would be of great help to the beginner.
|
||||
1. Deployment
|
||||
2. Syntax
|
||||
3. Configuration
|
||||
|
||||
> Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
|
||||
This section talks about the different ways to **deploy** Mermaid.
|
||||
|
||||
**Absolute beginners are advised to view the Video [Tutorials](../config/Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.**
|
||||
If you are a beginner:
|
||||
|
||||
## Four ways of using mermaid:
|
||||
- Check out the [Diagram Syntax](syntax-reference.md) page
|
||||
- Check out the [Tutorials](../config/Tutorials.md) page
|
||||
|
||||
1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
|
||||
2. Using [mermaid plugins](../ecosystem/integrations-community.md) with programs you are familiar with.
|
||||
3. Calling the Mermaid JavaScript API.
|
||||
4. Deploying Mermaid as a dependency.
|
||||
## Ways to use Mermaid
|
||||
|
||||
**Note: It is our recommendation that you review all approaches, and choose the one that is best for your project.**
|
||||
1. [Using the Mermaid Live Editor](getting-started.md#_1-using-the-mermaid-live-editor)
|
||||
2. [Using the Mermaid Chart Editor](getting-started.md#_2-using-the-mermaid-chart-editor)
|
||||
3. [Using Mermaid Plugins and Integrations](getting-started.md#_3-using-mermaid-plugins)
|
||||
4. [Calling the Mermaid JavaScript API](getting-started.md#_4-calling-the-mermaid-javascript-api)
|
||||
5. [Adding Mermaid as a dependency](getting-started.md#_5-adding-mermaid-as-a-dependency)
|
||||
|
||||
> More in depth information can be found at [Usage](../config/usage.md).
|
||||
To learn more, visit the [Usage](../config/usage.md) page.
|
||||
|
||||
## 1. Using the Live Editor
|
||||
## 1. Using the Mermaid Live Editor
|
||||
|
||||
Available at [mermaid.live](https://mermaid.live)
|
||||
Available at the [Mermaid Live Editor](https://mermaid.live) website.
|
||||
|
||||
### Features
|
||||
|
||||
<br />
|
||||
|
||||
#### • Diagram Code
|
||||
|
||||
In the `Code` panel, write or edit Mermaid code, and instantly `Preview` the rendered result in the diagram panel.
|
||||
|
||||
Here is an example of Mermaid code and its rendered result:
|
||||
|
||||
```mermaid-example
|
||||
graph TD
|
||||
|
|
@ -51,79 +65,161 @@ graph TD
|
|||
F --> B
|
||||
```
|
||||
|
||||
In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
|
||||
<br />
|
||||
|
||||
The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](../config/advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README.md) page.
|
||||
#### • Configurations
|
||||
|
||||
Configuration options are available in the `Configuration` panel. The options are applied to the diagram in the `Preview` panel.
|
||||
|
||||
For learn more, visit the [Configuration Reference](../config/setup/README.md) page
|
||||
|
||||
|
||||
|
||||
### Editing History
|
||||
<br />
|
||||
|
||||
Your code will be autosaved every minute into the Timeline tab of History which shows the most recent 30 items.
|
||||
#### • Editing History
|
||||
|
||||
You can manually save code by clicking the Save icon in the History section. It can also be accessed in the Saved tab. This is stored in the browser storage only.
|
||||
Your code will be autosaved and appear in the `Timeline` tab of the `History` section. Edits are saved every minute and only the last 30 edits are viewable.
|
||||
|
||||
### Saving a Diagram:
|
||||
Alternatively, you can manually save code by clicking on the `Save` icon from the `History` section.
|
||||
|
||||
You may choose any of the methods below, to save it
|
||||
> **Note**
|
||||
> History is stored in the browser storage only.
|
||||
|
||||
**We recommend that you save your diagram code on top of any method you choose, in order to make edits and modifications further down the line.**
|
||||
<br />
|
||||
|
||||
#### • Saving a diagram
|
||||
|
||||
There are multiple ways of saving your diagram from the `Actions` section:
|
||||
|
||||
- export PNG
|
||||
- export SVG
|
||||
- export as Markdown
|
||||
|
||||
|
||||
|
||||
### Editing your diagrams
|
||||
<br />
|
||||
|
||||
Editing is as easy as pasting your **Diagram code**, into the `code` section of the `Live Editor`.
|
||||
#### • Editing your diagrams
|
||||
|
||||
### Loading from Gists
|
||||
To edit your diagram, you can copy paste existing Mermaid diagram code into the `Code` section of the `Live Editor`.
|
||||
|
||||
The Gist you create should have a code.mmd file and optionally a config.json. [Example](https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a)
|
||||
Or:
|
||||
|
||||
To load a gist into the Editor, you can use <https://mermaid.live/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a>
|
||||
- create a new diagram from scratch
|
||||
- use a Sample Diagram from the `Sample Diagrams` section
|
||||
|
||||
and to View, <https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a>
|
||||
<br />
|
||||
|
||||
## 2. Using Mermaid Plugins:
|
||||
#### • Loading from Gists
|
||||
|
||||
You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../ecosystem/integrations-community.md).
|
||||
The Gist you create should have a `code.mmd` file and optionally a `config.json`, similar to this [example](https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a).
|
||||
|
||||
**This is covered in greater detail in the [Usage section](../config/usage.md)**
|
||||
> **Note**
|
||||
> To learn about Gists, visit the GitHub documentation page on [Creating gists](https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists).
|
||||
|
||||
## 3. Calling the JavaScript API
|
||||
Once you have created a Gist, copy paste the Gist URL into the respective field in the `Actions` section and click on the `Load Gist` button.
|
||||
|
||||
This method can be used with any common web server like Apache, IIS, nginx, node express.
|
||||
Here is an example of a Gist being loaded into the Editor:
|
||||
|
||||
You will also need a text editing tool like Notepad++ to generate a .html file. It is then deployed by a web browser (such as Firefox, Chrome, Safari, but not Internet Explorer).
|
||||
<https://mermaid.live/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a>
|
||||
|
||||
And, here is the diagram view from the above example:
|
||||
|
||||
<https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a>
|
||||
|
||||
## 2. Using the Mermaid Chart Editor
|
||||
|
||||
Available at the [Mermaid Chart](https://www.mermaidchart.com/) website.
|
||||
|
||||
Mermaid Chart is a web-based diagram editor that allows you to create and edit diagrams in your browser. It is built by the team behind Mermaid.
|
||||
|
||||
Features include:
|
||||
|
||||
- AI diagramming
|
||||
- Collaboration & multi-user editing
|
||||
- Storage
|
||||
- and more
|
||||
|
||||
To learn more, visit the [Mermaid Chart page](/ecosystem/mermaid-chart.html) in the Ecosystem section of the documentation.
|
||||
|
||||
Or go to the [Mermaid Chart website](https://www.mermaidchart.com/app/sign-up) to sign up for a Free account.
|
||||
|
||||
## 3. Using Mermaid Plugins
|
||||
|
||||
### Mermaid Plugins
|
||||
|
||||
You can generate Mermaid diagrams from within popular applications using plug-ins.
|
||||
|
||||
For a list of Mermaid Plugins and Integrations, visit the [Integrations page](../ecosystem/integrations-community.md).
|
||||
|
||||
### Mermaid Chart Plugins
|
||||
|
||||
Mermaid Chart plugins are available for:
|
||||
|
||||
- [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
|
||||
- [JetBrains IDE](https://docs.mermaidchart.com/plugins/jetbrains-ide)
|
||||
- [Microsoft PowerPoint](https://docs.mermaidchart.com/plugins/microsoft-powerpoint)
|
||||
- [Microsoft Word](https://docs.mermaidchart.com/plugins/microsoft-word)
|
||||
- [Visual Studio Code](https://docs.mermaidchart.com/plugins/visual-studio-code)
|
||||
|
||||
To learn more, visit the [Mermaid Chart Plugins](https://www.mermaidchart.com/plugins) page.
|
||||
|
||||
### Native Mermaid Support
|
||||
|
||||
For apps that support markdown (e.g. [GitHub](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams) and [GitLab](https://handbook.gitlab.com/handbook/tools-and-tips/mermaid/)), you can add Mermaid diagrams by making a `mermaid` code block.
|
||||
|
||||
````markdown
|
||||
The following code-block will be rendered as a Mermaid diagram:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A --> B
|
||||
```
|
||||
````
|
||||
|
||||
## 4. Calling the Mermaid JavaScript API
|
||||
|
||||
This method can be used with any common web server like `Apache`, `IIS`, `Nginx`, and `Node Express`.
|
||||
|
||||
You will also need a text editing tool like `Notepad++` to generate an `html` file. It is then deployed by a web browser, i.e. `Firefox`, `Chrome`, `Safari`.
|
||||
|
||||
> **Note**
|
||||
> Internet Explorer is not supported.
|
||||
|
||||
The API works by pulling rendering instructions from the source `mermaid.js` in order to render diagrams on the page.
|
||||
|
||||
### Requirements for the Mermaid API.
|
||||
### Requirements for the Mermaid API
|
||||
|
||||
When writing the .html file, we give two instructions inside the html code to the web browser:
|
||||
When writing the `html` file, we give two instructions inside the `html code` to the `web browser`:
|
||||
|
||||
a. The mermaid code for the diagram we want to create.
|
||||
a. The Mermaid code for the diagram we want to create.
|
||||
|
||||
b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process.
|
||||
b. The importing of the Mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs`, and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process.
|
||||
|
||||
**a. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
|
||||
#### Examples
|
||||
|
||||
- This is an example of an embedded Mermaid diagram definition inside a `<pre class="mermaid">`:
|
||||
|
||||
```html
|
||||
<body>
|
||||
Here is a mermaid diagram:
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Client] --> B[Load Balancer]
|
||||
B --> C[Server01]
|
||||
graph TD
|
||||
A[Client] --> B[Load Balancer]
|
||||
B --> C[Server01]
|
||||
B --> D[Server02]
|
||||
</pre>
|
||||
</body>
|
||||
```
|
||||
|
||||
**Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<pre>` tags.
|
||||
> **Note**
|
||||
> Every Mermaid chart/graph/diagram definition should have separate `<pre>` tags.
|
||||
|
||||
**b. The import of mermaid and the `mermaid.initialize()` call.**
|
||||
- This is an example of a Mermaid import and the `mermaid.initialize()` call.
|
||||
|
||||
`mermaid.initialize()` call takes all the definitions contained in all the `<pre class="mermaid">` tags that it finds in the html body and renders them into diagrams. Example:
|
||||
> **Note**
|
||||
> A `mermaid.initialize()` call takes all the definitions contained within `<pre class="mermaid">` tags and renders them into diagrams.
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
|
@ -134,8 +230,8 @@ b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.es
|
|||
</body>
|
||||
```
|
||||
|
||||
**Notes**:
|
||||
Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doing the opposite lets you control when it starts looking for `<pre>` tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<pre>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
|
||||
> **Note**
|
||||
> Rendering in Mermaid is initialized by the `mermaid.initialize()` call. However, doing the opposite lets you control when it starts looking for `<pre>` tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<pre>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
|
||||
|
||||
`startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
|
||||
|
||||
|
|
@ -143,9 +239,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doi
|
|||
| ----------- | --------------------------------- | ------- | ----------- |
|
||||
| startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
|
||||
|
||||
### Working Examples
|
||||
|
||||
**Here is a full working example of the mermaidAPI being called through the CDN:**
|
||||
In this example, the `mermaidAPI` is being called through the `CDN`:
|
||||
|
||||
```html
|
||||
<html>
|
||||
|
|
@ -175,8 +269,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doi
|
|||
</html>
|
||||
```
|
||||
|
||||
**Another Option:**
|
||||
In this example mermaid.js is referenced in `src` as a separate JavaScript file, in an example Path.
|
||||
In this example, `mermaid.js` is referenced in `src` as a separate JavaScript file:
|
||||
|
||||
```html
|
||||
<html lang="en">
|
||||
|
|
@ -204,21 +297,30 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
|
|||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
## 5. Adding Mermaid as a dependency
|
||||
|
||||
## 4. Adding Mermaid as a dependency.
|
||||
Below are the steps for adding Mermaid as a dependency:
|
||||
|
||||
1. install node v16, which would have npm
|
||||
1. Install `node v16`
|
||||
|
||||
2. download yarn using npm by entering the command below:
|
||||
npm install -g yarn
|
||||
> **Note**
|
||||
> To learn more about downloading and installing `Node.js` and `npm`, visit the [npm Docs website](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
|
||||
|
||||
3. After yarn installs, enter the following command:
|
||||
yarn add mermaid
|
||||
1. Install `yarn` using `npm` with this command:
|
||||
|
||||
4. To add Mermaid as a Dev Dependency
|
||||
yarn add --dev mermaid
|
||||
`npm install -g yarn`
|
||||
|
||||
**Comments from Knut Sveidqvist, creator of mermaid:**
|
||||
2. After yarn installs, enter this command:
|
||||
|
||||
- In early versions of mermaid, the `<script>` 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 reflect the previous way which still works.
|
||||
`yarn add mermaid`
|
||||
|
||||
3. To add Mermaid as a dev dependency, enter this command:
|
||||
|
||||
`yarn add --dev mermaid`
|
||||
|
||||
## Closing note
|
||||
|
||||
> **Note**
|
||||
> Comments from Knut Sveidqvist, creator of Mermaid:
|
||||
>
|
||||
> - In early versions of Mermaid, the `<script>` 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 reflect the previous way, which still works.
|
||||
|
|
|
|||
|
|
@ -6,10 +6,27 @@
|
|||
|
||||
# Announcements
|
||||
|
||||
Check out our latest blog posts below. See more blog posts [here](blog.md).
|
||||
## 🚀 Mermaid Chart's Visual Editor for Flowcharts
|
||||
|
||||
## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
|
||||
The Mermaid Chart team is excited to introduce a new Visual Editor for flowcharts, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
|
||||
|
||||
14 November 2023 · 5 mins
|
||||
Create flowchart nodes, connect them with edges, update shapes, change colors, and edit labels with just a few clicks that automatically reflect in your diagram’s code for easy customizability.
|
||||
|
||||
Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
|
||||
Read more about it in our latest [BLOG POST](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts) and watch a [DEMO VIDEO](https://www.youtube.com/watch?v=5aja0gijoO0) on our YouTube page.
|
||||
|
||||
## 🎉 Mermaid Chart is running a Holiday promotion
|
||||
|
||||
### Use <span class="text-[#FE3470]">HOLIDAYS2023</span> to get a 14-day free trial and 25% off a Pro subscription
|
||||
|
||||
With a Pro subscription, you get access to:
|
||||
|
||||
- AI functionality
|
||||
- Team collaboration and multi-user editing
|
||||
- Unlimited diagrams and presentations
|
||||
- And more!
|
||||
|
||||
Redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023).
|
||||
|
||||
## 📖 Blog posts
|
||||
|
||||
Visit our [Blog](./blog.md) to see the latest blog posts.
|
||||
|
|
|
|||
|
|
@ -6,6 +6,24 @@
|
|||
|
||||
# Blog
|
||||
|
||||
## [Introducing Mermaid Chart’s JetBrains IDE Extension](https://www.mermaidchart.com/blog/posts/introducing-mermaid-charts-jetbrains-ide-extension/)
|
||||
|
||||
20 December 2023 · 5 mins
|
||||
|
||||
Diagrams are essential for documenting your code.
|
||||
|
||||
## [Mermaid Chart Releases New Visual Editor For Flowcharts](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts/)
|
||||
|
||||
14 December 2023 · 5 mins
|
||||
|
||||
Mermaid Chart introduces a new Visual Editor for flowcharts, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
|
||||
|
||||
## [7 best practices (+ examples) for good developer documentation](https://www.mermaidchart.com/blog/posts/7-best-practices-for-good-documentation/)
|
||||
|
||||
4 December 2023 · 11 min
|
||||
|
||||
Essential strategies for crafting grate developer documentation, with practical examples and insights from leading tech companies.
|
||||
|
||||
## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
|
||||
|
||||
14 November 2023 · 5 mins
|
||||
|
|
|
|||
|
|
@ -11,6 +11,13 @@ Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or
|
|||
> **Warning**
|
||||
> If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
|
||||
|
||||
> **Warning**
|
||||
> If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").
|
||||
>
|
||||
> Typing "A---oB" will create a [circle edge](#circle-edge-example).
|
||||
>
|
||||
> Typing "A---xB" will create a [cross edge](#cross-edge-example).
|
||||
|
||||
### A node (default)
|
||||
|
||||
```mermaid-example
|
||||
|
|
@ -488,23 +495,38 @@ flowchart TB
|
|||
B --> D
|
||||
```
|
||||
|
||||
### New arrow types
|
||||
## New arrow types
|
||||
|
||||
There are new types of arrows supported as per below:
|
||||
There are new types of arrows supported:
|
||||
|
||||
- circle edge
|
||||
- cross edge
|
||||
|
||||
### Circle edge example
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A --o B
|
||||
B --x C
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A --o B
|
||||
B --x C
|
||||
```
|
||||
|
||||
### Multi directional arrows
|
||||
### Cross edge example
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A --x B
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A --x B
|
||||
```
|
||||
|
||||
## Multi directional arrows
|
||||
|
||||
There is the possibility to use multidirectional arrows.
|
||||
|
||||
|
|
|
|||
|
|
@ -131,6 +131,14 @@ sequenceDiagram
|
|||
Bob->>Alice: I agree
|
||||
```
|
||||
|
||||
#### Unfixable actor/participant creation/deletion error
|
||||
|
||||
If an error of the following type occurs when creating or deleting an actor/participant:
|
||||
|
||||
> The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram.
|
||||
|
||||
And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v\<MERMAID_RELEASE_VERSION>+).
|
||||
|
||||
### Grouping / Box
|
||||
|
||||
The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"version": "10.2.4",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@8.12.0",
|
||||
"packageManager": "pnpm@8.14.1",
|
||||
"keywords": [
|
||||
"diagram",
|
||||
"markdown",
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
"dagre-d3-es": "7.0.10",
|
||||
"dayjs": "^1.11.7",
|
||||
"dompurify": "^3.0.5",
|
||||
"elkjs": "^0.8.2",
|
||||
"elkjs": "^0.9.0",
|
||||
"khroma": "^2.0.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mdast-util-from-markdown": "^1.3.0",
|
||||
|
|
|
|||
|
|
@ -2,57 +2,60 @@ import { getConfig } from '../../diagram-api/diagramAPI.js';
|
|||
import { log } from '../../logger.js';
|
||||
import { sanitizeText } from '../common/common.js';
|
||||
import {
|
||||
setAccTitle,
|
||||
getAccTitle,
|
||||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear as commonClear,
|
||||
getAccDescription,
|
||||
getAccTitle,
|
||||
getDiagramTitle,
|
||||
setAccDescription,
|
||||
setAccTitle,
|
||||
setDiagramTitle,
|
||||
} from '../common/commonDb.js';
|
||||
import { ImperativeState } from '../../utils/imperativeState.js';
|
||||
|
||||
let prevActor = undefined;
|
||||
let actors = {};
|
||||
let createdActors = {};
|
||||
let destroyedActors = {};
|
||||
let boxes = [];
|
||||
let messages = [];
|
||||
const notes = [];
|
||||
let sequenceNumbersEnabled = false;
|
||||
let wrapEnabled;
|
||||
let currentBox = undefined;
|
||||
let lastCreated = undefined;
|
||||
let lastDestroyed = undefined;
|
||||
const state = new ImperativeState(() => ({
|
||||
prevActor: undefined,
|
||||
actors: {},
|
||||
createdActors: {},
|
||||
destroyedActors: {},
|
||||
boxes: [],
|
||||
messages: [],
|
||||
notes: [],
|
||||
sequenceNumbersEnabled: false,
|
||||
wrapEnabled: undefined,
|
||||
currentBox: undefined,
|
||||
lastCreated: undefined,
|
||||
lastDestroyed: undefined,
|
||||
}));
|
||||
|
||||
export const addBox = function (data) {
|
||||
boxes.push({
|
||||
state.records.boxes.push({
|
||||
name: data.text,
|
||||
wrap: (data.wrap === undefined && autoWrap()) || !!data.wrap,
|
||||
fill: data.color,
|
||||
actorKeys: [],
|
||||
});
|
||||
currentBox = boxes.slice(-1)[0];
|
||||
state.records.currentBox = state.records.boxes.slice(-1)[0];
|
||||
};
|
||||
|
||||
export const addActor = function (id, name, description, type) {
|
||||
let assignedBox = currentBox;
|
||||
const old = actors[id];
|
||||
let assignedBox = state.records.currentBox;
|
||||
const old = state.records.actors[id];
|
||||
if (old) {
|
||||
// If already set and trying to set to a new one throw error
|
||||
if (currentBox && old.box && currentBox !== old.box) {
|
||||
if (state.records.currentBox && old.box && state.records.currentBox !== old.box) {
|
||||
throw new Error(
|
||||
'A same participant should only be defined in one Box: ' +
|
||||
old.name +
|
||||
" can't be in '" +
|
||||
old.box.name +
|
||||
"' and in '" +
|
||||
currentBox.name +
|
||||
state.records.currentBox.name +
|
||||
"' at the same time."
|
||||
);
|
||||
}
|
||||
|
||||
// Don't change the box if already
|
||||
assignedBox = old.box ? old.box : currentBox;
|
||||
assignedBox = old.box ? old.box : state.records.currentBox;
|
||||
old.box = assignedBox;
|
||||
|
||||
// Don't allow description nulling
|
||||
|
|
@ -69,36 +72,42 @@ export const addActor = function (id, name, description, type) {
|
|||
description = { text: name, wrap: null, type };
|
||||
}
|
||||
|
||||
actors[id] = {
|
||||
state.records.actors[id] = {
|
||||
box: assignedBox,
|
||||
name: name,
|
||||
description: description.text,
|
||||
wrap: (description.wrap === undefined && autoWrap()) || !!description.wrap,
|
||||
prevActor: prevActor,
|
||||
prevActor: state.records.prevActor,
|
||||
links: {},
|
||||
properties: {},
|
||||
actorCnt: null,
|
||||
rectData: null,
|
||||
type: type || 'participant',
|
||||
};
|
||||
if (prevActor && actors[prevActor]) {
|
||||
actors[prevActor].nextActor = id;
|
||||
if (state.records.prevActor && state.records.actors[state.records.prevActor]) {
|
||||
state.records.actors[state.records.prevActor].nextActor = id;
|
||||
}
|
||||
|
||||
if (currentBox) {
|
||||
currentBox.actorKeys.push(id);
|
||||
if (state.records.currentBox) {
|
||||
state.records.currentBox.actorKeys.push(id);
|
||||
}
|
||||
prevActor = id;
|
||||
state.records.prevActor = id;
|
||||
};
|
||||
|
||||
const activationCount = (part) => {
|
||||
let i;
|
||||
let count = 0;
|
||||
for (i = 0; i < messages.length; i++) {
|
||||
if (messages[i].type === LINETYPE.ACTIVE_START && messages[i].from.actor === part) {
|
||||
for (i = 0; i < state.records.messages.length; i++) {
|
||||
if (
|
||||
state.records.messages[i].type === LINETYPE.ACTIVE_START &&
|
||||
state.records.messages[i].from.actor === part
|
||||
) {
|
||||
count++;
|
||||
}
|
||||
if (messages[i].type === LINETYPE.ACTIVE_END && messages[i].from.actor === part) {
|
||||
if (
|
||||
state.records.messages[i].type === LINETYPE.ACTIVE_END &&
|
||||
state.records.messages[i].from.actor === part
|
||||
) {
|
||||
count--;
|
||||
}
|
||||
}
|
||||
|
|
@ -106,7 +115,7 @@ const activationCount = (part) => {
|
|||
};
|
||||
|
||||
export const addMessage = function (idFrom, idTo, message, answer) {
|
||||
messages.push({
|
||||
state.records.messages.push({
|
||||
from: idFrom,
|
||||
to: idTo,
|
||||
message: message.text,
|
||||
|
|
@ -137,7 +146,7 @@ export const addSignal = function (
|
|||
throw error;
|
||||
}
|
||||
}
|
||||
messages.push({
|
||||
state.records.messages.push({
|
||||
from: idFrom,
|
||||
to: idTo,
|
||||
message: message.text,
|
||||
|
|
@ -149,63 +158,58 @@ export const addSignal = function (
|
|||
};
|
||||
|
||||
export const hasAtLeastOneBox = function () {
|
||||
return boxes.length > 0;
|
||||
return state.records.boxes.length > 0;
|
||||
};
|
||||
|
||||
export const hasAtLeastOneBoxWithTitle = function () {
|
||||
return boxes.some((b) => b.name);
|
||||
return state.records.boxes.some((b) => b.name);
|
||||
};
|
||||
|
||||
export const getMessages = function () {
|
||||
return messages;
|
||||
return state.records.messages;
|
||||
};
|
||||
|
||||
export const getBoxes = function () {
|
||||
return boxes;
|
||||
return state.records.boxes;
|
||||
};
|
||||
export const getActors = function () {
|
||||
return actors;
|
||||
return state.records.actors;
|
||||
};
|
||||
export const getCreatedActors = function () {
|
||||
return createdActors;
|
||||
return state.records.createdActors;
|
||||
};
|
||||
export const getDestroyedActors = function () {
|
||||
return destroyedActors;
|
||||
return state.records.destroyedActors;
|
||||
};
|
||||
export const getActor = function (id) {
|
||||
return actors[id];
|
||||
return state.records.actors[id];
|
||||
};
|
||||
export const getActorKeys = function () {
|
||||
return Object.keys(actors);
|
||||
return Object.keys(state.records.actors);
|
||||
};
|
||||
export const enableSequenceNumbers = function () {
|
||||
sequenceNumbersEnabled = true;
|
||||
state.records.sequenceNumbersEnabled = true;
|
||||
};
|
||||
export const disableSequenceNumbers = function () {
|
||||
sequenceNumbersEnabled = false;
|
||||
state.records.sequenceNumbersEnabled = false;
|
||||
};
|
||||
export const showSequenceNumbers = () => sequenceNumbersEnabled;
|
||||
export const showSequenceNumbers = () => state.records.sequenceNumbersEnabled;
|
||||
|
||||
export const setWrap = function (wrapSetting) {
|
||||
wrapEnabled = wrapSetting;
|
||||
state.records.wrapEnabled = wrapSetting;
|
||||
};
|
||||
|
||||
export const autoWrap = () => {
|
||||
// if setWrap has been called, use that value, otherwise use the value from the config
|
||||
// TODO: refactor, always use the config value let setWrap update the config value
|
||||
if (wrapEnabled !== undefined) {
|
||||
return wrapEnabled;
|
||||
if (state.records.wrapEnabled !== undefined) {
|
||||
return state.records.wrapEnabled;
|
||||
}
|
||||
return getConfig().sequence.wrap;
|
||||
};
|
||||
|
||||
export const clear = function () {
|
||||
actors = {};
|
||||
createdActors = {};
|
||||
destroyedActors = {};
|
||||
boxes = [];
|
||||
messages = [];
|
||||
sequenceNumbersEnabled = false;
|
||||
state.reset();
|
||||
commonClear();
|
||||
};
|
||||
|
||||
|
|
@ -247,7 +251,7 @@ export const parseBoxData = function (str) {
|
|||
}
|
||||
}
|
||||
|
||||
const boxData = {
|
||||
return {
|
||||
color: color,
|
||||
text:
|
||||
title !== undefined
|
||||
|
|
@ -262,7 +266,6 @@ export const parseBoxData = function (str) {
|
|||
: undefined
|
||||
: undefined,
|
||||
};
|
||||
return boxData;
|
||||
};
|
||||
|
||||
export const LINETYPE = {
|
||||
|
|
@ -321,8 +324,8 @@ export const addNote = function (actor, placement, message) {
|
|||
// eslint-disable-next-line unicorn/prefer-spread
|
||||
const actors = [].concat(actor, actor);
|
||||
|
||||
notes.push(note);
|
||||
messages.push({
|
||||
state.records.notes.push(note);
|
||||
state.records.messages.push({
|
||||
from: actors[0],
|
||||
to: actors[1],
|
||||
message: message.text,
|
||||
|
|
@ -414,7 +417,7 @@ function insertProperties(actor, properties) {
|
|||
*
|
||||
*/
|
||||
function boxEnd() {
|
||||
currentBox = undefined;
|
||||
state.records.currentBox = undefined;
|
||||
}
|
||||
|
||||
export const addDetails = function (actorId, text) {
|
||||
|
|
@ -468,7 +471,7 @@ export const apply = function (param) {
|
|||
} else {
|
||||
switch (param.type) {
|
||||
case 'sequenceIndex':
|
||||
messages.push({
|
||||
state.records.messages.push({
|
||||
from: undefined,
|
||||
to: undefined,
|
||||
message: {
|
||||
|
|
@ -484,18 +487,18 @@ export const apply = function (param) {
|
|||
addActor(param.actor, param.actor, param.description, param.draw);
|
||||
break;
|
||||
case 'createParticipant':
|
||||
if (actors[param.actor]) {
|
||||
if (state.records.actors[param.actor]) {
|
||||
throw new Error(
|
||||
"It is not possible to have actors with the same id, even if one is destroyed before the next is created. Use 'AS' aliases to simulate the behavior"
|
||||
);
|
||||
}
|
||||
lastCreated = param.actor;
|
||||
state.records.lastCreated = param.actor;
|
||||
addActor(param.actor, param.actor, param.description, param.draw);
|
||||
createdActors[param.actor] = messages.length;
|
||||
state.records.createdActors[param.actor] = state.records.messages.length;
|
||||
break;
|
||||
case 'destroyParticipant':
|
||||
lastDestroyed = param.actor;
|
||||
destroyedActors[param.actor] = messages.length;
|
||||
state.records.lastDestroyed = param.actor;
|
||||
state.records.destroyedActors[param.actor] = state.records.messages.length;
|
||||
break;
|
||||
case 'activeStart':
|
||||
addSignal(param.actor, undefined, undefined, param.signalType);
|
||||
|
|
@ -519,25 +522,28 @@ export const apply = function (param) {
|
|||
addDetails(param.actor, param.text);
|
||||
break;
|
||||
case 'addMessage':
|
||||
if (lastCreated) {
|
||||
if (param.to !== lastCreated) {
|
||||
if (state.records.lastCreated) {
|
||||
if (param.to !== state.records.lastCreated) {
|
||||
throw new Error(
|
||||
'The created participant ' +
|
||||
lastCreated +
|
||||
state.records.lastCreated +
|
||||
' does not have an associated creating message after its declaration. Please check the sequence diagram.'
|
||||
);
|
||||
} else {
|
||||
lastCreated = undefined;
|
||||
state.records.lastCreated = undefined;
|
||||
}
|
||||
} else if (lastDestroyed) {
|
||||
if (param.to !== lastDestroyed && param.from !== lastDestroyed) {
|
||||
} else if (state.records.lastDestroyed) {
|
||||
if (
|
||||
param.to !== state.records.lastDestroyed &&
|
||||
param.from !== state.records.lastDestroyed
|
||||
) {
|
||||
throw new Error(
|
||||
'The destroyed participant ' +
|
||||
lastDestroyed +
|
||||
state.records.lastDestroyed +
|
||||
' does not have an associated destroying message after its declaration. Please check the sequence diagram.'
|
||||
);
|
||||
} else {
|
||||
lastDestroyed = undefined;
|
||||
state.records.lastDestroyed = undefined;
|
||||
}
|
||||
}
|
||||
addSignal(param.from, param.to, param.msg, param.signalType, param.activate);
|
||||
|
|
|
|||
|
|
@ -2,13 +2,17 @@
|
|||
<div
|
||||
class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white"
|
||||
>
|
||||
<a
|
||||
href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart"
|
||||
target="_blank"
|
||||
>
|
||||
We've made our Product Hunt debut!
|
||||
<span class="underline">Show us some love and help spread the word</span>, plus receive 25%
|
||||
off on annual Pro subscription!</a
|
||||
>
|
||||
<p class="flex-grow text-center tracking-wide text-text">
|
||||
<a
|
||||
href="https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023"
|
||||
target="_blank"
|
||||
class="unstyled text-white plausible-event-name=bannerClick"
|
||||
>
|
||||
Get AI, team collaboration, storage, and more with
|
||||
<span class="font-bold underline"
|
||||
>Mermaid Chart Pro. Start free trial today & get 25% off.</span
|
||||
>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default defineConfig({
|
|||
defer: 'true',
|
||||
'data-domain': 'mermaid.js.org',
|
||||
// All tracked stats are public and available at https://p.mermaid.live/mermaid.js.org
|
||||
src: 'https://p.mermaid.live/js/script.js',
|
||||
src: 'https://p.mermaid.live/js/script.tagged-events.outbound-links.js',
|
||||
},
|
||||
],
|
||||
],
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ import Mermaid from './Mermaid.vue';
|
|||
import Contributors from '../components/Contributors.vue';
|
||||
// @ts-ignore
|
||||
import HomePage from '../components/HomePage.vue';
|
||||
// // @ts-ignore
|
||||
// import TopBar from '../components/TopBar.vue';
|
||||
// @ts-ignore
|
||||
import TopBar from '../components/TopBar.vue';
|
||||
|
||||
import { getRedirect } from './redirect.js';
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ export default {
|
|||
Layout() {
|
||||
return h(Theme.Layout, null, {
|
||||
// Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar.
|
||||
// 'home-hero-before': () => h(TopBar),
|
||||
'home-hero-before': () => h(TopBar),
|
||||
'home-features-after': () => h(HomePage),
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,18 +4,28 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
|
|||
|
||||
# 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
|
||||
|
||||
- [GitHub](https://github.com) ✅
|
||||
- [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
|
||||
- [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
|
||||
|
|
@ -59,6 +69,7 @@ Below are a list of community plugins and integrations created with Mermaid.
|
|||
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
|
||||
- [mermerd](https://github.com/KarnerTh/mermerd)
|
||||
- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
|
||||
- Codemia [a tool to practice system design problems](https://codemia.io)
|
||||
|
||||
### CRM/ERP
|
||||
|
||||
|
|
@ -141,7 +152,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)
|
||||
- Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
|
||||
- [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
|
||||
|
|
@ -179,6 +189,7 @@ Communication tools and platforms
|
|||
### Document Generation
|
||||
|
||||
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
|
||||
- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/) ✅
|
||||
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
|
||||
- [Sphinx](https://www.sphinx-doc.org/en/master/)
|
||||
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
|
||||
|
|
@ -195,13 +206,14 @@ Communication tools and platforms
|
|||
- [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
|
||||
- [Type Doc](https://typedoc.org/)
|
||||
- [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
|
||||
- [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) ✅
|
||||
- [Codedoc](https://codedoc.cc/)
|
||||
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
|
||||
- [mdbook](https://rust-lang.github.io/mdBook/index.html)
|
||||
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
|
||||
- [Quarto](https://quarto.org/)
|
||||
- [Typora](https://typora.io/) ([native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
|
||||
- [Typora](https://typora.io/) ✅
|
||||
- [See docs](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid)
|
||||
|
||||
### Browser Extensions
|
||||
|
||||
|
|
@ -233,6 +245,6 @@ 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)
|
||||
- [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)
|
||||
|
|
|
|||
|
|
@ -20,9 +20,16 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
|
|||
|
||||
- **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.
|
||||
|
||||
|
|
@ -38,7 +45,7 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
|
|||
|
||||
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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +1,45 @@
|
|||
# A Mermaid User-Guide for Beginners
|
||||
---
|
||||
outline: 'deep' # shows all h3 headings in outline in Vitepress
|
||||
---
|
||||
|
||||
Mermaid is composed of three parts: Deployment, Syntax and Configuration.
|
||||
# Mermaid User Guide
|
||||
|
||||
This section talks about the different ways to deploy Mermaid. Learning the [Syntax](syntax-reference.md) would be of great help to the beginner.
|
||||
## Mermaid is composed of three parts
|
||||
|
||||
> Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
|
||||
1. Deployment
|
||||
2. Syntax
|
||||
3. Configuration
|
||||
|
||||
**Absolute beginners are advised to view the Video [Tutorials](../config/Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.**
|
||||
This section talks about the different ways to **deploy** Mermaid.
|
||||
|
||||
## Four ways of using mermaid:
|
||||
If you are a beginner:
|
||||
|
||||
1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
|
||||
2. Using [mermaid plugins](../ecosystem/integrations-community.md) with programs you are familiar with.
|
||||
3. Calling the Mermaid JavaScript API.
|
||||
4. Deploying Mermaid as a dependency.
|
||||
- Check out the [Diagram Syntax](syntax-reference.md) page
|
||||
- Check out the [Tutorials](../config/Tutorials.md) page
|
||||
|
||||
**Note: It is our recommendation that you review all approaches, and choose the one that is best for your project.**
|
||||
## Ways to use Mermaid
|
||||
|
||||
> More in depth information can be found at [Usage](../config/usage.md).
|
||||
1. [Using the Mermaid Live Editor](getting-started.md#_1-using-the-mermaid-live-editor)
|
||||
2. [Using the Mermaid Chart Editor](getting-started.md#_2-using-the-mermaid-chart-editor)
|
||||
3. [Using Mermaid Plugins and Integrations](getting-started.md#_3-using-mermaid-plugins)
|
||||
4. [Calling the Mermaid JavaScript API](getting-started.md#_4-calling-the-mermaid-javascript-api)
|
||||
5. [Adding Mermaid as a dependency](getting-started.md#_5-adding-mermaid-as-a-dependency)
|
||||
|
||||
## 1. Using the Live Editor
|
||||
To learn more, visit the [Usage](../config/usage.md) page.
|
||||
|
||||
Available at [mermaid.live](https://mermaid.live)
|
||||
## 1. Using the Mermaid Live Editor
|
||||
|
||||
Available at the [Mermaid Live Editor](https://mermaid.live) website.
|
||||
|
||||
### Features
|
||||
|
||||
<br />
|
||||
|
||||
#### • Diagram Code
|
||||
|
||||
In the `Code` panel, write or edit Mermaid code, and instantly `Preview` the rendered result in the diagram panel.
|
||||
|
||||
Here is an example of Mermaid code and its rendered result:
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
|
|
@ -34,79 +52,166 @@ graph TD
|
|||
F --> B
|
||||
```
|
||||
|
||||
In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
|
||||
<br />
|
||||
|
||||
The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](../config/advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README.md) page.
|
||||
#### • Configurations
|
||||
|
||||
Configuration options are available in the `Configuration` panel. The options are applied to the diagram in the `Preview` panel.
|
||||
|
||||
For learn more, visit the [Configuration Reference](../config/setup/README.md) page
|
||||
|
||||
|
||||
|
||||
### Editing History
|
||||
<br />
|
||||
|
||||
Your code will be autosaved every minute into the Timeline tab of History which shows the most recent 30 items.
|
||||
#### • Editing History
|
||||
|
||||
You can manually save code by clicking the Save icon in the History section. It can also be accessed in the Saved tab. This is stored in the browser storage only.
|
||||
Your code will be autosaved and appear in the `Timeline` tab of the `History` section. Edits are saved every minute and only the last 30 edits are viewable.
|
||||
|
||||
### Saving a Diagram:
|
||||
Alternatively, you can manually save code by clicking on the `Save` icon from the `History` section.
|
||||
|
||||
You may choose any of the methods below, to save it
|
||||
```note
|
||||
History is stored in the browser storage only.
|
||||
```
|
||||
|
||||
**We recommend that you save your diagram code on top of any method you choose, in order to make edits and modifications further down the line.**
|
||||
<br />
|
||||
|
||||
#### • Saving a diagram
|
||||
|
||||
There are multiple ways of saving your diagram from the `Actions` section:
|
||||
|
||||
- export PNG
|
||||
- export SVG
|
||||
- export as Markdown
|
||||
|
||||
|
||||
|
||||
### Editing your diagrams
|
||||
<br />
|
||||
|
||||
Editing is as easy as pasting your **Diagram code**, into the `code` section of the `Live Editor`.
|
||||
#### • Editing your diagrams
|
||||
|
||||
### Loading from Gists
|
||||
To edit your diagram, you can copy paste existing Mermaid diagram code into the `Code` section of the `Live Editor`.
|
||||
|
||||
The Gist you create should have a code.mmd file and optionally a config.json. [Example](https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a)
|
||||
Or:
|
||||
|
||||
To load a gist into the Editor, you can use https://mermaid.live/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a
|
||||
- create a new diagram from scratch
|
||||
- use a Sample Diagram from the `Sample Diagrams` section
|
||||
|
||||
and to View, https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a
|
||||
<br />
|
||||
|
||||
## 2. Using Mermaid Plugins:
|
||||
#### • Loading from Gists
|
||||
|
||||
You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../ecosystem/integrations-community.md).
|
||||
The Gist you create should have a `code.mmd` file and optionally a `config.json`, similar to this [example](https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a).
|
||||
|
||||
**This is covered in greater detail in the [Usage section](../config/usage.md)**
|
||||
```note
|
||||
To learn about Gists, visit the GitHub documentation page on [Creating gists](https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists).
|
||||
```
|
||||
|
||||
## 3. Calling the JavaScript API
|
||||
Once you have created a Gist, copy paste the Gist URL into the respective field in the `Actions` section and click on the `Load Gist` button.
|
||||
|
||||
This method can be used with any common web server like Apache, IIS, nginx, node express.
|
||||
Here is an example of a Gist being loaded into the Editor:
|
||||
|
||||
You will also need a text editing tool like Notepad++ to generate a .html file. It is then deployed by a web browser (such as Firefox, Chrome, Safari, but not Internet Explorer).
|
||||
<https://mermaid.live/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a>
|
||||
|
||||
And, here is the diagram view from the above example:
|
||||
|
||||
<https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a>
|
||||
|
||||
## 2. Using the Mermaid Chart Editor
|
||||
|
||||
Available at the [Mermaid Chart](https://www.mermaidchart.com/) website.
|
||||
|
||||
Mermaid Chart is a web-based diagram editor that allows you to create and edit diagrams in your browser. It is built by the team behind Mermaid.
|
||||
|
||||
Features include:
|
||||
|
||||
- AI diagramming
|
||||
- Collaboration & multi-user editing
|
||||
- Storage
|
||||
- and more
|
||||
|
||||
To learn more, visit the [Mermaid Chart page](/ecosystem/mermaid-chart.html) in the Ecosystem section of the documentation.
|
||||
|
||||
Or go to the [Mermaid Chart website](https://www.mermaidchart.com/app/sign-up) to sign up for a Free account.
|
||||
|
||||
## 3. Using Mermaid Plugins
|
||||
|
||||
### Mermaid Plugins
|
||||
|
||||
You can generate Mermaid diagrams from within popular applications using plug-ins.
|
||||
|
||||
For a list of Mermaid Plugins and Integrations, visit the [Integrations page](../ecosystem/integrations-community.md).
|
||||
|
||||
### Mermaid Chart Plugins
|
||||
|
||||
Mermaid Chart plugins are available for:
|
||||
|
||||
- [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
|
||||
- [JetBrains IDE](https://docs.mermaidchart.com/plugins/jetbrains-ide)
|
||||
- [Microsoft PowerPoint](https://docs.mermaidchart.com/plugins/microsoft-powerpoint)
|
||||
- [Microsoft Word](https://docs.mermaidchart.com/plugins/microsoft-word)
|
||||
- [Visual Studio Code](https://docs.mermaidchart.com/plugins/visual-studio-code)
|
||||
|
||||
To learn more, visit the [Mermaid Chart Plugins](https://www.mermaidchart.com/plugins) page.
|
||||
|
||||
### Native Mermaid Support
|
||||
|
||||
For apps that support markdown (e.g. [GitHub](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams) and [GitLab](https://handbook.gitlab.com/handbook/tools-and-tips/mermaid/)), you can add Mermaid diagrams by making a `mermaid` code block.
|
||||
|
||||
````markdown
|
||||
The following code-block will be rendered as a Mermaid diagram:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A --> B
|
||||
```
|
||||
````
|
||||
|
||||
## 4. Calling the Mermaid JavaScript API
|
||||
|
||||
This method can be used with any common web server like `Apache`, `IIS`, `Nginx`, and `Node Express`.
|
||||
|
||||
You will also need a text editing tool like `Notepad++` to generate an `html` file. It is then deployed by a web browser, i.e. `Firefox`, `Chrome`, `Safari`.
|
||||
|
||||
```note
|
||||
Internet Explorer is not supported.
|
||||
```
|
||||
|
||||
The API works by pulling rendering instructions from the source `mermaid.js` in order to render diagrams on the page.
|
||||
|
||||
### Requirements for the Mermaid API.
|
||||
### Requirements for the Mermaid API
|
||||
|
||||
When writing the .html file, we give two instructions inside the html code to the web browser:
|
||||
When writing the `html` file, we give two instructions inside the `html code` to the `web browser`:
|
||||
|
||||
a. The mermaid code for the diagram we want to create.
|
||||
a. The Mermaid code for the diagram we want to create.
|
||||
|
||||
b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process.
|
||||
b. The importing of the Mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs`, and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process.
|
||||
|
||||
**a. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
|
||||
#### Examples
|
||||
|
||||
- This is an example of an embedded Mermaid diagram definition inside a `<pre class="mermaid">`:
|
||||
|
||||
```html
|
||||
<body>
|
||||
Here is a mermaid diagram:
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Client] --> B[Load Balancer]
|
||||
B --> C[Server01]
|
||||
graph TD
|
||||
A[Client] --> B[Load Balancer]
|
||||
B --> C[Server01]
|
||||
B --> D[Server02]
|
||||
</pre>
|
||||
</body>
|
||||
```
|
||||
|
||||
**Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<pre>` tags.
|
||||
```note
|
||||
Every Mermaid chart/graph/diagram definition should have separate `<pre>` tags.
|
||||
```
|
||||
|
||||
**b. The import of mermaid and the `mermaid.initialize()` call.**
|
||||
- This is an example of a Mermaid import and the `mermaid.initialize()` call.
|
||||
|
||||
`mermaid.initialize()` call takes all the definitions contained in all the `<pre class="mermaid">` tags that it finds in the html body and renders them into diagrams. Example:
|
||||
```note
|
||||
A `mermaid.initialize()` call takes all the definitions contained within `<pre class="mermaid">` tags and renders them into diagrams.
|
||||
```
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
|
@ -117,8 +222,9 @@ b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.es
|
|||
</body>
|
||||
```
|
||||
|
||||
**Notes**:
|
||||
Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doing the opposite lets you control when it starts looking for `<pre>` tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<pre>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
|
||||
```note
|
||||
Rendering in Mermaid is initialized by the `mermaid.initialize()` call. However, doing the opposite lets you control when it starts looking for `<pre>` tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<pre>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
|
||||
```
|
||||
|
||||
`startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
|
||||
|
||||
|
|
@ -126,9 +232,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doi
|
|||
| ----------- | --------------------------------- | ------- | ----------- |
|
||||
| startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
|
||||
|
||||
### Working Examples
|
||||
|
||||
**Here is a full working example of the mermaidAPI being called through the CDN:**
|
||||
In this example, the `mermaidAPI` is being called through the `CDN`:
|
||||
|
||||
```html
|
||||
<html>
|
||||
|
|
@ -158,8 +262,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doi
|
|||
</html>
|
||||
```
|
||||
|
||||
**Another Option:**
|
||||
In this example mermaid.js is referenced in `src` as a separate JavaScript file, in an example Path.
|
||||
In this example, `mermaid.js` is referenced in `src` as a separate JavaScript file:
|
||||
|
||||
```html
|
||||
<html lang="en">
|
||||
|
|
@ -187,21 +290,32 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
|
|||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
## 5. Adding Mermaid as a dependency
|
||||
|
||||
## 4. Adding Mermaid as a dependency.
|
||||
Below are the steps for adding Mermaid as a dependency:
|
||||
|
||||
1. install node v16, which would have npm
|
||||
1. Install `node v16`
|
||||
|
||||
2. download yarn using npm by entering the command below:
|
||||
npm install -g yarn
|
||||
```note
|
||||
To learn more about downloading and installing `Node.js` and `npm`, visit the [npm Docs website](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
|
||||
```
|
||||
|
||||
3. After yarn installs, enter the following command:
|
||||
yarn add mermaid
|
||||
1. Install `yarn` using `npm` with this command:
|
||||
|
||||
4. To add Mermaid as a Dev Dependency
|
||||
yarn add --dev mermaid
|
||||
`npm install -g yarn`
|
||||
|
||||
**Comments from Knut Sveidqvist, creator of mermaid:**
|
||||
1. After yarn installs, enter this command:
|
||||
|
||||
- In early versions of mermaid, the `<script>` 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 reflect the previous way which still works.
|
||||
`yarn add mermaid`
|
||||
|
||||
1. To add Mermaid as a dev dependency, enter this command:
|
||||
|
||||
`yarn add --dev mermaid`
|
||||
|
||||
## Closing note
|
||||
|
||||
```note
|
||||
Comments from Knut Sveidqvist, creator of Mermaid:
|
||||
|
||||
- In early versions of Mermaid, the `<script>` 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 reflect the previous way, which still works.
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,9 +1,30 @@
|
|||
---
|
||||
outline: 'deep' # shows all h3 headings in outline in Vitepress
|
||||
---
|
||||
|
||||
# Announcements
|
||||
|
||||
Check out our latest blog posts below. See more blog posts [here](blog.md).
|
||||
## 🚀 Mermaid Chart's Visual Editor for Flowcharts
|
||||
|
||||
## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
|
||||
The Mermaid Chart team is excited to introduce a new Visual Editor for flowcharts, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
|
||||
|
||||
14 November 2023 · 5 mins
|
||||
Create flowchart nodes, connect them with edges, update shapes, change colors, and edit labels with just a few clicks that automatically reflect in your diagram’s code for easy customizability.
|
||||
|
||||
Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
|
||||
Read more about it in our latest [BLOG POST](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts) and watch a [DEMO VIDEO](https://www.youtube.com/watch?v=5aja0gijoO0) on our YouTube page.
|
||||
|
||||
## 🎉 Mermaid Chart is running a Holiday promotion
|
||||
|
||||
### Use <span class="text-[#FE3470]">HOLIDAYS2023</span> to get a 14-day free trial and 25% off a Pro subscription
|
||||
|
||||
With a Pro subscription, you get access to:
|
||||
|
||||
- AI functionality
|
||||
- Team collaboration and multi-user editing
|
||||
- Unlimited diagrams and presentations
|
||||
- And more!
|
||||
|
||||
Redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023).
|
||||
|
||||
## 📖 Blog posts
|
||||
|
||||
Visit our [Blog](./blog.md) to see the latest blog posts.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,23 @@
|
|||
# Blog
|
||||
|
||||
## [Introducing Mermaid Chart’s JetBrains IDE Extension](https://www.mermaidchart.com/blog/posts/introducing-mermaid-charts-jetbrains-ide-extension/)
|
||||
|
||||
20 December 2023 · 5 mins
|
||||
|
||||
Diagrams are essential for documenting your code.
|
||||
|
||||
## [Mermaid Chart Releases New Visual Editor For Flowcharts](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts/)
|
||||
|
||||
14 December 2023 · 5 mins
|
||||
|
||||
Mermaid Chart introduces a new Visual Editor for flowcharts, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
|
||||
|
||||
## [7 best practices (+ examples) for good developer documentation](https://www.mermaidchart.com/blog/posts/7-best-practices-for-good-documentation/)
|
||||
|
||||
4 December 2023 · 11 min
|
||||
|
||||
Essential strategies for crafting grate developer documentation, with practical examples and insights from leading tech companies.
|
||||
|
||||
## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
|
||||
|
||||
14 November 2023 · 5 mins
|
||||
|
|
|
|||
|
|
@ -11,6 +11,14 @@ Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or
|
|||
If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
|
||||
```
|
||||
|
||||
```warning
|
||||
If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").
|
||||
|
||||
Typing "A---oB" will create a [circle edge](#circle-edge-example).
|
||||
|
||||
Typing "A---xB" will create a [cross edge](#cross-edge-example).
|
||||
```
|
||||
|
||||
### A node (default)
|
||||
|
||||
```mermaid-example
|
||||
|
|
@ -306,17 +314,28 @@ flowchart TB
|
|||
B --> D
|
||||
```
|
||||
|
||||
### New arrow types
|
||||
## New arrow types
|
||||
|
||||
There are new types of arrows supported as per below:
|
||||
There are new types of arrows supported:
|
||||
|
||||
- circle edge
|
||||
- cross edge
|
||||
|
||||
### Circle edge example
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A --o B
|
||||
B --x C
|
||||
```
|
||||
|
||||
### Multi directional arrows
|
||||
### Cross edge example
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A --x B
|
||||
```
|
||||
|
||||
## Multi directional arrows
|
||||
|
||||
There is the possibility to use multidirectional arrows.
|
||||
|
||||
|
|
|
|||
|
|
@ -83,6 +83,14 @@ sequenceDiagram
|
|||
Bob->>Alice: I agree
|
||||
```
|
||||
|
||||
#### Unfixable actor/participant creation/deletion error
|
||||
|
||||
If an error of the following type occurs when creating or deleting an actor/participant:
|
||||
|
||||
> The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram.
|
||||
|
||||
And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v<MERMAID_RELEASE_VERSION>+).
|
||||
|
||||
### Grouping / Box
|
||||
|
||||
The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
import { ImperativeState } from './imperativeState.js';
|
||||
|
||||
describe('createImperativeState', () => {
|
||||
it('should create state with values from initializer', () => {
|
||||
const baz = {
|
||||
flag: false,
|
||||
};
|
||||
|
||||
const state = new ImperativeState(() => ({
|
||||
foo: undefined as number | undefined,
|
||||
bar: [] as string[],
|
||||
baz,
|
||||
}));
|
||||
|
||||
expect(state.records.foo).toBeUndefined();
|
||||
expect(state.records.bar).toEqual([]);
|
||||
expect(state.records.baz).toBe(baz);
|
||||
});
|
||||
|
||||
it('should update records', () => {
|
||||
const state = new ImperativeState(() => ({
|
||||
foo: undefined as number | undefined,
|
||||
bar: [] as string[],
|
||||
baz: {
|
||||
flag: false,
|
||||
},
|
||||
}));
|
||||
|
||||
state.records.foo = 5;
|
||||
state.records.bar = ['hello'];
|
||||
state.records.baz.flag = true;
|
||||
|
||||
expect(state.records.foo).toEqual(5);
|
||||
expect(state.records.bar).toEqual(['hello']);
|
||||
expect(state.records.baz).toEqual({
|
||||
flag: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('should reset records', () => {
|
||||
const state = new ImperativeState(() => ({
|
||||
foo: undefined as number | undefined,
|
||||
bar: [] as string[],
|
||||
baz: {
|
||||
flag: false,
|
||||
},
|
||||
}));
|
||||
|
||||
state.records.foo = 5;
|
||||
state.records.bar = ['hello'];
|
||||
state.records.baz.flag = true;
|
||||
state.reset();
|
||||
|
||||
expect(state.records.foo).toBeUndefined();
|
||||
expect(state.records.bar).toEqual([]);
|
||||
expect(state.records.baz).toEqual({
|
||||
flag: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/**
|
||||
* Resettable state storage.
|
||||
* @example
|
||||
* ```
|
||||
* const state = new ImperativeState(() => {
|
||||
* foo: undefined as string | undefined,
|
||||
* bar: [] as number[],
|
||||
* baz: 1 as number | undefined,
|
||||
* });
|
||||
*
|
||||
* state.records.foo = "hi";
|
||||
* console.log(state.records.foo); // prints "hi";
|
||||
* state.reset();
|
||||
* console.log(state.records.foo); // prints "default";
|
||||
*
|
||||
* // typeof state.records:
|
||||
* // {
|
||||
* // foo: string | undefined, // actual: undefined
|
||||
* // bar: number[], // actual: []
|
||||
* // baz: number | undefined, // actual: 1
|
||||
* // }
|
||||
* ```
|
||||
*/
|
||||
export class ImperativeState<S extends Record<string, unknown>> {
|
||||
public records: S;
|
||||
|
||||
/**
|
||||
* @param init - Function that creates the default state.
|
||||
*/
|
||||
constructor(private init: () => S) {
|
||||
this.records = this.init();
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.records = this.init();
|
||||
}
|
||||
}
|
||||
|
|
@ -225,8 +225,8 @@ importers:
|
|||
specifier: ^3.0.5
|
||||
version: 3.0.5
|
||||
elkjs:
|
||||
specifier: ^0.8.2
|
||||
version: 0.8.2
|
||||
specifier: ^0.9.0
|
||||
version: 0.9.1
|
||||
khroma:
|
||||
specifier: ^2.0.0
|
||||
version: 2.0.0
|
||||
|
|
@ -9006,8 +9006,8 @@ packages:
|
|||
resolution: {integrity: sha512-6s7NVJz+sATdYnIwhdshx/N/9O6rvMxmhVoDSDFdj6iA45gHR8EQje70+RYsF4GeB+k0IeNSBnP7yG9ZXJFr7A==}
|
||||
dev: true
|
||||
|
||||
/elkjs@0.8.2:
|
||||
resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
|
||||
/elkjs@0.9.1:
|
||||
resolution: {integrity: sha512-JWKDyqAdltuUcyxaECtYG6H4sqysXSLeoXuGUBfRNESMTkj+w+qdb0jya8Z/WI0jVd03WQtCGhS6FOFtlhD5FQ==}
|
||||
dev: false
|
||||
|
||||
/emittery@0.13.1:
|
||||
|
|
|
|||
Loading…
Reference in New Issue