Merge branch 'develop' into next
* develop: (62 commits) Draft release on master docs: Add release version Revert "fix: render the participants in same order as they are created" Revert "Feature/4935 subgraph title margin config option" Fix typo add inadvertent tracking removal update announcement bar Update integrations-community.md (Add Codemia to the list of productivity tools using Mermaid.) v10.7.0 10.6.2-rc.3 docs: Remove broken integration chore: Minor cleanup of imperativeState chore(deps): update all minor dependencies adds corresponding change in docs/ecosystem Adds Unison programming language to community integrations list update verbiage update verbiage add jetbrains blog post additional updates Fixed parser/tests ...
This commit is contained in:
Sidharth Vinod
commit
aab7631a9f
|
|
@ -28,7 +28,7 @@ jobs:
|
|||
- if: ${{ ! env.USE_APPLI }}
|
||||
name: Warn if not using Applitools
|
||||
run: |
|
||||
echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
|
||||
echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
|
||||
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ name: Draft Release
|
|||
on:
|
||||
push:
|
||||
branches:
|
||||
- develop
|
||||
- master
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
|
|
|||
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 => {
|
||||
|
|
|
|||
|
|
@ -571,4 +571,14 @@ class C13["With Città foreign language"]
|
|||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
});
|
||||
it('should render a simple class diagram with style definition', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
classDiagram-v2
|
||||
class Class10
|
||||
style Class10 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -886,93 +886,4 @@ end
|
|||
});
|
||||
});
|
||||
});
|
||||
describe('Subgraph title margins', () => {
|
||||
it('Should render subgraphs with title margins set (LR)', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart LR
|
||||
|
||||
subgraph TOP
|
||||
direction TB
|
||||
subgraph B1
|
||||
direction RL
|
||||
i1 -->f1
|
||||
end
|
||||
subgraph B2
|
||||
direction BT
|
||||
i2 -->f2
|
||||
end
|
||||
end
|
||||
A --> TOP --> B
|
||||
B1 --> B2
|
||||
`,
|
||||
{ flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
|
||||
);
|
||||
});
|
||||
it('Should render subgraphs with title margins set (TD)', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TD
|
||||
|
||||
subgraph TOP
|
||||
direction LR
|
||||
subgraph B1
|
||||
direction RL
|
||||
i1 -->f1
|
||||
end
|
||||
subgraph B2
|
||||
direction BT
|
||||
i2 -->f2
|
||||
end
|
||||
end
|
||||
A --> TOP --> B
|
||||
B1 --> B2
|
||||
`,
|
||||
{ flowchart: { subGraphTitleMargin: { top: 8, bottom: 16 } } }
|
||||
);
|
||||
});
|
||||
it('Should render subgraphs with title margins set (LR) and htmlLabels set to false', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart LR
|
||||
|
||||
subgraph TOP
|
||||
direction TB
|
||||
subgraph B1
|
||||
direction RL
|
||||
i1 -->f1
|
||||
end
|
||||
subgraph B2
|
||||
direction BT
|
||||
i2 -->f2
|
||||
end
|
||||
end
|
||||
A --> TOP --> B
|
||||
B1 --> B2
|
||||
`,
|
||||
{
|
||||
htmlLabels: false,
|
||||
flowchart: { htmlLabels: false, subGraphTitleMargin: { top: 10, bottom: 5 } },
|
||||
}
|
||||
);
|
||||
});
|
||||
it('Should render subgraphs with title margins and edge labels', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart LR
|
||||
|
||||
subgraph TOP
|
||||
direction TB
|
||||
subgraph B1
|
||||
direction RL
|
||||
i1 --lb1-->f1
|
||||
end
|
||||
subgraph B2
|
||||
direction BT
|
||||
i2 --lb2-->f2
|
||||
end
|
||||
end
|
||||
A --lb3--> TOP --lb4--> B
|
||||
B1 --lb5--> B2
|
||||
`,
|
||||
{ flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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`,
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -164,13 +164,6 @@
|
|||
end
|
||||
</pre>
|
||||
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
actor Alice
|
||||
actor John
|
||||
Alice-xJohn: Hello John, how are you?
|
||||
John--xAlice: Great!
|
||||
</pre>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
version: '3.9'
|
||||
services:
|
||||
mermaid:
|
||||
image: node:18.18.2-alpine3.18
|
||||
image: node:18.19.0-alpine3.18
|
||||
stdin_open: true
|
||||
tty: true
|
||||
working_dir: /mermaid
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -240,9 +240,9 @@ class BankAccount{
|
|||
|
||||
#### Generic Types
|
||||
|
||||
Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported.
|
||||
Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
|
||||
|
||||
Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
|
||||
> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
|
|
@ -459,9 +459,9 @@ The different cardinality options are :
|
|||
- `0..1` Zero or One
|
||||
- `1..*` One or more
|
||||
- `*` Many
|
||||
- `n` n {where n>1}
|
||||
- `0..n` zero to n {where n>1}
|
||||
- `1..n` one to n {where n>1}
|
||||
- `n` n (where n>1)
|
||||
- `0..n` zero to n (where n>1)
|
||||
- `1..n` one to n (where n>1)
|
||||
|
||||
Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
|
||||
|
||||
|
|
@ -766,9 +766,30 @@ Beginner's tip—a full example using interactive links in an HTML page:
|
|||
|
||||
## Styling
|
||||
|
||||
### Styling a node
|
||||
### Styling a node (v10.7.0+)
|
||||
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
class Animal
|
||||
class Mineral
|
||||
style Animal fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class Animal
|
||||
class Mineral
|
||||
style Animal fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
#### Classes
|
||||
|
||||
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
|
||||
should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -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 (v10.7.0+).
|
||||
|
||||
### 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.11.0",
|
||||
"packageManager": "pnpm@8.14.1",
|
||||
"keywords": [
|
||||
"diagram",
|
||||
"markdown",
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
"vitest": "^0.34.0"
|
||||
},
|
||||
"volta": {
|
||||
"node": "18.18.2"
|
||||
"node": "18.19.0"
|
||||
},
|
||||
"nyc": {
|
||||
"report-dir": "coverage/cypress"
|
||||
|
|
|
|||
|
|
@ -68,6 +68,11 @@ export interface MermaidConfig {
|
|||
* The maximum allowed size of the users text diagram
|
||||
*/
|
||||
maxTextSize?: number;
|
||||
/**
|
||||
* Defines the maximum number of edges that can be drawn in a graph.
|
||||
*
|
||||
*/
|
||||
maxEdges?: number;
|
||||
darkMode?: boolean;
|
||||
htmlLabels?: boolean;
|
||||
/**
|
||||
|
|
@ -1298,14 +1303,6 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
|
|||
* Margin top for the text over the diagram
|
||||
*/
|
||||
titleTopMargin?: number;
|
||||
/**
|
||||
* Defines a top/bottom margin for subgraph titles
|
||||
*
|
||||
*/
|
||||
subGraphTitleMargin?: {
|
||||
top?: number;
|
||||
bottom?: number;
|
||||
};
|
||||
arrowMarkerAbsolute?: boolean;
|
||||
/**
|
||||
* The amount of padding around the diagram as a whole so that embedded
|
||||
|
|
|
|||
|
|
@ -5,11 +5,9 @@ import { createText } from '../rendering-util/createText.js';
|
|||
import { select } from 'd3';
|
||||
import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||
import { evaluate } from '../diagrams/common/common.js';
|
||||
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
|
||||
|
||||
const rect = (parent, node) => {
|
||||
log.info('Creating subgraph rect for ', node.id, node);
|
||||
const siteConfig = getConfig();
|
||||
|
||||
// Add outer g element
|
||||
const shapeSvg = parent
|
||||
|
|
@ -20,7 +18,7 @@ const rect = (parent, node) => {
|
|||
// add the rect
|
||||
const rect = shapeSvg.insert('rect', ':first-child');
|
||||
|
||||
const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
|
||||
const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
|
||||
|
||||
// Create the label and insert it after the rect
|
||||
const label = shapeSvg.insert('g').attr('class', 'cluster-label');
|
||||
|
|
@ -36,7 +34,7 @@ const rect = (parent, node) => {
|
|||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
|
||||
if (evaluate(siteConfig.flowchart.htmlLabels)) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = text.children[0];
|
||||
const dv = select(text);
|
||||
bbox = div.getBoundingClientRect();
|
||||
|
|
@ -65,18 +63,17 @@ const rect = (parent, node) => {
|
|||
.attr('width', width)
|
||||
.attr('height', node.height + padding);
|
||||
|
||||
const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
|
||||
if (useHtmlLabels) {
|
||||
label.attr(
|
||||
'transform',
|
||||
// This puts the labal on top of the box instead of inside it
|
||||
`translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
|
||||
'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
|
||||
);
|
||||
} else {
|
||||
label.attr(
|
||||
'transform',
|
||||
// This puts the labal on top of the box instead of inside it
|
||||
`translate(${node.x}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
|
||||
'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
|
||||
);
|
||||
}
|
||||
// Center the label
|
||||
|
|
@ -130,8 +127,6 @@ const noteGroup = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
const roundedWithTitle = (parent, node) => {
|
||||
const siteConfig = getConfig();
|
||||
|
||||
// Add outer g element
|
||||
const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
|
||||
|
||||
|
|
@ -148,7 +143,7 @@ const roundedWithTitle = (parent, node) => {
|
|||
|
||||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
if (evaluate(siteConfig.flowchart.htmlLabels)) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = text.children[0];
|
||||
const dv = select(text);
|
||||
bbox = div.getBoundingClientRect();
|
||||
|
|
@ -180,7 +175,6 @@ const roundedWithTitle = (parent, node) => {
|
|||
.attr('width', width + padding)
|
||||
.attr('height', node.height + padding - bbox.height - 3);
|
||||
|
||||
const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
|
||||
// Center the label
|
||||
label.attr(
|
||||
'transform',
|
||||
|
|
@ -190,8 +184,7 @@ const roundedWithTitle = (parent, node) => {
|
|||
(node.y -
|
||||
node.height / 2 -
|
||||
node.padding / 3 +
|
||||
(evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3)) +
|
||||
subGraphTitleTopMargin +
|
||||
(evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
|
||||
')'
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { getConfig } from '../diagram-api/diagramAPI.js';
|
|||
import utils from '../utils.js';
|
||||
import { evaluate } from '../diagrams/common/common.js';
|
||||
import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
|
||||
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
|
||||
import { addEdgeMarkers } from './edgeMarker.js';
|
||||
|
||||
let edgeLabels = {};
|
||||
|
|
@ -137,8 +136,6 @@ function setTerminalWidth(fo, value) {
|
|||
export const positionEdgeLabel = (edge, paths) => {
|
||||
log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);
|
||||
let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
|
||||
const siteConfig = getConfig();
|
||||
const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
|
||||
if (edge.label) {
|
||||
const el = edgeLabels[edge.id];
|
||||
let x = edge.x;
|
||||
|
|
@ -162,7 +159,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
|||
y = pos.y;
|
||||
}
|
||||
}
|
||||
el.attr('transform', `translate(${x}, ${y + subGraphTitleTotalMargin / 2})`);
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
}
|
||||
|
||||
//let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
|
||||
|
|
@ -176,7 +173,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
|||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
el.attr('transform', `translate(${x}, ${y})`);
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
}
|
||||
if (edge.startLabelRight) {
|
||||
const el = terminalLabels[edge.id].startRight;
|
||||
|
|
@ -192,7 +189,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
|||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
el.attr('transform', `translate(${x}, ${y})`);
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
}
|
||||
if (edge.endLabelLeft) {
|
||||
const el = terminalLabels[edge.id].endLeft;
|
||||
|
|
@ -204,7 +201,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
|||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
el.attr('transform', `translate(${x}, ${y})`);
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
}
|
||||
if (edge.endLabelRight) {
|
||||
const el = terminalLabels[edge.id].endRight;
|
||||
|
|
@ -216,7 +213,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
|||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
el.attr('transform', `translate(${x}, ${y})`);
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -13,10 +13,8 @@ import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './no
|
|||
import { insertCluster, clear as clearClusters } from './clusters.js';
|
||||
import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
|
||||
import { log } from '../logger.js';
|
||||
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
|
||||
import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||
|
||||
const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, siteConfig) => {
|
||||
const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
|
||||
log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
|
||||
const dir = graph.graph().rankdir;
|
||||
log.trace('Dir in recursive render - dir:', dir);
|
||||
|
|
@ -54,14 +52,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
|
|||
if (node && node.clusterNode) {
|
||||
// const children = graph.children(v);
|
||||
log.info('Cluster identified', v, node.width, graph.node(v));
|
||||
const o = await recursiveRender(
|
||||
nodes,
|
||||
node.graph,
|
||||
diagramtype,
|
||||
id,
|
||||
graph.node(v),
|
||||
siteConfig
|
||||
);
|
||||
const o = await recursiveRender(nodes, node.graph, diagramtype, id, graph.node(v));
|
||||
const newEl = o.elem;
|
||||
updateNodeBounds(node, newEl);
|
||||
node.diff = o.diff || 0;
|
||||
|
|
@ -110,7 +101,6 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
|
|||
log.info('Graph after layout:', graphlibJson.write(graph));
|
||||
// Move the nodes to the correct place
|
||||
let diff = 0;
|
||||
const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
|
||||
sortNodesByHierarchy(graph).forEach(function (v) {
|
||||
const node = graph.node(v);
|
||||
log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
|
||||
|
|
@ -124,18 +114,16 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
|
|||
);
|
||||
if (node && node.clusterNode) {
|
||||
// clusterDb[node.id].node = node;
|
||||
node.y += subGraphTitleTotalMargin;
|
||||
|
||||
positionNode(node);
|
||||
} else {
|
||||
// Non cluster node
|
||||
if (graph.children(v).length > 0) {
|
||||
// A cluster in the non-recursive way
|
||||
// positionCluster(node);
|
||||
node.height += subGraphTitleTotalMargin;
|
||||
insertCluster(clusters, node);
|
||||
clusterDb[node.id].node = node;
|
||||
} else {
|
||||
node.y += subGraphTitleTotalMargin / 2;
|
||||
positionNode(node);
|
||||
}
|
||||
}
|
||||
|
|
@ -146,7 +134,6 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
|
|||
const edge = graph.edge(e);
|
||||
log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
|
||||
|
||||
edge.points.forEach((point) => (point.y += subGraphTitleTotalMargin / 2));
|
||||
const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph, id);
|
||||
positionEdgeLabel(edge, paths);
|
||||
});
|
||||
|
|
@ -172,8 +159,7 @@ export const render = async (elem, graph, markers, diagramtype, id) => {
|
|||
adjustClustersAndEdges(graph);
|
||||
log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));
|
||||
// log.warn('Graph ever after:', graphlibJson.write(graph.node('A').graph));
|
||||
const siteConfig = getConfig();
|
||||
await recursiveRender(elem, graph, diagramtype, id, undefined, siteConfig);
|
||||
await recursiveRender(elem, graph, diagramtype, id);
|
||||
};
|
||||
|
||||
// const shapeDefinitions = {};
|
||||
|
|
|
|||
|
|
@ -1013,6 +1013,7 @@ const class_box = (parent, node) => {
|
|||
});
|
||||
|
||||
rect
|
||||
.attr('style', node.style)
|
||||
.attr('class', 'outer title-state')
|
||||
.attr('x', -maxWidth / 2 - halfPadding)
|
||||
.attr('y', -(maxHeight / 2) - halfPadding)
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ export const addClass = function (_id: string) {
|
|||
methods: [],
|
||||
members: [],
|
||||
annotations: [],
|
||||
styles: [],
|
||||
domId: MERMAID_DOM_ID_PREFIX + name + '-' + classCounter,
|
||||
} as ClassNode;
|
||||
|
||||
|
|
@ -214,7 +215,7 @@ export const cleanupLabel = function (label: string) {
|
|||
};
|
||||
|
||||
/**
|
||||
* Called by parser when a special node is found, e.g. a clickable element.
|
||||
* Called by parser when assigning cssClass to a class
|
||||
*
|
||||
* @param ids - Comma separated list of ids
|
||||
* @param className - Class to add
|
||||
|
|
@ -456,6 +457,20 @@ export const addClassesToNamespace = function (id: string, classNames: string[])
|
|||
}
|
||||
};
|
||||
|
||||
export const setCssStyle = function (id: string, styles: string[]) {
|
||||
const thisClass = classes[id];
|
||||
if (!styles || !thisClass) {
|
||||
return;
|
||||
}
|
||||
for (const s of styles) {
|
||||
if (s.includes(',')) {
|
||||
thisClass.styles.push(...s.split(','));
|
||||
} else {
|
||||
thisClass.styles.push(s);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
setAccTitle,
|
||||
getAccTitle,
|
||||
|
|
@ -492,4 +507,5 @@ export default {
|
|||
addClassesToNamespace,
|
||||
getNamespace,
|
||||
getNamespaces,
|
||||
setCssStyle,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -56,5 +56,18 @@ describe('class diagram, ', function () {
|
|||
expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
|
||||
expect(parser.yy.getClass('Class02').cssClasses[0]).toBe('exClass');
|
||||
});
|
||||
it('should be possible to apply a style to an individual node', function () {
|
||||
const str =
|
||||
'classDiagram\n' +
|
||||
'class Class01\n class Class02\n style Class01 fill:#f9f,stroke:#333,stroke-width:4px';
|
||||
|
||||
parser.parse(str);
|
||||
|
||||
const styleElements = parser.yy.getClass('Class01').styles;
|
||||
|
||||
expect(styleElements[0]).toBe('fill:#f9f');
|
||||
expect(styleElements[1]).toBe('stroke:#333');
|
||||
expect(styleElements[2]).toBe('stroke-width:4px');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -409,6 +409,7 @@ class C13["With Città foreign language"]
|
|||
},
|
||||
],
|
||||
"methods": [],
|
||||
"styles": [],
|
||||
"type": "",
|
||||
}
|
||||
`);
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ export const addClasses = function (
|
|||
*/
|
||||
const cssClassStr = vertex.cssClasses.join(' ');
|
||||
|
||||
const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
|
||||
const styles = getStylesFromArray(vertex.styles);
|
||||
|
||||
// Use vertex id as text in the box if no text is provided by the graph definition
|
||||
const vertexText = vertex.label ?? vertex.id;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ export interface ClassNode {
|
|||
members: ClassMember[];
|
||||
annotations: string[];
|
||||
domId: string;
|
||||
styles: string[];
|
||||
parent?: string;
|
||||
link?: string;
|
||||
linkTarget?: string;
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
|
|||
<string>["] this.popState();
|
||||
<string>[^"]* return "STR";
|
||||
<*>["] this.begin("string");
|
||||
"style" return 'STYLE';
|
||||
|
||||
<INITIAL,namespace>"namespace" { this.begin('namespace'); return 'NAMESPACE'; }
|
||||
<namespace>\s*(\r?\n)+ { this.popState(); return 'NEWLINE'; }
|
||||
|
|
@ -127,6 +128,10 @@ line was introduced with 'click'.
|
|||
<*>\- return 'MINUS';
|
||||
<*>"." return 'DOT';
|
||||
<*>\+ return 'PLUS';
|
||||
":" return 'COLON';
|
||||
"," return 'COMMA';
|
||||
\# return 'BRKT';
|
||||
"#" return 'BRKT';
|
||||
<*>\% return 'PCT';
|
||||
<*>"=" return 'EQUALS';
|
||||
<*>\= return 'EQUALS';
|
||||
|
|
@ -198,6 +203,7 @@ line was introduced with 'click'.
|
|||
[\uFFD2-\uFFD7\uFFDA-\uFFDC]
|
||||
return 'UNICODE_TEXT';
|
||||
<*>\s return 'SPACE';
|
||||
\s return 'SPACE';
|
||||
<*><<EOF>> return 'EOF';
|
||||
|
||||
/lex
|
||||
|
|
@ -254,6 +260,7 @@ statement
|
|||
| memberStatement
|
||||
| annotationStatement
|
||||
| clickStatement
|
||||
| styleStatement
|
||||
| cssClassStatement
|
||||
| noteStatement
|
||||
| direction
|
||||
|
|
@ -365,10 +372,26 @@ clickStatement
|
|||
| CLICK className HREF STR STR LINK_TARGET {$$ = $1;yy.setLink($2, $4, $6);yy.setTooltip($2, $5);}
|
||||
;
|
||||
|
||||
cssClassStatement
|
||||
: CSSCLASS STR alphaNumToken {yy.setCssClass($2, $3);}
|
||||
styleStatement
|
||||
:STYLE ALPHA stylesOpt {$$ = $STYLE;yy.setCssStyle($2,$stylesOpt);}
|
||||
;
|
||||
|
||||
cssClassStatement
|
||||
: CSSCLASS STR ALPHA {yy.setCssClass($2, $3);}
|
||||
;
|
||||
|
||||
stylesOpt
|
||||
: style {$$ = [$style]}
|
||||
| stylesOpt COMMA style {$stylesOpt.push($style);$$ = $stylesOpt;}
|
||||
;
|
||||
|
||||
style
|
||||
: styleComponent
|
||||
| style styleComponent {$$ = $style + $styleComponent;}
|
||||
;
|
||||
|
||||
styleComponent: ALPHA | NUM | COLON | UNIT | SPACE | BRKT | STYLE | PCT | LABEL;
|
||||
|
||||
commentToken : textToken | graphCodeTokens ;
|
||||
|
||||
textToken : textNoTagsToken | TAGSTART | TAGEND | '==' | '--' | PCT | DEFAULT;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import {
|
|||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
} from '../common/commonDb.js';
|
||||
import errorDiagram from '../error/errorDiagram.js';
|
||||
|
||||
const MERMAID_DOM_ID_PREFIX = 'flowchart-';
|
||||
let vertexCounter = 0;
|
||||
|
|
@ -92,7 +91,6 @@ export const addVertex = function (_id, textObj, type, style, classes, dir, prop
|
|||
if (txt[0] === '"' && txt[txt.length - 1] === '"') {
|
||||
txt = txt.substring(1, txt.length - 1);
|
||||
}
|
||||
|
||||
vertices[id].text = txt;
|
||||
} else {
|
||||
if (vertices[id].text === undefined) {
|
||||
|
|
@ -160,11 +158,17 @@ export const addSingleLink = function (_start, _end, type) {
|
|||
if (edge?.length > 10) {
|
||||
edge.length = 10;
|
||||
}
|
||||
if (edges.length < 280) {
|
||||
if (edges.length < (config.maxEdges ?? 500)) {
|
||||
log.info('abc78 pushing edge...');
|
||||
edges.push(edge);
|
||||
} else {
|
||||
throw new Error('Too many edges');
|
||||
throw new Error(
|
||||
`Edge limit exceeded. ${edges.length} edges found, but the limit is ${config.maxEdges}.
|
||||
|
||||
Initialize mermaid with maxEdges set to a higher number to allow more edges.
|
||||
You cannot set this config via configuration inside the diagram as it is a secure config.
|
||||
You have to call mermaid.initialize.`
|
||||
);
|
||||
}
|
||||
};
|
||||
export const addLink = function (_start, _end, type) {
|
||||
|
|
@ -460,6 +464,7 @@ export const clear = function (ver = 'gen-1') {
|
|||
tooltips = {};
|
||||
firstGraphFlag = true;
|
||||
version = ver;
|
||||
config = getConfig();
|
||||
commonClear();
|
||||
};
|
||||
export const setGen = (ver) => {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -829,11 +829,6 @@ export const draw = function (_text: string, id: string, _version: string, diagO
|
|||
bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);
|
||||
}
|
||||
|
||||
log.debug('createdActors', createdActors);
|
||||
log.debug('destroyedActors', destroyedActors);
|
||||
|
||||
drawActors(diagram, actors, actorKeys, false);
|
||||
|
||||
// Draw the messages/signals
|
||||
let sequenceIndex = 1;
|
||||
let sequenceIndexStep = 1;
|
||||
|
|
@ -1033,12 +1028,14 @@ export const draw = function (_text: string, id: string, _version: string, diagO
|
|||
}
|
||||
});
|
||||
|
||||
messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
|
||||
log.debug('createdActors', createdActors);
|
||||
log.debug('destroyedActors', destroyedActors);
|
||||
|
||||
drawActors(diagram, actors, actorKeys, false);
|
||||
messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
|
||||
if (conf.mirrorActors) {
|
||||
drawActors(diagram, actors, actorKeys, true);
|
||||
}
|
||||
|
||||
backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e));
|
||||
fixLifeLineHeights(diagram, actors, actorKeys, conf);
|
||||
|
||||
|
|
|
|||
|
|
@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
|
|||
const center = actor.x + actor.width / 2;
|
||||
const centerY = actorY + 5;
|
||||
|
||||
const boxpluslineGroup = elem.append('g');
|
||||
const boxpluslineGroup = elem.append('g').lower();
|
||||
var g = boxpluslineGroup;
|
||||
|
||||
if (!isFooter) {
|
||||
|
|
|
|||
|
|
@ -2,13 +2,25 @@
|
|||
<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"
|
||||
target="_blank"
|
||||
class="unstyled flex-grow tracking-wide plausible-event-name=bannerClick"
|
||||
>
|
||||
<span class="text-primary-50 font-semibold">{{
|
||||
[
|
||||
'Try diagramming with ChatGPT at Mermaid Chart',
|
||||
'Try Mermaid’s Visual Editor at Mermaid Chart',
|
||||
'Enjoy live collaboration with teammates at Mermaid Chart',
|
||||
][Math.floor(Math.random() * 3)]
|
||||
}}</span>
|
||||
<button
|
||||
class="ml-4 rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide text-white"
|
||||
>
|
||||
Try it now
|
||||
</button>
|
||||
</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
|
||||
|
|
|
|||
|
|
@ -143,9 +143,9 @@ class BankAccount{
|
|||
|
||||
#### Generic Types
|
||||
|
||||
Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported.
|
||||
Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
|
||||
|
||||
Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
|
||||
> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
|
|
@ -304,9 +304,9 @@ The different cardinality options are :
|
|||
- `0..1` Zero or One
|
||||
- `1..*` One or more
|
||||
- `*` Many
|
||||
- `n` n {where n>1}
|
||||
- `0..n` zero to n {where n>1}
|
||||
- `1..n` one to n {where n>1}
|
||||
- `n` n (where n>1)
|
||||
- `0..n` zero to n (where n>1)
|
||||
- `1..n` one to n (where n>1)
|
||||
|
||||
Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
|
||||
|
||||
|
|
@ -518,9 +518,22 @@ Beginner's tip—a full example using interactive links in an HTML page:
|
|||
|
||||
## Styling
|
||||
|
||||
### Styling a node
|
||||
### Styling a node (v10.7.0+)
|
||||
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
class Animal
|
||||
class Mineral
|
||||
style Animal fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
#### Classes
|
||||
|
||||
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
|
||||
should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -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 (v10.7.0+).
|
||||
|
||||
### 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:
|
||||
|
|
|
|||
|
|
@ -73,6 +73,12 @@ properties:
|
|||
description: The maximum allowed size of the users text diagram
|
||||
type: number
|
||||
default: 50000
|
||||
maxEdges:
|
||||
description: |
|
||||
Defines the maximum number of edges that can be drawn in a graph.
|
||||
type: integer
|
||||
default: 500
|
||||
minimum: 0
|
||||
darkMode:
|
||||
type: boolean
|
||||
default: false
|
||||
|
|
@ -151,7 +157,7 @@ properties:
|
|||
in the current `currentConfig`.
|
||||
|
||||
This prevents malicious graph directives from overriding a site's default security.
|
||||
default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize', 'maxEdges']
|
||||
type: array
|
||||
items:
|
||||
type: string
|
||||
|
|
@ -1845,7 +1851,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
|
|||
unevaluatedProperties: false
|
||||
required:
|
||||
- titleTopMargin
|
||||
- subGraphTitleMargin
|
||||
- diagramPadding
|
||||
- htmlLabels
|
||||
- nodeSpacing
|
||||
|
|
@ -1858,20 +1863,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
|
|||
titleTopMargin:
|
||||
$ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
|
||||
default: 25
|
||||
subGraphTitleMargin:
|
||||
description: |
|
||||
Defines a top/bottom margin for subgraph titles
|
||||
type: object
|
||||
properties:
|
||||
top:
|
||||
type: integer
|
||||
minimum: 0
|
||||
bottom:
|
||||
type: integer
|
||||
minimum: 0
|
||||
default:
|
||||
top: 0
|
||||
bottom: 0
|
||||
arrowMarkerAbsolute:
|
||||
type: boolean # TODO, is this actually used here (it has no default value but was in types)
|
||||
diagramPadding:
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import { getSubGraphTitleMargins } from './subGraphTitleMargins.js';
|
||||
import * as configApi from '../config.js';
|
||||
|
||||
describe('getSubGraphTitleMargins', () => {
|
||||
it('should get subgraph title margins after config has been set', () => {
|
||||
const config_0 = {
|
||||
flowchart: {
|
||||
subGraphTitleMargin: {
|
||||
top: 10,
|
||||
bottom: 5,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
configApi.setSiteConfig(config_0);
|
||||
expect(getSubGraphTitleMargins(config_0)).toEqual({
|
||||
subGraphTitleTopMargin: 10,
|
||||
subGraphTitleBottomMargin: 5,
|
||||
subGraphTitleTotalMargin: 15,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import type { FlowchartDiagramConfig } from '../config.type.js';
|
||||
|
||||
export const getSubGraphTitleMargins = ({
|
||||
flowchart,
|
||||
}: {
|
||||
flowchart: FlowchartDiagramConfig;
|
||||
}): {
|
||||
subGraphTitleTopMargin: number;
|
||||
subGraphTitleBottomMargin: number;
|
||||
subGraphTitleTotalMargin: number;
|
||||
} => {
|
||||
const subGraphTitleTopMargin = flowchart?.subGraphTitleMargin?.top ?? 0;
|
||||
const subGraphTitleBottomMargin = flowchart?.subGraphTitleMargin?.bottom ?? 0;
|
||||
const subGraphTitleTotalMargin = subGraphTitleTopMargin + subGraphTitleBottomMargin;
|
||||
|
||||
return {
|
||||
subGraphTitleTopMargin,
|
||||
subGraphTitleBottomMargin,
|
||||
subGraphTitleTotalMargin,
|
||||
};
|
||||
};
|
||||
113
pnpm-lock.yaml
113
pnpm-lock.yaml
|
|
@ -503,61 +503,6 @@ importers:
|
|||
specifier: ^7.0.0
|
||||
version: 7.0.0
|
||||
|
||||
packages/mermaid/src/vitepress:
|
||||
dependencies:
|
||||
'@vueuse/core':
|
||||
specifier: ^10.1.0
|
||||
version: 10.6.1(vue@3.3.8)
|
||||
jiti:
|
||||
specifier: ^1.18.2
|
||||
version: 1.21.0
|
||||
mermaid:
|
||||
specifier: workspace:^
|
||||
version: link:../..
|
||||
vue:
|
||||
specifier: ^3.3
|
||||
version: 3.3.8(typescript@5.1.6)
|
||||
devDependencies:
|
||||
'@iconify-json/carbon':
|
||||
specifier: ^1.1.16
|
||||
version: 1.1.16
|
||||
'@unocss/reset':
|
||||
specifier: ^0.58.0
|
||||
version: 0.58.0
|
||||
'@vite-pwa/vitepress':
|
||||
specifier: ^0.3.0
|
||||
version: 0.3.0(vite-plugin-pwa@0.17.0)
|
||||
'@vitejs/plugin-vue':
|
||||
specifier: ^4.2.1
|
||||
version: 4.5.0(vite@4.5.0)(vue@3.3.8)
|
||||
fast-glob:
|
||||
specifier: ^3.2.12
|
||||
version: 3.3.2
|
||||
https-localhost:
|
||||
specifier: ^4.7.1
|
||||
version: 4.7.1
|
||||
pathe:
|
||||
specifier: ^1.1.0
|
||||
version: 1.1.1
|
||||
unocss:
|
||||
specifier: ^0.58.0
|
||||
version: 0.58.0(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0)
|
||||
unplugin-vue-components:
|
||||
specifier: ^0.26.0
|
||||
version: 0.26.0(rollup@2.79.1)(vue@3.3.8)
|
||||
vite:
|
||||
specifier: ^4.3.9
|
||||
version: 4.5.0(@types/node@18.17.5)
|
||||
vite-plugin-pwa:
|
||||
specifier: ^0.17.0
|
||||
version: 0.17.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
|
||||
vitepress:
|
||||
specifier: 1.0.0-rc.31
|
||||
version: 1.0.0-rc.31(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
|
||||
workbox-window:
|
||||
specifier: ^7.0.0
|
||||
version: 7.0.0
|
||||
|
||||
packages/parser:
|
||||
dependencies:
|
||||
langium:
|
||||
|
|
@ -5207,6 +5152,7 @@ packages:
|
|||
|
||||
/@types/web-bluetooth@0.0.20:
|
||||
resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
|
||||
dev: true
|
||||
|
||||
/@types/ws@8.5.5:
|
||||
resolution: {integrity: sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==}
|
||||
|
|
@ -5803,17 +5749,6 @@ packages:
|
|||
vue: 3.3.4
|
||||
dev: true
|
||||
|
||||
/@vitejs/plugin-vue@4.5.0(vite@4.5.0)(vue@3.3.8):
|
||||
resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
vite: ^4.0.0 || ^5.0.0
|
||||
vue: ^3.2.25
|
||||
dependencies:
|
||||
vite: 4.5.0(@types/node@18.17.5)
|
||||
vue: 3.3.8(typescript@5.1.6)
|
||||
dev: true
|
||||
|
||||
/@vitejs/plugin-vue@4.5.0(vite@5.0.2)(vue@3.3.8):
|
||||
resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
|
|
@ -5925,6 +5860,7 @@ packages:
|
|||
'@vue/shared': 3.3.8
|
||||
estree-walker: 2.0.2
|
||||
source-map-js: 1.0.2
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-dom@3.3.4:
|
||||
resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
|
||||
|
|
@ -5937,6 +5873,7 @@ packages:
|
|||
dependencies:
|
||||
'@vue/compiler-core': 3.3.8
|
||||
'@vue/shared': 3.3.8
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-sfc@3.3.4:
|
||||
resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
|
||||
|
|
@ -5965,6 +5902,7 @@ packages:
|
|||
magic-string: 0.30.5
|
||||
postcss: 8.4.31
|
||||
source-map-js: 1.0.2
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-ssr@3.3.4:
|
||||
resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
|
||||
|
|
@ -5977,6 +5915,7 @@ packages:
|
|||
dependencies:
|
||||
'@vue/compiler-dom': 3.3.8
|
||||
'@vue/shared': 3.3.8
|
||||
dev: true
|
||||
|
||||
/@vue/devtools-api@6.5.0:
|
||||
resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
|
||||
|
|
@ -6002,6 +5941,7 @@ packages:
|
|||
'@vue/shared': 3.3.8
|
||||
estree-walker: 2.0.2
|
||||
magic-string: 0.30.5
|
||||
dev: true
|
||||
|
||||
/@vue/reactivity@3.3.4:
|
||||
resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
|
||||
|
|
@ -6012,6 +5952,7 @@ packages:
|
|||
resolution: {integrity: sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==}
|
||||
dependencies:
|
||||
'@vue/shared': 3.3.8
|
||||
dev: true
|
||||
|
||||
/@vue/runtime-core@3.3.4:
|
||||
resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
|
||||
|
|
@ -6024,6 +5965,7 @@ packages:
|
|||
dependencies:
|
||||
'@vue/reactivity': 3.3.8
|
||||
'@vue/shared': 3.3.8
|
||||
dev: true
|
||||
|
||||
/@vue/runtime-dom@3.3.4:
|
||||
resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
|
||||
|
|
@ -6038,6 +5980,7 @@ packages:
|
|||
'@vue/runtime-core': 3.3.8
|
||||
'@vue/shared': 3.3.8
|
||||
csstype: 3.1.2
|
||||
dev: true
|
||||
|
||||
/@vue/server-renderer@3.3.4(vue@3.3.4):
|
||||
resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
|
||||
|
|
@ -6056,12 +5999,14 @@ packages:
|
|||
'@vue/compiler-ssr': 3.3.8
|
||||
'@vue/shared': 3.3.8
|
||||
vue: 3.3.8(typescript@5.0.4)
|
||||
dev: true
|
||||
|
||||
/@vue/shared@3.3.4:
|
||||
resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
|
||||
|
||||
/@vue/shared@3.3.8:
|
||||
resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
|
||||
dev: true
|
||||
|
||||
/@vueuse/core@10.1.0(vue@3.3.4):
|
||||
resolution: {integrity: sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==}
|
||||
|
|
@ -6097,6 +6042,7 @@ packages:
|
|||
transitivePeerDependencies:
|
||||
- '@vue/composition-api'
|
||||
- vue
|
||||
dev: true
|
||||
|
||||
/@vueuse/integrations@10.6.1(focus-trap@7.5.4)(vue@3.3.8):
|
||||
resolution: {integrity: sha512-mPDupuofMJ4DPmtX/FfP1MajmWRzYDv8WSaTCo8LQ5kFznjWgmUQ16ApjYqgMquqffNY6+IRMdMgosLDRZOSZA==}
|
||||
|
|
@ -6158,6 +6104,7 @@ packages:
|
|||
|
||||
/@vueuse/metadata@10.6.1:
|
||||
resolution: {integrity: sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==}
|
||||
dev: true
|
||||
|
||||
/@vueuse/shared@10.1.0(vue@3.3.4):
|
||||
resolution: {integrity: sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==}
|
||||
|
|
@ -6184,6 +6131,7 @@ packages:
|
|||
transitivePeerDependencies:
|
||||
- '@vue/composition-api'
|
||||
- vue
|
||||
dev: true
|
||||
|
||||
/@wdio/config@7.30.0(typescript@5.1.6):
|
||||
resolution: {integrity: sha512-/38rol9WCfFTMtXyd/C856/aexxIZnfVvXg7Fw2WXpqZ9qadLA+R4N35S2703n/RByjK/5XAYtHoljtvh3727w==}
|
||||
|
|
@ -16176,6 +16124,7 @@ packages:
|
|||
resolution: {integrity: sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==}
|
||||
engines: {node: '>=12.20'}
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/typescript@5.1.6:
|
||||
resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
|
||||
|
|
@ -16423,35 +16372,6 @@ packages:
|
|||
- supports-color
|
||||
dev: true
|
||||
|
||||
/unplugin-vue-components@0.26.0(rollup@2.79.1)(vue@3.3.8):
|
||||
resolution: {integrity: sha512-s7IdPDlnOvPamjunVxw8kNgKNK8A5KM1YpK5j/p97jEKTjlPNrA0nZBiSfAKKlK1gWZuyWXlKL5dk3EDw874LQ==}
|
||||
engines: {node: '>=14'}
|
||||
peerDependencies:
|
||||
'@babel/parser': ^7.15.8
|
||||
'@nuxt/kit': ^3.2.2
|
||||
vue: 2 || 3
|
||||
peerDependenciesMeta:
|
||||
'@babel/parser':
|
||||
optional: true
|
||||
'@nuxt/kit':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@antfu/utils': 0.7.6
|
||||
'@rollup/pluginutils': 5.1.0(rollup@2.79.1)
|
||||
chokidar: 3.5.3
|
||||
debug: 4.3.4(supports-color@8.1.1)
|
||||
fast-glob: 3.3.2
|
||||
local-pkg: 0.4.3
|
||||
magic-string: 0.30.5
|
||||
minimatch: 9.0.3
|
||||
resolve: 1.22.4
|
||||
unplugin: 1.4.0
|
||||
vue: 3.3.8(typescript@5.1.6)
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/unplugin@1.4.0:
|
||||
resolution: {integrity: sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==}
|
||||
dependencies:
|
||||
|
|
@ -17021,6 +16941,7 @@ packages:
|
|||
optional: true
|
||||
dependencies:
|
||||
vue: 3.3.8(typescript@5.1.6)
|
||||
dev: true
|
||||
|
||||
/vue@3.3.4:
|
||||
resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
|
||||
|
|
@ -17045,6 +16966,7 @@ packages:
|
|||
'@vue/server-renderer': 3.3.8(vue@3.3.8)
|
||||
'@vue/shared': 3.3.8
|
||||
typescript: 5.0.4
|
||||
dev: true
|
||||
|
||||
/vue@3.3.8(typescript@5.1.6):
|
||||
resolution: {integrity: sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==}
|
||||
|
|
@ -17060,6 +16982,7 @@ packages:
|
|||
'@vue/server-renderer': 3.3.8(vue@3.3.8)
|
||||
'@vue/shared': 3.3.8
|
||||
typescript: 5.1.6
|
||||
dev: true
|
||||
|
||||
/vuex@4.1.0(vue@3.3.4):
|
||||
resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
|
||||
|
|
|
|||
Loading…
Reference in New Issue