marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-12 03:49:43 +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

693
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>
@@ -1582,6 +1547,412 @@ direction LR
</tr> </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 --> <!-- 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 -->

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

@@ -8,5 +8,9 @@
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 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 { .node circle.state-end {
fill: ${options.stateBkg || options.mainBkg}; fill: ${options.stateBkg || options.mainBkg};
stroke: ${options.background}; 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 { .end-state-inner {
fill: ${options.compositeBackground || options.background}; fill: ${options.compositeBackground || options.background};
stroke: ${options.background}; stroke: ${options.background};
stroke-width: 1.5 stroke-width: 1.5;
} }
.node rect { .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}; stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow}; filter: ${options.dropShadow};
} }
[data-look="neo"].node circle{ [data-look="neo"].node circle{
stroke: $(options.nodeBorder);
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder}; stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow}; filter: ${options.dropShadow};
} }
[data-look="neo"].node circle .state-start{ [data-look="neo"].node circle .state-start{
fill: #000000; fill: #000000;
} }
[data-look="neo"].statediagram-cluster rect { [data-look="neo"].statediagram-cluster rect {
fill: ${options.compositeTitleBackground}; fill: ${options.compositeTitleBackground};
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder}; stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
//stroke: none;
stroke-width: 1px; stroke-width: 1px;
rx: 3;
ry: 3;
} }
${userStyles} ${userStyles}

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

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