marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-17 14:29:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into sidv/v8Coverage

Browse Source 
* develop:
  Update docs
  Cleanup
  Clean up some spacing in examples
  Correct the Gantt milestones example
  fix(class): keep members in namespace classes
This commit is contained in:
Sidharth Vinod
2023-06-29 12:53:56 +05:30
parent 0d833fb4ce 562910e831
commit 3a03070f5d
7 changed files with 174 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
demos/classchart.html
View File

@@ -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({

88
docs/syntax/gantt.md
View File

@@ -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

3
packages/mermaid/src/diagrams/class/classDb.ts
View File

@@ -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--;
}); });
} }
}; };

45
packages/mermaid/src/diagrams/class/classDiagram.spec.ts
View File

@@ -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');
}); });
}); });

79
packages/mermaid/src/diagrams/class/classRenderer-v2.ts
View File

@@ -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);
}); });
}; };
/** /**

1
packages/mermaid/src/diagrams/class/classTypes.ts
View File

@@ -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;

45
packages/mermaid/src/docs/syntax/gantt.md
View File

@@ -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