Merge branch 'develop' into aakansha/types
This commit is contained in:
commit
63dca5bb86
|
@ -160,7 +160,7 @@ In a real world use of state diagrams you often end up with diagrams that are mu
|
||||||
have several internal states. These are called composite states in this terminology.
|
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
|
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:
|
state between {}. You can name a composite state on a separate line just like a simple state. See the example below:
|
||||||
|
|
||||||
```mermaid-example
|
```mermaid-example
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
|
@ -169,6 +169,14 @@ stateDiagram-v2
|
||||||
[*] --> second
|
[*] --> second
|
||||||
second --> [*]
|
second --> [*]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[*] --> NamedComposite
|
||||||
|
NamedComposite: Another Composite
|
||||||
|
state NamedComposite {
|
||||||
|
[*] --> namedSimple
|
||||||
|
namedSimple --> [*]
|
||||||
|
namedSimple: Another simple
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
|
@ -178,6 +186,14 @@ stateDiagram-v2
|
||||||
[*] --> second
|
[*] --> second
|
||||||
second --> [*]
|
second --> [*]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[*] --> NamedComposite
|
||||||
|
NamedComposite: Another Composite
|
||||||
|
state NamedComposite {
|
||||||
|
[*] --> namedSimple
|
||||||
|
namedSimple --> [*]
|
||||||
|
namedSimple: Another simple
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
You can do this in several layers:
|
You can do this in several layers:
|
||||||
|
|
|
@ -21,7 +21,7 @@ export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: Mermaid
|
||||||
let sumOfDirectives: MermaidConfig = {};
|
let sumOfDirectives: MermaidConfig = {};
|
||||||
for (const d of _directives) {
|
for (const d of _directives) {
|
||||||
sanitize(d);
|
sanitize(d);
|
||||||
// Apply the data from the directive where the the overrides the themeVariables
|
// Apply the data from the directive where the overrides the themeVariables
|
||||||
sumOfDirectives = assignWithDepth(sumOfDirectives, d);
|
sumOfDirectives = assignWithDepth(sumOfDirectives, d);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -45,7 +45,7 @@ flowchart
|
||||||
a --> C2
|
a --> C2
|
||||||
```
|
```
|
||||||
|
|
||||||
To handle this case a special type of edge is inserted. The edge to/from the cluster is replaced with an edge to/from a node in the cluster which is tagged with toCluster/fromCluster. When rendering this edge the intersection between the edge and the border of the cluster is calculated making the edge start/stop there. In practice this renders like an an edge to/from the cluster.
|
To handle this case a special type of edge is inserted. The edge to/from the cluster is replaced with an edge to/from a node in the cluster which is tagged with toCluster/fromCluster. When rendering this edge the intersection between the edge and the border of the cluster is calculated making the edge start/stop there. In practice this renders like an edge to/from the cluster.
|
||||||
|
|
||||||
In the diagram above the root diagram would be rendered with C1 whereas C2 would be rendered recursively.
|
In the diagram above the root diagram would be rendered with C1 whereas C2 would be rendered recursively.
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
/*
|
/*
|
||||||
* Borrowed with love from from dagre-d3. Many thanks to cpettitt!
|
* Borrowed with love from dagre-d3. Many thanks to cpettitt!
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import node from './intersect-node.js';
|
import node from './intersect-node.js';
|
||||||
|
|
|
@ -262,7 +262,7 @@ const getBlocksFlat = () => {
|
||||||
return [...Object.values(blockDatabase)];
|
return [...Object.values(blockDatabase)];
|
||||||
};
|
};
|
||||||
/**
|
/**
|
||||||
* Returns the the hierarchy of blocks
|
* Returns the hierarchy of blocks
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
const getBlocks = () => {
|
const getBlocks = () => {
|
||||||
|
|
|
@ -141,7 +141,7 @@ describe('when parsing flowcharts', function () {
|
||||||
expect(edges[3].type).toBe('arrow_point');
|
expect(edges[3].type).toBe('arrow_point');
|
||||||
expect(edges[3].text).toBe('');
|
expect(edges[3].text).toBe('');
|
||||||
});
|
});
|
||||||
it('should handle chaining and multiple nodes in in link statement FVC ', function () {
|
it('should handle chaining and multiple nodes in link statement FVC ', function () {
|
||||||
const res = flow.parser.parse(`
|
const res = flow.parser.parse(`
|
||||||
graph TD
|
graph TD
|
||||||
A --> B & B2 & C --> D2;
|
A --> B & B2 & C --> D2;
|
||||||
|
@ -181,7 +181,7 @@ describe('when parsing flowcharts', function () {
|
||||||
expect(edges[5].type).toBe('arrow_point');
|
expect(edges[5].type).toBe('arrow_point');
|
||||||
expect(edges[5].text).toBe('');
|
expect(edges[5].text).toBe('');
|
||||||
});
|
});
|
||||||
it('should handle chaining and multiple nodes in in link statement with extra info in statements', function () {
|
it('should handle chaining and multiple nodes in link statement with extra info in statements', function () {
|
||||||
const res = flow.parser.parse(`
|
const res = flow.parser.parse(`
|
||||||
graph TD
|
graph TD
|
||||||
A[ h ] -- hello --> B[" test "]:::exClass & C --> D;
|
A[ h ] -- hello --> B[" test "]:::exClass & C --> D;
|
||||||
|
|
|
@ -64,7 +64,7 @@ describe('parsing a flow chart', function () {
|
||||||
expect(edges[0].end).toBe('monograph');
|
expect(edges[0].end).toBe('monograph');
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('special characters should be be handled.', function () {
|
describe('special characters should be handled.', function () {
|
||||||
const charTest = function (char, result) {
|
const charTest = function (char, result) {
|
||||||
const res = flow.parser.parse('graph TD;A(' + char + ')-->B;');
|
const res = flow.parser.parse('graph TD;A(' + char + ')-->B;');
|
||||||
|
|
||||||
|
|
|
@ -145,7 +145,7 @@ const getRootDocV2 = () => {
|
||||||
* Ex: the section within a fork has its own statements, and incoming and outgoing statements
|
* Ex: the section within a fork has its own statements, and incoming and outgoing statements
|
||||||
* refer to the fork as a whole (document).
|
* refer to the fork as a whole (document).
|
||||||
* See the parser grammar: the definition of a document is a document then a 'line', where a line can be a statement.
|
* See the parser grammar: the definition of a document is a document then a 'line', where a line can be a statement.
|
||||||
* This will push the statement into the the list of statements for the current document.
|
* This will push the statement into the list of statements for the current document.
|
||||||
*
|
*
|
||||||
* @param _doc
|
* @param _doc
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -98,7 +98,7 @@ In a real world use of state diagrams you often end up with diagrams that are mu
|
||||||
have several internal states. These are called composite states in this terminology.
|
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
|
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:
|
state between \{\}. You can name a composite state on a separate line just like a simple state. See the example below:
|
||||||
|
|
||||||
```mermaid-example
|
```mermaid-example
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
|
@ -107,6 +107,14 @@ stateDiagram-v2
|
||||||
[*] --> second
|
[*] --> second
|
||||||
second --> [*]
|
second --> [*]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[*] --> NamedComposite
|
||||||
|
NamedComposite: Another Composite
|
||||||
|
state NamedComposite {
|
||||||
|
[*] --> namedSimple
|
||||||
|
namedSimple --> [*]
|
||||||
|
namedSimple: Another simple
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
You can do this in several layers:
|
You can do this in several layers:
|
||||||
|
|
1037
pnpm-lock.yaml
1037
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue