marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-16 22:09:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'alanaV11' of github.com:Mermaid-Chart/alana-mermaid into alanaV11

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-06-19 13:56:59 +02:00
parent d898cc6a67 c4685fb0ff
commit b9dda2797a
5 changed files with 552 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

449
cypress/platform/neo-test.html
View File

@@ -128,7 +128,6 @@ stateDiagram-v2
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
</td>
<td>
@@ -136,7 +135,6 @@ stateDiagram-v2
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
</td>
<td>
@@ -144,7 +142,6 @@ stateDiagram-v2
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
</td>
<td>
@@ -152,10 +149,10 @@ stateDiagram-v2
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -166,7 +163,6 @@ stateDiagram-v2
<div class="content">
<div class="pre-scrollable">
<pre>
state "description text" as s2
</pre>
</div>
@@ -215,6 +211,7 @@ stateDiagram-v2
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -225,7 +222,6 @@ stateDiagram-v2
<div class="content">
<div class="pre-scrollable">
<pre>
s2 : description text
</pre>
</div>
@@ -250,7 +246,6 @@ stateDiagram-v2
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s22 : This is a state description
</pre>
</td>
<td>
@@ -258,7 +253,6 @@ stateDiagram-v2
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
s22 : This is a state description
</pre>
</td>
<td>
@@ -266,7 +260,6 @@ stateDiagram-v2
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s23 : This is a state description
</pre>
</td>
<td>
@@ -274,10 +267,10 @@ stateDiagram-v2
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s23 : This is a state description
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -290,9 +283,7 @@ stateDiagram-v2
<div class="content">
<div class="pre-scrollable">
<pre>
s1 --> s2
</pre>
</div>
</div>
@@ -302,7 +293,6 @@ stateDiagram-v2
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
stateDiagram-v2
s31 --> s32
</pre>
</td>
<td>
@@ -310,27 +300,20 @@ stateDiagram-v2
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2
s31 --> s32
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s41 --> s42
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
s51 --> s52
</pre>
</td>
<td>
@@ -338,8 +321,6 @@ stateDiagram-v2
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s61 --> s62
</pre>
</td>
<td>
@@ -347,12 +328,10 @@ stateDiagram-v2
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s61 --> s62
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -366,9 +345,7 @@ stateDiagram-v2
<div class="content">
<div class="pre-scrollable">
<pre>
s1 --> s2: A transition
</pre>
</div>
</div>
@@ -378,7 +355,6 @@ stateDiagram-v2
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
stateDiagram-v2
a1 --> a2: A transition
</pre>
</td>
<td>
@@ -386,27 +362,20 @@ stateDiagram-v2
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2
a1 --> a2: A transition
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
a3 --> a4: A transition
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
a5 --> a6: A transition
</pre>
</td>
<td>
@@ -414,8 +383,6 @@ stateDiagram-v2
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
a7 --> a8: A transition
</pre>
</td>
<td>
@@ -423,8 +390,6 @@ stateDiagram-v2
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
a7 --> a8: A transition
</pre>
</td>
</tr>
@@ -1582,6 +1547,412 @@ direction LR
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr>
<tr>
<th class="vertical-header">
<button class="collapsible">
Flow chart Node
</button>
<div class="content">
<div class="pre-scrollable">
<pre>
flowchart LR
A[Start]
</pre>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
flowchart LR
A[Start]
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
flowchart LR
A[Start]
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
A[Start]
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
flowchart LR
A[Start]
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
A[Start]
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
A[Start]
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr>
<tr>
<th class="vertical-header">
<button class="collapsible">
Flow chart Node, rounded
</button>
<div class="content">
<div class="pre-scrollable">
<pre>
flowchart LR
rounded(rounded)
</pre>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
flowchart LR
rounded(rounded)
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
flowchart LR
rounded(rounded)
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
rounded(rounded)
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
flowchart LR
rounded(rounded)
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
rounded(rounded)
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
rounded(rounded)
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr>
<tr>
<th class="vertical-header">
<button class="collapsible">
Flow chart Nodes with Edges and labels
</button>
<div class="content">
<div class="pre-scrollable">
<pre>
flowchart LR
A[Start] --Some text--> B(Continue)
</pre>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
flowchart LR
A[Start] --Some text--> B(Continue)
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
flowchart LR
A[Start] --Some text--> B(Continue)
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
A[Start] --Some text--> B(Continue)
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
flowchart LR
A[Start] --Some text--> B(Continue)
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
A[Start] --Some text--> B(Continue)
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
A[Start] --Some text--> B(Continue)
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr>
<tr>
<th class="vertical-header">
<button class="collapsible">
Flow chart with polygon
</button>
<div class="content">
<div class="pre-scrollable">
<pre>
flowchart LR
A[Start] -->C{Evaluate}
C -- One --> D[Option 1]
C -- Two --> E[Option 2]
C -- Three --> F[fa:fa-car Option 3]
</pre>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
flowchart LR
A[Start] -->C{Evaluate}
C -- One --> D[Option 1]
C -- Two --> E[Option 2]
C -- Three --> F[fa:fa-car Option 3]
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
flowchart LR
A[Start] -->C{Evaluate}
C -- One --> D[Option 1]
C -- Two --> E[Option 2]
C -- Three --> F[fa:fa-car Option 3]
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
A[Start] -->C{Evaluate}
C -- One --> D[Option 1]
C -- Two --> E[Option 2]
C -- Three --> F[fa:fa-car Option 3]
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
flowchart LR
A[Start] -->C{Evaluate}
C -- One --> D[Option 1]
C -- Two --> E[Option 2]
C -- Three --> F[fa:fa-car Option 3]
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
A[Start] -->C{Evaluate}
C -- One --> D[Option 1]
C -- Two --> E[Option 2]
C -- Three --> F[fa:fa-car Option 3]
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
A[Start] -->C{Evaluate}
C -- One --> D[Option 1]
C -- Two --> E[Option 2]
C -- Three --> F[fa:fa-car Option 3]
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr>
<tr>
<th class="vertical-header">
<button class="collapsible">
Flow chart with subgraph
</button>
<div class="content">
<div class="pre-scrollable">
<pre>
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
end
A --> TOP --> B
B1 --> B2
</pre>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
end
A --> TOP --> B
B1 --> B2
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
end
A --> TOP --> B
B1 --> B2
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
end
A --> TOP --> B
B1 --> B2
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
end
A --> TOP --> B
B1 --> B2
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
end
A --> TOP --> B
B1 --> B2
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
end
A --> TOP --> B
B1 --> B2
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr>
<!-- New row -->
<tr>
<th class="vertical-header">Additional Content</th>
<td>New content 1</td>
<td>New content 2</td>
<td>New content 3</td>
<td>New content 4</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->

8
docs/neo-style-to-do
View File

@@ -8,5 +8,9 @@
8. The font-size of node labels seems a bit off.
9. When selecting look=neo and theme for composite stated, the height differs.
10. Drop-shadows for non-rectangular shapes are not supported: Status: Fixed
11. Gradient
12. Rx,Ry of rects do not apply any longer
11. Gradient: Fix proper color from blue to red. Do last (render.ts)
12. Rx,Ry of rects in neo is not applied correct on rects except composite states
13. Stop state shall be filled and no drop-shadow on inner circle: Status: Fixed
14. No curve on line under title in composite states: Status fixed
15. When this.useGradient = false the color of the composite states are not correct

11
packages/mermaid/src/diagrams/state/styles.js
View File

@@ -103,12 +103,19 @@ g.stateGroup line {
.node circle.state-end {
fill: ${options.stateBkg || options.mainBkg};
stroke: ${options.background};
stroke-width: 1.5
stroke-width: 1.5;
}
[data-look="neo"].node circle.state-end {
filter: none;
stroke:${options.background};
fill: ${options.lineColor};
}
.end-state-inner {
fill: ${options.compositeBackground || options.background};
stroke: ${options.background};
stroke-width: 1.5
stroke-width: 1.5;
}
.node rect {

8
packages/mermaid/src/styles.ts
View File

@@ -81,30 +81,24 @@ const getStyles = (
}
[data-look="neo"].node rect, [data-look="neo"].node circle, [data-look="neo"].node polygon , [data-look="neo"].node path {
[data-look="neo"].node rect, [data-look="neo"].node polygon , [data-look="neo"].node path {
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow};
}
[data-look="neo"].node circle{
stroke: $(options.nodeBorder);
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow};
}
[data-look="neo"].node circle .state-start{
fill: #000000;
}
[data-look="neo"].statediagram-cluster rect {
fill: ${options.compositeTitleBackground};
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
//stroke: none;
stroke-width: 1px;
rx: 3;
ry: 3;
}
${userStyles}

8
packages/mermaid/src/themes/theme-neo.js
View File

@@ -28,11 +28,11 @@ class Theme {
this.fontSize = '10px';
// Neo-specific
this.nodeBorder = 'none';
this.stateBorder = 'none';
this.nodeBorder = '#000000';
this.stateBorder = '#000000';
this.useGradient = true;
this.gradientStart = '#eb0042';
this.gradientStop = '#0042eb';
this.gradientStart = '#0042eb';
this.gradientStop = '#eb0042';
this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
this.tertiaryColor = '#ffffff';
}