Merge branch 'mermaid-js:develop' into develop
This commit is contained in:
Zihua Li
GitHub
commit
d13b58bec8
38
README.md
38
README.md
|
|
@ -226,6 +226,44 @@ pie
|
|||
|
||||
### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
|
||||
|
||||
### Bar chart (using gantt chart) [<a href="https://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]
|
||||
|
||||
```
|
||||
gantt
|
||||
title Git Issues - days since last update
|
||||
dateFormat X
|
||||
axisFormat %s
|
||||
|
||||
section Issue19062
|
||||
71 : 0, 71
|
||||
section Issue19401
|
||||
36 : 0, 36
|
||||
section Issue193
|
||||
34 : 0, 34
|
||||
section Issue7441
|
||||
9 : 0, 9
|
||||
section Issue1300
|
||||
5 : 0, 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title Git Issues - days since last update
|
||||
dateFormat X
|
||||
axisFormat %s
|
||||
|
||||
section Issue19062
|
||||
71 : 0, 71
|
||||
section Issue19401
|
||||
36 : 0, 36
|
||||
section Issue193
|
||||
34 : 0, 34
|
||||
section Issue7441
|
||||
9 : 0, 9
|
||||
section Issue1300
|
||||
5 : 0, 5
|
||||
```
|
||||
|
||||
### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@
|
|||
"graphviz",
|
||||
"grav",
|
||||
"greywolf",
|
||||
"huynh",
|
||||
"inkdrop",
|
||||
"jaoude",
|
||||
"jison",
|
||||
|
|
@ -90,6 +91,7 @@
|
|||
"sidharthv",
|
||||
"sphinxcontrib",
|
||||
"statediagram",
|
||||
"steph",
|
||||
"stylis",
|
||||
"substate",
|
||||
"sveidqvist",
|
||||
|
|
|
|||
|
|
@ -685,6 +685,16 @@ A ~~~ B
|
|||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('4023: Should render html labels with images and-or text correctly', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TD
|
||||
B[<img src='https://mermaid.js.org/mermaid-logo.svg'>]
|
||||
B-->C[<img src="https://mermaid.js.org/mermaid-logo.svg"> more text <img src='https://mermaid.js.org/mermaid-logo.svg'>]
|
||||
B-->D(<img src='https://mermaid.js.org/mermaid-logo.svg'> some text)
|
||||
B-->E(plain)`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
describe('Markdown strings flowchart (#4220)', () => {
|
||||
describe('html labels', () => {
|
||||
it('With styling and classes', () => {
|
||||
|
|
|
|||
|
|
@ -29,9 +29,9 @@
|
|||
}
|
||||
.mermaid svg {
|
||||
/* font-size: 18px !important; */
|
||||
background-color: #eee;
|
||||
background-image: radial-gradient(#fff 1%, transparent 11%),
|
||||
radial-gradient(#fff 1%, transparent 11%);
|
||||
background-color: #efefef;
|
||||
background-image: radial-gradient(#fff 51%, transparent 91%),
|
||||
radial-gradient(#fff 51%, transparent 91%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-repeat: repeat;
|
||||
|
|
@ -58,43 +58,96 @@
|
|||
</head>
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid">
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart-elk LR
|
||||
b(`The dog in **the** hog(2)... a a a a *very long text* about it
|
||||
Word!
|
||||
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `)
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*] </pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart RL
|
||||
subgraph "`one`"
|
||||
a1 -- l1 --> a2
|
||||
a1 -- l2 --> a2
|
||||
end
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
flowchart RL
|
||||
subgraph "`one`"
|
||||
a1 -- l1 --> a2
|
||||
a1 -- l2 --> a2
|
||||
end
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart
|
||||
id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart LR
|
||||
A[A text that needs to be wrapped wraps to another line]
|
||||
B[A text that needs to be<br/>wrapped wraps to another line]
|
||||
C["`A text that needs to be wrapped to another line`"]</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart LR
|
||||
C["`A text
|
||||
that needs
|
||||
to be wrapped
|
||||
in another
|
||||
way`"]
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid">
|
||||
classDiagram-v2
|
||||
note "I love this diagram!\nDo you love it?"
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
stateDiagram-v2
|
||||
State1: The state with a note with minus - and plus + in it
|
||||
note left of State1
|
||||
Important information! You can write
|
||||
notes with . and in them.
|
||||
end note </pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
mindmap
|
||||
root
|
||||
Child3(A node with an icon and with a long text that wraps to keep the node size in check)
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart-elk LR
|
||||
b("The dog in the hog... a very<br/>long text about it<br/>Word!")
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart-elk LR
|
||||
b("The dog in the hog... a very<br/>long text about it<br/>Word!")
|
||||
</pre>
|
||||
>
|
||||
%%{init: {"theme": "forest"} }%%
|
||||
mindmap
|
||||
id1[**Start2**<br/>end]
|
||||
id2[**Start2**<br />end]
|
||||
%% Another comment
|
||||
id3[**Start2**<br>end] %% Comment
|
||||
id4[**Start2**<br >end<br >the very end]
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
mindmap
|
||||
id1[`**Start2**
|
||||
second line 😎 with long text that is wrapping to the next line`]
|
||||
id2[`Child **with bold** text`]
|
||||
id3[`Children of which some
|
||||
is using *italic type of* text`]
|
||||
id1["`**Start2**
|
||||
second line 😎 with long text that is wrapping to the next line`"]
|
||||
id2["`Child **with bold** text`"]
|
||||
id3["`Children of which some
|
||||
is using *italic type of* text`"]
|
||||
id4[Child]
|
||||
id5[`Child
|
||||
id5["`Child
|
||||
Row
|
||||
and another
|
||||
`]
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
mindmap
|
||||
id1["`**Start** with
|
||||
a second line 😎`"]
|
||||
id2["`The dog in **the** hog... a *very long text* about it
|
||||
Word!`"]
|
||||
`"]
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
mindmap
|
||||
id1("`**Root**`"]
|
||||
id2["`A formatted text... with **bold** and *italics*`"]
|
||||
id3[Regular labels works as usual]
|
||||
id4["`Emojis and unicode works too: 🤓
|
||||
शान्तिः سلام 和平 `"]
|
||||
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||
flowchart TB
|
||||
%% I could not figure out how to use double quotes in labels in Mermaid
|
||||
|
|
@ -110,7 +163,7 @@ flowchart TB
|
|||
rom --> core2
|
||||
end
|
||||
|
||||
subgraph amd[AMD Latte GPU]
|
||||
subgraph amd["`**AMD** Latte GPU`"]
|
||||
mem[Memory & I/O Bridge]
|
||||
dram[DRAM Controller]
|
||||
edram[32 MB EDRAM MEM1]
|
||||
|
|
@ -149,6 +202,62 @@ flowchart TB
|
|||
rtc{{rtc}}
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
|
||||
flowchart TB
|
||||
%% I could not figure out how to use double quotes in labels in Mermaid
|
||||
subgraph ibm[IBM Espresso CPU]
|
||||
core0[IBM PowerPC Broadway Core 0]
|
||||
core1[IBM PowerPC Broadway Core 1]
|
||||
core2[IBM PowerPC Broadway Core 2]
|
||||
|
||||
rom[16 KB ROM]
|
||||
|
||||
core0 --- core2
|
||||
|
||||
rom --> core2
|
||||
end
|
||||
|
||||
subgraph amd["`**AMD** Latte GPU`"]
|
||||
mem[Memory & I/O Bridge]
|
||||
dram[DRAM Controller]
|
||||
edram[32 MB EDRAM MEM1]
|
||||
rom[512 B SEEPROM]
|
||||
|
||||
sata[SATA IF]
|
||||
exi[EXI]
|
||||
|
||||
subgraph gx[GX]
|
||||
sram[3 MB 1T-SRAM]
|
||||
end
|
||||
|
||||
radeon[AMD Radeon R7xx GX2]
|
||||
|
||||
mem --- gx
|
||||
mem --- radeon
|
||||
|
||||
rom --- mem
|
||||
|
||||
mem --- sata
|
||||
mem --- exi
|
||||
|
||||
dram --- sata
|
||||
dram --- exi
|
||||
end
|
||||
|
||||
ddr3[2 GB DDR3 RAM MEM2]
|
||||
|
||||
mem --- ddr3
|
||||
dram --- ddr3
|
||||
edram --- ddr3
|
||||
|
||||
core1 --- mem
|
||||
|
||||
exi --- rtc
|
||||
rtc{{rtc}}
|
||||
</pre
|
||||
>
|
||||
|
||||
<br />
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart TB
|
||||
|
|
@ -291,16 +400,16 @@ mindmap
|
|||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
// theme: 'forest',
|
||||
startOnLoad: true,
|
||||
logLevel: 0,
|
||||
flowchart: {
|
||||
// defaultRenderer: 'elk',
|
||||
useMaxWidth: false,
|
||||
htmlLabels: false,
|
||||
// htmlLabels: true,
|
||||
// htmlLabels: false,
|
||||
htmlLabels: true,
|
||||
},
|
||||
// htmlLabels: true,
|
||||
// htmlLabels: false,
|
||||
gantt: {
|
||||
useMaxWidth: false,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ mermaid.initialize(config);
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667)
|
||||
[mermaidAPI.ts:673](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L673)
|
||||
|
||||
## Functions
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/news/announcements.md](../../packages/mermaid/src/docs/news/announcements.md).
|
||||
|
||||
# Announcements
|
||||
|
||||
## [Automatic text wrapping in flowcharts is here!](https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here)
|
||||
|
||||
3 April 2023 · 3 mins
|
||||
|
||||
Markdown Strings reduce the hassle # Starting from v10.
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/news/blog.md](../../packages/mermaid/src/docs/news/blog.md).
|
||||
|
||||
# Blog
|
||||
|
||||
## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
|
||||
|
||||
27 March 2023 · 2 mins
|
||||
|
||||
Exciting news for all Mermaid OSS fans: Mermaid Chart has officially launched with Mermaid Chart!
|
||||
|
||||
## [If you're not excited about ChatGPT, then you're not being creative](https://www.mermaidchart.com/blog/posts/if-youre-not-excited-about-chatgpt-then-youre-not-being-creative-enough/)
|
||||
|
||||
8 March 2023 · 9 mins
|
||||
|
||||
The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the trough of disillusionment.
|
||||
|
||||
## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://www.mermaidchart.com/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/)
|
||||
|
||||
1 March 2023 · 12 mins
|
||||
|
||||
Flowchart design is a game of balance: Read about the importance of dialling in the right level of detail and how to manage complexity in large flowcharts.
|
||||
|
||||
## [Busting the myth that developers can't write](https://www.mermaidchart.com/blog/posts/busting-the-myth-that-developers-cant-write/)
|
||||
|
||||
10 February 2023 · 10 mins
|
||||
|
||||
Busting the myth that developers can’t write # It’s an annoying stereotype that developers don’t know how to write, speak, and otherwise communicate.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 12 KiB |
|
|
@ -710,6 +710,44 @@ flowchart LR
|
|||
B1 --> B2
|
||||
```
|
||||
|
||||
## Markdown Strings
|
||||
|
||||
The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart LR
|
||||
subgraph "One"
|
||||
a("`The **cat**
|
||||
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
|
||||
end
|
||||
subgraph "`**Two**`"
|
||||
c("`The **cat**
|
||||
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart LR
|
||||
subgraph "One"
|
||||
a("`The **cat**
|
||||
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
|
||||
end
|
||||
subgraph "`**Two**`"
|
||||
c("`The **cat**
|
||||
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
|
||||
end
|
||||
```
|
||||
|
||||
Formatting:
|
||||
|
||||
- For bold text, use double asterisks \*\* before and after the text.
|
||||
- For italics, use single asterisks \* before and after the text.
|
||||
- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
|
||||
|
||||
This feature is applicable to node labels, edge labels, and subgraph labels.
|
||||
|
||||
## Interaction
|
||||
|
||||
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
|
||||
|
|
|
|||
|
|
@ -464,3 +464,41 @@ Beginner's tip—a full example using interactive links in an html context:
|
|||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Bar chart (using gantt chart)
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
title Git Issues - days since last update
|
||||
dateFormat X
|
||||
axisFormat %s
|
||||
section Issue19062
|
||||
71 : 0, 71
|
||||
section Issue19401
|
||||
36 : 0, 36
|
||||
section Issue193
|
||||
34 : 0, 34
|
||||
section Issue7441
|
||||
9 : 0, 9
|
||||
section Issue1300
|
||||
5 : 0, 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title Git Issues - days since last update
|
||||
dateFormat X
|
||||
axisFormat %s
|
||||
section Issue19062
|
||||
71 : 0, 71
|
||||
section Issue19401
|
||||
36 : 0, 36
|
||||
section Issue193
|
||||
34 : 0, 34
|
||||
section Issue7441
|
||||
9 : 0, 9
|
||||
section Issue1300
|
||||
5 : 0, 5
|
||||
```
|
||||
|
|
|
|||
|
|
@ -254,6 +254,34 @@ Root
|
|||
C
|
||||
```
|
||||
|
||||
## Markdown Strings
|
||||
|
||||
The "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
id1["`**Root** with
|
||||
a second line
|
||||
Unicode works too: 🤓`"]
|
||||
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
|
||||
id3[Regular labels still works]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id1["`**Root** with
|
||||
a second line
|
||||
Unicode works too: 🤓`"]
|
||||
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
|
||||
id3[Regular labels still works]
|
||||
```
|
||||
|
||||
Formatting:
|
||||
|
||||
- For bold text, use double asterisks \*\* before and after the text.
|
||||
- For italics, use single asterisks \* before and after the text.
|
||||
- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
|
||||
|
||||
## Integrating with your library/website.
|
||||
|
||||
Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "mermaid-monorepo",
|
||||
"private": true,
|
||||
"version": "10.0.2",
|
||||
"version": "10.1.0",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@7.30.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mermaid",
|
||||
"version": "10.0.2",
|
||||
"version": "10.1.0",
|
||||
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"type": "module",
|
||||
"module": "./dist/mermaid.core.mjs",
|
||||
|
|
|
|||
|
|
@ -63,13 +63,20 @@ const rect = (parent, node) => {
|
|||
.attr('width', width)
|
||||
.attr('height', node.height + padding);
|
||||
|
||||
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) + ')'
|
||||
);
|
||||
} 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) + ')'
|
||||
);
|
||||
}
|
||||
// Center the label
|
||||
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 - bbox.height) + ')'
|
||||
'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
|
||||
);
|
||||
|
||||
const rectBox = rect.node().getBBox();
|
||||
node.width = rectBox.width;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { insertCluster, clear as clearClusters } from './clusters';
|
|||
import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
|
||||
import { log } from '../logger';
|
||||
|
||||
const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
|
||||
const recursiveRender = async (_elem, graph, diagramtype, 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);
|
||||
|
|
@ -35,44 +35,46 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
|
|||
|
||||
// Insert nodes, this will insert them into the dom and each node will get a size. The size is updated
|
||||
// to the abstract node and is later used by dagre for the layout
|
||||
graph.nodes().forEach(function (v) {
|
||||
const node = graph.node(v);
|
||||
if (parentCluster !== undefined) {
|
||||
const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
|
||||
// data.clusterPositioning = true;
|
||||
log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);
|
||||
graph.setNode(parentCluster.id, data);
|
||||
if (!graph.parent(v)) {
|
||||
log.trace('Setting parent', v, parentCluster.id);
|
||||
graph.setParent(v, parentCluster.id, data);
|
||||
await Promise.all(
|
||||
graph.nodes().map(async function (v) {
|
||||
const node = graph.node(v);
|
||||
if (parentCluster !== undefined) {
|
||||
const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
|
||||
// data.clusterPositioning = true;
|
||||
log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);
|
||||
graph.setNode(parentCluster.id, data);
|
||||
if (!graph.parent(v)) {
|
||||
log.trace('Setting parent', v, parentCluster.id);
|
||||
graph.setParent(v, parentCluster.id, data);
|
||||
}
|
||||
}
|
||||
}
|
||||
log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));
|
||||
if (node && node.clusterNode) {
|
||||
// const children = graph.children(v);
|
||||
log.info('Cluster identified', v, node.width, graph.node(v));
|
||||
const o = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
|
||||
const newEl = o.elem;
|
||||
updateNodeBounds(node, newEl);
|
||||
node.diff = o.diff || 0;
|
||||
log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y);
|
||||
setNodeElem(newEl, node);
|
||||
log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));
|
||||
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, graph.node(v));
|
||||
const newEl = o.elem;
|
||||
updateNodeBounds(node, newEl);
|
||||
node.diff = o.diff || 0;
|
||||
log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y);
|
||||
setNodeElem(newEl, node);
|
||||
|
||||
log.warn('Recursive render complete ', newEl, node);
|
||||
} else {
|
||||
if (graph.children(v).length > 0) {
|
||||
// This is a cluster but not to be rendered recursively
|
||||
// Render as before
|
||||
log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);
|
||||
log.info(findNonClusterChild(node.id, graph));
|
||||
clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
|
||||
// insertCluster(clusters, graph.node(v));
|
||||
log.warn('Recursive render complete ', newEl, node);
|
||||
} else {
|
||||
log.info('Node - the non recursive path', v, node.id, node);
|
||||
insertNode(nodes, graph.node(v), dir);
|
||||
if (graph.children(v).length > 0) {
|
||||
// This is a cluster but not to be rendered recursively
|
||||
// Render as before
|
||||
log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);
|
||||
log.info(findNonClusterChild(node.id, graph));
|
||||
clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
|
||||
// insertCluster(clusters, graph.node(v));
|
||||
} else {
|
||||
log.info('Node - the non recursive path', v, node.id, node);
|
||||
await insertNode(nodes, graph.node(v), dir);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
);
|
||||
|
||||
// Insert labels, this will insert them into the dom so that the width can be calculated
|
||||
// Also figure out which edges point to/from clusters and adjust them accordingly
|
||||
|
|
@ -146,7 +148,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
|
|||
return { elem, diff };
|
||||
};
|
||||
|
||||
export const render = (elem, graph, markers, diagramtype, id) => {
|
||||
export const render = async (elem, graph, markers, diagramtype, id) => {
|
||||
insertMarkers(elem, markers, diagramtype, id);
|
||||
clearNodes();
|
||||
clearEdges();
|
||||
|
|
@ -157,7 +159,7 @@ export const render = (elem, graph, markers, diagramtype, id) => {
|
|||
adjustClustersAndEdges(graph);
|
||||
log.warn('Graph after:', graphlibJson.write(graph));
|
||||
// log.warn('Graph ever after:', graphlibJson.write(graph.node('A').graph));
|
||||
recursiveRender(elem, graph, diagramtype);
|
||||
await recursiveRender(elem, graph, diagramtype);
|
||||
};
|
||||
|
||||
// const shapeDefinitions = {};
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ import note from './shapes/note';
|
|||
import { parseMember } from '../diagrams/class/svgDraw';
|
||||
import { evaluate } from '../diagrams/common/common';
|
||||
|
||||
const question = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const question = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
|
@ -69,8 +69,8 @@ const choice = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const hexagon = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const hexagon = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const f = 4;
|
||||
const h = bbox.height + node.padding;
|
||||
|
|
@ -96,8 +96,8 @@ const hexagon = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const rect_left_inv_arrow = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const rect_left_inv_arrow = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
|
@ -122,8 +122,8 @@ const rect_left_inv_arrow = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const lean_right = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const lean_right = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
|
@ -145,8 +145,8 @@ const lean_right = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const lean_left = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const lean_left = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
|
@ -168,8 +168,8 @@ const lean_left = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const trapezoid = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const trapezoid = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
|
@ -191,8 +191,8 @@ const trapezoid = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const inv_trapezoid = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const inv_trapezoid = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
|
@ -214,8 +214,8 @@ const inv_trapezoid = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const rect_right_inv_arrow = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const rect_right_inv_arrow = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
|
@ -238,8 +238,8 @@ const rect_right_inv_arrow = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const cylinder = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const cylinder = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const rx = w / 2;
|
||||
|
|
@ -310,21 +310,30 @@ const cylinder = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const rect = (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
|
||||
const rect = async (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = await labelHelper(
|
||||
parent,
|
||||
node,
|
||||
'node ' + node.classes,
|
||||
true
|
||||
);
|
||||
|
||||
// add the rect
|
||||
const rect = shapeSvg.insert('rect', ':first-child');
|
||||
|
||||
const totalWidth = bbox.width + node.padding * 2;
|
||||
const totalHeight = bbox.height + node.padding * 2;
|
||||
// const totalWidth = bbox.width + node.padding * 2;
|
||||
// const totalHeight = bbox.height + node.padding * 2;
|
||||
const totalWidth = bbox.width + node.padding;
|
||||
const totalHeight = bbox.height + node.padding;
|
||||
rect
|
||||
.attr('class', 'basic label-container')
|
||||
.attr('style', node.style)
|
||||
.attr('rx', node.rx)
|
||||
.attr('ry', node.ry)
|
||||
.attr('x', -bbox.width / 2 - node.padding)
|
||||
.attr('y', -bbox.height / 2 - node.padding)
|
||||
// .attr('x', -bbox.width / 2 - node.padding)
|
||||
// .attr('y', -bbox.height / 2 - node.padding)
|
||||
.attr('x', -bbox.width / 2 - halfPadding)
|
||||
.attr('y', -bbox.height / 2 - halfPadding)
|
||||
.attr('width', totalWidth)
|
||||
.attr('height', totalHeight);
|
||||
|
||||
|
|
@ -348,10 +357,10 @@ const rect = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const labelRect = (parent, node) => {
|
||||
const { shapeSvg } = labelHelper(parent, node, 'label', true);
|
||||
const labelRect = async (parent, node) => {
|
||||
const { shapeSvg } = await labelHelper(parent, node, 'label', true);
|
||||
|
||||
log.info('Classes = ', node.classes);
|
||||
log.trace('Classes = ', node.classes);
|
||||
// add the rect
|
||||
const rect = shapeSvg.insert('rect', ':first-child');
|
||||
|
||||
|
|
@ -535,8 +544,8 @@ const rectWithTitle = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const stadium = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const stadium = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const h = bbox.height + node.padding;
|
||||
const w = bbox.width + h / 4 + node.padding;
|
||||
|
|
@ -561,8 +570,8 @@ const stadium = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const circle = (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
|
||||
const circle = async (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
|
||||
const circle = shapeSvg.insert('circle', ':first-child');
|
||||
|
||||
// center the circle around its coordinate
|
||||
|
|
@ -586,8 +595,8 @@ const circle = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const doublecircle = (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
|
||||
const doublecircle = async (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
|
||||
const gap = 5;
|
||||
const circleGroup = shapeSvg.insert('g', ':first-child');
|
||||
const outerCircle = circleGroup.insert('circle');
|
||||
|
|
@ -622,8 +631,8 @@ const doublecircle = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const subroutine = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const subroutine = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
|
@ -972,7 +981,7 @@ const shapes = {
|
|||
|
||||
let nodeElems = {};
|
||||
|
||||
export const insertNode = (elem, node, dir) => {
|
||||
export const insertNode = async (elem, node, dir) => {
|
||||
let newEl;
|
||||
let el;
|
||||
|
||||
|
|
@ -985,9 +994,9 @@ export const insertNode = (elem, node, dir) => {
|
|||
target = node.linkTarget || '_blank';
|
||||
}
|
||||
newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
|
||||
el = shapes[node.shape](newEl, node, dir);
|
||||
el = await shapes[node.shape](newEl, node, dir);
|
||||
} else {
|
||||
el = shapes[node.shape](elem, node, dir);
|
||||
el = await shapes[node.shape](elem, node, dir);
|
||||
newEl = el;
|
||||
}
|
||||
if (node.tooltip) {
|
||||
|
|
@ -1013,6 +1022,7 @@ export const clear = () => {
|
|||
|
||||
export const positionNode = (node) => {
|
||||
const el = nodeElems[node.id];
|
||||
|
||||
log.trace(
|
||||
'Transforming node',
|
||||
node.diff,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,19 @@
|
|||
import { updateNodeBounds, labelHelper } from './util';
|
||||
import { log } from '../../logger';
|
||||
import { getConfig } from '../../config';
|
||||
import intersect from '../intersect/index.js';
|
||||
|
||||
const note = (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
|
||||
const note = async (parent, node) => {
|
||||
const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart.htmlLabels;
|
||||
if (!useHtmlLabels) {
|
||||
node.centerLabel = true;
|
||||
}
|
||||
const { shapeSvg, bbox, halfPadding } = await labelHelper(
|
||||
parent,
|
||||
node,
|
||||
'node ' + node.classes,
|
||||
true
|
||||
);
|
||||
|
||||
log.info('Classes = ', node.classes);
|
||||
// add the rect
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@ import { getConfig } from '../../config';
|
|||
import { decodeEntities } from '../../mermaidAPI';
|
||||
import { select } from 'd3';
|
||||
import { evaluate, sanitizeText } from '../../diagrams/common/common';
|
||||
export const labelHelper = (parent, node, _classes, isNode) => {
|
||||
|
||||
export const labelHelper = async (parent, node, _classes, isNode) => {
|
||||
let classes;
|
||||
const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
|
||||
if (!_classes) {
|
||||
classes = 'node default';
|
||||
} else {
|
||||
|
|
@ -33,7 +35,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
|
|||
if (node.labelType === 'markdown') {
|
||||
// text = textNode;
|
||||
text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
|
||||
useHtmlLabels: getConfig().flowchart.htmlLabels,
|
||||
useHtmlLabels,
|
||||
width: node.width || getConfig().flowchart.wrappingWidth,
|
||||
classes: 'markdown-node-label',
|
||||
});
|
||||
|
|
@ -50,23 +52,56 @@ export const labelHelper = (parent, node, _classes, isNode) => {
|
|||
|
||||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
const halfPadding = node.padding / 2;
|
||||
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = text.children[0];
|
||||
const dv = select(text);
|
||||
|
||||
// if there are images, need to wait for them to load before getting the bounding box
|
||||
const images = div.getElementsByTagName('img');
|
||||
if (images) {
|
||||
const noImgText = labelText.replace(/<img[^>]*>/g, '').trim() === '';
|
||||
|
||||
await Promise.all(
|
||||
[...images].map(
|
||||
(img) =>
|
||||
new Promise((res) =>
|
||||
img.addEventListener('load', function () {
|
||||
img.style.display = 'flex';
|
||||
img.style.flexDirection = 'column';
|
||||
|
||||
if (noImgText) {
|
||||
// default size if no text
|
||||
const bodyFontSize = getConfig().fontSize
|
||||
? getConfig().fontSize
|
||||
: window.getComputedStyle(document.body).fontSize;
|
||||
const enlargingFactor = 5;
|
||||
img.style.width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
|
||||
} else {
|
||||
img.style.width = '100%';
|
||||
}
|
||||
res(img);
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
bbox = div.getBoundingClientRect();
|
||||
dv.attr('width', bbox.width);
|
||||
dv.attr('height', bbox.height);
|
||||
}
|
||||
|
||||
const halfPadding = node.padding / 2;
|
||||
|
||||
// Center the label
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (useHtmlLabels) {
|
||||
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
|
||||
} else {
|
||||
label.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')');
|
||||
}
|
||||
if (node.centerLabel) {
|
||||
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
|
||||
}
|
||||
label.insert('rect', ':first-child');
|
||||
return { shapeSvg, bbox, halfPadding, label };
|
||||
};
|
||||
|
|
|
|||
|
|
@ -248,7 +248,7 @@ export const setConf = function (cnf: any) {
|
|||
* @param _version -
|
||||
* @param diagObj -
|
||||
*/
|
||||
export const draw = function (text: string, id: string, _version: string, diagObj: any) {
|
||||
export const draw = async function (text: string, id: string, _version: string, diagObj: any) {
|
||||
log.info('Drawing class - ', id);
|
||||
|
||||
// TODO V10: Why flowchart? Might be a mistake when copying.
|
||||
|
|
@ -300,7 +300,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
|
|||
// Run the renderer. This is what draws the final graph.
|
||||
// @ts-ignore Ignore type error for now
|
||||
const element = root.select('#' + id + ' g');
|
||||
render(
|
||||
await render(
|
||||
element,
|
||||
g,
|
||||
['aggregation', 'extension', 'composition', 'dependency', 'lollipop'],
|
||||
|
|
|
|||
|
|
@ -35,229 +35,231 @@ let nodeDb = {};
|
|||
// * @param doc
|
||||
// * @param diagObj
|
||||
// */
|
||||
export const addVertices = function (vert, svgId, root, doc, diagObj, parentLookupDb, graph) {
|
||||
export const addVertices = async function (vert, svgId, root, doc, diagObj, parentLookupDb, graph) {
|
||||
const svg = root.select(`[id="${svgId}"]`);
|
||||
const nodes = svg.insert('g').attr('class', 'nodes');
|
||||
const keys = Object.keys(vert);
|
||||
|
||||
// Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
|
||||
keys.forEach(function (id) {
|
||||
const vertex = vert[id];
|
||||
await Promise.all(
|
||||
keys.map(async function (id) {
|
||||
const vertex = vert[id];
|
||||
|
||||
/**
|
||||
* Variable for storing the classes for the vertex
|
||||
*
|
||||
* @type {string}
|
||||
*/
|
||||
let classStr = 'default';
|
||||
if (vertex.classes.length > 0) {
|
||||
classStr = vertex.classes.join(' ');
|
||||
}
|
||||
classStr = classStr + ' flowchart-label';
|
||||
const styles = getStylesFromArray(vertex.styles);
|
||||
/**
|
||||
* Variable for storing the classes for the vertex
|
||||
*
|
||||
* @type {string}
|
||||
*/
|
||||
let classStr = 'default';
|
||||
if (vertex.classes.length > 0) {
|
||||
classStr = vertex.classes.join(' ');
|
||||
}
|
||||
classStr = classStr + ' flowchart-label';
|
||||
const styles = getStylesFromArray(vertex.styles);
|
||||
|
||||
// Use vertex id as text in the box if no text is provided by the graph definition
|
||||
let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;
|
||||
// Use vertex id as text in the box if no text is provided by the graph definition
|
||||
let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;
|
||||
|
||||
// We create a SVG label, either by delegating to addHtmlLabel or manually
|
||||
let vertexNode;
|
||||
const labelData = { width: 0, height: 0 };
|
||||
// We create a SVG label, either by delegating to addHtmlLabel or manually
|
||||
let vertexNode;
|
||||
const labelData = { width: 0, height: 0 };
|
||||
|
||||
const ports = [
|
||||
{
|
||||
id: vertex.id + '-west',
|
||||
layoutOptions: {
|
||||
'port.side': 'WEST',
|
||||
const ports = [
|
||||
{
|
||||
id: vertex.id + '-west',
|
||||
layoutOptions: {
|
||||
'port.side': 'WEST',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: vertex.id + '-east',
|
||||
layoutOptions: {
|
||||
'port.side': 'EAST',
|
||||
{
|
||||
id: vertex.id + '-east',
|
||||
layoutOptions: {
|
||||
'port.side': 'EAST',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: vertex.id + '-south',
|
||||
layoutOptions: {
|
||||
'port.side': 'SOUTH',
|
||||
{
|
||||
id: vertex.id + '-south',
|
||||
layoutOptions: {
|
||||
'port.side': 'SOUTH',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: vertex.id + '-north',
|
||||
layoutOptions: {
|
||||
'port.side': 'NORTH',
|
||||
{
|
||||
id: vertex.id + '-north',
|
||||
layoutOptions: {
|
||||
'port.side': 'NORTH',
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
];
|
||||
|
||||
let radious = 0;
|
||||
let _shape = '';
|
||||
let layoutOptions = {};
|
||||
// Set the shape based parameters
|
||||
switch (vertex.type) {
|
||||
case 'round':
|
||||
radious = 5;
|
||||
_shape = 'rect';
|
||||
break;
|
||||
case 'square':
|
||||
_shape = 'rect';
|
||||
break;
|
||||
case 'diamond':
|
||||
_shape = 'question';
|
||||
layoutOptions = {
|
||||
portConstraints: 'FIXED_SIDE',
|
||||
};
|
||||
break;
|
||||
case 'hexagon':
|
||||
_shape = 'hexagon';
|
||||
break;
|
||||
case 'odd':
|
||||
_shape = 'rect_left_inv_arrow';
|
||||
break;
|
||||
case 'lean_right':
|
||||
_shape = 'lean_right';
|
||||
break;
|
||||
case 'lean_left':
|
||||
_shape = 'lean_left';
|
||||
break;
|
||||
case 'trapezoid':
|
||||
_shape = 'trapezoid';
|
||||
break;
|
||||
case 'inv_trapezoid':
|
||||
_shape = 'inv_trapezoid';
|
||||
break;
|
||||
case 'odd_right':
|
||||
_shape = 'rect_left_inv_arrow';
|
||||
break;
|
||||
case 'circle':
|
||||
_shape = 'circle';
|
||||
break;
|
||||
case 'ellipse':
|
||||
_shape = 'ellipse';
|
||||
break;
|
||||
case 'stadium':
|
||||
_shape = 'stadium';
|
||||
break;
|
||||
case 'subroutine':
|
||||
_shape = 'subroutine';
|
||||
break;
|
||||
case 'cylinder':
|
||||
_shape = 'cylinder';
|
||||
break;
|
||||
case 'group':
|
||||
_shape = 'rect';
|
||||
break;
|
||||
case 'doublecircle':
|
||||
_shape = 'doublecircle';
|
||||
break;
|
||||
default:
|
||||
_shape = 'rect';
|
||||
}
|
||||
let radious = 0;
|
||||
let _shape = '';
|
||||
let layoutOptions = {};
|
||||
// Set the shape based parameters
|
||||
switch (vertex.type) {
|
||||
case 'round':
|
||||
radious = 5;
|
||||
_shape = 'rect';
|
||||
break;
|
||||
case 'square':
|
||||
_shape = 'rect';
|
||||
break;
|
||||
case 'diamond':
|
||||
_shape = 'question';
|
||||
layoutOptions = {
|
||||
portConstraints: 'FIXED_SIDE',
|
||||
};
|
||||
break;
|
||||
case 'hexagon':
|
||||
_shape = 'hexagon';
|
||||
break;
|
||||
case 'odd':
|
||||
_shape = 'rect_left_inv_arrow';
|
||||
break;
|
||||
case 'lean_right':
|
||||
_shape = 'lean_right';
|
||||
break;
|
||||
case 'lean_left':
|
||||
_shape = 'lean_left';
|
||||
break;
|
||||
case 'trapezoid':
|
||||
_shape = 'trapezoid';
|
||||
break;
|
||||
case 'inv_trapezoid':
|
||||
_shape = 'inv_trapezoid';
|
||||
break;
|
||||
case 'odd_right':
|
||||
_shape = 'rect_left_inv_arrow';
|
||||
break;
|
||||
case 'circle':
|
||||
_shape = 'circle';
|
||||
break;
|
||||
case 'ellipse':
|
||||
_shape = 'ellipse';
|
||||
break;
|
||||
case 'stadium':
|
||||
_shape = 'stadium';
|
||||
break;
|
||||
case 'subroutine':
|
||||
_shape = 'subroutine';
|
||||
break;
|
||||
case 'cylinder':
|
||||
_shape = 'cylinder';
|
||||
break;
|
||||
case 'group':
|
||||
_shape = 'rect';
|
||||
break;
|
||||
case 'doublecircle':
|
||||
_shape = 'doublecircle';
|
||||
break;
|
||||
default:
|
||||
_shape = 'rect';
|
||||
}
|
||||
|
||||
// Add the node
|
||||
const node = {
|
||||
labelStyle: styles.labelStyle,
|
||||
shape: _shape,
|
||||
labelText: vertexText,
|
||||
labelType: vertex.labelType,
|
||||
rx: radious,
|
||||
ry: radious,
|
||||
class: classStr,
|
||||
style: styles.style,
|
||||
id: vertex.id,
|
||||
link: vertex.link,
|
||||
linkTarget: vertex.linkTarget,
|
||||
tooltip: diagObj.db.getTooltip(vertex.id) || '',
|
||||
domId: diagObj.db.lookUpDomId(vertex.id),
|
||||
haveCallback: vertex.haveCallback,
|
||||
width: vertex.type === 'group' ? 500 : undefined,
|
||||
dir: vertex.dir,
|
||||
type: vertex.type,
|
||||
props: vertex.props,
|
||||
padding: getConfig().flowchart.padding,
|
||||
};
|
||||
let boundingBox;
|
||||
let nodeEl;
|
||||
// Add the node
|
||||
const node = {
|
||||
labelStyle: styles.labelStyle,
|
||||
shape: _shape,
|
||||
labelText: vertexText,
|
||||
labelType: vertex.labelType,
|
||||
rx: radious,
|
||||
ry: radious,
|
||||
class: classStr,
|
||||
style: styles.style,
|
||||
id: vertex.id,
|
||||
link: vertex.link,
|
||||
linkTarget: vertex.linkTarget,
|
||||
tooltip: diagObj.db.getTooltip(vertex.id) || '',
|
||||
domId: diagObj.db.lookUpDomId(vertex.id),
|
||||
haveCallback: vertex.haveCallback,
|
||||
width: vertex.type === 'group' ? 500 : undefined,
|
||||
dir: vertex.dir,
|
||||
type: vertex.type,
|
||||
props: vertex.props,
|
||||
padding: getConfig().flowchart.padding,
|
||||
};
|
||||
let boundingBox;
|
||||
let nodeEl;
|
||||
|
||||
// Add the element to the DOM
|
||||
if (node.type !== 'group') {
|
||||
nodeEl = insertNode(nodes, node, vertex.dir);
|
||||
boundingBox = nodeEl.node().getBBox();
|
||||
} else {
|
||||
const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||
// svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
|
||||
// const rows = vertexText.split(common.lineBreakRegex);
|
||||
// for (const row of rows) {
|
||||
// const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
|
||||
// tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
|
||||
// tspan.setAttribute('dy', '1em');
|
||||
// tspan.setAttribute('x', '1');
|
||||
// tspan.textContent = row;
|
||||
// svgLabel.appendChild(tspan);
|
||||
// Add the element to the DOM
|
||||
if (node.type !== 'group') {
|
||||
nodeEl = insertNode(nodes, node, vertex.dir);
|
||||
boundingBox = nodeEl.node().getBBox();
|
||||
} else {
|
||||
const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||
// svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
|
||||
// const rows = vertexText.split(common.lineBreakRegex);
|
||||
// for (const row of rows) {
|
||||
// const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
|
||||
// tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
|
||||
// tspan.setAttribute('dy', '1em');
|
||||
// tspan.setAttribute('x', '1');
|
||||
// tspan.textContent = row;
|
||||
// svgLabel.appendChild(tspan);
|
||||
// }
|
||||
// vertexNode = svgLabel;
|
||||
// const bbox = vertexNode.getBBox();
|
||||
const { shapeSvg, bbox } = await labelHelper(nodes, node, undefined, true);
|
||||
labelData.width = bbox.width;
|
||||
labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
|
||||
labelData.height = bbox.height;
|
||||
labelData.labelNode = shapeSvg.node();
|
||||
node.labelData = labelData;
|
||||
}
|
||||
// const { shapeSvg, bbox } = await labelHelper(svg, node, undefined, true);
|
||||
|
||||
const data = {
|
||||
id: vertex.id,
|
||||
ports: vertex.type === 'diamond' ? ports : [],
|
||||
// labelStyle: styles.labelStyle,
|
||||
// shape: _shape,
|
||||
layoutOptions,
|
||||
labelText: vertexText,
|
||||
labelData,
|
||||
// labels: [{ text: vertexText }],
|
||||
// rx: radius,
|
||||
// ry: radius,
|
||||
// class: classStr,
|
||||
// style: styles.style,
|
||||
// link: vertex.link,
|
||||
// linkTarget: vertex.linkTarget,
|
||||
// tooltip: diagObj.db.getTooltip(vertex.id) || '',
|
||||
domId: diagObj.db.lookUpDomId(vertex.id),
|
||||
// haveCallback: vertex.haveCallback,
|
||||
width: boundingBox?.width,
|
||||
height: boundingBox?.height,
|
||||
// dir: vertex.dir,
|
||||
type: vertex.type,
|
||||
// props: vertex.props,
|
||||
// padding: getConfig().flowchart.padding,
|
||||
// boundingBox,
|
||||
el: nodeEl,
|
||||
parent: parentLookupDb.parentById[vertex.id],
|
||||
};
|
||||
// if (!Object.keys(parentLookupDb.childrenById).includes(vertex.id)) {
|
||||
// graph.children.push({
|
||||
// ...data,
|
||||
// });
|
||||
// }
|
||||
// vertexNode = svgLabel;
|
||||
// const bbox = vertexNode.getBBox();
|
||||
const { shapeSvg, bbox } = labelHelper(nodes, node, undefined, true);
|
||||
labelData.width = bbox.width;
|
||||
labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
|
||||
labelData.height = bbox.height;
|
||||
labelData.labelNode = shapeSvg.node();
|
||||
node.labelData = labelData;
|
||||
}
|
||||
// const { shapeSvg, bbox } = labelHelper(svg, node, undefined, true);
|
||||
|
||||
const data = {
|
||||
id: vertex.id,
|
||||
ports: vertex.type === 'diamond' ? ports : [],
|
||||
// labelStyle: styles.labelStyle,
|
||||
// shape: _shape,
|
||||
layoutOptions,
|
||||
labelText: vertexText,
|
||||
labelData,
|
||||
// labels: [{ text: vertexText }],
|
||||
// rx: radius,
|
||||
// ry: radius,
|
||||
// class: classStr,
|
||||
// style: styles.style,
|
||||
// link: vertex.link,
|
||||
// linkTarget: vertex.linkTarget,
|
||||
// tooltip: diagObj.db.getTooltip(vertex.id) || '',
|
||||
domId: diagObj.db.lookUpDomId(vertex.id),
|
||||
// haveCallback: vertex.haveCallback,
|
||||
width: boundingBox?.width,
|
||||
height: boundingBox?.height,
|
||||
// dir: vertex.dir,
|
||||
type: vertex.type,
|
||||
// props: vertex.props,
|
||||
// padding: getConfig().flowchart.padding,
|
||||
// boundingBox,
|
||||
el: nodeEl,
|
||||
parent: parentLookupDb.parentById[vertex.id],
|
||||
};
|
||||
// if (!Object.keys(parentLookupDb.childrenById).includes(vertex.id)) {
|
||||
// graph.children.push({
|
||||
// ...data,
|
||||
// });
|
||||
// }
|
||||
nodeDb[node.id] = data;
|
||||
// log.trace('setNode', {
|
||||
// labelStyle: styles.labelStyle,
|
||||
// shape: _shape,
|
||||
// labelText: vertexText,
|
||||
// rx: radius,
|
||||
// ry: radius,
|
||||
// class: classStr,
|
||||
// style: styles.style,
|
||||
// id: vertex.id,
|
||||
// domId: diagObj.db.lookUpDomId(vertex.id),
|
||||
// width: vertex.type === 'group' ? 500 : undefined,
|
||||
// type: vertex.type,
|
||||
// dir: vertex.dir,
|
||||
// props: vertex.props,
|
||||
// padding: getConfig().flowchart.padding,
|
||||
// parent: parentLookupDb.parentById[vertex.id],
|
||||
// });
|
||||
});
|
||||
nodeDb[node.id] = data;
|
||||
// log.trace('setNode', {
|
||||
// labelStyle: styles.labelStyle,
|
||||
// shape: _shape,
|
||||
// labelText: vertexText,
|
||||
// rx: radius,
|
||||
// ry: radius,
|
||||
// class: classStr,
|
||||
// style: styles.style,
|
||||
// id: vertex.id,
|
||||
// domId: diagObj.db.lookUpDomId(vertex.id),
|
||||
// width: vertex.type === 'group' ? 500 : undefined,
|
||||
// type: vertex.type,
|
||||
// dir: vertex.dir,
|
||||
// props: vertex.props,
|
||||
// padding: getConfig().flowchart.padding,
|
||||
// parent: parentLookupDb.parentById[vertex.id],
|
||||
// });
|
||||
})
|
||||
);
|
||||
return graph;
|
||||
};
|
||||
|
||||
|
|
@ -861,7 +863,7 @@ export const draw = async function (text, id, _version, diagObj) {
|
|||
// in order to get the size of the node. You can't get the size of a node
|
||||
// that is not in the dom so we need to add it to the dom, get the size
|
||||
// we will position the nodes when we get the layout from elkjs
|
||||
graph = addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph, svg);
|
||||
graph = await addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph);
|
||||
|
||||
// Time for the edges, we start with adding an element in the node to hold the edges
|
||||
const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
|
||||
|
|
@ -934,9 +936,12 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, diagObj, depth) => {
|
|||
.attr('width', node.width)
|
||||
.attr('height', node.height);
|
||||
const label = subgraphEl.insert('g').attr('class', 'label');
|
||||
const labelCentering = getConfig().flowchart.htmlLabels ? node.labelData.width / 2 : 0;
|
||||
label.attr(
|
||||
'transform',
|
||||
`translate(${node.labels[0].x + relX + node.x}, ${node.labels[0].y + relY + node.y})`
|
||||
`translate(${node.labels[0].x + relX + node.x + labelCentering}, ${
|
||||
node.labels[0].y + relY + node.y + 3
|
||||
})`
|
||||
);
|
||||
label.node().appendChild(node.labelData.labelNode);
|
||||
|
||||
|
|
|
|||
|
|
@ -362,7 +362,7 @@ export const getClasses = function (text, diagObj) {
|
|||
* @param id
|
||||
*/
|
||||
|
||||
export const draw = function (text, id, _version, diagObj) {
|
||||
export const draw = async function (text, id, _version, diagObj) {
|
||||
log.info('Drawing flowchart');
|
||||
diagObj.db.clear();
|
||||
flowDb.setGen('gen-2');
|
||||
|
|
@ -451,7 +451,7 @@ export const draw = function (text, id, _version, diagObj) {
|
|||
|
||||
// Run the renderer. This is what draws the final graph.
|
||||
const element = root.select('#' + id + ' g');
|
||||
render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
|
||||
await render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
|
||||
|
||||
utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
|
||||
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@ const getStyles = (options: FlowChartStyleOptions) =>
|
|||
.cluster-label text {
|
||||
fill: ${options.titleColor};
|
||||
}
|
||||
.cluster-label span {
|
||||
.cluster-label span,p {
|
||||
color: ${options.titleColor};
|
||||
}
|
||||
|
||||
.label text,span {
|
||||
.label text,span,p {
|
||||
fill: ${options.nodeTextColor || options.textColor};
|
||||
color: ${options.nodeTextColor || options.textColor};
|
||||
}
|
||||
|
|
@ -92,7 +92,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
|
|||
fill: ${options.titleColor};
|
||||
}
|
||||
|
||||
.cluster span {
|
||||
.cluster span,p {
|
||||
color: ${options.titleColor};
|
||||
}
|
||||
/* .cluster div {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { sanitizeUrl } from '@braintree/sanitize-url';
|
||||
import dayjs from 'dayjs';
|
||||
import dayjsIsoWeek from 'dayjs/plugin/isoWeek.js';
|
||||
import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat.js';
|
||||
import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat.js';
|
||||
import dayjs from 'dayjs/esm/index.js';
|
||||
import dayjsIsoWeek from 'dayjs/esm/plugin/isoWeek/index.js';
|
||||
import dayjsCustomParseFormat from 'dayjs/esm/plugin/customParseFormat/index.js';
|
||||
import dayjsAdvancedFormat from 'dayjs/esm/plugin/advancedFormat/index.js';
|
||||
import { log } from '../../logger';
|
||||
import * as configApi from '../../config';
|
||||
import utils from '../../utils';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// @ts-nocheck TODO: Fix TS
|
||||
import dayjs from 'dayjs';
|
||||
import dayjs from 'dayjs/esm/index.js';
|
||||
import ganttDb from './ganttDb';
|
||||
import { convert } from '../../tests/util';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import dayjs from 'dayjs';
|
||||
import dayjs from 'dayjs/esm/index.js';
|
||||
import { log } from '../../logger';
|
||||
import {
|
||||
select,
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ export const draw = async (text, id, version, diagObj) => {
|
|||
// Parse the graph definition
|
||||
diagObj.parser.parse(text);
|
||||
|
||||
log.debug('Renering mindmap diagram\n' + text, diagObj);
|
||||
log.debug('Rendering mindmap diagram\n' + text, diagObj.parser);
|
||||
|
||||
const securityLevel = getConfig().securityLevel;
|
||||
// Handle root and Document for when rendering in sandbox mode
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
%%
|
||||
|
||||
\s*\%\%.* {yy.getLogger().trace('Found comment',yytext);}
|
||||
\s*\%\%.* {yy.getLogger().trace('Found comment',yytext); return 'SPACELINE';}
|
||||
// \%\%[^\n]*\n /* skip comments */
|
||||
"mindmap" return 'MINDMAP';
|
||||
":::" { this.begin('CLASS'); }
|
||||
|
|
|
|||
|
|
@ -217,7 +217,8 @@ export const drawNode = function (elem, node, fullSection, conf) {
|
|||
|
||||
// Create the wrapped text element
|
||||
const textElem = nodeElem.append('g');
|
||||
const newEl = createText(textElem, node.descr, {
|
||||
const description = node.descr.replace(/(<br\/*>)/g, '\n');
|
||||
const newEl = createText(textElem, description, {
|
||||
useHtmlLabels: htmlLabels,
|
||||
width: node.width,
|
||||
classes: 'mindmap-node-label',
|
||||
|
|
|
|||
|
|
@ -232,6 +232,9 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
|
|||
type: newNode.type,
|
||||
padding: 15, //getConfig().flowchart.padding
|
||||
};
|
||||
// if (useHtmlLabels) {
|
||||
nodeData.centerLabel = true;
|
||||
// }
|
||||
|
||||
if (parsedItem.note) {
|
||||
// Todo: set random id
|
||||
|
|
@ -240,6 +243,7 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
|
|||
shape: SHAPE_NOTE,
|
||||
labelText: parsedItem.note.text,
|
||||
classes: CSS_DIAGRAM_NOTE,
|
||||
// useHtmlLabels: false,
|
||||
style: '', // styles.style,
|
||||
id: itemId + NOTE_ID + '-' + graphItemCount,
|
||||
domId: stateDomId(itemId, graphItemCount, NOTE),
|
||||
|
|
@ -378,7 +382,7 @@ const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
|
|||
* @param _version
|
||||
* @param diag
|
||||
*/
|
||||
export const draw = function (text, id, _version, diag) {
|
||||
export const draw = async function (text, id, _version, diag) {
|
||||
log.info('Drawing state diagram (v2)', id);
|
||||
// diag.sb.clear();
|
||||
nodeDb = {};
|
||||
|
|
@ -432,7 +436,7 @@ export const draw = function (text, id, _version, diag) {
|
|||
// Run the renderer. This is what draws the final graph.
|
||||
|
||||
const element = root.select('#' + id + ' g');
|
||||
render(element, g, ['barb'], CSS_DIAGRAM, id);
|
||||
await render(element, g, ['barb'], CSS_DIAGRAM, id);
|
||||
|
||||
const padding = 8;
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,16 @@ export default defineConfig({
|
|||
},
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/mermaid-js/mermaid' },
|
||||
{ icon: 'slack', link: 'https://mermaid-talk.slack.com' },
|
||||
{
|
||||
icon: 'slack',
|
||||
link: 'https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE',
|
||||
},
|
||||
{
|
||||
icon: {
|
||||
svg: '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.16 490.16"><defs><mask id="Mask"><rect x="0" y="0" width="490.16" height="490.16" fill="white" /><path fill="black" d="M407.48,111.18A165.2,165.2,0,0,0,245.08,220,165.2,165.2,0,0,0,82.68,111.18a165.5,165.5,0,0,0,72.06,143.64,88.81,88.81,0,0,1,38.53,73.45v50.86H296.9V328.27a88.8,88.8,0,0,1,38.52-73.45,165.41,165.41,0,0,0,72.06-143.64Z"/><path fill="black" d="M160.63,328.27a56.09,56.09,0,0,0-24.27-46.49,198.74,198.74,0,0,1-28.54-23.66A196.87,196.87,0,0,1,82.53,227V379.13h78.1Z"/><path fill="black" d="M329.53,328.27a56.09,56.09,0,0,1,24.27-46.49,198.74,198.74,0,0,0,28.54-23.66A196.87,196.87,0,0,0,407.63,227V379.13h-78.1Z"/></mask><style>.cls-1{fill:#76767B;}.cls-1:hover{fill:#FF3570}</style></defs><rect class="cls-1" width="490.16" height="490.16" rx="84.61" mask="url(#Mask)" /></svg>',
|
||||
},
|
||||
link: 'https://www.mermaidchart.com/',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
|
@ -42,6 +51,11 @@ function nav() {
|
|||
activeMatch: '/config/',
|
||||
},
|
||||
{ text: 'Integrations', link: '/ecosystem/integrations', activeMatch: '/ecosystem/' },
|
||||
{
|
||||
text: 'Latest News',
|
||||
link: '/news/announcements',
|
||||
activeMatch: '/announcements',
|
||||
},
|
||||
{
|
||||
text: version,
|
||||
items: [
|
||||
|
|
@ -80,6 +94,7 @@ function sidebarAll() {
|
|||
...sidebarEcosystem(),
|
||||
...sidebarConfig(),
|
||||
...sidebarCommunity(),
|
||||
...sidebarNews(),
|
||||
];
|
||||
}
|
||||
|
||||
|
|
@ -162,3 +177,16 @@ function sidebarCommunity() {
|
|||
},
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarNews() {
|
||||
return [
|
||||
{
|
||||
text: '📰 Latest News',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Announcements', link: '/news/announcements' },
|
||||
{ text: 'Blog', link: '/news/blog' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,15 +23,15 @@ features:
|
|||
- title: ➕ Easy to use!
|
||||
details: Easily create and render detailed diagrams and charts with the Mermaid Live Editor.
|
||||
link: https://mermaid.live/
|
||||
- title: 🎥 Video Tutorials!
|
||||
details: Curated list of video tutorials and examples created by the community.
|
||||
link: ../../config/Tutorials.html
|
||||
- title: 🧩 Integrations available!
|
||||
details: Use Mermaid with your favorite applications, check out the integrations list.
|
||||
link: ../../ecosystem/integrations.md
|
||||
- title: 🏆 Award winning!
|
||||
details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology".
|
||||
link: https://osawards.com/javascript/2019
|
||||
- title: 🥰 Mermaid + Mermaid Chart
|
||||
details: Mermaid Chart is a major supporter of the Mermaid project.
|
||||
link: https://www.mermaidchart.com/
|
||||
---
|
||||
|
||||
<script setup>
|
||||
|
|
@ -149,6 +149,12 @@ const members = [
|
|||
title: "Developer",
|
||||
links: [{ icon: "github", link: "https://github.com/spopida" }],
|
||||
},
|
||||
{
|
||||
avatar: "https://avatars.githubusercontent.com/u/35910788?v=4",
|
||||
name: "Steph Huynh",
|
||||
title: "Developer",
|
||||
links: [{ icon: "github", link: "https://github.com/huynhicode" }],
|
||||
},
|
||||
];
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
# Announcements
|
||||
|
||||
## [Automatic text wrapping in flowcharts is here!](https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here)
|
||||
|
||||
3 April 2023 · 3 mins
|
||||
|
||||
Markdown Strings reduce the hassle # Starting from v10.
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
# Blog
|
||||
|
||||
## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
|
||||
|
||||
27 March 2023 · 2 mins
|
||||
|
||||
Exciting news for all Mermaid OSS fans: Mermaid Chart has officially launched with Mermaid Chart!
|
||||
|
||||
## [If you're not excited about ChatGPT, then you're not being creative](https://www.mermaidchart.com/blog/posts/if-youre-not-excited-about-chatgpt-then-youre-not-being-creative-enough/)
|
||||
|
||||
8 March 2023 · 9 mins
|
||||
|
||||
The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the trough of disillusionment.
|
||||
|
||||
## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://www.mermaidchart.com/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/)
|
||||
|
||||
1 March 2023 · 12 mins
|
||||
|
||||
Flowchart design is a game of balance: Read about the importance of dialling in the right level of detail and how to manage complexity in large flowcharts.
|
||||
|
||||
## [Busting the myth that developers can't write](https://www.mermaidchart.com/blog/posts/busting-the-myth-that-developers-cant-write/)
|
||||
|
||||
10 February 2023 · 10 mins
|
||||
|
||||
Busting the myth that developers can’t write # It’s an annoying stereotype that developers don’t know how to write, speak, and otherwise communicate.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 12 KiB |
|
|
@ -446,6 +446,31 @@ flowchart LR
|
|||
B1 --> B2
|
||||
```
|
||||
|
||||
## Markdown Strings
|
||||
|
||||
The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart LR
|
||||
subgraph "One"
|
||||
a("`The **cat**
|
||||
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
|
||||
end
|
||||
subgraph "`**Two**`"
|
||||
c("`The **cat**
|
||||
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
|
||||
end
|
||||
```
|
||||
|
||||
Formatting:
|
||||
|
||||
- For bold text, use double asterisks \*\* before and after the text.
|
||||
- For italics, use single asterisks \* before and after the text.
|
||||
- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
|
||||
|
||||
This feature is applicable to node labels, edge labels, and subgraph labels.
|
||||
|
||||
## Interaction
|
||||
|
||||
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
|
||||
|
|
|
|||
|
|
@ -374,3 +374,24 @@ Beginner's tip—a full example using interactive links in an html context:
|
|||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Bar chart (using gantt chart)
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
title Git Issues - days since last update
|
||||
dateFormat X
|
||||
axisFormat %s
|
||||
section Issue19062
|
||||
71 : 0, 71
|
||||
section Issue19401
|
||||
36 : 0, 36
|
||||
section Issue193
|
||||
34 : 0, 34
|
||||
section Issue7441
|
||||
9 : 0, 9
|
||||
section Issue1300
|
||||
5 : 0, 5
|
||||
```
|
||||
|
|
|
|||
|
|
@ -162,6 +162,25 @@ Root
|
|||
C
|
||||
```
|
||||
|
||||
## Markdown Strings
|
||||
|
||||
The "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
id1["`**Root** with
|
||||
a second line
|
||||
Unicode works too: 🤓`"]
|
||||
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
|
||||
id3[Regular labels still works]
|
||||
```
|
||||
|
||||
Formatting:
|
||||
|
||||
- For bold text, use double asterisks \*\* before and after the text.
|
||||
- For italics, use single asterisks \* before and after the text.
|
||||
- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
|
||||
|
||||
## Integrating with your library/website.
|
||||
|
||||
Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
/* eslint-disable @typescript-eslint/no-empty-function */
|
||||
/* eslint-disable no-console */
|
||||
import dayjs from 'dayjs';
|
||||
import dayjs from 'dayjs/esm/index.js';
|
||||
|
||||
export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
|
||||
|
||||
|
|
|
|||
|
|
@ -406,6 +406,12 @@ const render = async function (
|
|||
// clean up text CRLFs
|
||||
text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
|
||||
|
||||
// clean up html tags so that all attributes use single quotes, parser throws error on double quotes
|
||||
text = text.replace(
|
||||
/<(\w+)([^>]*)>/g,
|
||||
(match, tag, attributes) => '<' + tag + attributes.replace(/="([^"]*)"/g, "='$1'") + '>'
|
||||
);
|
||||
|
||||
const idSelector = '#' + id;
|
||||
const iFrameID = 'i' + id;
|
||||
const iFrameID_selector = '#' + iFrameID;
|
||||
|
|
|
|||
|
|
@ -152,26 +152,8 @@ function updateTextContentAndStyles(tspan, wrappedLine) {
|
|||
.attr('font-style', word.type === 'em' ? 'italic' : 'normal')
|
||||
.attr('class', 'text-inner-tspan')
|
||||
.attr('font-weight', word.type === 'strong' ? 'bold' : 'normal');
|
||||
const special = [
|
||||
'<',
|
||||
'>',
|
||||
'&',
|
||||
'"',
|
||||
"'",
|
||||
'.',
|
||||
',',
|
||||
':',
|
||||
';',
|
||||
'!',
|
||||
'?',
|
||||
'(',
|
||||
')',
|
||||
'[',
|
||||
']',
|
||||
'{',
|
||||
'}',
|
||||
];
|
||||
if (index !== 0 && special.includes(word.content)) {
|
||||
const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
|
||||
if (index === 0) {
|
||||
innerTspan.text(word.content);
|
||||
} else {
|
||||
innerTspan.text(' ' + word.content);
|
||||
|
|
@ -225,7 +207,17 @@ export const createText = (
|
|||
return vertexNode;
|
||||
} else {
|
||||
const structuredText = markdownToLines(text);
|
||||
|
||||
const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
|
||||
let lastWord;
|
||||
structuredText.forEach((line) => {
|
||||
line.forEach((word) => {
|
||||
if (special.includes(word.content) && lastWord) {
|
||||
lastWord.content += word.content;
|
||||
word.content = '';
|
||||
}
|
||||
lastWord = word;
|
||||
});
|
||||
});
|
||||
const svgLabel = createFormattedText(width, el, structuredText, addSvgBackground);
|
||||
return svgLabel;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ export function markdownToLines(markdown) {
|
|||
currentLine++;
|
||||
lines.push([]);
|
||||
}
|
||||
|
||||
// textLine.split(/ (?=[^!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]+)/).forEach((word) => {
|
||||
textLine.split(' ').forEach((word) => {
|
||||
if (word) {
|
||||
lines[currentLine].push({ content: word, type: parentType || 'normal' });
|
||||
|
|
|
|||
|
|
@ -2356,7 +2356,7 @@ packages:
|
|||
react: 16.14.0
|
||||
react-dom: 16.14.0
|
||||
dependencies:
|
||||
'@types/react': 18.0.28
|
||||
'@types/react': 18.0.33
|
||||
react: 16.14.0
|
||||
react-dom: 16.14.0_react@16.14.0
|
||||
dev: false
|
||||
|
|
@ -2956,12 +2956,12 @@ packages:
|
|||
resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==}
|
||||
dev: true
|
||||
|
||||
/@types/react/18.0.28:
|
||||
resolution: {integrity: sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==}
|
||||
/@types/react/18.0.33:
|
||||
resolution: {integrity: sha512-sHxzVxeanvQyQ1lr8NSHaj0kDzcNiGpILEVt69g9S31/7PfMvNCKLKcsHw4lYKjs3cGNJjXSP4mYzX43QlnjNA==}
|
||||
dependencies:
|
||||
'@types/prop-types': 15.7.5
|
||||
'@types/scheduler': 0.16.2
|
||||
csstype: 3.1.1
|
||||
'@types/scheduler': 0.16.3
|
||||
csstype: 3.1.2
|
||||
dev: false
|
||||
|
||||
/@types/responselike/1.0.0:
|
||||
|
|
@ -2981,8 +2981,8 @@ packages:
|
|||
rollup: 2.79.1
|
||||
dev: true
|
||||
|
||||
/@types/scheduler/0.16.2:
|
||||
resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
|
||||
/@types/scheduler/0.16.3:
|
||||
resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
|
||||
dev: false
|
||||
|
||||
/@types/semver/7.3.12:
|
||||
|
|
@ -3417,7 +3417,7 @@ packages:
|
|||
'@vue/shared': 3.2.45
|
||||
estree-walker: 2.0.2
|
||||
magic-string: 0.25.9
|
||||
postcss: 8.4.21
|
||||
postcss: 8.4.20
|
||||
source-map: 0.6.1
|
||||
dev: true
|
||||
|
||||
|
|
@ -5161,8 +5161,8 @@ packages:
|
|||
resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
|
||||
dev: true
|
||||
|
||||
/csstype/3.1.1:
|
||||
resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
|
||||
/csstype/3.1.2:
|
||||
resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
|
||||
dev: false
|
||||
|
||||
/cypress-image-snapshot/4.0.1_cypress@12.5.1+jest@29.3.1:
|
||||
|
|
@ -9755,6 +9755,15 @@ packages:
|
|||
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
|
||||
dev: true
|
||||
|
||||
/postcss/8.4.20:
|
||||
resolution: {integrity: sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==}
|
||||
engines: {node: ^10 || ^12 || >=14}
|
||||
dependencies:
|
||||
nanoid: 3.3.4
|
||||
picocolors: 1.0.0
|
||||
source-map-js: 1.0.2
|
||||
dev: true
|
||||
|
||||
/postcss/8.4.21:
|
||||
resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
|
||||
engines: {node: ^10 || ^12 || >=14}
|
||||
|
|
|
|||
Loading…
Reference in New Issue