|
@@ -245,13 +201,13 @@ pie
- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
- [HTTP Server](https://github.com/TomWright/mermaid-server)
-# Contributors [](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Help+wanted%21%22) [](https://github.com/mermaid-js/mermaid/graphs/contributors) [](https://github.com/mermaid-js/mermaid/graphs/contributors)
+## Contributors [](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Help+wanted%21%22) [](https://github.com/mermaid-js/mermaid/graphs/contributors) [](https://github.com/mermaid-js/mermaid/graphs/contributors)
Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)
-# Appreciation
+## Appreciation
A quick note from Knut Sveidqvist:
>*Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*
>*Thanks also to the [js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.*
diff --git a/Tutorials.md b/Tutorials.md
new file mode 100644
index 000000000..fc079b357
--- /dev/null
+++ b/Tutorials.md
@@ -0,0 +1,27 @@
+# Tutorials
+**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md)
+
+This is list of Tutorials in Mermaid.
+
+For most purposes, the Live-Editor is capable of taking care of all diagramming needs.
+
+The definitions that can be generated here are also backwards-compatible for integrations, plug-ins and the live-editor.
+
+# Live-Editor Tutorials
+
+https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s
+
+https://www.youtube.com/watch?v=5RQqht3NNSE
+
+https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
+
+https://www.youtube.com/watch?v=9HZzKkAqrX8
+
+https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
+
+https://www.youtube.com/watch?v=9HZzKkAqrX8
+
+# Mermaid HTML tutorials and samples
+
+
+
diff --git a/cypress/helpers/util.js b/cypress/helpers/util.js
index a3f92defd..22fe412e6 100644
--- a/cypress/helpers/util.js
+++ b/cypress/helpers/util.js
@@ -19,7 +19,29 @@ export const mermaidUrl = (graphStr, options, api) => {
return url;
};
-export const imgSnapshotTest = (graphStr, options, api) => {
+export const imgSnapshotTest = (graphStr, _options, api) => {
+ const options = Object.assign(_options);
+ if (!options.fontFamily) {
+ options.fontFamily = 'courier';
+ }
+ if (!options.sequence) {
+ options.sequence = {};
+ }
+ if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
+ options.sequence.actorFontFamily = 'courier';
+ }
+ if (options.sequence && !options.sequence.noteFontFamily) {
+ options.sequence.noteFontFamily = 'courier';
+ }
+ options.sequence.actorFontFamily = 'courier';
+ options.sequence.noteFontFamily = 'courier';
+ options.sequence.messageFontFamily = 'courier';
+ if (options.sequence && !options.sequence.actorFontFamily) {
+ options.sequence.actorFontFamily = 'courier';
+ }
+ if (!options.fontSize) {
+ options.fontSize = '16px';
+ }
const url = mermaidUrl(graphStr, options, api);
cy.visit(url);
diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/integration/rendering/debug.spec.js
new file mode 100644
index 000000000..d3123906f
--- /dev/null
+++ b/cypress/integration/rendering/debug.spec.js
@@ -0,0 +1,14 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('Flowchart', () => {
+
+ it('34: testing the label width in percy', () => {
+ imgSnapshotTest(
+ `graph TD
+ A[Christmas]
+ `,
+ { theme: 'forest' , fontFamily: '"Noto Sans SC", sans-serif' }
+ );
+ });
+});
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 2addd4772..5128dec7a 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -46,4 +46,22 @@ describe('Flowchart v2', () => {
{ flowchart: { diagramPadding: 0 } }
);
});
+
+ it('Length of edges', () => {
+ imgSnapshotTest(
+ `flowchart TD
+ L1 --- L2
+ L2 --- C
+ M1 ---> C
+ R1 .-> R2
+ R2 <.-> C
+ C -->|Label 1| E1
+ C <-- Label 2 ---> E2
+ C ----> E3
+ C <-...-> E4
+ C ======> E5
+ `,
+ { flowchart: { diagramPadding: 0 } }
+ );
+ });
});
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 9e510c112..d7b0913ba 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -11,7 +11,7 @@ describe('Flowchart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -24,7 +24,7 @@ describe('Flowchart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
- { flowchart: { htmlLabels: true } }
+ { flowchart: { htmlLabels: true }, fontFamily: 'courier' }
);
});
@@ -38,7 +38,7 @@ describe('Flowchart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[Car]
`,
- {}
+ {fontFamily: 'courier'}
);
});
@@ -53,7 +53,7 @@ describe('Flowchart', () => {
C -->|Two| E[\\iPhone\\]
C -->|Three| F[Car]
`,
- {}
+ { fontFamily: 'courier'}
);
});
@@ -69,7 +69,7 @@ describe('Flowchart', () => {
classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f
class 1A,1B,D,E processHead
`,
- {}
+ {fontFamily: 'courier'}
);
});
@@ -98,7 +98,7 @@ describe('Flowchart', () => {
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
`,
- {}
+ { fontFamily: 'courier' }
);
});
@@ -169,7 +169,7 @@ describe('Flowchart', () => {
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
`,
- {}
+ { fontFamily: 'courier' }
);
});
@@ -178,7 +178,7 @@ describe('Flowchart', () => {
`
graph TB;subgraph "number as labels";1;end;
`,
- {}
+ { fontFamily: 'courier' }
);
});
@@ -190,7 +190,7 @@ describe('Flowchart', () => {
a1-->a2
end
`,
- {}
+ { fontFamily: 'courier' }
);
});
@@ -202,7 +202,7 @@ describe('Flowchart', () => {
a1-->a2
end
`,
- {}
+ { fontFamily: 'courier' }
);
});
@@ -237,7 +237,7 @@ describe('Flowchart', () => {
style foo fill:#F99,stroke-width:2px,stroke:#F0F
style bar fill:#999,stroke-width:10px,stroke:#0F0
`,
- {}
+ { fontFamily: 'courier' }
);
});
@@ -339,7 +339,7 @@ describe('Flowchart', () => {
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
`,
- {}
+ { fontFamily: 'courier' }
);
});
@@ -356,6 +356,7 @@ describe('Flowchart', () => {
{
listUrl: false,
listId: 'color styling',
+ fontFamily: 'courier',
logLevel: 0
}
);
@@ -378,7 +379,7 @@ describe('Flowchart', () => {
`,
{
listUrl: false,
- listId: 'color styling',
+ listId: 'color styling', fontFamily: 'courier',
logLevel: 0
}
);
@@ -394,7 +395,7 @@ describe('Flowchart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -413,7 +414,7 @@ describe('Flowchart', () => {
class A someclass;
class C someclass;
`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -430,7 +431,7 @@ describe('Flowchart', () => {
linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px
`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -439,7 +440,7 @@ describe('Flowchart', () => {
`graph LR
a --> b --> c
`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -448,7 +449,7 @@ describe('Flowchart', () => {
`graph LR
a --> b & c--> d
`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -458,7 +459,7 @@ describe('Flowchart', () => {
A[ h ] -- hello --> B[" test "]:::exClass & C --> D;
classDef exClass background:#bbb,border:1px solid red;
`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -480,7 +481,7 @@ describe('Flowchart', () => {
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -494,7 +495,7 @@ describe('Flowchart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
- { flowchart: { nodeSpacing: 50 } }
+ { flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' }
);
});
@@ -508,7 +509,7 @@ describe('Flowchart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
- { flowchart: { rankSpacing: '100' } }
+ { flowchart: { rankSpacing: '100' }, fontFamily: 'courier' }
);
});
@@ -521,7 +522,7 @@ describe('Flowchart', () => {
linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px
`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -543,7 +544,7 @@ describe('Flowchart', () => {
click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test"
`,
- { securityLevel: 'loose' }
+ { securityLevel: 'loose', fontFamily: 'courier' }
);
});
@@ -583,7 +584,7 @@ describe('Flowchart', () => {
click B "index.html#link-clicked" "link test"
click D testClick "click test"
`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -615,7 +616,7 @@ describe('Flowchart', () => {
class A myClass1
class D myClass2
`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -639,7 +640,7 @@ describe('Flowchart', () => {
classDef redBg fill:#622;
classDef whiteTxt color: white;
`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -651,7 +652,7 @@ describe('Flowchart', () => {
eat --> sleep
work --> eat
`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -670,7 +671,7 @@ describe('Flowchart', () => {
class A someclass;
class C someclass;
`,
- { flowchart: { htmlLabels: false } }
+ { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -696,4 +697,22 @@ describe('Flowchart', () => {
{ }
);
});
+
+ it('35: should honor minimum edge length as specified by the user', () => {
+ imgSnapshotTest(
+ `graph TD
+ L1 --- L2
+ L2 --- C
+ M1 ---> C
+ R1 .-> R2
+ R2 <.-> C
+ C -->|Label 1| E1
+ C -- Label 2 ---> E2
+ C ----> E3
+ C -----> E4
+ C ======> E5
+ `,
+ { }
+ );
+ });
});
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index d8ede8676..e20c6104b 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -29,7 +29,7 @@ context('Sequence diagram', () => {
Alice -->> John: Parallel message 2
end
`,
- {}
+ {sequence:{actorFontFamily:'courier'}}
);
});
it('should handle different line breaks', () => {
@@ -92,7 +92,7 @@ context('Sequence diagram', () => {
Alice->>Bob: I'm short
Bob->>Alice: Short as well
`,
- { sequence: { actorFontSize: 18, actorFontFamily: 'Arial' } }
+ { sequence: { actorFontSize: 18, actorFontFamily: 'times' } }
);
});
it('should render notes aligned to the left when configured', () => {
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 77a0f0898..bc3cb8816 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -7,7 +7,7 @@ describe('State diagram', () => {
`
info
`,
- { logLevel: 1 }
+ { logLevel: 1, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -19,7 +19,7 @@ describe('State diagram', () => {
[*] --> State1
State1 --> [*]
`,
- { logLevel: 0 }
+ { logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -31,7 +31,7 @@ describe('State diagram', () => {
[*] --> S1
state "Some long name" as S1
`,
- { logLevel: 0 }
+ { logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -43,7 +43,7 @@ describe('State diagram', () => {
[*] --> S1
state "Some long name" as S1: The description
`,
- { logLevel: 0 }
+ { logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -54,7 +54,7 @@ describe('State diagram', () => {
state "A long long name" as long1
state "A" as longlonglongid
`,
- { logLevel: 0 }
+ { logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -68,7 +68,7 @@ describe('State diagram', () => {
S1 --> S3: long line using should work S1 --> S4: long line using \\nshould work `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -82,7 +82,7 @@ describe('State diagram', () => { notes. end note `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -96,7 +96,7 @@ describe('State diagram', () => { notes with . and in them. end note `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -112,7 +112,7 @@ describe('State diagram', () => { State1 --> State2 : With +,- note left of State2 : This is the note +,- `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -128,7 +128,7 @@ describe('State diagram', () => { And another line... end note `, - {} + { logLevel: 0, fontFamily: 'courier' } ); }); it('v2 should handle multiline notes with different line breaks', () => { @@ -140,7 +140,7 @@ describe('State diagram', () => { Line1 Line2 Line3 Line4 Line5 end note `, - {} + { logLevel: 0, fontFamily: 'courier' } ); }); @@ -155,7 +155,7 @@ describe('State diagram', () => { State1 --> State2 State2 --> [*] `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -168,7 +168,7 @@ describe('State diagram', () => { State1 --> State3 State1 --> [*] `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -184,7 +184,7 @@ describe('State diagram', () => { State2 --> State3 : Transition 5 State1 --> [*] `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -197,7 +197,7 @@ describe('State diagram', () => { XState2 : New line XState1 --> XState2 `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -216,7 +216,7 @@ describe('State diagram', () => { Configuring --> Idle : EvConfig EvConfig EvConfig EvConfig EvConfig } `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -246,7 +246,7 @@ describe('State diagram', () => { } } `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); }); it('v2 should render forks in composit states', () => { @@ -268,7 +268,7 @@ describe('State diagram', () => { State4 --> [*] } `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); }); it('v2 should render forks and joins', () => { @@ -286,7 +286,7 @@ describe('State diagram', () => { join_state --> State4 State4 --> [*] `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -310,7 +310,7 @@ describe('State diagram', () => { ScrollLockOn --> ScrollLockOff : EvCapsLockPressed } `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -338,7 +338,7 @@ describe('State diagram', () => { } `, { - logLevel: 0, + logLevel: 0, fontFamily: 'courier' } ); }); @@ -350,7 +350,7 @@ describe('State diagram', () => { a --> b: Stop `, { - logLevel: 0, + logLevel: 0, fontFamily: 'courier', } ); }); diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js index db257f76c..ac1000858 100644 --- a/cypress/integration/rendering/stateDiagram.spec.js +++ b/cypress/integration/rendering/stateDiagram.spec.js @@ -9,7 +9,7 @@ describe('State diagram', () => { [*] --> State1 State1 --> [*] `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -21,7 +21,7 @@ describe('State diagram', () => { [*] --> S1 state "Some long name" as S1 `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -33,7 +33,7 @@ describe('State diagram', () => { [*] --> S1 state "Some long name" as S1: The description `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -44,7 +44,7 @@ describe('State diagram', () => { state "A long long name" as long1 state "A" as longlonglongid `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -58,7 +58,7 @@ describe('State diagram', () => { S1 --> S3: long line using should work S1 --> S4: long line using \\nshould work `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -72,7 +72,7 @@ describe('State diagram', () => { notes. end note `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -86,7 +86,7 @@ describe('State diagram', () => { notes with . and in them. end note `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -102,7 +102,7 @@ describe('State diagram', () => { State1 --> State2 : With +,- note left of State2 : This is the note +,- `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -118,7 +118,7 @@ describe('State diagram', () => { And another line... end note `, - {} + { logLevel: 0, fontFamily: 'courier' } ); }); it('should handle multiline notes with different line breaks', () => { @@ -130,7 +130,7 @@ describe('State diagram', () => { Line1 Line2 Line3 Line4 Line5 end note `, - {} + { logLevel: 0, fontFamily: 'courier' } ); }); @@ -145,7 +145,7 @@ describe('State diagram', () => { State1 --> State2 State2 --> [*] `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -158,7 +158,7 @@ describe('State diagram', () => { State1 --> State3 State1 --> [*] `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -174,7 +174,7 @@ describe('State diagram', () => { State2 --> State3 : Transition 5 State1 --> [*] `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -187,7 +187,7 @@ describe('State diagram', () => { XState2 : New line XState1 --> XState2 `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -206,7 +206,7 @@ describe('State diagram', () => { Configuring --> Idle : EvConfig EvConfig EvConfig EvConfig EvConfig } `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -236,7 +236,7 @@ describe('State diagram', () => { } } `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); }); it('should render forks in composit states', () => { @@ -258,7 +258,7 @@ describe('State diagram', () => { State4 --> [*] } `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); }); it('should render forks and joins', () => { @@ -276,7 +276,7 @@ describe('State diagram', () => { join_state --> State4 State4 --> [*] `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -300,7 +300,7 @@ describe('State diagram', () => { ScrollLockOn --> ScrollLockOff : EvCapsLockPressed } `, - { logLevel: 0 } + { logLevel: 0, fontFamily: 'courier' } ); cy.get('svg'); }); @@ -315,7 +315,7 @@ describe('State diagram', () => { } `, { - logLevel: 0, + logLevel: 0, fontFamily: 'courier' } ); }); @@ -328,7 +328,7 @@ describe('State diagram', () => { } `, { - logLevel: 0, + logLevel: 0, fontFamily: 'courier' } ); }); @@ -340,7 +340,7 @@ describe('State diagram', () => { a --> b: Stop `, { - logLevel: 0, + logLevel: 0, fontFamily: 'courier' } ); }); diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/integration/rendering/theme.spec.js index d0da3a964..b4b19b419 100644 --- a/cypress/integration/rendering/theme.spec.js +++ b/cypress/integration/rendering/theme.spec.js @@ -23,7 +23,7 @@ describe('Pie Chart', () => { it('should render a flowchart diagram', () => { imgSnapshotTest( ` - %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%% + %%{init: { 'logLevel': 0} }%% graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} diff --git a/cypress/platform/class.html b/cypress/platform/class.html index 4cd58cda8..d2d0d6068 100644 --- a/cypress/platform/class.html +++ b/cypress/platform/class.html @@ -20,16 +20,8 @@ info below-
+
%%{init: {'theme': 'base', 'fontFamily': 'arial', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
- classDiagram-v2
-
- classApa -- classB : Inheritance
- classA -- classC : link
- classC -- classD : link
- classB -- classD
-
-
classDiagram-v2
class BankAccount{
+String owner
@@ -59,30 +51,6 @@
classA -- classC : link
classC -- classD : link
classB -- classD
-
- Customer "1" --> "*" Ticket
- Student "1" --> "1..*" Course
- Galaxy --> "many" Star : Contains
- <<interface>> Customer
- <<Service>> Galaxy
-
- class BankAccount{
- +String owner
- +BigDecimal balance
- +deposit(amount) bool
- +withdrawl(amount) int
- }
-
- class Square~Shape~{
- int id
- List~int~ position
- setPoints(List~int~ points)
- getPoints() List~int~
-}
-
-Square : -List~string~ messages
-Square : +setMessages(List~string~ messages)
-Square : +getMessages() List~string~
-
+
+
+
+ info below+
+
+sequenceDiagram
+ Alice->>+John: Hello John, how are you?
+ Alice->>+John: John, can you hear me?
+ John-->>-Alice: Hi Alice, I can hear you!
+ John-->>-Alice: I feel great!
+
+
+ %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
+graph TD
+ A(Start) --> B[/Another/]
+ A[/Another/] --> C[End]
+ subgraph section
+ B
+ C
+ end
+
+
+ %%{init: {"fontFamily": "arial2"}}%%
+graph TD
+ A[Christmas]
+
+
+flowchart TD
+ L1 --- L2
+ L2 --- C
+ M1 ---> C
+ R1 .-> R2
+ R2 <.-> C
+ C -->|Label 1| E1
+ C <-- Label 2 ---> E2
+ C ----> E3
+ C <-...-> E4
+ C ======> E5
+
+
+graph TD
+ L1 --- L2
+ L2 --- C
+ M1 ---> C
+ R1 .-> R2
+ R2 <.-> C
+ C -->|Label 1| E1
+ C -- Label 2 ---> E2
+ C ----> E3
+ C -----> E4
+ C ======> E5
+
+
+
+
+
+
+ |