marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-05 23:29:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

MC-1765: Removed curvature from inner rect composite

Browse Source
This commit is contained in:
Per Brolin
2024-06-19 09:49:04 +02:00
parent ba6f2b26a6
commit d6e8419360
3 changed files with 194 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -111,51 +111,48 @@
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
stateId stateId
</pre> </pre>
</td> </td>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
stateId stateId
</pre> </pre>
</td> </td>
<td> <td>
<pre id="diagram2" class="mermaid"> <pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
stateId stateId
</pre>
</pre>
</td> </td>
<td> <td>
<pre id="diagram2" class="mermaid"> <pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
stateId stateId
</pre>
</pre>
</td> </td>
<td> <td>
<pre id="diagram3" class="mermaid"> <pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
stateId stateId
</pre>
</pre>
</td> </td>
<td> <td>
<pre id="diagram3" class="mermaid"> <pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
stateId stateId
</pre>
</pre>
</td> </td>
</tr> </tr>
<!-- Separator row --> <!-- Separator row -->
<tr class="separator"> <tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -166,55 +163,55 @@ stateDiagram-v2
<div class="content"> <div class="content">
<div class="pre-scrollable"> <div class="pre-scrollable">
<pre> <pre>
state "description text" as s2
state "description text" as s2 </pre>
</pre>
</div> </div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
state "This is a state description" as s2 state "This is a state description" as s2
</pre> </pre>
</td> </td>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
state "This is a state description" as s2 state "This is a state description" as s2
</pre> </pre>
</td> </td>
<td> <td>
<pre id="diagram2" class="mermaid"> <pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
state "This is a state description" as s3 state "This is a state description" as s3
</pre> </pre>
</td> </td>
<td> <td>
<pre id="diagram2" class="mermaid"> <pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
state "This is a state description" as s3 state "This is a state description" as s3
</pre> </pre>
</td> </td>
<td> <td>
<pre id="diagram3" class="mermaid"> <pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
state "This is a state description" as s4 state "This is a state description" as s4
</pre> </pre>
</td> </td>
<td> <td>
<pre id="diagram3" class="mermaid"> <pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
state "This is a state description" as s4 state "This is a state description" as s4
</pre> </pre>
</td> </td>
</tr> </tr>
<!-- Separator row --> <!-- Separator row -->
<tr class="separator"> <tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -225,59 +222,55 @@ stateDiagram-v2
<div class="content"> <div class="content">
<div class="pre-scrollable"> <div class="pre-scrollable">
<pre> <pre>
s2 : description text
s2 : description text </pre>
</pre>
</div> </div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
s21 : This is a state description s21 : This is a state description
</pre> </pre>
</td> </td>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
s21 : This is a state description s21 : This is a state description
</pre> </pre>
</td> </td>
<td> <td>
<pre id="diagram2" class="mermaid"> <pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
s22 : This is a state description s22 : This is a state description
</pre>
</pre>
</td> </td>
<td> <td>
<pre id="diagram2" class="mermaid"> <pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
s22 : This is a state description s22 : This is a state description
</pre> </pre>
</td> </td>
<td> <td>
<pre id="diagram3" class="mermaid"> <pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
s23 : This is a state description s23 : This is a state description
</pre>
</pre>
</td> </td>
<td> <td>
<pre id="diagram3" class="mermaid"> <pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
s23 : This is a state description s23 : This is a state description
</pre>
</pre>
</td> </td>
</tr> </tr>
<!-- Separator row --> <!-- Separator row -->
<tr class="separator"> <tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -290,69 +283,55 @@ stateDiagram-v2
<div class="content"> <div class="content">
<div class="pre-scrollable"> <div class="pre-scrollable">
<pre> <pre>
s1 --> s2
s1 --> s2 </pre>
</pre>
</div> </div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
s31 --> s32 s31 --> s32
</pre>
</pre>
</td> </td>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
s31 --> s32 s31 --> s32
</pre>
</pre>
</td> </td>
<td> <td>
<pre id="diagram2" class="mermaid"> <pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
stateDiagram-v2 s41 --> s42
s41 --> s42 </pre>
</pre>
</td> </td>
<td> <td>
<pre id="diagram2" class="mermaid"> <pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
stateDiagram-v2 s51 --> s52
s51 --> s52
</pre> </pre>
</td> </td>
<td> <td>
<pre id="diagram3" class="mermaid"> <pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
s61 --> s62 s61 --> s62
</pre>
</pre>
</td> </td>
<td> <td>
<pre id="diagram3" class="mermaid"> <pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
s61 --> s62 s61 --> s62
</pre>
</pre>
</td> </td>
</tr> </tr>
<!-- Separator row --> <!-- Separator row -->
<tr class="separator"> <tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -366,65 +345,51 @@ stateDiagram-v2
<div class="content"> <div class="content">
<div class="pre-scrollable"> <div class="pre-scrollable">
<pre> <pre>
s1 --> s2: A transition
s1 --> s2: A transition </pre>
</pre>
</div> </div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
a1 --> a2: A transition a1 --> a2: A transition
</pre>
</pre>
</td> </td>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
a1 --> a2: A transition a1 --> a2: A transition
</pre>
</pre>
</td> </td>
<td> <td>
<pre id="diagram2" class="mermaid"> <pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
stateDiagram-v2 a3 --> a4: A transition
a3 --> a4: A transition </pre>
</pre>
</td> </td>
<td> <td>
<pre id="diagram2" class="mermaid"> <pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%% %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
stateDiagram-v2 a5 --> a6: A transition
a5 --> a6: A transition
</pre> </pre>
</td> </td>
<td> <td>
<pre id="diagram3" class="mermaid"> <pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
a7 --> a8: A transition a7 --> a8: A transition
</pre>
</pre>
</td> </td>
<td> <td>
<pre id="diagram3" class="mermaid"> <pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%% %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2 stateDiagram-v2
a7 --> a8: A transition a7 --> a8: A transition
</pre> </pre>
</td> </td>
</tr> </tr>
@@ -1650,6 +1615,69 @@ direction LR
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr> </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> <tr>
<th class="vertical-header"> <th class="vertical-header">
<button class="collapsible"> <button class="collapsible">

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

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

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

@@ -99,10 +99,7 @@ const getStyles = (
[data-look="neo"].statediagram-cluster rect { [data-look="neo"].statediagram-cluster rect {
fill: ${options.compositeTitleBackground}; fill: ${options.compositeTitleBackground};
stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder}; stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
//stroke: none;
stroke-width: 1px; stroke-width: 1px;
rx: 3;
ry: 3;
} }
${userStyles} ${userStyles}