diff --git a/cypress/platform/neo-test.html b/cypress/platform/neo-test.html
index bb71e3542..bf23fee02 100644
--- a/cypress/platform/neo-test.html
+++ b/cypress/platform/neo-test.html
@@ -111,51 +111,48 @@
-%%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
-stateDiagram-v2
- stateId
-
+ %%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ stateId
+
|
-%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
-stateDiagram-v2
- stateId
-
+ %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ stateId
+
|
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
- stateId
-
-
+ %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ stateId
+
|
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-stateDiagram-v2
- stateId
-
-
+ %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ stateId
+
|
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
- stateId
-
-
+ %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ stateId
+
|
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
- stateId
-
-
+ %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ stateId
+
|
+
|
@@ -166,55 +163,55 @@ stateDiagram-v2
-%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
-stateDiagram-v2
- state "This is a state description" as s2
-
+ %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ state "This is a state description" as s2
+
|
-%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
-stateDiagram-v2
- state "This is a state description" as s2
-
+ %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ state "This is a state description" as s2
+
|
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
- state "This is a state description" as s3
-
+ %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ state "This is a state description" as s3
+
|
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-stateDiagram-v2
- state "This is a state description" as s3
-
+ %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ state "This is a state description" as s3
+
|
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
- state "This is a state description" as s4
-
+ %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ state "This is a state description" as s4
+
|
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
- state "This is a state description" as s4
-
+ %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ state "This is a state description" as s4
+
|
+
|
@@ -225,59 +222,55 @@ stateDiagram-v2
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
-stateDiagram-v2
- s21 : This is a state description
-
+ stateDiagram-v2
+ s21 : This is a state description
+
|
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
-stateDiagram-v2
- s21 : This is a state description
-
+ stateDiagram-v2
+ s21 : This is a state description
+
|
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
- s22 : This is a state description
-
-
+ %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ s22 : This is a state description
+
|
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-stateDiagram-v2
- s22 : This is a state description
-
+ %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ s22 : This is a state description
|
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
- s23 : This is a state description
-
-
+ %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ s23 : This is a state description
+
|
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
- s23 : This is a state description
-
-
+ %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ s23 : This is a state description
+
|
+
|
@@ -290,69 +283,55 @@ stateDiagram-v2
-%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
- stateDiagram-v2
- s31 --> s32
-
-
+ %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ s31 --> s32
+
|
-%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
- stateDiagram-v2
- s31 --> s32
-
-
+ %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ s31 --> s32
+
|
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-
- stateDiagram-v2
- s41 --> s42
-
-
-
+ %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ s41 --> s42
+
|
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-
- stateDiagram-v2
- s51 --> s52
-
-
+ %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ s51 --> s52
|
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
- s61 --> s62
-
-
-
+ %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ s61 --> s62
+
|
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
- s61 --> s62
-
-
-
+ %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ s61 --> s62
+
|
-
+
|
@@ -366,65 +345,51 @@ stateDiagram-v2
-%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
- stateDiagram-v2
- a1 --> a2: A transition
-
-
+ %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ a1 --> a2: A transition
+
|
-%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
- stateDiagram-v2
- a1 --> a2: A transition
-
-
+ %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ a1 --> a2: A transition
+
|
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-
- stateDiagram-v2
- a3 --> a4: A transition
-
-
-
+ %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ a3 --> a4: A transition
+
|
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-
- stateDiagram-v2
- a5 --> a6: A transition
-
-
+ %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ a5 --> a6: A transition
|
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
- a7 --> a8: A transition
-
-
-
+ %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ a7 --> a8: A transition
+
|
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
- a7 --> a8: A transition
-
-
+ %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+ stateDiagram-v2
+ a7 --> a8: A transition
|
@@ -1582,6 +1547,412 @@ direction LR
+
+
+ |
+
+
+
+
+
+
+ %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+ flowchart LR
+ A[Start]
+
+ |
+
+
+ %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+ flowchart LR
+ A[Start]
+
+ |
+
+
+ %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+ flowchart LR
+ A[Start]
+
+ |
+
+
+ %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+ flowchart LR
+ A[Start]
+
+ |
+
+
+ %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+ flowchart LR
+ A[Start]
+
+ |
+
+
+ %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+ flowchart LR
+ A[Start]
+
+ |
+
+
+
+
+ |
+
+
+
+
+
+
+ %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+ flowchart LR
+ rounded(rounded)
+
+ |
+
+
+ %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+ flowchart LR
+ rounded(rounded)
+
+ |
+
+
+ %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+ flowchart LR
+ rounded(rounded)
+
+ |
+
+
+ %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+ flowchart LR
+ rounded(rounded)
+
+ |
+
+
+ %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+ flowchart LR
+ rounded(rounded)
+
+ |
+
+
+ %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+ flowchart LR
+ rounded(rounded)
+
+ |
+
+
+
+
+ |
+
+
+
+
+
+
+ %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+ flowchart LR
+ A[Start] --Some text--> B(Continue)
+
+ |
+
+
+ %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+ flowchart LR
+ A[Start] --Some text--> B(Continue)
+
+ |
+
+
+ %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+ flowchart LR
+ A[Start] --Some text--> B(Continue)
+
+ |
+
+
+ %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+ flowchart LR
+ A[Start] --Some text--> B(Continue)
+
+ |
+
+
+ %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+ flowchart LR
+ A[Start] --Some text--> B(Continue)
+
+ |
+
+
+ %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+ flowchart LR
+ A[Start] --Some text--> B(Continue)
+
+ |
+
+
+
+
+ |
+
+
+
+
+
+
+ %%{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]
+
+ |
+
+
+ %%{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]
+
+ |
+
+
+ %%{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]
+
+ |
+
+
+ %%{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]
+
+ |
+
+
+ %%{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]
+
+ |
+
+
+ %%{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]
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+ %%{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
+
+ |
+
+
+ %%{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
+
+ |
+
+
+ %%{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
+
+ |
+
+
+ %%{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
+
+ |
+
+
+ %%{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
+
+ |
+
+
+ %%{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
+
+ |
+
+
+
+
+ |
+
+
+
+
+ | New content 1 |
+ New content 2 |
+ New content 3 |
+ New content 4 |
+
+
|
diff --git a/docs/neo-style-to-do b/docs/neo-style-to-do
index 2cf300a3e..b7390d408 100644
--- a/docs/neo-style-to-do
+++ b/docs/neo-style-to-do
@@ -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
diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index a9b6cc088..fa21bbaae 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -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 {
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 7d220cc1f..18e7fa1e5 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -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}
diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js
index 0ea15c5bc..85f3e6253 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/packages/mermaid/src/themes/theme-neo.js
@@ -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';
}