mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-18 14:59:53 +02:00
Merge branch 'neo-new-shapes' of https://github.com/Mermaid-Chart/alana-mermaid into sidv/configReturn
* 'neo-new-shapes' of https://github.com/Mermaid-Chart/alana-mermaid: (45 commits) updated styles, testcases and fixed html labels for image shape MC-1733 Reset layout updated ImageSqaure shape updated styles updated pos changes fixed html labels for icon shape updated test cases Added rounded icon shape Updated circle icon updated image shape Updated labels for shapes updated icon square and icon MC-1733 Reset layout Updated logic for vertex label Updated test cases Update .changeset/rude-meals-invite.md changesets added neo-fication and shape-resize for linedCylinder shape added neo-fication for curvedTrapezoid shape Version Packages ...
This commit is contained in:
Sidharth Vinod
@@ -1,326 +0,0 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/getting-started.md](../../packages/mermaid/src/docs/intro/getting-started.md).
|
||||
|
||||
# Mermaid User Guide
|
||||
|
||||
## Mermaid is composed of three parts
|
||||
|
||||
1. Deployment
|
||||
2. Syntax
|
||||
3. Configuration
|
||||
|
||||
This section talks about the different ways to **deploy** Mermaid.
|
||||
|
||||
If you are a beginner:
|
||||
|
||||
- Check out the [Diagram Syntax](syntax-reference.md) page
|
||||
- Check out the [Tutorials](../ecosystem/tutorials.md) page
|
||||
|
||||
## Ways to use Mermaid
|
||||
|
||||
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)
|
||||
|
||||
To learn more, visit the [Usage](../config/usage.md) page.
|
||||
|
||||
## 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-example
|
||||
graph TD
|
||||
A[Enter Chart Definition] --> B(Preview)
|
||||
B --> C{decide}
|
||||
C --> D[Keep]
|
||||
C --> E[Edit Definition]
|
||||
E --> B
|
||||
D --> F[Save Image and Code]
|
||||
F --> B
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Enter Chart Definition] --> B(Preview)
|
||||
B --> C{decide}
|
||||
C --> D[Keep]
|
||||
C --> E[Edit Definition]
|
||||
E --> B
|
||||
D --> F[Save Image and Code]
|
||||
F --> B
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### • Configurations
|
||||
|
||||
Configuration options are available in the `Configuration` panel. The options are applied to the diagram in the `Preview` panel.
|
||||
|
||||
To learn more, visit the [Configuration Reference](../config/setup/README.md) page
|
||||
|
||||
|
||||
|
||||
<br />
|
||||
|
||||
#### • Editing History
|
||||
|
||||
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.
|
||||
|
||||
Alternatively, you can manually save code by clicking on the `Save` icon from the `History` section.
|
||||
|
||||
> **Note**
|
||||
> History is stored in the browser storage only.
|
||||
|
||||
<br />
|
||||
|
||||
#### • Saving a diagram
|
||||
|
||||
There are multiple ways of saving your diagram from the `Actions` section:
|
||||
|
||||
- export PNG
|
||||
- export SVG
|
||||
- export as Markdown
|
||||
|
||||
|
||||
|
||||
<br />
|
||||
|
||||
#### • Editing your diagrams
|
||||
|
||||
To edit your diagram, you can copy paste existing Mermaid diagram code into the `Code` section of the `Live Editor`.
|
||||
|
||||
Or:
|
||||
|
||||
- create a new diagram from scratch
|
||||
- use a Sample Diagram from the `Sample Diagrams` section
|
||||
|
||||
<br />
|
||||
|
||||
#### • Loading from Gists
|
||||
|
||||
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).
|
||||
|
||||
> **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).
|
||||
|
||||
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.
|
||||
|
||||
Here is an example of a Gist being loaded into the Editor:
|
||||
|
||||
<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/mermaid-chart-gpt)
|
||||
- [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
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
#### 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]
|
||||
B --> D[Server02]
|
||||
</pre>
|
||||
</body>
|
||||
```
|
||||
|
||||
> **Note**
|
||||
> Every Mermaid chart/graph/diagram definition should have separate `<pre>` tags.
|
||||
|
||||
- This is an example of a Mermaid import and the `mermaid.initialize()` call.
|
||||
|
||||
> **Note**
|
||||
> A `mermaid.initialize()` call takes all the definitions contained within `<pre class="mermaid">` tags and renders them into diagrams.
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
> **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()`
|
||||
|
||||
| Parameter | Description | Type | Values |
|
||||
| ----------- | --------------------------------- | ------- | ----------- |
|
||||
| startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
|
||||
|
||||
In this example, the `mermaidAPI` is being called through the `CDN`:
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
Here is one mermaid diagram:
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Client] --> B[Load Balancer]
|
||||
B --> C[Server1]
|
||||
B --> D[Server2]
|
||||
</pre>
|
||||
|
||||
And here is another:
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Client] -->|tcp_123| B
|
||||
B(Load Balancer)
|
||||
B -->|tcp_456| C[Server1]
|
||||
B -->|tcp_456| D[Server2]
|
||||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
In this example, `mermaid.js` is referenced in `src` as a separate JavaScript file:
|
||||
|
||||
```html
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A --- B
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Client] --> B[Load Balancer]
|
||||
B --> C[Server1]
|
||||
B --> D[Server2]
|
||||
</pre>
|
||||
<script type="module">
|
||||
import mermaid from 'The/Path/In/Your/Package/mermaid.esm.mjs';
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 5. Adding Mermaid as a dependency
|
||||
|
||||
Below are the steps for adding Mermaid as a dependency:
|
||||
|
||||
1. Install `node v16`
|
||||
|
||||
> **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).
|
||||
|
||||
1. Install `yarn` using `npm` with this command:
|
||||
|
||||
`npm install -g yarn`
|
||||
|
||||
2. After yarn installs, enter this command:
|
||||
|
||||
`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.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB |
@@ -1,474 +0,0 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/index.md](../../packages/mermaid/src/docs/intro/index.md).
|
||||
|
||||
# About Mermaid
|
||||
|
||||
**Mermaid lets you create diagrams and visualizations using text and code.**
|
||||
|
||||
It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
|
||||
|
||||
> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](syntax-reference.md).
|
||||
|
||||
<img src="/header.png" alt="" />
|
||||
|
||||
<div class='badges'>
|
||||
|
||||
[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
|
||||
[](https://www.npmjs.com/package/mermaid)
|
||||
[](https://bundlephobia.com/package/mermaid)
|
||||
[](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
|
||||
[](https://www.jsdelivr.com/package/npm/mermaid)
|
||||
[](https://www.npmjs.com/package/mermaid)
|
||||
[](https://discord.gg/AgrbSrBer3)
|
||||
[](https://twitter.com/mermaidjs_)
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Mermaid book banner -->
|
||||
|
||||
[](https://mermaid-js.github.io/mermaid/landing/)
|
||||
|
||||
<!-- <Main description> -->
|
||||
|
||||
Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
|
||||
|
||||
> Doc-Rot is a Catch-22 that Mermaid helps to solve.
|
||||
|
||||
Diagramming and documentation costs precious developer time and gets outdated quickly.
|
||||
But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
|
||||
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/> <br/>
|
||||
Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
|
||||
[Tutorials](../ecosystem/tutorials.md) has video tutorials.
|
||||
|
||||
Use Mermaid with your favorite applications, check out the list of [Community Integrations](../ecosystem/integrations-community.md).
|
||||
|
||||
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/getting-started.md) and [Usage](../config/usage.md).
|
||||
|
||||
🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/contributing.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md)
|
||||
|
||||
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
|
||||
|
||||
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
|
||||
|
||||
**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
|
||||
|
||||
Our PR Visual Regression Testing is powered by [Argos](https://argos-ci.com/?utm_source=mermaid&utm_campaign=oss) with their generous Open Source plan. It makes the process of reviewing PRs with visual changes a breeze.
|
||||
|
||||
[](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
|
||||
|
||||
In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
|
||||
|
||||
<a href="https://applitools.com/">
|
||||
<svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
|
||||
</a>
|
||||
|
||||
## Diagram Types
|
||||
|
||||
### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax)
|
||||
|
||||
```mermaid-example
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
### [Sequence diagram](../syntax/sequenceDiagram.md)
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
### [Gantt diagram](../syntax/gantt.md)
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram to mermaid
|
||||
excludes weekdays 2014-01-10
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram to mermaid
|
||||
excludes weekdays 2014-01-10
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
```
|
||||
|
||||
### [Class diagram](../syntax/classDiagram.md)
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
Class03 *-- Class04
|
||||
Class05 o-- Class06
|
||||
Class07 .. Class08
|
||||
Class09 --> C2 : Where am i?
|
||||
Class09 --* C3
|
||||
Class09 --|> Class07
|
||||
Class07 : equals()
|
||||
Class07 : Object[] elementData
|
||||
Class01 : size()
|
||||
Class01 : int chimp
|
||||
Class01 : int gorilla
|
||||
Class08 <--> C2: Cool label
|
||||
```
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
Class03 *-- Class04
|
||||
Class05 o-- Class06
|
||||
Class07 .. Class08
|
||||
Class09 --> C2 : Where am i?
|
||||
Class09 --* C3
|
||||
Class09 --|> Class07
|
||||
Class07 : equals()
|
||||
Class07 : Object[] elementData
|
||||
Class01 : size()
|
||||
Class01 : int chimp
|
||||
Class01 : int gorilla
|
||||
Class08 <--> C2: Cool label
|
||||
```
|
||||
|
||||
### [Git graph](../syntax/gitgraph.md)
|
||||
|
||||
```mermaid-example
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
commit
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
commit
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
commit
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
commit
|
||||
```
|
||||
|
||||
### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md)
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
|
||||
```
|
||||
|
||||
### [User Journey Diagram](../syntax/userJourney.md)
|
||||
|
||||
```mermaid-example
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
```
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
```
|
||||
|
||||
### [Quadrant Chart](../syntax/quadrantChart.md)
|
||||
|
||||
```mermaid-example
|
||||
quadrantChart
|
||||
title Reach and engagement of campaigns
|
||||
x-axis Low Reach --> High Reach
|
||||
y-axis Low Engagement --> High Engagement
|
||||
quadrant-1 We should expand
|
||||
quadrant-2 Need to promote
|
||||
quadrant-3 Re-evaluate
|
||||
quadrant-4 May be improved
|
||||
Campaign A: [0.3, 0.6]
|
||||
Campaign B: [0.45, 0.23]
|
||||
Campaign C: [0.57, 0.69]
|
||||
Campaign D: [0.78, 0.34]
|
||||
Campaign E: [0.40, 0.34]
|
||||
Campaign F: [0.35, 0.78]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
quadrantChart
|
||||
title Reach and engagement of campaigns
|
||||
x-axis Low Reach --> High Reach
|
||||
y-axis Low Engagement --> High Engagement
|
||||
quadrant-1 We should expand
|
||||
quadrant-2 Need to promote
|
||||
quadrant-3 Re-evaluate
|
||||
quadrant-4 May be improved
|
||||
Campaign A: [0.3, 0.6]
|
||||
Campaign B: [0.45, 0.23]
|
||||
Campaign C: [0.57, 0.69]
|
||||
Campaign D: [0.78, 0.34]
|
||||
Campaign E: [0.40, 0.34]
|
||||
Campaign F: [0.35, 0.78]
|
||||
```
|
||||
|
||||
### [XY Chart](../syntax/xyChart.md)
|
||||
|
||||
```mermaid-example
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
**In depth guides and examples can be found at [Getting Started](./getting-started.md) and [Usage](../config/usage.md).**
|
||||
|
||||
**It would also be helpful to learn more about mermaid's [Syntax](./syntax-reference.md).**
|
||||
|
||||
### CDN
|
||||
|
||||
```
|
||||
https://cdn.jsdelivr.net/npm/mermaid@<version>/dist/
|
||||
```
|
||||
|
||||
To select a version:
|
||||
|
||||
Replace `<version>` with the desired version number.
|
||||
|
||||
Latest Version: <https://cdn.jsdelivr.net/npm/mermaid@11>
|
||||
|
||||
## Deploying Mermaid
|
||||
|
||||
To Deploy Mermaid:
|
||||
|
||||
1. You will need to install node v16, which would have npm
|
||||
2. Install mermaid
|
||||
- NPM: `npm i mermaid`
|
||||
- Yarn: `yarn add mermaid`
|
||||
- Pnpm: `pnpm add mermaid`
|
||||
|
||||
### [Mermaid API](../config/setup/README.md):
|
||||
|
||||
**To deploy mermaid without a bundler, insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML using the following example:**
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
```
|
||||
|
||||
**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**
|
||||
|
||||
**Examples can be found in** [Other examples](../syntax/examples.md)
|
||||
|
||||
## Sibling projects
|
||||
|
||||
- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
|
||||
- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
|
||||
- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
|
||||
- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo)
|
||||
|
||||
## Request for Assistance
|
||||
|
||||
Things are piling up and I have a hard time keeping up. It would be great if we could form a core team of developers to cooperate
|
||||
with the future development of mermaid.
|
||||
|
||||
As part of this team you would get write access to the repository and would
|
||||
represent the project when answering questions and issues.
|
||||
|
||||
Together we could continue the work with things like:
|
||||
|
||||
- Adding more types of diagrams like mindmaps, ert diagrams, etc.
|
||||
- Improving existing diagrams
|
||||
|
||||
Don't hesitate to contact me if you want to get involved!
|
||||
|
||||
## Contributors
|
||||
|
||||
<div class='badges'>
|
||||
|
||||
[](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22)
|
||||
[](https://github.com/mermaid-js/mermaid/graphs/contributors)
|
||||
[](https://github.com/mermaid-js/mermaid/graphs/contributors)
|
||||
|
||||
</div>
|
||||
|
||||
Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
|
||||
|
||||
Detailed information about how to contribute can be found in the [contribution guideline](../community/contributing.md).
|
||||
|
||||
### Requirements
|
||||
|
||||
- [volta](https://volta.sh/) to manage node versions.
|
||||
- [Node.js](https://nodejs.org/en/). `volta install node`
|
||||
- [pnpm](https://pnpm.io/) package manager. `volta install pnpm`
|
||||
|
||||
### Development Installation
|
||||
|
||||
```bash
|
||||
git clone git@github.com:mermaid-js/mermaid.git
|
||||
cd mermaid
|
||||
# npx is required for first install as volta support for pnpm is not added yet.
|
||||
npx pnpm install
|
||||
pnpm test
|
||||
```
|
||||
|
||||
### Lint
|
||||
|
||||
```sh
|
||||
pnpm lint
|
||||
```
|
||||
|
||||
We use [eslint](https://eslint.org/).
|
||||
We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/integrations) to get real time lint result.
|
||||
|
||||
### Test
|
||||
|
||||
```sh
|
||||
pnpm test
|
||||
```
|
||||
|
||||
Manual test in browser: open `dist/index.html`
|
||||
|
||||
### Release
|
||||
|
||||
For those who have the permission to do so:
|
||||
|
||||
Update version number in `package.json`.
|
||||
|
||||
```sh
|
||||
npm publish
|
||||
```
|
||||
|
||||
The above command generates files into the `dist` folder and publishes them to [npmjs.com](https://www.npmjs.com/).
|
||||
|
||||
## Security and safe diagrams
|
||||
|
||||
For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
|
||||
|
||||
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
|
||||
|
||||
_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
|
||||
|
||||
## Reporting vulnerabilities
|
||||
|
||||
To report a vulnerability, please e-mail <security@mermaid.live> with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
|
||||
|
||||
## Appreciation
|
||||
|
||||
A quick note from Knut Sveidqvist:
|
||||
|
||||
> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_
|
||||
>
|
||||
> _Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._
|
||||
>
|
||||
> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
|
||||
>
|
||||
> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
|
||||
|
||||
---
|
||||
|
||||
_Mermaid was created by Knut Sveidqvist for easier documentation._
|
||||
|
||||
<style scoped>
|
||||
.badges > p {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.badges > p > a {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.dark #VPContent > div > div > div.content > div > main > div > div > img {
|
||||
filter: invert(1) hue-rotate(217deg) contrast(0.72);
|
||||
}
|
||||
</style>
|
||||
@@ -1,221 +0,0 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/syntax-reference.md](../../packages/mermaid/src/docs/intro/syntax-reference.md).
|
||||
|
||||
# Diagram Syntax
|
||||
|
||||
Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type.
|
||||
|
||||
Syntax, together with Deployment and Configuration constitute the whole of Mermaid.
|
||||
|
||||
Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid.live), it is also a great practice area.
|
||||
|
||||
## Syntax Structure
|
||||
|
||||
One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate.
|
||||
|
||||
**Example** : The code below is for an Entity Relationship Diagram, specified by the `erDiagram` declaration. What follows is the definition of the different `Entities` represented in it.
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||||
INVOICE ||--|{ ORDER : covers
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||||
INVOICE ||--|{ ORDER : covers
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
```
|
||||
|
||||
The [Getting Started](./getting-started.md) section can also provide some practical examples of mermaid syntax.
|
||||
|
||||
## Diagram Breaking
|
||||
|
||||
One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated.
|
||||
|
||||
| Diagram Breakers | Reason | Solution |
|
||||
| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------- |
|
||||
| **Comments** | | |
|
||||
| [`%%{``}%%`](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". |
|
||||
| **Flow-Charts** | | |
|
||||
| 'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. |
|
||||
| [Nodes inside Nodes](../syntax/flowchart.md?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking |
|
||||
|
||||
## Mermaid Live Editor
|
||||
|
||||
Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid.live).
|
||||
|
||||
## Configuration
|
||||
|
||||
Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments.
|
||||
|
||||
If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](../config/setup/README.md) here. It includes themes.
|
||||
This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams.
|
||||
The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./getting-started.md) methods.
|
||||
|
||||
### Configuration Section in the [Live Editor](https://mermaid.live).
|
||||
|
||||
Here you can edit certain values to change the behavior and appearance of the diagram.
|
||||
|
||||
### [The initialize() call](./getting-started.md#_3-calling-the-javascript-api)
|
||||
|
||||
Used when Mermaid is called via an API, or through a `<script>` tag.
|
||||
|
||||
### [Directives](../config/directives.md)
|
||||
|
||||
Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition.
|
||||
|
||||
### [Theme Manipulation](../config/theming.md)
|
||||
|
||||
An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
|
||||
|
||||
### Layout and look
|
||||
|
||||
We've restructured how Mermaid renders diagrams, enabling new features like selecting layout and look. **Currently, this is supported for flowcharts and state diagrams**, with plans to extend support to all diagram types.
|
||||
|
||||
### Selecting Diagram Looks
|
||||
|
||||
Mermaid offers a variety of styles or “looks” for your diagrams, allowing you to tailor the visual appearance to match your specific needs or preferences. Whether you prefer a hand-drawn or classic style, you can easily customize your diagrams.
|
||||
|
||||
**Available Looks:**
|
||||
|
||||
```
|
||||
• Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams.
|
||||
• Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic.
|
||||
```
|
||||
|
||||
**How to Select a Look:**
|
||||
|
||||
You can select a look by adding the look parameter in the metadata section of your Mermaid diagram code. Here’s an example:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
look: handDrawn
|
||||
theme: neutral
|
||||
---
|
||||
flowchart LR
|
||||
A[Start] --> B{Decision}
|
||||
B -->|Yes| C[Continue]
|
||||
B -->|No| D[Stop]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
look: handDrawn
|
||||
theme: neutral
|
||||
---
|
||||
flowchart LR
|
||||
A[Start] --> B{Decision}
|
||||
B -->|Yes| C[Continue]
|
||||
B -->|No| D[Stop]
|
||||
```
|
||||
|
||||
#### Selecting Layout Algorithms
|
||||
|
||||
In addition to customizing the look of your diagrams, Mermaid Chart now allows you to choose different layout algorithms to better organize and present your diagrams, especially when dealing with more complex structures. The layout algorithm dictates how nodes and edges are arranged on the page.
|
||||
|
||||
#### Supported Layout Algorithms:
|
||||
|
||||
```
|
||||
• Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams.
|
||||
• ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support.
|
||||
```
|
||||
|
||||
#### How to Select a Layout Algorithm:
|
||||
|
||||
You can specify the layout algorithm directly in the metadata section of your Mermaid diagram code. Here’s an example:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
look: handDrawn
|
||||
theme: dark
|
||||
---
|
||||
flowchart TB
|
||||
A[Start] --> B{Decision}
|
||||
B -->|Yes| C[Continue]
|
||||
B -->|No| D[Stop]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
look: handDrawn
|
||||
theme: dark
|
||||
---
|
||||
flowchart TB
|
||||
A[Start] --> B{Decision}
|
||||
B -->|Yes| C[Continue]
|
||||
B -->|No| D[Stop]
|
||||
```
|
||||
|
||||
In this example, the `layout: elk` line configures the diagram to use the ELK layout algorithm, along with the hand drawn look and forest theme.
|
||||
|
||||
#### Customizing ELK Layout:
|
||||
|
||||
When using the ELK layout, you can further refine the diagram’s configuration, such as how nodes are placed and whether parallel edges should be combined:
|
||||
|
||||
- To combine parallel edges, use mergeEdges: true | false.
|
||||
- To configure node placement, use nodePlacementStrategy with the following options:
|
||||
- SIMPLE
|
||||
- NETWORK_SIMPLEX
|
||||
- LINEAR_SEGMENTS
|
||||
- BRANDES_KOEPF (default)
|
||||
|
||||
**Example configuration:**
|
||||
|
||||
```
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
elk:
|
||||
mergeEdges: true
|
||||
nodePlacementStrategy: LINEAR_SEGMENTS
|
||||
---
|
||||
flowchart LR
|
||||
A[Start] --> B{Choose Path}
|
||||
B -->|Option 1| C[Path 1]
|
||||
B -->|Option 2| D[Path 2]
|
||||
|
||||
#### Using Dagre Layout with Classic Look:
|
||||
```
|
||||
|
||||
Another example:
|
||||
|
||||
```
|
||||
---
|
||||
config:
|
||||
layout: dagre
|
||||
look: classic
|
||||
theme: default
|
||||
---
|
||||
|
||||
flowchart LR
|
||||
A[Start] --> B{Choose Path}
|
||||
B -->|Option 1| C[Path 1]
|
||||
B -->|Option 2| D[Path 2]
|
||||
|
||||
```
|
||||
|
||||
These options give you the flexibility to create diagrams that not only look great but are also arranged to best suit your data’s structure and flow.
|
||||
|
||||
When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk.
|
||||
Reference in New Issue
Block a user