classDef statements:
classDef notMoving fill:white
- classDef movement font-style:italic;
- classDef badBadEvent fill:#f00,color:white,font-weight:bold
+ classDef movement font-style:italic
+ classDef badBadEvent
+ fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
classDef statements:
+
+ classDef notMoving fill:white
+
+ classDef movement font-style:italic
+ classDef badBadEvent
+ fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+
+ [*] --> Still:::notMoving
+
+ ...
+ Still --> Moving:::movement
+ ...
+ Moving --> Crash:::movement
+ Crash:::badBadEvent --> [*]
+
+ Note that both the starting state and the end state have styles applied:
+ The start state has the start classDef style
and the end state has the
+ stop classDef style applied.
+
+ stateDiagram + direction TB + + accTitle: This is the accessible title + accDescr: This is an accessible description + + classDef notMoving fill:white + classDef movement font-style:italic + classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow + + [*] --> Still:::notMoving + Still --> [*] + Still --> Moving:::movement + Moving --> Still + Moving --> Crash:::movement + Crash:::badBadEvent --> [*] ++
stateDiagram-v2
accTitle: very very simple state
@@ -79,6 +129,20 @@ And these are how they are applied:
+ stateDiagram + classDef yourState font-style:italic,font-weight:bold,fill:white + + yswsii: Your state with spaces in it + [*] --> yswsii:::yourState + [*] --> SomeOtherState + SomeOtherState --> YetAnotherState + yswsii --> YetAnotherState + YetAnotherState --> [*] ++
stateDiagram-v2
@@ -127,7 +191,7 @@ transition labels can span multiple lines using "br" tags or \n
stateDiagram-v2
[*] --> S1
- S1 --> S2: This long line uses a br tag
to create multiple
lines.
+ S1 --> S2: This long line uses a br tag
to create multiple
lines.
S1 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines.
@@ -139,7 +203,7 @@ You can add Notes
direction LR
State1: A state with a note
note right of State1
- Important information!
You can write notes.
And\nthey\ncan\nbe\nmulti-\nline.
+ Important information!
You can write notes.
And\nthey\ncan\nbe\nmulti-\nline.
end note
State1 --> State2
note left of State2 : Notes can be to the left of a state\n(like this one).
diff --git a/docs/config/usage.md b/docs/config/usage.md
index a0fb371cd2..29273e9b57 100644
--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@@ -348,7 +348,7 @@ on what kind of integration you use.
## Using the mermaid object
-Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
+It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are:
- mermaid.startOnLoad
diff --git a/docs/misc/integrations.md b/docs/misc/integrations.md
index f9fe5761f4..a4c9e31a5f 100644
--- a/docs/misc/integrations.md
+++ b/docs/misc/integrations.md
@@ -39,6 +39,7 @@ They also serve as proof of concept, for the variety of things that can be built
- [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
- [mermerd](https://github.com/KarnerTh/mermerd)
+- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
## CRM/ERP/Similar
diff --git a/docs/syntax/c4c.md b/docs/syntax/c4c.md
index ef1295450a..e946aedb66 100644
--- a/docs/syntax/c4c.md
+++ b/docs/syntax/c4c.md
@@ -567,7 +567,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
}
- Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+ Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,
Apple Safari or Microsoft Edge"){
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
}
@@ -619,7 +619,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
}
- Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+ Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,
Apple Safari or Microsoft Edge"){
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
}
diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index e29c7295e8..5870d07433 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -571,7 +571,7 @@ You would define these actions on a separate line after all classes have been de
## Notes
-It is possible to add notes on digram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
+It is possible to add notes on diagram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
### Examples
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index a6094499a6..8b3859f8a1 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -992,7 +992,7 @@ flowchart LR
## Configuration...
-Is it possible to adjust the width of the rendered flowchart.
+It is possible to adjust the width of the rendered flowchart.
This is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page.
mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.
diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md
index 26a1065bef..628461c4f5 100644
--- a/docs/syntax/mindmap.md
+++ b/docs/syntax/mindmap.md
@@ -21,7 +21,7 @@ mindmap
Popularisation
British popular psychology author Tony Buzan
Research
- On effectivness
and eatures
+ On effectiveness
and features
On Automatic creation
Uses
Creative techniques
@@ -42,7 +42,7 @@ mindmap
Popularisation
British popular psychology author Tony Buzan
Research
- On effectivness
and eatures
+ On effectiveness
and features
On Automatic creation
Uses
Creative techniques
@@ -152,6 +152,18 @@ mindmap
id)I am a cloud(
```
+### Hexagon
+
+```mermaid-example
+mindmap
+ id{{I am a hexagon}}
+```
+
+```mermaid
+mindmap
+ id{{I am a hexagon}}
+```
+
### Default
```mermaid-example
diff --git a/docs/syntax/pie.md b/docs/syntax/pie.md
index 6801b3619f..63f371e87c 100644
--- a/docs/syntax/pie.md
+++ b/docs/syntax/pie.md
@@ -35,7 +35,7 @@ Drawing a pie chart is really simple in mermaid.
- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
- `label` for a section in the pie diagram within `" "` quotes.
- Followed by `:` colon as separator
- - Followed by `positive numeric value` (supported upto two decimal places)
+ - Followed by `positive numeric value` (supported up to two decimal places)
\[pie] \[showData] (OPTIONAL)
\[title] \[titlevalue] (OPTIONAL)
diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
index 4e89eb0c60..ad88249be4 100644
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -727,7 +727,7 @@ text.actor {
## Configuration
-Is it possible to adjust the margins for rendering the sequence diagram.
+It is possible to adjust the margins for rendering the sequence diagram.
This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.
How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page.
diff --git a/docs/syntax/stateDiagram.md b/docs/syntax/stateDiagram.md
index 1cec5afca1..72d7ec63bd 100644
--- a/docs/syntax/stateDiagram.md
+++ b/docs/syntax/stateDiagram.md
@@ -6,9 +6,12 @@
# State diagrams
-> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
+> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems.
+> State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the
+> case, while at other times this is a reasonable abstraction." Wikipedia
-Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
+Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make
+it easier for users to share diagrams between mermaid and plantUml.
```mermaid-example
---
@@ -62,20 +65,23 @@ stateDiagram
Crash --> [*]
```
-In state diagrams systems are described in terms of its states and how the systems state can change to another state via a transitions. The example diagram above shows three states **Still**, **Moving** and **Crash**. You start in the state of Still. From Still you can change the state to Moving. In Moving you can change the state either back to Still or to Crash. There is no transition from Still to Crash.
+In state diagrams systems are described in terms of _states_ and how one _state_ can change to another _state_ via
+a _transition._ The example diagram above shows three states: **Still**, **Moving** and **Crash**. You start in the
+**Still** state. From **Still** you can change to the **Moving** state. From **Moving** you can change either back to the **Still** state or to
+the **Crash** state. There is no transition from **Still** to **Crash**. (You can't crash if you're still.)
## States
-A state can be declared in multiple ways. The simplest way is to define a state id as a description.
+A state can be declared in multiple ways. The simplest way is to define a state with just an id:
```mermaid-example
stateDiagram-v2
- s1
+ stateId
```
```mermaid
stateDiagram-v2
- s1
+ stateId
```
Another way is by using the state keyword with a description as per below:
@@ -106,7 +112,8 @@ stateDiagram-v2
Transitions are path/edges when one state passes into another. This is represented using text arrow, "-->".
-When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.
+When you define a transition between two states and the states are not already defined, the undefined states are defined
+with the id from the transition. You can later add descriptions to states defined this way.
```mermaid-example
stateDiagram-v2
@@ -118,7 +125,7 @@ stateDiagram-v2
s1 --> s2
```
-It is possible to add text to a transition. To describe what it represents.
+It is possible to add text to a transition to describe what it represents:
```mermaid-example
stateDiagram-v2
@@ -132,7 +139,8 @@ stateDiagram-v2
## Start and End
-There are two special states indicating the start and stop of the diagram. These are written with the \[\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
+There are two special states indicating the start and stop of the diagram. These are written with the \[\*] syntax and
+the direction of the transition to it defines it either as a start or a stop state.
```mermaid-example
stateDiagram-v2
@@ -148,10 +156,11 @@ stateDiagram-v2
## Composite states
-In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can
+In a real world use of state diagrams you often end up with diagrams that are multidimensional as one state can
have several internal states. These are called composite states in this terminology.
-In order to define a composite state you need to use the state keyword followed by an id and the body of the composite state between {}. See the example below:
+In order to define a composite state you need to use the state keyword followed by an id and the body of the composite
+state between {}. See the example below:
```mermaid-example
stateDiagram-v2
@@ -311,7 +320,7 @@ It is possible to specify a fork in the diagram using <\> <\>.
## Notes
-Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.
+Sometimes nothing says it better than a Post-it note. That is also the case in state diagrams.
Here you can choose to put the note to the _right of_ or to the _left of_ a node.
@@ -381,7 +390,8 @@ stateDiagram-v2
## Setting the direction of the diagram
-With state diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
+With state diagrams you can use the direction statement to set the direction which the diagram will render like in this
+example.
```mermaid-example
stateDiagram
@@ -411,7 +421,9 @@ stateDiagram
## Comments
-Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their
+own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next
+newline will be treated as a comment, including any diagram syntax
```mermaid-example
stateDiagram-v2
@@ -435,22 +447,204 @@ stateDiagram-v2
Crash --> [*]
```
-## Styling
+## Styling with classDefs
-Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss
+As with other diagrams (like flowcharts), you can define a style in the diagram itself and apply that named style to a
+state or states in the diagram.
+
+**These are the current limitations with state diagram classDefs:**
+
+1. Cannot be applied to start or end states
+2. Cannot be applied to or within composite states
+
+_These are in development and will be available in a future version._
+
+You define a style using the `classDef` keyword, which is short for "class definition" (where "class" means something
+like a _CSS class_)
+followed by _a name for the style,_
+and then one or more _property-value pairs_. Each _property-value pair_ is
+a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by a colon (`:`) and then a _value._
+
+Here is an example of a classDef with just one property-value pair:
+
+ classDef movement font-style:italic;
+
+where
+
+- the _name_ of the style is `movement`
+- the only _property_ is `font-style` and its _value_ is `italic`
+
+If you want to have more than one _property-value pair_ then you put a comma (`,`) between each _property-value pair._
+
+Here is an example with three property-value pairs:
+
+ classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+where
+
+- the _name_ of the style is `badBadEvent`
+- the first _property_ is `fill` and its _value_ is `#f00`
+- the second _property_ is `color` and its _value_ is `white`
+- the third _property_ is `font-weight` and its _value_ is `bold`
+- the fourth _property_ is `stroke-width` and its _value_ is `2px`
+- the fifth _property_ is `stroke` and its _value_ is `yello`
+
+### Apply classDef styles to states
+
+There are two ways to apply a `classDef` style to a state:
+
+1. use the `class` keyword to apply a classDef style to one or more states in a single statement, or
+2. use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow
+ to/from another state)
+
+#### 1. `class` statement
+
+A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
+
+```text
+ class [one or more state names, separated by commas] [name of a style defined with classDef]
+```
+
+Here is an example applying the `badBadEvent` style to a state named `Crash`:
+
+```text
+class Crash badBadEvent
+```
+
+Here is an example applying the `movement` style to the two states `Moving` and `Crash`:
+
+```text
+class Moving, Crash movement
+```
+
+Here is a diagram that shows the examples in use. Note that the `Crash` state has two classDef styles applied: `movement`
+and `badBadEvent`
+
+```mermaid-example
+ stateDiagram
+ direction TB
+
+ accTitle: This is the accessible title
+ accDescr: This is an accessible description
+
+ classDef notMoving fill:white
+ classDef movement font-style:italic
+ classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+ [*]--> Still
+ Still --> [*]
+ Still --> Moving
+ Moving --> Still
+ Moving --> Crash
+ Crash --> [*]
+
+ class Still notMoving
+ class Moving, Crash movement
+ class Crash badBadEvent
+ class end badBadEvent
+```
+
+```mermaid
+ stateDiagram
+ direction TB
+
+ accTitle: This is the accessible title
+ accDescr: This is an accessible description
+
+ classDef notMoving fill:white
+ classDef movement font-style:italic
+ classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+ [*]--> Still
+ Still --> [*]
+ Still --> Moving
+ Moving --> Still
+ Moving --> Crash
+ Crash --> [*]
+
+ class Still notMoving
+ class Moving, Crash movement
+ class Crash badBadEvent
+ class end badBadEvent
+```
+
+#### 2. `:::` operator to apply a style to a state
+
+You can apply a classDef style to a state using the `:::` (three colons) operator. The syntax is
+
+```text
+[state]:::[style name]
+```
+
+You can use this in a diagram within a statement using a class. This includes the start and end states. For example:
+
+```mermaid-example
+stateDiagram
+ direction TB
+
+ accTitle: This is the accessible title
+ accDescr: This is an accessible description
+
+ classDef notMoving fill:white
+ classDef movement font-style:italic;
+ classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+ [*] --> Still:::notMoving
+ Still --> [*]
+ Still --> Moving:::movement
+ Moving --> Still
+ Moving --> Crash:::movement
+ Crash:::badBadEvent --> [*]
+```
+
+```mermaid
+stateDiagram
+ direction TB
+
+ accTitle: This is the accessible title
+ accDescr: This is an accessible description
+
+ classDef notMoving fill:white
+ classDef movement font-style:italic;
+ classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+ [*] --> Still:::notMoving
+ Still --> [*]
+ Still --> Moving:::movement
+ Moving --> Still
+ Moving --> Crash:::movement
+ Crash:::badBadEvent --> [*]
+```
## Spaces in state names
-Spaces can be added to a state by defining it at the top and referencing the acronym later.
+Spaces can be added to a state by first defining the state with an id and then referencing the id later.
+
+In the following example there is a state with the id **yswsii** and description **Your state with spaces in it**.
+After it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`)
+and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).\
+(**yswsii** has been styled so that it is different from the other states.)
```mermaid-example
-stateDiagram-v2
- Yswsii: Your state with spaces in it
- [*] --> Yswsii
+stateDiagram
+ classDef yourState font-style:italic,font-weight:bold,fill:white
+
+ yswsii: Your state with spaces in it
+ [*] --> yswsii:::yourState
+ [*] --> SomeOtherState
+ SomeOtherState --> YetAnotherState
+ yswsii --> YetAnotherState
+ YetAnotherState --> [*]
```
```mermaid
-stateDiagram-v2
- Yswsii: Your state with spaces in it
- [*] --> Yswsii
+stateDiagram
+ classDef yourState font-style:italic,font-weight:bold,fill:white
+
+ yswsii: Your state with spaces in it
+ [*] --> yswsii:::yourState
+ [*] --> SomeOtherState
+ SomeOtherState --> YetAnotherState
+ yswsii --> YetAnotherState
+ YetAnotherState --> [*]
```
diff --git a/packages/mermaid-mindmap/src/mindmap.spec.js b/packages/mermaid-mindmap/src/mindmap.spec.js
index b9e9abf6ec..e3f018350b 100644
--- a/packages/mermaid-mindmap/src/mindmap.spec.js
+++ b/packages/mermaid-mindmap/src/mindmap.spec.js
@@ -172,6 +172,18 @@ root
expect(mm.children.length).toEqual(0);
expect(mm.type).toEqual(mindmap.yy.nodeType.BANG);
});
+
+ it('MMP-12-a mutiple types (hexagon)', function () {
+ let str = `mindmap
+ root{{the root}}
+`;
+
+ mindmap.parse(str);
+ const mm = mindmap.yy.getMindmap();
+ expect(mm.type).toEqual(mindmap.yy.nodeType.HEXAGON);
+ expect(mm.descr).toEqual('the root');
+ expect(mm.children.length).toEqual(0);
+ });
});
describe('decorations', function () {
it('MMP-13 should be possible to set an icon for the node', function () {
diff --git a/packages/mermaid-mindmap/src/mindmapDb.js b/packages/mermaid-mindmap/src/mindmapDb.js
index 2ae98c223b..16861cd233 100644
--- a/packages/mermaid-mindmap/src/mindmapDb.js
+++ b/packages/mermaid-mindmap/src/mindmapDb.js
@@ -42,6 +42,9 @@ export const addNode = (level, id, descr, type) => {
case nodeType.RECT:
node.padding = 2 * conf.mindmap.padding;
break;
+ case nodeType.HEXAGON:
+ node.padding = 2 * conf.mindmap.padding;
+ break;
default:
node.padding = conf.mindmap.padding;
}
@@ -79,6 +82,7 @@ export const nodeType = {
CIRCLE: 3,
CLOUD: 4,
BANG: 5,
+ HEXAGON: 6,
};
export const getType = (startStr, endStr) => {
@@ -94,6 +98,8 @@ export const getType = (startStr, endStr) => {
return nodeType.CLOUD;
case '))':
return nodeType.BANG;
+ case '{{':
+ return nodeType.HEXAGON;
default:
return nodeType.DEFAULT;
}
@@ -127,6 +133,8 @@ export const type2Str = (type) => {
return 'cloud';
case nodeType.BANG:
return 'bang';
+ case nodeType.HEXAGON:
+ return 'hexgon';
default:
return 'no-border';
}
diff --git a/packages/mermaid-mindmap/src/mindmapRenderer.js b/packages/mermaid-mindmap/src/mindmapRenderer.js
index c0760e4ac0..9fd557e516 100644
--- a/packages/mermaid-mindmap/src/mindmapRenderer.js
+++ b/packages/mermaid-mindmap/src/mindmapRenderer.js
@@ -92,10 +92,6 @@ function addNodes(mindmap, cy, conf, level) {
*/
function layoutMindmap(node, conf) {
return new Promise((resolve) => {
- if (node.children.length === 0) {
- return node;
- }
-
// Add temporary render element
const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none');
const cy = cytoscape({
diff --git a/packages/mermaid-mindmap/src/parser/mindmap.jison b/packages/mermaid-mindmap/src/parser/mindmap.jison
index bd008db7f2..a96ee62614 100644
--- a/packages/mermaid-mindmap/src/parser/mindmap.jison
+++ b/packages/mermaid-mindmap/src/parser/mindmap.jison
@@ -33,11 +33,12 @@
"))" { yy.getLogger().trace('Explosion Bang'); this.begin('NODE');return 'NODE_DSTART'; }
")" { yy.getLogger().trace('Cloud Bang'); this.begin('NODE');return 'NODE_DSTART'; }
"((" { this.begin('NODE');return 'NODE_DSTART'; }
+"{{" { this.begin('NODE');return 'NODE_DSTART'; }
"(" { this.begin('NODE');return 'NODE_DSTART'; }
"[" { this.begin('NODE');return 'NODE_DSTART'; }
[\s]+ return 'SPACELIST' /* skip all whitespace */ ;
// !(-\() return 'NODE_ID';
-[^\(\[\n\-\)]+ return 'NODE_ID';
+[^\(\[\n\-\)\{\}]+ return 'NODE_ID';
<> return 'EOF';
["] { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");}
[^"]+ { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";}
@@ -45,11 +46,12 @@
[\)]\) {this.popState();yy.getLogger().trace('node end ))');return "NODE_DEND";}
[\)] {this.popState();yy.getLogger().trace('node end )');return "NODE_DEND";}
[\]] {this.popState();yy.getLogger().trace('node end ...',yytext);return "NODE_DEND";}
+"}}" {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
"(-" {this.popState();yy.getLogger().trace('node end (-');return "NODE_DEND";}
"-)" {this.popState();yy.getLogger().trace('node end (-');return "NODE_DEND";}
"((" {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
-"(" {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
-[^\)\]\(]+ { yy.getLogger().trace('Long description:', yytext); return 'NODE_DESCR';}
+"(" {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
+[^\)\]\(\}]+ { yy.getLogger().trace('Long description:', yytext); return 'NODE_DESCR';}
.+(?!\(\() { yy.getLogger().trace('Long description:', yytext); return 'NODE_DESCR';}
// [\[] return 'NODE_START';
// .+ return 'TXT' ;
diff --git a/packages/mermaid-mindmap/src/styles.js b/packages/mermaid-mindmap/src/styles.js
index a409aa4e54..986a04514d 100644
--- a/packages/mermaid-mindmap/src/styles.js
+++ b/packages/mermaid-mindmap/src/styles.js
@@ -17,7 +17,7 @@ const genSections = (options) => {
sections += `
.section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${
i - 1
- } path {
+ } polygon, .section-${i - 1} path {
fill: ${options['cScale' + i]};
}
.section-${i - 1} text {
@@ -55,7 +55,7 @@ const getStyles = (options) =>
stroke-width: 3;
}
${genSections(options)}
- .section-root rect, .section-root path, .section-root circle {
+ .section-root rect, .section-root path, .section-root circle, .section-root polygon {
fill: ${options.git0};
}
.section-root text {
diff --git a/packages/mermaid-mindmap/src/svgDraw.js b/packages/mermaid-mindmap/src/svgDraw.js
index 314503b206..d4f57f1f17 100644
--- a/packages/mermaid-mindmap/src/svgDraw.js
+++ b/packages/mermaid-mindmap/src/svgDraw.js
@@ -145,6 +145,45 @@ const circleBkg = function (elem, node) {
.attr('class', 'node-bkg node-' + db.type2Str(node.type))
.attr('r', node.width / 2);
};
+
+/**
+ *
+ * @param parent
+ * @param w
+ * @param h
+ * @param points
+ * @param node
+ */
+function insertPolygonShape(parent, w, h, points, node) {
+ return parent
+ .insert('polygon', ':first-child')
+ .attr(
+ 'points',
+ points
+ .map(function (d) {
+ return d.x + ',' + d.y;
+ })
+ .join(' ')
+ )
+ .attr('transform', 'translate(' + (node.width - w) / 2 + ', ' + h + ')');
+}
+
+const hexagonBkg = function (elem, node) {
+ const h = node.height;
+ const f = 4;
+ const m = h / f;
+ const w = node.width - node.padding + 2 * m;
+ const points = [
+ { x: m, y: 0 },
+ { x: w - m, y: 0 },
+ { x: w, y: -h / 2 },
+ { x: w - m, y: -h },
+ { x: m, y: -h },
+ { x: 0, y: -h / 2 },
+ ];
+ const shapeSvg = insertPolygonShape(elem, w, h, points, node);
+};
+
const roundedRectBkg = function (elem, node) {
elem
.append('rect')
@@ -252,6 +291,9 @@ export const drawNode = function (elem, node, fullSection, conf) {
case db.nodeType.BANG:
bangBkg(bkgElem, node, section, conf);
break;
+ case db.nodeType.HEXAGON:
+ hexagonBkg(bkgElem, node, section, conf);
+ break;
}
// Position the node to its coordinate
diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js
index 363341620f..36267f4158 100644
--- a/packages/mermaid/src/diagrams/er/erRenderer.js
+++ b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -211,9 +211,6 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
const typeRect = groupNode
.insert('rect', '#' + attributeNode.tn.node().id)
.classed(`er ${attribStyle}`, true)
- .style('fill', conf.fill)
- .style('fill-opacity', '100%')
- .style('stroke', conf.stroke)
.attr('x', 0)
.attr('y', heightOffset)
.attr('width', maxTypeWidth + widthPadding * 2 + spareColumnWidth)
@@ -231,9 +228,6 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
const nameRect = groupNode
.insert('rect', '#' + attributeNode.nn.node().id)
.classed(`er ${attribStyle}`, true)
- .style('fill', conf.fill)
- .style('fill-opacity', '100%')
- .style('stroke', conf.stroke)
.attr('x', nameXOffset)
.attr('y', heightOffset)
.attr('width', maxNameWidth + widthPadding * 2 + spareColumnWidth)
@@ -253,9 +247,6 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
const keyTypeRect = groupNode
.insert('rect', '#' + attributeNode.kn.node().id)
.classed(`er ${attribStyle}`, true)
- .style('fill', conf.fill)
- .style('fill-opacity', '100%')
- .style('stroke', conf.stroke)
.attr('x', keyTypeAndCommentXOffset)
.attr('y', heightOffset)
.attr('width', maxKeyWidth + widthPadding * 2 + spareColumnWidth)
@@ -276,9 +267,6 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
groupNode
.insert('rect', '#' + attributeNode.cn.node().id)
.classed(`er ${attribStyle}`, 'true')
- .style('fill', conf.fill)
- .style('fill-opacity', '100%')
- .style('stroke', conf.stroke)
.attr('x', keyTypeAndCommentXOffset)
.attr('y', heightOffset)
.attr('width', maxCommentWidth + widthPadding * 2 + spareColumnWidth)
@@ -348,9 +336,6 @@ const drawEntities = function (svgNode, entities, graph) {
const rectNode = groupNode
.insert('rect', '#' + textId)
.classed('er entityBox', true)
- .style('fill', conf.fill)
- .style('fill-opacity', '100%')
- .style('stroke', conf.stroke)
.attr('x', 0)
.attr('y', 0)
.attr('width', entityWidth)
@@ -548,9 +533,7 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
.attr('x', labelPoint.x - labelBBox.width / 2)
.attr('y', labelPoint.y - labelBBox.height / 2)
.attr('width', labelBBox.width)
- .attr('height', labelBBox.height)
- .style('fill', 'white')
- .style('fill-opacity', '85%');
+ .attr('height', labelBBox.height);
};
/**
diff --git a/packages/mermaid/src/diagrams/pie/pieDetector.ts b/packages/mermaid/src/diagrams/pie/pieDetector.ts
index 65a011c7a0..e267c710ab 100644
--- a/packages/mermaid/src/diagrams/pie/pieDetector.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDetector.ts
@@ -1,5 +1,6 @@
import type { DiagramDetector } from '../../diagram-api/types';
export const pieDetector: DiagramDetector = (txt) => {
- return txt.match(/^\s*pie/) !== null;
+ const logOutput = txt.match(/^\s*pie/) !== null || txt.match(/^\s*bar/) !== null;
+ return logOutput;
};
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index 6cbb99fa35..60e9a59c94 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -157,11 +157,11 @@ export const draw = (txt, id, _version, diagObj) => {
.append('g')
.attr('class', 'legend')
.attr('transform', function (d, i) {
- var height = legendRectSize + legendSpacing;
- var offset = (height * color.domain().length) / 2;
- var horz = 12 * legendRectSize;
- var vert = i * height - offset;
- return 'translate(' + horz + ',' + vert + ')';
+ const height = legendRectSize + legendSpacing;
+ const offset = (height * color.domain().length) / 2;
+ const horizontal = 12 * legendRectSize;
+ const vertical = i * height - offset;
+ return 'translate(' + horizontal + ',' + vertical + ')';
});
legend
diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md
index 187f3f89ce..3eac4ad6f3 100644
--- a/packages/mermaid/src/docs/config/usage.md
+++ b/packages/mermaid/src/docs/config/usage.md
@@ -347,7 +347,7 @@ This is the preferred way of configuring mermaid.
## Using the mermaid object
-Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
+It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are:
- mermaid.startOnLoad
diff --git a/packages/mermaid/src/docs/misc/integrations.md b/packages/mermaid/src/docs/misc/integrations.md
index 4c87d170eb..31f2d09d05 100644
--- a/packages/mermaid/src/docs/misc/integrations.md
+++ b/packages/mermaid/src/docs/misc/integrations.md
@@ -33,6 +33,7 @@ They also serve as proof of concept, for the variety of things that can be built
- [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
- [mermerd](https://github.com/KarnerTh/mermerd)
+- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
## CRM/ERP/Similar
diff --git a/packages/mermaid/src/docs/syntax/c4c.md b/packages/mermaid/src/docs/syntax/c4c.md
index f9850f2cd3..78528f7b99 100644
--- a/packages/mermaid/src/docs/syntax/c4c.md
+++ b/packages/mermaid/src/docs/syntax/c4c.md
@@ -318,7 +318,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
}
- Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+ Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,
Apple Safari or Microsoft Edge"){
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
}
diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
index 6ef0b82c99..e9b9185290 100644
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -385,7 +385,7 @@ click className href "url" "tooltip"
## Notes
-It is possible to add notes on digram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
+It is possible to add notes on diagram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
### Examples
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 5888db105c..7f8284a2fb 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -671,7 +671,7 @@ flowchart LR
## Configuration...
-Is it possible to adjust the width of the rendered flowchart.
+It is possible to adjust the width of the rendered flowchart.
This is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page.
mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.
diff --git a/packages/mermaid/src/docs/syntax/mindmap.md b/packages/mermaid/src/docs/syntax/mindmap.md
index af7a3df85e..edad887c29 100644
--- a/packages/mermaid/src/docs/syntax/mindmap.md
+++ b/packages/mermaid/src/docs/syntax/mindmap.md
@@ -15,7 +15,7 @@ mindmap
Popularisation
British popular psychology author Tony Buzan
Research
- On effectivness
and eatures
+ On effectiveness
and features
On Automatic creation
Uses
Creative techniques
@@ -94,6 +94,13 @@ mindmap
id)I am a cloud(
```
+### Hexagon
+
+```mermaid-example
+mindmap
+ id{{I am a hexagon}}
+```
+
### Default
```mermaid-example
diff --git a/packages/mermaid/src/docs/syntax/pie.md b/packages/mermaid/src/docs/syntax/pie.md
index 4e14efce1b..2fe8c3e544 100644
--- a/packages/mermaid/src/docs/syntax/pie.md
+++ b/packages/mermaid/src/docs/syntax/pie.md
@@ -22,7 +22,7 @@ Drawing a pie chart is really simple in mermaid.
- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
- `label` for a section in the pie diagram within `" "` quotes.
- Followed by `:` colon as separator
- - Followed by `positive numeric value` (supported upto two decimal places)
+ - Followed by `positive numeric value` (supported up to two decimal places)
[pie] [showData] (OPTIONAL)
[title] [titlevalue] (OPTIONAL)
diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
index beb417ee23..9c28883c96 100644
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -534,7 +534,7 @@ text.actor {
## Configuration
-Is it possible to adjust the margins for rendering the sequence diagram.
+It is possible to adjust the margins for rendering the sequence diagram.
This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.
How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page.
diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md
index 9293e10839..29e355a72b 100644
--- a/packages/mermaid/src/docs/syntax/stateDiagram.md
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -1,8 +1,11 @@
# State diagrams
-> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
+> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems.
+> State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the
+> case, while at other times this is a reasonable abstraction." Wikipedia
-Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
+Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make
+it easier for users to share diagrams between mermaid and plantUml.
```mermaid-example
---
@@ -31,15 +34,18 @@ stateDiagram
Crash --> [*]
```
-In state diagrams systems are described in terms of its states and how the systems state can change to another state via a transitions. The example diagram above shows three states **Still**, **Moving** and **Crash**. You start in the state of Still. From Still you can change the state to Moving. In Moving you can change the state either back to Still or to Crash. There is no transition from Still to Crash.
+In state diagrams systems are described in terms of _states_ and how one _state_ can change to another _state_ via
+a _transition._ The example diagram above shows three states: **Still**, **Moving** and **Crash**. You start in the
+**Still** state. From **Still** you can change to the **Moving** state. From **Moving** you can change either back to the **Still** state or to
+the **Crash** state. There is no transition from **Still** to **Crash**. (You can't crash if you're still.)
## States
-A state can be declared in multiple ways. The simplest way is to define a state id as a description.
+A state can be declared in multiple ways. The simplest way is to define a state with just an id:
```mermaid-example
stateDiagram-v2
- s1
+ stateId
```
Another way is by using the state keyword with a description as per below:
@@ -60,14 +66,15 @@ stateDiagram-v2
Transitions are path/edges when one state passes into another. This is represented using text arrow, "\-\-\>".
-When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.
+When you define a transition between two states and the states are not already defined, the undefined states are defined
+with the id from the transition. You can later add descriptions to states defined this way.
```mermaid-example
stateDiagram-v2
s1 --> s2
```
-It is possible to add text to a transition. To describe what it represents.
+It is possible to add text to a transition to describe what it represents:
```mermaid-example
stateDiagram-v2
@@ -76,7 +83,8 @@ stateDiagram-v2
## Start and End
-There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
+There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and
+the direction of the transition to it defines it either as a start or a stop state.
```mermaid-example
stateDiagram-v2
@@ -86,10 +94,11 @@ stateDiagram-v2
## Composite states
-In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can
+In a real world use of state diagrams you often end up with diagrams that are multidimensional as one state can
have several internal states. These are called composite states in this terminology.
-In order to define a composite state you need to use the state keyword followed by an id and the body of the composite state between \{\}. See the example below:
+In order to define a composite state you need to use the state keyword followed by an id and the body of the composite
+state between \{\}. See the example below:
```mermaid-example
stateDiagram-v2
@@ -178,7 +187,7 @@ It is possible to specify a fork in the diagram using <<fork>> <&
## Notes
-Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.
+Sometimes nothing says it better than a Post-it note. That is also the case in state diagrams.
Here you can choose to put the note to the _right of_ or to the _left of_ a node.
@@ -218,7 +227,8 @@ stateDiagram-v2
## Setting the direction of the diagram
-With state diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
+With state diagrams you can use the direction statement to set the direction which the diagram will render like in this
+example.
```mermaid-example
stateDiagram
@@ -235,7 +245,9 @@ stateDiagram
## Comments
-Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their
+own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next
+newline will be treated as a comment, including any diagram syntax
```mmd
stateDiagram-v2
@@ -248,16 +260,153 @@ stateDiagram-v2
Crash --> [*]
```
-## Styling
+## Styling with classDefs
-Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss
+As with other diagrams (like flowcharts), you can define a style in the diagram itself and apply that named style to a
+state or states in the diagram.
+
+**These are the current limitations with state diagram classDefs:**
+
+1. Cannot be applied to start or end states
+2. Cannot be applied to or within composite states
+
+_These are in development and will be available in a future version._
+
+You define a style using the `classDef` keyword, which is short for "class definition" (where "class" means something
+like a _CSS class_)
+followed by _a name for the style,_
+and then one or more _property-value pairs_. Each _property-value pair_ is
+a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by a colon (`:`) and then a _value._
+
+Here is an example of a classDef with just one property-value pair:
+
+```
+ classDef movement font-style:italic;
+```
+
+where
+
+- the _name_ of the style is `movement`
+- the only _property_ is `font-style` and its _value_ is `italic`
+
+If you want to have more than one _property-value pair_ then you put a comma (`,`) between each _property-value pair._
+
+Here is an example with three property-value pairs:
+
+```
+ classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+```
+
+where
+
+- the _name_ of the style is `badBadEvent`
+- the first _property_ is `fill` and its _value_ is `#f00`
+- the second _property_ is `color` and its _value_ is `white`
+- the third _property_ is `font-weight` and its _value_ is `bold`
+- the fourth _property_ is `stroke-width` and its _value_ is `2px`
+- the fifth _property_ is `stroke` and its _value_ is `yello`
+
+### Apply classDef styles to states
+
+There are two ways to apply a `classDef` style to a state:
+
+1. use the `class` keyword to apply a classDef style to one or more states in a single statement, or
+2. use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow
+ to/from another state)
+
+#### 1. `class` statement
+
+A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
+
+```text
+ class [one or more state names, separated by commas] [name of a style defined with classDef]
+```
+
+Here is an example applying the `badBadEvent` style to a state named `Crash`:
+
+```text
+class Crash badBadEvent
+```
+
+Here is an example applying the `movement` style to the two states `Moving` and `Crash`:
+
+```text
+class Moving, Crash movement
+```
+
+Here is a diagram that shows the examples in use. Note that the `Crash` state has two classDef styles applied: `movement`
+and `badBadEvent`
+
+```mermaid-example
+ stateDiagram
+ direction TB
+
+ accTitle: This is the accessible title
+ accDescr: This is an accessible description
+
+ classDef notMoving fill:white
+ classDef movement font-style:italic
+ classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+ [*]--> Still
+ Still --> [*]
+ Still --> Moving
+ Moving --> Still
+ Moving --> Crash
+ Crash --> [*]
+
+ class Still notMoving
+ class Moving, Crash movement
+ class Crash badBadEvent
+ class end badBadEvent
+```
+
+#### 2. `:::` operator to apply a style to a state
+
+You can apply a classDef style to a state using the `:::` (three colons) operator. The syntax is
+
+```text
+[state]:::[style name]
+```
+
+You can use this in a diagram within a statement using a class. This includes the start and end states. For example:
+
+```mermaid-example
+stateDiagram
+ direction TB
+
+ accTitle: This is the accessible title
+ accDescr: This is an accessible description
+
+ classDef notMoving fill:white
+ classDef movement font-style:italic;
+ classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+ [*] --> Still:::notMoving
+ Still --> [*]
+ Still --> Moving:::movement
+ Moving --> Still
+ Moving --> Crash:::movement
+ Crash:::badBadEvent --> [*]
+```
## Spaces in state names
-Spaces can be added to a state by defining it at the top and referencing the acronym later.
+Spaces can be added to a state by first defining the state with an id and then referencing the id later.
+
+In the following example there is a state with the id **yswsii** and description **Your state with spaces in it**.
+After it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`)
+and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).
+(**yswsii** has been styled so that it is different from the other states.)
```mermaid-example
-stateDiagram-v2
- Yswsii: Your state with spaces in it
- [*] --> Yswsii
+stateDiagram
+ classDef yourState font-style:italic,font-weight:bold,fill:white
+
+ yswsii: Your state with spaces in it
+ [*] --> yswsii:::yourState
+ [*] --> SomeOtherState
+ SomeOtherState --> YetAnotherState
+ yswsii --> YetAnotherState
+ YetAnotherState --> [*]
```
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 2732836279..0b2e85cd6b 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -194,7 +194,7 @@ export const createCssStyles = (
const htmlLabels = config.htmlLabels || config.flowchart?.htmlLabels; // TODO why specifically check the Flowchart diagram config?
const cssHtmlElements = ['> *', 'span']; // TODO make a constant
- const cssShapeElements = ['rect', 'polygon', 'ellipse', 'circle']; // TODO make a constant
+ const cssShapeElements = ['rect', 'polygon', 'ellipse', 'circle', 'path']; // TODO make a constant
const cssElements = htmlLabels ? cssHtmlElements : cssShapeElements;