with explicit line break + and + B ->> A: Parallel message 2
with explicit line break + end + + loop Wrapped loop + Note right of B: This is a long note
in a loop + A ->> B: Message in loop + end + `; + imgSnapshotTest(diagramCode, { sequence: { wrap: true } }); + }); + describe('Sequence Diagram Rendering with Different Participant Types', () => { + it('should render a sequence diagram with various participant types', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant User@{ "type": "actor" } + participant AuthService@{ "type": "control" } + participant UI@{ "type": "boundary" } + participant OrderController@{ "type": "control" } + participant Product@{ "type": "entity" } + participant MongoDB@{ "type": "database" } + participant Products@{ "type": "collections" } + participant OrderQueue@{ "type": "queue" } + User ->> UI: Login request + UI ->> AuthService: Validate credentials + AuthService -->> UI: Authentication token + UI ->> OrderController: Place order + OrderController ->> Product: Check availability + Product -->> OrderController: Available + OrderController ->> MongoDB: Save order + MongoDB -->> OrderController: Order saved + OrderController ->> OrderQueue: Process payment + OrderQueue -->> User: Order confirmation + ` + ); + }); + + it('should render participant creation and destruction with different types', () => { + imgSnapshotTest(` + sequenceDiagram + participant Alice@{ "type" : "boundary" } + Alice->>Bob: Hello Bob, how are you ? + Bob->>Alice: Fine, thank you. And you? + create participant Carl@{ "type" : "control" } + Alice->>Carl: Hi Carl! + create actor D as Donald + Carl->>D: Hi! + destroy Carl + Alice-xCarl: We are too many + destroy Bob + Bob->>Alice: I agree + `); + }); + + it('should handle complex interactions between different participant types', () => { + imgSnapshotTest( + ` + sequenceDiagram + box rgb(200,220,255) Authentication + participant User@{ "type": "actor" } + participant LoginUI@{ "type": "boundary" } + participant AuthService@{ "type": "control" } + participant UserDB@{ "type": "database" } + end + + box rgb(200,255,220) Order Processing + participant Order@{ "type": "entity" } + participant OrderQueue@{ "type": "queue" } + participant AuditLogs@{ "type": "collections" } + end + + User ->> LoginUI: Enter credentials + LoginUI ->> AuthService: Validate + AuthService ->> UserDB: Query user + UserDB -->> AuthService: User data + + alt Valid credentials + AuthService -->> LoginUI: Success + LoginUI -->> User: Welcome + + par Place order + User ->> Order: New order + Order ->> OrderQueue: Process + and + Order ->> AuditLogs: Record + end + + loop Until confirmed + OrderQueue ->> Order: Update status + Order -->> User: Notification + end + else Invalid credentials + AuthService --x LoginUI: Failure + LoginUI --x User: Retry + end + `, + { sequence: { useMaxWidth: false } } + ); + }); + + it('should render parallel processes with different participant types', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant Customer@{ "type": "actor" } + participant Frontend@{ "type": "participant" } + participant PaymentService@{ "type": "boundary" } + participant InventoryManager@{ "type": "control" } + participant Order@{ "type": "entity" } + participant OrdersDB@{ "type": "database" } + participant NotificationQueue@{ "type": "queue" } + + Customer ->> Frontend: Place order + Frontend ->> Order: Create order + par Parallel Processing + Order ->> PaymentService: Process payment + and + Order ->> InventoryManager: Reserve items + end + PaymentService -->> Order: Payment confirmed + InventoryManager -->> Order: Items reserved + Order ->> OrdersDB: Save finalized order + OrdersDB -->> Order: Order saved + Order ->> NotificationQueue: Send confirmation + NotificationQueue -->> Customer: Order confirmation + ` + ); + }); + }); + it('should render different participant types with notes and loops', () => { + imgSnapshotTest( + ` + sequenceDiagram + actor Admin + participant Dashboard + participant AuthService@{ "type" : "boundary" } + participant UserManager@{ "type" : "control" } + participant UserProfile@{ "type" : "entity" } + participant UserDB@{ "type" : "database" } + participant Logs@{ "type" : "database" } + + Admin ->> Dashboard: Open user management + loop Authentication check + Dashboard ->> AuthService: Verify admin rights + AuthService ->> Dashboard: Access granted + end + Dashboard ->> UserManager: List users + UserManager ->> UserDB: Query users + UserDB ->> UserManager: Return user data + Note right of UserDB: Encrypted data
requires decryption + UserManager ->> UserProfile: Format profiles + UserProfile ->> UserManager: Formatted data + UserManager ->> Dashboard: Display users + Dashboard ->> Logs: Record access + Logs ->> Admin: Audit trail + ` + ); + }); + + it('should render different participant types with alternative flows', () => { + imgSnapshotTest( + ` + sequenceDiagram + actor Client + participant MobileApp + participant CloudService@{ "type" : "boundary" } + participant DataProcessor@{ "type" : "control" } + participant Transaction@{ "type" : "entity" } + participant TransactionsDB@{ "type" : "database" } + participant EventBus@{ "type" : "queue" } + + Client ->> MobileApp: Initiate transaction + MobileApp ->> CloudService: Authenticate + alt Authentication successful + CloudService -->> MobileApp: Auth token + MobileApp ->> DataProcessor: Process data + DataProcessor ->> Transaction: Create transaction + Transaction ->> TransactionsDB: Save record + TransactionsDB -->> Transaction: Confirmation + Transaction ->> EventBus: Publish event + EventBus -->> Client: Notification + else Authentication failed + CloudService -->> MobileApp: Error + MobileApp -->> Client: Show error + end + ` + ); + }); + + it('should render different participant types with wrapping text', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant B@{ "type" : "boundary" } + participant C@{ "type" : "control" } + participant E@{ "type" : "entity" } + participant DB@{ "type" : "database" } + participant COL@{ "type" : "collections" } + participant Q@{ "type" : "queue" } + + FE ->> B: Another long message
with explicit
line breaks + B -->> FE: Response message that is also quite long and needs to wrap + FE ->> C: Process data + C ->> E: Validate + E -->> C: Validation result + C ->> DB: Save + DB -->> C: Save result + C ->> COL: Log + COL -->> Q: Forward + Q -->> LongNameUser: Final response with confirmation of all actions taken + `, + { sequence: { wrap: true } } + ); + }); + + describe('Sequence Diagram - New Participant Types with Long Notes and Messages', () => { + it('should render long notes left of boundary', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant Alice@{ "type" : "boundary" } + actor Bob + Alice->>Bob: Hola + Note left of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be + Bob->>Alice: I'm short though + `, + {} + ); + }); + + it('should render wrapped long notes left of control', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant Alice@{ "type" : "control" } + actor Bob + Alice->>Bob: Hola + Note left of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be + Bob->>Alice: I'm short though + `, + {} + ); + }); + + it('should render long notes right of entity', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant Alice@{ "type" : "entity" } + actor Bob + Alice->>Bob: Hola + Note right of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be + Bob->>Alice: I'm short though + `, + {} + ); + }); + + it('should render wrapped long notes right of database', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant Alice@{ "type" : "database" } + actor Bob + Alice->>Bob: Hola + Note right of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be + Bob->>Alice: I'm short though + `, + {} + ); + }); + + it('should render long notes over collections', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant Alice@{ "type" : "collections" } + actor Bob + Alice->>Bob: Hola + Note over Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be + Bob->>Alice: I'm short though + `, + {} + ); + }); + + it('should render wrapped long notes over queue', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant Alice@{ "type" : "queue" } + actor Bob + Alice->>Bob: Hola + Note over Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be + Bob->>Alice: I'm short though + `, + {} + ); + }); + + it('should render notes over actor and boundary', () => { + imgSnapshotTest( + ` + sequenceDiagram + actor Alice + participant Charlie@{ "type" : "boundary" } + note over Alice: Some note + note over Charlie: Other note + `, + {} + ); + }); + + it('should render long messages from database to collections', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant Alice@{ "type" : "database" } + participant Bob@{ "type" : "collections" } + Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be + Bob->>Alice: I'm short though + `, + {} + ); + }); + + it('should render wrapped long messages from control to entity', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant Alice@{ "type" : "control" } + participant Bob@{ "type" : "entity" } + Alice->>Bob:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be + Bob->>Alice: I'm short though + `, + {} + ); + }); + + it('should render long messages from queue to boundary', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant Alice@{ "type" : "queue" } + participant Bob@{ "type" : "boundary" } + Alice->>Bob: I'm short + Bob->>Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be + `, + {} + ); + }); + + it('should render wrapped long messages from actor to database', () => { + imgSnapshotTest( + ` + sequenceDiagram + actor Alice + participant Bob@{ "type" : "database" } + Alice->>Bob: I'm short + Bob->>Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be + `, + {} + ); + }); + }); + + describe('svg size', () => { + it('should render a sequence diagram when useMaxWidth is true (default)', () => { + renderGraph( + ` + sequenceDiagram + actor Alice + participant Bob@{ "type" : "boundary" } + participant John@{ "type" : "control" } + Alice ->> Bob: Hello Bob, how are you? + Bob-->>John: How about you John? + Bob--x Alice: I am good thanks! + Bob-x John: I am good thanks! + Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. + Bob-->Alice: Checking with John... + alt either this + Alice->>John: Yes + else or this + Alice->>John: No + else or this will happen + Alice->John: Maybe + end + par this happens in parallel + Alice -->> Bob: Parallel message 1 + and + Alice -->> John: Parallel message 2 + end + `, + { sequence: { useMaxWidth: true } } + ); + cy.get('svg').should((svg) => { + expect(svg).to.have.attr('width', '100%'); + const style = svg.attr('style'); + expect(style).to.match(/^max-width: [\d.]+px;$/); + const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); + expect(maxWidthValue).to.be.within(820 * 0.95, 820 * 1.05); + }); + }); + + it('should render a sequence diagram when useMaxWidth is false', () => { + renderGraph( + ` + sequenceDiagram + actor Alice + participant Bob@{ "type" : "boundary" } + participant John@{ "type" : "control" } + Alice ->> Bob: Hello Bob, how are you? + Bob-->>John: How about you John? + Bob--x Alice: I am good thanks! + Bob-x John: I am good thanks! + Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. + Bob-->Alice: Checking with John... + alt either this + Alice->>John: Yes + else or this + Alice->>John: No + else or this will happen + Alice->John: Maybe + end + par this happens in parallel + Alice -->> Bob: Parallel message 1 + and + Alice -->> John: Parallel message 2 + end + `, + { sequence: { useMaxWidth: false } } + ); + cy.get('svg').should((svg) => { + const width = parseFloat(svg.attr('width')); + expect(width).to.be.within(820 * 0.95, 820 * 1.05); + expect(svg).to.not.have.attr('style'); + }); + }); + }); +}); diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index f18e99abf..6709b557c 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -893,6 +893,17 @@ describe('Sequence diagram', () => { } ); }); + + it('should handle bidirectional arrows with autonumber', () => { + imgSnapshotTest(` + sequenceDiagram + autonumber + participant A + participant B + A<<->>B: This is a bidirectional message + A->B: This is a normal message`); + }); + it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => { //Be aware that the syntax for "properties" is likely to be changed. imgSnapshotTest( diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js index 83190dbc7..e5a0cedd0 100644 --- a/cypress/integration/rendering/stateDiagram-v2.spec.js +++ b/cypress/integration/rendering/stateDiagram-v2.spec.js @@ -602,6 +602,231 @@ State1 --> [*] -- 55 } +`, + {} + ); + }); + it('should render edge labels correctly', () => { + imgSnapshotTest( + `--- +title: On The Way To Something Something DarkSide +config: + look: default + theme: default +--- + +stateDiagram-v2 + + state State1_____________ + { + c0 + } + + state State2_____________ + { + c1 + } + + state State3_____________ + { + c7 + } + + state State4_____________ + { + c2 + } + + state State5_____________ + { + c3 + } + + state State6_____________ + { + c4 + } + + state State7_____________ + { + c5 + } + + state State8_____________ + { + c6 + } + + +[*] --> State1_____________ +State1_____________ --> State2_____________ : Transition1_____ +State2_____________ --> State4_____________ : Transition2_____ +State2_____________ --> State3_____________ : Transition3_____ +State3_____________ --> State2_____________ +State4_____________ --> State2_____________ : Transition5_____ +State4_____________ --> State5_____________ : Transition6_____ +State5_____________ --> State6_____________ : Transition7_____ +State6_____________ --> State4_____________ : Transition8_____ +State2_____________ --> State7_____________ : Transition4_____ +State4_____________ --> State7_____________ : Transition4_____ +State5_____________ --> State7_____________ : Transition4_____ +State6_____________ --> State7_____________ : Transition4_____ +State7_____________ --> State1_____________ : Transition9_____ +State5_____________ --> State8_____________ : Transition10____ +State8_____________ --> State5_____________ : Transition11____ +`, + {} + ); + }); + it('should render edge labels correctly with multiple transitions', () => { + imgSnapshotTest( + `--- +title: Multiple Transitions +config: + look: default + theme: default +--- + +stateDiagram-v2 + + state State1_____________ + { + c0 + } + + state State2_____________ + { + c1 + } + + state State3_____________ + { + c7 + } + + state State4_____________ + { + c2 + } + + state State5_____________ + { + c3 + } + + state State6_____________ + { + c4 + } + + state State7_____________ + { + c5 + } + + state State8_____________ + { + c6 + } + + state State9_____________ + { + c9 + } + +[*] --> State1_____________ +State1_____________ --> State2_____________ : Transition1_____ +State2_____________ --> State4_____________ : Transition2_____ +State2_____________ --> State3_____________ : Transition3_____ +State3_____________ --> State2_____________ +State4_____________ --> State2_____________ : Transition5_____ +State4_____________ --> State5_____________ : Transition6_____ +State5_____________ --> State6_____________ : Transition7_____ +State6_____________ --> State4_____________ : Transition8_____ +State2_____________ --> State7_____________ : Transition4_____ +State4_____________ --> State7_____________ : Transition4_____ +State5_____________ --> State7_____________ : Transition4_____ +State6_____________ --> State7_____________ : Transition4_____ +State7_____________ --> State1_____________ : Transition9_____ +State5_____________ --> State8_____________ : Transition10____ +State8_____________ --> State5_____________ : Transition11____ +State9_____________ --> State8_____________ : Transition12____ +`, + {} + ); + }); + + it('should render edge labels correctly with multiple states', () => { + imgSnapshotTest( + `--- +title: Multiple States +config: + look: default + theme: default +--- + +stateDiagram-v2 + + state State1_____________ + { + c0 + } + + state State2_____________ + { + c1 + } + + state State3_____________ + { + c7 + } + + state State4_____________ + { + c2 + } + + state State5_____________ + { + c3 + } + + state State6_____________ + { + c4 + } + + state State7_____________ + { + c5 + } + + state State8_____________ + { + c6 + } + + state State9_____________ + { + c9 + } + + state State10_____________ + { + c10 + } + +[*] --> State1_____________ +State1_____________ --> State2_____________ : Transition1_____ +State2_____________ --> State3_____________ : Transition2_____ +State3_____________ --> State4_____________ : Transition3_____ +State4_____________ --> State5_____________ : Transition4_____ +State5_____________ --> State6_____________ : Transition5_____ +State6_____________ --> State7_____________ : Transition6_____ +State7_____________ --> State8_____________ : Transition7_____ +State8_____________ --> State9_____________ : Transition8_____ +State9_____________ --> State10_____________ : Transition9_____ `, {} ); diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index a582355e8..d54086fa7 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/cypress/integration/rendering/xyChart.spec.js @@ -1,7 +1,7 @@ import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('XY Chart', () => { - it('should render the simplest possible chart', () => { + it('should render the simplest possible xy-beta chart', () => { imgSnapshotTest( ` xychart-beta @@ -10,10 +10,19 @@ describe('XY Chart', () => { {} ); }); + it('should render the simplest possible xy chart', () => { + imgSnapshotTest( + ` + xychart + line [10, 30, 20] + `, + {} + ); + }); it('Should render a complete chart', () => { imgSnapshotTest( ` - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 @@ -26,7 +35,7 @@ describe('XY Chart', () => { it('Should render a chart without title', () => { imgSnapshotTest( ` - xychart-beta + xychart x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] @@ -38,7 +47,7 @@ describe('XY Chart', () => { it('y-axis title not required', () => { imgSnapshotTest( ` - xychart-beta + xychart x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis 4000 --> 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] @@ -50,7 +59,7 @@ describe('XY Chart', () => { it('Should render a chart without y-axis with different range', () => { imgSnapshotTest( ` - xychart-beta + xychart x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] @@ -61,7 +70,7 @@ describe('XY Chart', () => { it('x axis title not required', () => { imgSnapshotTest( ` - xychart-beta + xychart x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] @@ -72,7 +81,7 @@ describe('XY Chart', () => { it('Multiple plots can be rendered', () => { imgSnapshotTest( ` - xychart-beta + xychart line [23, 46, 77, 34] line [45, 32, 33, 12] bar [87, 54, 99, 85] @@ -86,7 +95,7 @@ describe('XY Chart', () => { it('Decimals and negative numbers are supported', () => { imgSnapshotTest( ` - xychart-beta + xychart y-axis -2.4 --> 3.5 line [+1.3, .6, 2.4, -.34] `, @@ -104,7 +113,7 @@ describe('XY Chart', () => { height: 20 plotReservedSpacePercent: 100 --- - xychart-beta + xychart line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] `, {} @@ -130,7 +139,7 @@ describe('XY Chart', () => { showTick: false showAxisLine: false --- - xychart-beta + xychart bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] `, {} @@ -140,7 +149,7 @@ describe('XY Chart', () => { imgSnapshotTest( ` %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 @@ -181,7 +190,7 @@ describe('XY Chart', () => { plotReservedSpacePercent: 60 showDataLabel: true --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 @@ -202,7 +211,7 @@ describe('XY Chart', () => { yAxis: showTitle: false --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 @@ -223,7 +232,7 @@ describe('XY Chart', () => { yAxis: showLabel: false --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 @@ -244,7 +253,7 @@ describe('XY Chart', () => { yAxis: showTick: false --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 @@ -265,7 +274,7 @@ describe('XY Chart', () => { yAxis: showAxisLine: false --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 @@ -294,7 +303,7 @@ describe('XY Chart', () => { xAxisLineColor: "#87ceeb" plotColorPalette: "#008000, #faba63" --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 @@ -307,7 +316,7 @@ describe('XY Chart', () => { it('should use the correct distances between data points', () => { imgSnapshotTest( ` - xychart-beta + xychart x-axis 0 --> 2 line [0, 1, 0, 1] bar [1, 0, 1, 0] @@ -325,7 +334,7 @@ describe('XY Chart', () => { xyChart: showDataLabel: true --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 @@ -344,7 +353,7 @@ describe('XY Chart', () => { showDataLabel: true chartOrientation: horizontal --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 @@ -357,7 +366,7 @@ describe('XY Chart', () => { it('should render vertical bar chart without labels by default', () => { imgSnapshotTest( ` - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 @@ -375,7 +384,7 @@ describe('XY Chart', () => { xyChart: chartOrientation: horizontal --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 @@ -393,7 +402,7 @@ describe('XY Chart', () => { xyChart: showDataLabel: true --- - xychart-beta + xychart title "Multiple Bar Plots" x-axis Categories [A, B, C] y-axis "Values" 0 --> 100 @@ -412,7 +421,7 @@ describe('XY Chart', () => { showDataLabel: true chartOrientation: horizontal --- - xychart-beta + xychart title "Multiple Bar Plots" x-axis Categories [A, B, C] y-axis "Values" 0 --> 100 @@ -430,7 +439,7 @@ describe('XY Chart', () => { xyChart: showDataLabel: true --- - xychart-beta + xychart title "Single Bar Chart" x-axis Categories [A] y-axis "Value" 0 --> 100 @@ -449,7 +458,7 @@ describe('XY Chart', () => { showDataLabel: true chartOrientation: horizontal --- - xychart-beta + xychart title "Single Bar Chart" x-axis Categories [A] y-axis "Value" 0 --> 100 @@ -467,7 +476,7 @@ describe('XY Chart', () => { xyChart: showDataLabel: true --- - xychart-beta + xychart title "Decimal and Negative Values" x-axis Categories [A, B, C] y-axis -10 --> 10 @@ -486,7 +495,7 @@ describe('XY Chart', () => { showDataLabel: true chartOrientation: horizontal --- - xychart-beta + xychart title "Decimal and Negative Values" x-axis Categories [A, B, C] y-axis -10 --> 10 @@ -504,7 +513,7 @@ describe('XY Chart', () => { xyChart: showDataLabel: true --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan,b,c] y-axis "Revenue (in $)" 4000 --> 12000 @@ -561,7 +570,7 @@ describe('XY Chart', () => { showDataLabel: true chartOrientation: horizontal --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan,b,c] y-axis "Revenue (in $)" 4000 --> 12000 @@ -615,7 +624,7 @@ describe('XY Chart', () => { xyChart: showDataLabel: true --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s] y-axis "Revenue (in $)" 4000 --> 12000 @@ -672,7 +681,7 @@ describe('XY Chart', () => { showDataLabel: true chartOrientation: horizontal --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s] y-axis "Revenue (in $)" 4000 --> 12000 @@ -726,7 +735,7 @@ describe('XY Chart', () => { xyChart: showDataLabel: true --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan] y-axis "Revenue (in $)" 3000 --> 12000 @@ -783,7 +792,7 @@ describe('XY Chart', () => { showDataLabel: true chartOrientation: horizontal --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan] y-axis "Revenue (in $)" 3000 --> 12000 diff --git a/cypress/platform/darshan.html b/cypress/platform/darshan.html new file mode 100644 index 000000000..df5994d7d --- /dev/null +++ b/cypress/platform/darshan.html @@ -0,0 +1,35 @@ + + + + + +
Pie chart demos
++ pie title Default text position: Animal adoption + accTitle: simple pie char demo + accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs. + "dogs" : -60.67 + "rats" : 40.12 ++ +
+ + + diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index ab7ded0c2..fc33a58b4 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -130,6 +130,92 @@ +
+ --- + config: + layout: tidy-tree + --- + mindmap + root((mindmap)) + Origins + Long history + ::icon(fa fa-book) + Popularisation + British popular psychology author Tony Buzan + Research + On effectiveness+
and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + Pen and paper + Mermaid + +
+ --- + config: + layout: tidy-tree + --- + mindmap + root((mindmap is a long thing)) + A + B + C + D ++
+ --- + config: + layout: tidy-tree + --- + mindmap + root((mindmap)) + A + B ++
+ --- + config: + layout: tidy-tree + --- + mindmap + root((mindmap)) + A + a + apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + b + c + d + B + apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + D + apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + ++ +
+--- +config: + layout: elk + elk: + mergeEdges: false + forceNodeModelOrder: false + considerModelOrder: NONE + +--- + flowchart TB + a --> a1 & a2 & a3 & a4 + b --> b1 & b2 + b2 --> b3 + b1 --> b4
treemap
"Section 1"
@@ -175,8 +261,145 @@ treemap
"Item B2": 25
+ --- + config: + layout: tidy-tree + --- + mindmap + root((mindmap)) + a + apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + b + apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + + ++
+ --- + config: + layout: tidy-tree + --- + flowchart TB + A --> n0["1"] + A --> n1["2"] + A --> n2["3"] + A --> n3["4"] --> Q & R & S & T ++
+ --- + config: + layout: elk + --- + flowchart TB + A --> n0["1"] + A --> n1["2"] + A --> n2["3"] + A --> n3["4"] --> Q & R & S & T ++
+ --- + config: + layout: dagre + --- + mindmap + root((mindmap is a long thing)) + Origins + Long history + ::icon(fa fa-book) + Popularisation + British popular psychology author Tony Buzan + Research + On effectiveness<br/>and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + Pen and paper + Mermaid ++
+ --- + config: + layout: cose-bilkent + --- + mindmap + root((mindmap)) + Origins + Long history + ::icon(fa fa-book) + Popularisation + British popular psychology author Tony Buzan + Research + On effectiveness<br/>and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + Pen and paper + Mermaid ++
+ --- + config: + layout: elk + --- + mindmap + root((mindmap)) + Origins + Long history + ::icon(fa fa-book) + Popularisation + British popular psychology author Tony Buzan + Research + On effectiveness<br/>and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + Pen and paper + Mermaid ++
+ ---
+ config:
+ layout: cose-bilkent
+ ---
flowchart LR
- AB["apa@apa@"] --> B(("`apa@apa`"))
+ root{mindmap} --- Origins --- Europe
+ Origins --> Asia
+ root --- Background --- Rich
+ Background --- Poor
+ subgraph apa
+ Background
+ Poor
+ end
+
+
+
+
+
+
+ ---
+ config:
+ layout: elk
+ ---
+ flowchart LR
+ root{mindmap} --- Origins --- Europe
+ Origins --> Asia
+ root --- Background --- Rich
+ Background --- Poor
+
+
+
+
flowchart
@@ -258,6 +481,44 @@ config:
---
+config:
+ layout: elk
+---
+ flowchart LR
+ a
+ subgraph s0["APA"]
+ subgraph s8["APA"]
+ subgraph s1["APA"]
+ D{"X"}
+ E[Q]
+ end
+ subgraph s3["BAPA"]
+ F[Q]
+ I
+ end
+ D --> I
+ D --> I
+ D --> I
+
+ I{"X"}
+ end
+ end
+
+
+---
+config:
+ layout: elk
+---
+ flowchart LR
+ a
+ D{"Use the editor"}
+
+ D -- Mermaid js --> I{"fa:fa-code Text"}
+ D-->I
+ D-->I
+
+ +--- config: layout: elk --- diff --git a/cypress/platform/mindmap-layouts.html b/cypress/platform/mindmap-layouts.html new file mode 100644 index 000000000..0aef65d42 --- /dev/null +++ b/cypress/platform/mindmap-layouts.html @@ -0,0 +1,376 @@ + + + + + +Mermaid Quick Test Page + + + + + ++ --- + config: + layout: tidy-tree + --- + mindmap + root((mindmap)) + A + B +++ --- + config: + layout: dagre + --- + mindmap + root((mindmap)) + A + B +++ --- + config: + layout: elk + --- + mindmap + root((mindmap)) + A + B +++ --- + config: + layout: cose-bilkent + --- + mindmap + root((mindmap)) + A + B +++ --- + config: + layout: tidy-tree + --- + mindmap + root((mindmap is a long thing)) + A + B + C + D +++ --- + config: + layout: dagre + --- + mindmap + root((mindmap is a long thing)) + A + B + C + D +++ --- + config: + layout: elk + --- + mindmap + root((mindmap is a long thing)) + A + B + C + D +++ --- + config: + layout: cose-bilkent + --- + mindmap + root((mindmap is a long thing)) + A + B + C + D ++ ++ --- + config: + layout: tidy-tree + --- + mindmap + root((mindmap)) + Origins + Long history + ::icon(fa fa-book) + Popularisation + British popular psychology author Tony Buzan + Research + On effectiveness<br/>and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + id)I am a cloud( + id))I am a bang(( + Tools +++ --- + config: + layout: dagre + --- + mindmap + root((mindmap)) + Origins + Long history + ::icon(fa fa-book) + Popularisation + British popular psychology author Tony Buzan + Research + On effectiveness<br/>and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + id)I am a cloud( + id))I am a bang(( + Tools +++ --- + config: + layout: elk + --- + mindmap + root((mindmap)) + Origins + Long history + ::icon(fa fa-book) + Popularisation + British popular psychology author Tony Buzan + Research + On effectiveness<br/>and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + id)I am a cloud( + id))I am a bang(( + Tools +++ --- + config: + layout: cose-bilkent + --- + mindmap + root((mindmap)) + Origins + Long history + ::icon(fa fa-book) + Popularisation + British popular psychology author Tony Buzan + Research + On effectiveness<br/>and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + id)I am a cloud( + id))I am a bang(( + Tools +++ --- + config: + layout: tidy-tree + --- + mindmap + root((mindmap)) + A + a + apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + b + c + d + B + apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + D + apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + +++ --- + config: + layout: dagre + --- + mindmap + root((mindmap)) + A + a + apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + b + c + d + B + apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + D + apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + +++ --- + config: + layout: elk + --- + mindmap + root((mindmap)) + A + a + apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + b + c + d + B + apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + D + apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + +++ --- + config: + layout: cose-bilkent + --- + mindmap + root((mindmap)) + A + a + apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + b + c + d + B + apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + D + apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on] + ++ ++ --- + config: + layout: tidy-tree + --- + mindmap + ((This is a mindmap)) + child1 + grandchild 1 + grandchild 2 + child2 + grandchild 3 + grandchild 4 + child3 + grandchild 5 + grandchild 6 + ++ ++ --- + config: + layout: dagre + --- + mindmap + ((This is a mindmap)) + child1 + grandchild 1 + grandchild 2 + child2 + grandchild 3 + grandchild 4 + child3 + grandchild 5 + grandchild 6 + ++ ++ --- + config: + layout: elk + --- + mindmap + ((This is a mindmap)) + child1 + grandchild 1 + grandchild 2 + child2 + grandchild 3 + grandchild 4 + child3 + grandchild 5 + grandchild 6 + ++ ++ --- + config: + layout: cose-bilkent + --- + mindmap + ((This is a mindmap)) + child1 + grandchild 1 + grandchild 2 + child2 + grandchild 3 + grandchild 4 + child3 + grandchild 5 + grandchild 6 + ++ +
+ + + diff --git a/cypress/platform/sidv.html b/cypress/platform/sidv.html index b0a1699da..1651b0737 100644 --- a/cypress/platform/sidv.html +++ b/cypress/platform/sidv.html @@ -41,10 +41,6 @@ graph TB const { svg } = await mermaid.render('d22', value); console.log(svg); el.innerHTML = svg; - // mermaid.test1('first_slow', 1200).then((r) => console.info(r)); - // mermaid.test1('second_fast', 200).then((r) => console.info(r)); - // mermaid.test1('third_fast', 200).then((r) => console.info(r)); - // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));