mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-24 17:59:39 +02:00
Merge branch 'develop' into feature/4492_sankey-diagrams
This commit is contained in:
@@ -6,3 +6,4 @@ coverage
|
|||||||
pnpm-lock.yaml
|
pnpm-lock.yaml
|
||||||
stats
|
stats
|
||||||
packages/mermaid/src/docs/.vitepress/components.d.ts
|
packages/mermaid/src/docs/.vitepress/components.d.ts
|
||||||
|
.nyc_output
|
||||||
|
@@ -40,6 +40,7 @@
|
|||||||
"dompurify",
|
"dompurify",
|
||||||
"edgechromium",
|
"edgechromium",
|
||||||
"elkjs",
|
"elkjs",
|
||||||
|
"elle",
|
||||||
"faber",
|
"faber",
|
||||||
"flatmap",
|
"flatmap",
|
||||||
"foswiki",
|
"foswiki",
|
||||||
@@ -86,6 +87,7 @@
|
|||||||
"mkdocs",
|
"mkdocs",
|
||||||
"mmorel",
|
"mmorel",
|
||||||
"mult",
|
"mult",
|
||||||
|
"neurodiverse",
|
||||||
"nextra",
|
"nextra",
|
||||||
"orlandoni",
|
"orlandoni",
|
||||||
"pathe",
|
"pathe",
|
||||||
|
@@ -154,6 +154,29 @@
|
|||||||
</pre>
|
</pre>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
|
<pre class="mermaid">
|
||||||
|
classDiagram
|
||||||
|
A1 --> B1
|
||||||
|
namespace A {
|
||||||
|
class A1 {
|
||||||
|
+foo : string
|
||||||
|
}
|
||||||
|
class A2 {
|
||||||
|
+bar : int
|
||||||
|
}
|
||||||
|
}
|
||||||
|
namespace B {
|
||||||
|
class B1 {
|
||||||
|
+foo : bool
|
||||||
|
}
|
||||||
|
class B2 {
|
||||||
|
+bar : float
|
||||||
|
}
|
||||||
|
}
|
||||||
|
A2 --> B2
|
||||||
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mermaid from './mermaid.esm.mjs';
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
|
@@ -26,6 +26,10 @@ The definitions that can be generated the Live-Editor are also backwards-compati
|
|||||||
|
|
||||||
[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
|
[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
|
||||||
|
|
||||||
|
## Mermaid with OpenAI
|
||||||
|
|
||||||
|
[Elle Neal: Mind Mapping with AI: An Accessible Approach for Neurodiverse Learners Tutorial:](https://medium.com/@elle.neal_71064/mind-mapping-with-ai-an-accessible-approach-for-neurodiverse-learners-1a74767359ff), [Demo:](https://databutton.com/v/jk9vrghc)
|
||||||
|
|
||||||
## Mermaid with HTML
|
## Mermaid with HTML
|
||||||
|
|
||||||
Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)
|
Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)
|
||||||
|
@@ -161,6 +161,8 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
- [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
|
- [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
|
||||||
- [CKEditor](https://github.com/ckeditor/ckeditor5)
|
- [CKEditor](https://github.com/ckeditor/ckeditor5)
|
||||||
- [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
|
- [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
|
||||||
|
- [Standard Notes](https://standardnotes.com/)
|
||||||
|
- [sn-mermaid](https://github.com/nienow/sn-mermaid)
|
||||||
|
|
||||||
## Document Generation
|
## Document Generation
|
||||||
|
|
||||||
|
@@ -25,25 +25,25 @@ Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pas
|
|||||||
```mermaid-example
|
```mermaid-example
|
||||||
gantt
|
gantt
|
||||||
title A Gantt Diagram
|
title A Gantt Diagram
|
||||||
dateFormat YYYY-MM-DD
|
dateFormat YYYY-MM-DD
|
||||||
section Section
|
section Section
|
||||||
A task :a1, 2014-01-01, 30d
|
A task :a1, 2014-01-01, 30d
|
||||||
Another task :after a1 , 20d
|
Another task :after a1, 20d
|
||||||
section Another
|
section Another
|
||||||
Task in sec :2014-01-12 , 12d
|
Task in Another :2014-01-12, 12d
|
||||||
another task : 24d
|
another task :24d
|
||||||
```
|
```
|
||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
gantt
|
gantt
|
||||||
title A Gantt Diagram
|
title A Gantt Diagram
|
||||||
dateFormat YYYY-MM-DD
|
dateFormat YYYY-MM-DD
|
||||||
section Section
|
section Section
|
||||||
A task :a1, 2014-01-01, 30d
|
A task :a1, 2014-01-01, 30d
|
||||||
Another task :after a1 , 20d
|
Another task :after a1, 20d
|
||||||
section Another
|
section Another
|
||||||
Task in sec :2014-01-12 , 12d
|
Task in Another :2014-01-12, 12d
|
||||||
another task : 24d
|
another task :24d
|
||||||
```
|
```
|
||||||
|
|
||||||
## Syntax
|
## Syntax
|
||||||
@@ -117,17 +117,17 @@ gantt
|
|||||||
It is possible to set multiple dependencies separated by space:
|
It is possible to set multiple dependencies separated by space:
|
||||||
|
|
||||||
```mermaid-example
|
```mermaid-example
|
||||||
gantt
|
gantt
|
||||||
apple :a, 2017-07-20, 1w
|
apple :a, 2017-07-20, 1w
|
||||||
banana :crit, b, 2017-07-23, 1d
|
banana :crit, b, 2017-07-23, 1d
|
||||||
cherry :active, c, after b a, 1d
|
cherry :active, c, after b a, 1d
|
||||||
```
|
```
|
||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
gantt
|
gantt
|
||||||
apple :a, 2017-07-20, 1w
|
apple :a, 2017-07-20, 1w
|
||||||
banana :crit, b, 2017-07-23, 1d
|
banana :crit, b, 2017-07-23, 1d
|
||||||
cherry :active, c, after b a, 1d
|
cherry :active, c, after b a, 1d
|
||||||
```
|
```
|
||||||
|
|
||||||
### Title
|
### Title
|
||||||
@@ -146,22 +146,22 @@ You can add milestones to the diagrams. Milestones differ from tasks as they rep
|
|||||||
|
|
||||||
```mermaid-example
|
```mermaid-example
|
||||||
gantt
|
gantt
|
||||||
dateFormat HH:mm
|
dateFormat HH:mm
|
||||||
axisFormat %H:%M
|
axisFormat %H:%M
|
||||||
Initial milestone : milestone, m1, 17:49,2min
|
Initial milestone : milestone, m1, 17:49, 2m
|
||||||
taska2 : 10min
|
Task A : 10m
|
||||||
taska3 : 5min
|
Task B : 5m
|
||||||
Final milestone : milestone, m2, 18:14, 2min
|
Final milestone : milestone, m2, 18:08, 4m
|
||||||
```
|
```
|
||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
gantt
|
gantt
|
||||||
dateFormat HH:mm
|
dateFormat HH:mm
|
||||||
axisFormat %H:%M
|
axisFormat %H:%M
|
||||||
Initial milestone : milestone, m1, 17:49,2min
|
Initial milestone : milestone, m1, 17:49, 2m
|
||||||
taska2 : 10min
|
Task A : 10m
|
||||||
taska3 : 5min
|
Task B : 5m
|
||||||
Final milestone : milestone, m2, 18:14, 2min
|
Final milestone : milestone, m2, 18:08, 4m
|
||||||
```
|
```
|
||||||
|
|
||||||
## Setting dates
|
## Setting dates
|
||||||
@@ -296,29 +296,27 @@ Comments can be entered within a gantt chart, which will be ignored by the parse
|
|||||||
```mermaid-example
|
```mermaid-example
|
||||||
gantt
|
gantt
|
||||||
title A Gantt Diagram
|
title A Gantt Diagram
|
||||||
%% this is a comment
|
%% This is a comment
|
||||||
dateFormat YYYY-MM-DD
|
dateFormat YYYY-MM-DD
|
||||||
section Section
|
section Section
|
||||||
A task :a1, 2014-01-01, 30d
|
A task :a1, 2014-01-01, 30d
|
||||||
Another task :after a1 , 20d
|
Another task :after a1, 20d
|
||||||
section Another
|
section Another
|
||||||
Task in sec :2014-01-12 , 12d
|
Task in Another :2014-01-12, 12d
|
||||||
another task : 24d
|
another task :24d
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
gantt
|
gantt
|
||||||
title A Gantt Diagram
|
title A Gantt Diagram
|
||||||
%% this is a comment
|
%% This is a comment
|
||||||
dateFormat YYYY-MM-DD
|
dateFormat YYYY-MM-DD
|
||||||
section Section
|
section Section
|
||||||
A task :a1, 2014-01-01, 30d
|
A task :a1, 2014-01-01, 30d
|
||||||
Another task :after a1 , 20d
|
Another task :after a1, 20d
|
||||||
section Another
|
section Another
|
||||||
Task in sec :2014-01-12 , 12d
|
Task in Another :2014-01-12, 12d
|
||||||
another task : 24d
|
another task :24d
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Styling
|
## Styling
|
||||||
@@ -440,7 +438,7 @@ Beginner's tip—a full example using interactive links in an html context:
|
|||||||
dateFormat YYYY-MM-DD
|
dateFormat YYYY-MM-DD
|
||||||
|
|
||||||
section Clickable
|
section Clickable
|
||||||
Visit mermaidjs :active, cl1, 2014-01-07, 3d
|
Visit mermaidjs :active, cl1, 2014-01-07, 3d
|
||||||
Print arguments :cl2, after cl1, 3d
|
Print arguments :cl2, after cl1, 3d
|
||||||
Print task :cl3, after cl2, 3d
|
Print task :cl3, after cl2, 3d
|
||||||
|
|
||||||
|
@@ -22,7 +22,7 @@
|
|||||||
"build:watch": "pnpm build:vite --watch",
|
"build:watch": "pnpm build:vite --watch",
|
||||||
"build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
|
"build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
|
||||||
"dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
|
"dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
|
||||||
"dev:coverage": "VITE_COVERAGE=true pnpm dev",
|
"dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev",
|
||||||
"release": "pnpm build",
|
"release": "pnpm build",
|
||||||
"lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
|
"lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
|
||||||
"lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
|
"lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
|
||||||
@@ -31,7 +31,8 @@
|
|||||||
"cypress": "cypress run",
|
"cypress": "cypress run",
|
||||||
"cypress:open": "cypress open",
|
"cypress:open": "cypress open",
|
||||||
"e2e": "start-server-and-test dev http://localhost:9000/ cypress",
|
"e2e": "start-server-and-test dev http://localhost:9000/ cypress",
|
||||||
"e2e:coverage": "VITE_COVERAGE=true pnpm e2e",
|
"coverage:cypress:clean": "rimraf .nyc_output coverage/cypress",
|
||||||
|
"e2e:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm e2e",
|
||||||
"coverage:merge": "ts-node-esm scripts/coverage.ts",
|
"coverage:merge": "ts-node-esm scripts/coverage.ts",
|
||||||
"coverage": "pnpm test:coverage --run && pnpm e2e:coverage && pnpm coverage:merge",
|
"coverage": "pnpm test:coverage --run && pnpm e2e:coverage && pnpm coverage:merge",
|
||||||
"ci": "vitest run",
|
"ci": "vitest run",
|
||||||
@@ -79,7 +80,7 @@
|
|||||||
"@types/rollup-plugin-visualizer": "^4.2.1",
|
"@types/rollup-plugin-visualizer": "^4.2.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
||||||
"@typescript-eslint/parser": "^5.59.0",
|
"@typescript-eslint/parser": "^5.59.0",
|
||||||
"@vitest/coverage-istanbul": "^0.32.2",
|
"@vitest/coverage-v8": "^0.32.2",
|
||||||
"@vitest/spy": "^0.32.2",
|
"@vitest/spy": "^0.32.2",
|
||||||
"@vitest/ui": "^0.32.2",
|
"@vitest/ui": "^0.32.2",
|
||||||
"concurrently": "^8.0.1",
|
"concurrently": "^8.0.1",
|
||||||
|
@@ -20,7 +20,7 @@
|
|||||||
* of src to dst in order.
|
* of src to dst in order.
|
||||||
* @param {any} dst - The destination of the merge
|
* @param {any} dst - The destination of the merge
|
||||||
* @param {any} src - The source object(s) to merge into destination
|
* @param {any} src - The source object(s) to merge into destination
|
||||||
* @param {{ depth: number; clobber: boolean }} [config={ depth: 2, clobber: false }] - Depth: depth
|
* @param {{ depth: number; clobber: boolean }} [config] - Depth: depth
|
||||||
* to traverse within src and dst for merging - clobber: should dissimilar types clobber (default:
|
* to traverse within src and dst for merging - clobber: should dissimilar types clobber (default:
|
||||||
* { depth: 2, clobber: false }). Default is `{ depth: 2, clobber: false }`
|
* { depth: 2, clobber: false }). Default is `{ depth: 2, clobber: false }`
|
||||||
* @returns {any}
|
* @returns {any}
|
||||||
|
@@ -448,9 +448,8 @@ const getNamespaces = function (): NamespaceMap {
|
|||||||
export const addClassesToNamespace = function (id: string, classNames: string[]) {
|
export const addClassesToNamespace = function (id: string, classNames: string[]) {
|
||||||
if (namespaces[id] !== undefined) {
|
if (namespaces[id] !== undefined) {
|
||||||
classNames.map((className) => {
|
classNames.map((className) => {
|
||||||
|
classes[className].parent = id;
|
||||||
namespaces[id].classes[className] = classes[className];
|
namespaces[id].classes[className] = classes[className];
|
||||||
delete classes[className];
|
|
||||||
classCounter--;
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@@ -1373,9 +1373,54 @@ class Class2
|
|||||||
parser.parse(str);
|
parser.parse(str);
|
||||||
|
|
||||||
const testNamespace = parser.yy.getNamespace('Namespace1');
|
const testNamespace = parser.yy.getNamespace('Namespace1');
|
||||||
|
const testClasses = parser.yy.getClasses();
|
||||||
expect(Object.keys(testNamespace.classes).length).toBe(2);
|
expect(Object.keys(testNamespace.classes).length).toBe(2);
|
||||||
expect(Object.keys(testNamespace.children).length).toBe(0);
|
expect(Object.keys(testNamespace.children).length).toBe(0);
|
||||||
expect(testNamespace.classes['Class1'].id).toBe('Class1');
|
expect(testNamespace.classes['Class1'].id).toBe('Class1');
|
||||||
|
expect(Object.keys(testClasses).length).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should add relations between classes of different namespaces', function () {
|
||||||
|
const str = `classDiagram
|
||||||
|
A1 --> B1
|
||||||
|
namespace A {
|
||||||
|
class A1 {
|
||||||
|
+foo : string
|
||||||
|
}
|
||||||
|
class A2 {
|
||||||
|
+bar : int
|
||||||
|
}
|
||||||
|
}
|
||||||
|
namespace B {
|
||||||
|
class B1 {
|
||||||
|
+foo : bool
|
||||||
|
}
|
||||||
|
class B2 {
|
||||||
|
+bar : float
|
||||||
|
}
|
||||||
|
}
|
||||||
|
A2 --> B2`;
|
||||||
|
|
||||||
|
parser.parse(str);
|
||||||
|
const testNamespaceA = parser.yy.getNamespace('A');
|
||||||
|
const testNamespaceB = parser.yy.getNamespace('B');
|
||||||
|
const testClasses = parser.yy.getClasses();
|
||||||
|
const testRelations = parser.yy.getRelations();
|
||||||
|
expect(Object.keys(testNamespaceA.classes).length).toBe(2);
|
||||||
|
expect(testNamespaceA.classes['A1'].members[0]).toBe('+foo : string');
|
||||||
|
expect(testNamespaceA.classes['A2'].members[0]).toBe('+bar : int');
|
||||||
|
expect(Object.keys(testNamespaceB.classes).length).toBe(2);
|
||||||
|
expect(testNamespaceB.classes['B1'].members[0]).toBe('+foo : bool');
|
||||||
|
expect(testNamespaceB.classes['B2'].members[0]).toBe('+bar : float');
|
||||||
|
expect(Object.keys(testClasses).length).toBe(4);
|
||||||
|
expect(testClasses['A1'].parent).toBe('A');
|
||||||
|
expect(testClasses['A2'].parent).toBe('A');
|
||||||
|
expect(testClasses['B1'].parent).toBe('B');
|
||||||
|
expect(testClasses['B2'].parent).toBe('B');
|
||||||
|
expect(testRelations[0].id1).toBe('A1');
|
||||||
|
expect(testRelations[0].id2).toBe('B1');
|
||||||
|
expect(testRelations[1].id1).toBe('A2');
|
||||||
|
expect(testRelations[1].id2).toBe('B2');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@@ -93,52 +93,51 @@ export const addClasses = function (
|
|||||||
log.info(classes);
|
log.info(classes);
|
||||||
|
|
||||||
// Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
|
// Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
|
||||||
keys.forEach(function (id) {
|
keys
|
||||||
const vertex = classes[id];
|
.filter((id) => classes[id].parent == parent)
|
||||||
|
.forEach(function (id) {
|
||||||
|
const vertex = classes[id];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable for storing the classes for the vertex
|
* Variable for storing the classes for the vertex
|
||||||
*/
|
*/
|
||||||
let cssClassStr = '';
|
const cssClassStr = vertex.cssClasses.join(' ');
|
||||||
if (vertex.cssClasses.length > 0) {
|
|
||||||
cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' ');
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
|
const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
|
||||||
|
|
||||||
// Use vertex id as text in the box if no text is provided by the graph definition
|
// Use vertex id as text in the box if no text is provided by the graph definition
|
||||||
const vertexText = vertex.label ?? vertex.id;
|
const vertexText = vertex.label ?? vertex.id;
|
||||||
const radius = 0;
|
const radius = 0;
|
||||||
const shape = 'class_box';
|
const shape = 'class_box';
|
||||||
|
|
||||||
// Add the node
|
// Add the node
|
||||||
const node = {
|
const node = {
|
||||||
labelStyle: styles.labelStyle,
|
labelStyle: styles.labelStyle,
|
||||||
shape: shape,
|
shape: shape,
|
||||||
labelText: sanitizeText(vertexText),
|
labelText: sanitizeText(vertexText),
|
||||||
classData: vertex,
|
classData: vertex,
|
||||||
rx: radius,
|
rx: radius,
|
||||||
ry: radius,
|
ry: radius,
|
||||||
class: cssClassStr,
|
class: cssClassStr,
|
||||||
style: styles.style,
|
style: styles.style,
|
||||||
id: vertex.id,
|
id: vertex.id,
|
||||||
domId: vertex.domId,
|
domId: vertex.domId,
|
||||||
tooltip: diagObj.db.getTooltip(vertex.id, parent) || '',
|
tooltip: diagObj.db.getTooltip(vertex.id, parent) || '',
|
||||||
haveCallback: vertex.haveCallback,
|
haveCallback: vertex.haveCallback,
|
||||||
link: vertex.link,
|
link: vertex.link,
|
||||||
width: vertex.type === 'group' ? 500 : undefined,
|
width: vertex.type === 'group' ? 500 : undefined,
|
||||||
type: vertex.type,
|
type: vertex.type,
|
||||||
// TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
|
// TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
|
||||||
padding: getConfig().flowchart?.padding ?? getConfig().class?.padding,
|
padding: getConfig().flowchart?.padding ?? getConfig().class?.padding,
|
||||||
};
|
};
|
||||||
g.setNode(vertex.id, node);
|
g.setNode(vertex.id, node);
|
||||||
|
|
||||||
if (parent) {
|
if (parent) {
|
||||||
g.setParent(vertex.id, parent);
|
g.setParent(vertex.id, parent);
|
||||||
}
|
}
|
||||||
|
|
||||||
log.info('setNode', node);
|
log.info('setNode', node);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@@ -7,6 +7,7 @@ export interface ClassNode {
|
|||||||
members: string[];
|
members: string[];
|
||||||
annotations: string[];
|
annotations: string[];
|
||||||
domId: string;
|
domId: string;
|
||||||
|
parent?: string;
|
||||||
link?: string;
|
link?: string;
|
||||||
linkTarget?: string;
|
linkTarget?: string;
|
||||||
haveCallback?: boolean;
|
haveCallback?: boolean;
|
||||||
|
@@ -338,4 +338,20 @@ describe('[Style] when parsing', () => {
|
|||||||
|
|
||||||
expect(edges[0].type).toBe('arrow_point');
|
expect(edges[0].type).toBe('arrow_point');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should handle multiple vertices with style', function () {
|
||||||
|
const res = flow.parser.parse(`
|
||||||
|
graph TD
|
||||||
|
classDef C1 stroke-dasharray:4
|
||||||
|
classDef C2 stroke-dasharray:6
|
||||||
|
A & B:::C1 & D:::C1 --> E:::C2
|
||||||
|
`);
|
||||||
|
|
||||||
|
const vert = flow.parser.yy.getVertices();
|
||||||
|
|
||||||
|
expect(vert['A'].classes.length).toBe(0);
|
||||||
|
expect(vert['B'].classes[0]).toBe('C1');
|
||||||
|
expect(vert['D'].classes[0]).toBe('C1');
|
||||||
|
expect(vert['E'].classes[0]).toBe('C2');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@@ -359,7 +359,7 @@ statement
|
|||||||
|
|
||||||
separator: NEWLINE | SEMI | EOF ;
|
separator: NEWLINE | SEMI | EOF ;
|
||||||
|
|
||||||
|
|
||||||
verticeStatement: verticeStatement link node
|
verticeStatement: verticeStatement link node
|
||||||
{ /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
|
{ /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
|
||||||
| verticeStatement link node spaceList
|
| verticeStatement link node spaceList
|
||||||
@@ -368,12 +368,16 @@ verticeStatement: verticeStatement link node
|
|||||||
|node { /*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
|
|node { /*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
|
||||||
;
|
;
|
||||||
|
|
||||||
node: vertex
|
node: styledVertex
|
||||||
{ /* console.warn('nod', $1); */ $$ = [$1];}
|
{ /* console.warn('nod', $1); */ $$ = [$1];}
|
||||||
| node spaceList AMP spaceList vertex
|
| node spaceList AMP spaceList styledVertex
|
||||||
{ $$ = $1.concat($5); /* console.warn('pip', $1[0], $5, $$); */ }
|
{ $$ = $1.concat($5); /* console.warn('pip', $1[0], $5, $$); */ }
|
||||||
|
;
|
||||||
|
|
||||||
|
styledVertex: vertex
|
||||||
|
{ /* console.warn('nod', $1); */ $$ = $1;}
|
||||||
| vertex STYLE_SEPARATOR idString
|
| vertex STYLE_SEPARATOR idString
|
||||||
{$$ = [$1];yy.setClass($1,$3)}
|
{$$ = $1;yy.setClass($1,$3)}
|
||||||
;
|
;
|
||||||
|
|
||||||
vertex: idString SQS text SQE
|
vertex: idString SQS text SQE
|
||||||
|
@@ -358,7 +358,7 @@ const setupDoc = (g, parentParsedItem, doc, diagramStates, diagramDb, altFlag) =
|
|||||||
* Look through all of the documents (docs) in the parsedItems
|
* Look through all of the documents (docs) in the parsedItems
|
||||||
* Because is a _document_ direction, the default direction is not necessarily the same as the overall default _diagram_ direction.
|
* Because is a _document_ direction, the default direction is not necessarily the same as the overall default _diagram_ direction.
|
||||||
* @param {object[]} parsedItem - the parsed statement item to look through
|
* @param {object[]} parsedItem - the parsed statement item to look through
|
||||||
* @param [defaultDir=DEFAULT_NESTED_DOC_DIR] - the direction to use if none is found
|
* @param [defaultDir] - the direction to use if none is found
|
||||||
* @returns {string}
|
* @returns {string}
|
||||||
*/
|
*/
|
||||||
const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
|
const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
|
||||||
|
@@ -20,6 +20,10 @@ The definitions that can be generated the Live-Editor are also backwards-compati
|
|||||||
|
|
||||||
[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
|
[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
|
||||||
|
|
||||||
|
## Mermaid with OpenAI
|
||||||
|
|
||||||
|
[Elle Neal: Mind Mapping with AI: An Accessible Approach for Neurodiverse Learners Tutorial:](https://medium.com/@elle.neal_71064/mind-mapping-with-ai-an-accessible-approach-for-neurodiverse-learners-1a74767359ff), [Demo:](https://databutton.com/v/jk9vrghc)
|
||||||
|
|
||||||
## Mermaid with HTML
|
## Mermaid with HTML
|
||||||
|
|
||||||
Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)
|
Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)
|
||||||
|
@@ -155,6 +155,8 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
- [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
|
- [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
|
||||||
- [CKEditor](https://github.com/ckeditor/ckeditor5)
|
- [CKEditor](https://github.com/ckeditor/ckeditor5)
|
||||||
- [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
|
- [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
|
||||||
|
- [Standard Notes](https://standardnotes.com/)
|
||||||
|
- [sn-mermaid](https://github.com/nienow/sn-mermaid)
|
||||||
|
|
||||||
## Document Generation
|
## Document Generation
|
||||||
|
|
||||||
|
@@ -19,13 +19,13 @@ Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pas
|
|||||||
```mermaid-example
|
```mermaid-example
|
||||||
gantt
|
gantt
|
||||||
title A Gantt Diagram
|
title A Gantt Diagram
|
||||||
dateFormat YYYY-MM-DD
|
dateFormat YYYY-MM-DD
|
||||||
section Section
|
section Section
|
||||||
A task :a1, 2014-01-01, 30d
|
A task :a1, 2014-01-01, 30d
|
||||||
Another task :after a1 , 20d
|
Another task :after a1, 20d
|
||||||
section Another
|
section Another
|
||||||
Task in sec :2014-01-12 , 12d
|
Task in Another :2014-01-12, 12d
|
||||||
another task : 24d
|
another task :24d
|
||||||
```
|
```
|
||||||
|
|
||||||
## Syntax
|
## Syntax
|
||||||
@@ -66,10 +66,10 @@ gantt
|
|||||||
It is possible to set multiple dependencies separated by space:
|
It is possible to set multiple dependencies separated by space:
|
||||||
|
|
||||||
```mermaid-example
|
```mermaid-example
|
||||||
gantt
|
gantt
|
||||||
apple :a, 2017-07-20, 1w
|
apple :a, 2017-07-20, 1w
|
||||||
banana :crit, b, 2017-07-23, 1d
|
banana :crit, b, 2017-07-23, 1d
|
||||||
cherry :active, c, after b a, 1d
|
cherry :active, c, after b a, 1d
|
||||||
```
|
```
|
||||||
|
|
||||||
### Title
|
### Title
|
||||||
@@ -88,12 +88,12 @@ You can add milestones to the diagrams. Milestones differ from tasks as they rep
|
|||||||
|
|
||||||
```mermaid-example
|
```mermaid-example
|
||||||
gantt
|
gantt
|
||||||
dateFormat HH:mm
|
dateFormat HH:mm
|
||||||
axisFormat %H:%M
|
axisFormat %H:%M
|
||||||
Initial milestone : milestone, m1, 17:49,2min
|
Initial milestone : milestone, m1, 17:49, 2m
|
||||||
taska2 : 10min
|
Task A : 10m
|
||||||
taska3 : 5min
|
Task B : 5m
|
||||||
Final milestone : milestone, m2, 18:14, 2min
|
Final milestone : milestone, m2, 18:08, 4m
|
||||||
```
|
```
|
||||||
|
|
||||||
## Setting dates
|
## Setting dates
|
||||||
@@ -214,15 +214,14 @@ Comments can be entered within a gantt chart, which will be ignored by the parse
|
|||||||
```mermaid
|
```mermaid
|
||||||
gantt
|
gantt
|
||||||
title A Gantt Diagram
|
title A Gantt Diagram
|
||||||
%% this is a comment
|
%% This is a comment
|
||||||
dateFormat YYYY-MM-DD
|
dateFormat YYYY-MM-DD
|
||||||
section Section
|
section Section
|
||||||
A task :a1, 2014-01-01, 30d
|
A task :a1, 2014-01-01, 30d
|
||||||
Another task :after a1 , 20d
|
Another task :after a1, 20d
|
||||||
section Another
|
section Another
|
||||||
Task in sec :2014-01-12 , 12d
|
Task in Another :2014-01-12, 12d
|
||||||
another task : 24d
|
another task :24d
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Styling
|
## Styling
|
||||||
@@ -350,7 +349,7 @@ Beginner's tip—a full example using interactive links in an html context:
|
|||||||
dateFormat YYYY-MM-DD
|
dateFormat YYYY-MM-DD
|
||||||
|
|
||||||
section Clickable
|
section Clickable
|
||||||
Visit mermaidjs :active, cl1, 2014-01-07, 3d
|
Visit mermaidjs :active, cl1, 2014-01-07, 3d
|
||||||
Print arguments :cl2, after cl1, 3d
|
Print arguments :cl2, after cl1, 3d
|
||||||
Print task :cl3, after cl2, 3d
|
Print task :cl3, after cl2, 3d
|
||||||
|
|
||||||
|
19
pnpm-lock.yaml
generated
19
pnpm-lock.yaml
generated
@@ -64,7 +64,7 @@ importers:
|
|||||||
'@typescript-eslint/parser':
|
'@typescript-eslint/parser':
|
||||||
specifier: ^5.59.0
|
specifier: ^5.59.0
|
||||||
version: 5.59.0(eslint@8.39.0)(typescript@5.1.3)
|
version: 5.59.0(eslint@8.39.0)(typescript@5.1.3)
|
||||||
'@vitest/coverage-istanbul':
|
'@vitest/coverage-v8':
|
||||||
specifier: ^0.32.2
|
specifier: ^0.32.2
|
||||||
version: 0.32.2(vitest@0.32.2)
|
version: 0.32.2(vitest@0.32.2)
|
||||||
'@vitest/spy':
|
'@vitest/spy':
|
||||||
@@ -3545,7 +3545,7 @@ packages:
|
|||||||
slash: 3.0.0
|
slash: 3.0.0
|
||||||
string-length: 4.0.2
|
string-length: 4.0.2
|
||||||
strip-ansi: 6.0.1
|
strip-ansi: 6.0.1
|
||||||
v8-to-istanbul: 9.0.1
|
v8-to-istanbul: 9.1.0
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
dev: true
|
dev: true
|
||||||
@@ -4997,17 +4997,22 @@ packages:
|
|||||||
vue: 3.3.4
|
vue: 3.3.4
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@vitest/coverage-istanbul@0.32.2(vitest@0.32.2):
|
/@vitest/coverage-v8@0.32.2(vitest@0.32.2):
|
||||||
resolution: {integrity: sha512-B5VSvfzwTsDt9HjFmQ4sZ2tQHivmHJpAoG/BJwNNQeBtSCSdY1L6tfCjwZLo7ryOmZEDA3ck/DAmHCUZqa+MWA==}
|
resolution: {integrity: sha512-/+V3nB3fyeuuSeKxCfi6XmWjDIxpky7AWSkGVfaMjAk7di8igBwRsThLjultwIZdTDH1RAxpjmCXEfSqsMFZOA==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
vitest: '>=0.32.0 <1'
|
vitest: '>=0.32.0 <1'
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@ampproject/remapping': 2.2.1
|
||||||
|
'@bcoe/v8-coverage': 0.2.3
|
||||||
istanbul-lib-coverage: 3.2.0
|
istanbul-lib-coverage: 3.2.0
|
||||||
istanbul-lib-instrument: 5.2.1
|
|
||||||
istanbul-lib-report: 3.0.0
|
istanbul-lib-report: 3.0.0
|
||||||
istanbul-lib-source-maps: 4.0.1
|
istanbul-lib-source-maps: 4.0.1
|
||||||
istanbul-reports: 3.1.5
|
istanbul-reports: 3.1.5
|
||||||
|
magic-string: 0.30.0
|
||||||
|
picocolors: 1.0.0
|
||||||
|
std-env: 3.3.2
|
||||||
test-exclude: 6.0.0
|
test-exclude: 6.0.0
|
||||||
|
v8-to-istanbul: 9.1.0
|
||||||
vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0)
|
vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0)
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
@@ -14881,8 +14886,8 @@ packages:
|
|||||||
/v8-compile-cache-lib@3.0.1:
|
/v8-compile-cache-lib@3.0.1:
|
||||||
resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
|
resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
|
||||||
|
|
||||||
/v8-to-istanbul@9.0.1:
|
/v8-to-istanbul@9.1.0:
|
||||||
resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==}
|
resolution: {integrity: sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==}
|
||||||
engines: {node: '>=10.12.0'}
|
engines: {node: '>=10.12.0'}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@jridgewell/trace-mapping': 0.3.17
|
'@jridgewell/trace-mapping': 0.3.17
|
||||||
|
@@ -17,7 +17,7 @@ export default defineConfig({
|
|||||||
// TODO: should we move this to a mermaid-core package?
|
// TODO: should we move this to a mermaid-core package?
|
||||||
setupFiles: ['packages/mermaid/src/tests/setup.ts'],
|
setupFiles: ['packages/mermaid/src/tests/setup.ts'],
|
||||||
coverage: {
|
coverage: {
|
||||||
provider: 'istanbul',
|
provider: 'v8',
|
||||||
reporter: ['text', 'json', 'html', 'lcov'],
|
reporter: ['text', 'json', 'html', 'lcov'],
|
||||||
reportsDirectory: './coverage/vitest',
|
reportsDirectory: './coverage/vitest',
|
||||||
exclude: ['**/node_modules/**', '**/tests/**', '**/__mocks__/**'],
|
exclude: ['**/node_modules/**', '**/tests/**', '**/__mocks__/**'],
|
||||||
|
Reference in New Issue
Block a user