collab/mermaid/cypress/integration/rendering/sequencediagram-v2.spec.jsblame
View source
6dd74de1import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
6dd74de2
6dd74de3const looks = ['classic'];
6dd74de4const participantTypes = [
6dd74de5 { type: 'participant', display: 'participant' },
6dd74de6 { type: 'actor', display: 'actor' },
6dd74de7 { type: 'boundary', display: 'boundary' },
6dd74de8 { type: 'control', display: 'control' },
6dd74de9 { type: 'entity', display: 'entity' },
6dd74de10 { type: 'database', display: 'database' },
6dd74de11 { type: 'collections', display: 'collections' },
6dd74de12 { type: 'queue', display: 'queue' },
6dd74de13];
6dd74de14
6dd74de15const restrictedTypes = ['boundary', 'control', 'entity', 'database', 'collections', 'queue'];
6dd74de16
6dd74de17const interactionTypes = ['->>', '-->>', '->', '-->', '-x', '--x', '->>+', '-->>+'];
6dd74de18
6dd74de19const notePositions = ['left of', 'right of', 'over'];
6dd74de20
6dd74de21function getParticipantLine(name, type, alias) {
6dd74de22 if (restrictedTypes.includes(type)) {
6dd74de23 return ` participant ${name}@{ "type" : "${type}" }\n`;
6dd74de24 } else if (alias) {
6dd74de25 return ` participant ${name}@{ "type" : "${type}" } \n`;
6dd74de26 } else {
6dd74de27 return ` participant ${name}@{ "type" : "${type}" }\n`;
6dd74de28 }
6dd74de29}
6dd74de30
6dd74de31looks.forEach((look) => {
6dd74de32 describe(`Sequence Diagram Tests - ${look} look`, () => {
6dd74de33 it('should render all participant types', () => {
6dd74de34 let diagramCode = `sequenceDiagram\n`;
6dd74de35 participantTypes.forEach((pt, index) => {
6dd74de36 const name = `${pt.display}${index}`;
6dd74de37 diagramCode += getParticipantLine(name, pt.type);
6dd74de38 });
6dd74de39 for (let i = 0; i < participantTypes.length - 1; i++) {
6dd74de40 diagramCode += ` ${participantTypes[i].display}${i} ->> ${participantTypes[i + 1].display}${i + 1}: Message ${i}\n`;
6dd74de41 }
6dd74de42 imgSnapshotTest(diagramCode, { look, sequence: { diagramMarginX: 50, diagramMarginY: 10 } });
6dd74de43 });
6dd74de44
6dd74de45 it('should render all interaction types', () => {
6dd74de46 let diagramCode = `sequenceDiagram\n`;
6dd74de47 diagramCode += getParticipantLine('A', 'actor');
6dd74de48 diagramCode += getParticipantLine('B', 'boundary');
6dd74de49 interactionTypes.forEach((interaction, index) => {
6dd74de50 diagramCode += ` A ${interaction} B: ${interaction} message ${index}\n`;
6dd74de51 });
6dd74de52 imgSnapshotTest(diagramCode, { look });
6dd74de53 });
6dd74de54
6dd74de55 it('should render participant creation and destruction', () => {
6dd74de56 let diagramCode = `sequenceDiagram\n`;
6dd74de57 participantTypes.forEach((pt, index) => {
6dd74de58 const name = `${pt.display}${index}`;
6dd74de59 diagramCode += getParticipantLine('A', pt.type);
6dd74de60 diagramCode += getParticipantLine('B', pt.type);
6dd74de61 diagramCode += ` create participant ${name}@{ "type" : "${pt.type}" }\n`;
6dd74de62 diagramCode += ` A ->> ${name}: Hello ${pt.display}\n`;
6dd74de63 if (index % 2 === 0) {
6dd74de64 diagramCode += ` destroy ${name}\n`;
6dd74de65 }
6dd74de66 });
6dd74de67 imgSnapshotTest(diagramCode, { look });
6dd74de68 });
6dd74de69
6dd74de70 it('should render notes in all positions', () => {
6dd74de71 let diagramCode = `sequenceDiagram\n`;
6dd74de72 diagramCode += getParticipantLine('A', 'actor');
6dd74de73 diagramCode += getParticipantLine('B', 'boundary');
6dd74de74 notePositions.forEach((position, index) => {
6dd74de75 diagramCode += ` Note ${position} A: Note ${position} ${index}\n`;
6dd74de76 });
6dd74de77 diagramCode += ` A ->> B: Message with notes\n`;
6dd74de78 imgSnapshotTest(diagramCode, { look });
6dd74de79 });
6dd74de80
6dd74de81 it('should render parallel interactions', () => {
6dd74de82 let diagramCode = `sequenceDiagram\n`;
6dd74de83 participantTypes.slice(0, 4).forEach((pt, index) => {
6dd74de84 diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
6dd74de85 });
6dd74de86 diagramCode += ` par Parallel actions\n`;
6dd74de87 for (let i = 0; i < 3; i += 2) {
6dd74de88 diagramCode += ` ${participantTypes[i].display}${i} ->> ${participantTypes[i + 1].display}${i + 1}: Message ${i}\n`;
6dd74de89 if (i < participantTypes.length - 2) {
6dd74de90 diagramCode += ` and\n`;
6dd74de91 }
6dd74de92 }
6dd74de93 diagramCode += ` end\n`;
6dd74de94 imgSnapshotTest(diagramCode, { look });
6dd74de95 });
6dd74de96
6dd74de97 it('should render alternative flows', () => {
6dd74de98 let diagramCode = `sequenceDiagram\n`;
6dd74de99 diagramCode += getParticipantLine('A', 'actor');
6dd74de100 diagramCode += getParticipantLine('B', 'boundary');
6dd74de101 diagramCode += ` alt Successful case\n`;
6dd74de102 diagramCode += ` A ->> B: Request\n`;
6dd74de103 diagramCode += ` B -->> A: Success\n`;
6dd74de104 diagramCode += ` else Failure case\n`;
6dd74de105 diagramCode += ` A ->> B: Request\n`;
6dd74de106 diagramCode += ` B --x A: Failure\n`;
6dd74de107 diagramCode += ` end\n`;
6dd74de108 imgSnapshotTest(diagramCode, { look });
6dd74de109 });
6dd74de110
6dd74de111 it('should render loops', () => {
6dd74de112 let diagramCode = `sequenceDiagram\n`;
6dd74de113 participantTypes.slice(0, 3).forEach((pt, index) => {
6dd74de114 diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
6dd74de115 });
6dd74de116 diagramCode += ` loop For each participant\n`;
6dd74de117 for (let i = 0; i < 3; i++) {
6dd74de118 diagramCode += ` ${participantTypes[0].display}0 ->> ${participantTypes[1].display}1: Message ${i}\n`;
6dd74de119 }
6dd74de120 diagramCode += ` end\n`;
6dd74de121 imgSnapshotTest(diagramCode, { look });
6dd74de122 });
6dd74de123
6dd74de124 it('should render boxes around groups', () => {
6dd74de125 let diagramCode = `sequenceDiagram\n`;
6dd74de126 diagramCode += ` box Group 1\n`;
6dd74de127 participantTypes.slice(0, 3).forEach((pt, index) => {
6dd74de128 diagramCode += ` ${getParticipantLine(`${pt.display}${index}`, pt.type)}`;
6dd74de129 });
6dd74de130 diagramCode += ` end\n`;
6dd74de131 diagramCode += ` box rgb(200,220,255) Group 2\n`;
6dd74de132 participantTypes.slice(3, 6).forEach((pt, index) => {
6dd74de133 diagramCode += ` ${getParticipantLine(`${pt.display}${index}`, pt.type)}`;
6dd74de134 });
6dd74de135 diagramCode += ` end\n`;
6dd74de136 diagramCode += ` ${participantTypes[0].display}0 ->> ${participantTypes[3].display}0: Cross-group message\n`;
6dd74de137 imgSnapshotTest(diagramCode, { look });
6dd74de138 });
6dd74de139
6dd74de140 it('should render with different font settings', () => {
6dd74de141 let diagramCode = `sequenceDiagram\n`;
6dd74de142 participantTypes.slice(0, 3).forEach((pt, index) => {
6dd74de143 diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
6dd74de144 });
6dd74de145 diagramCode += ` ${participantTypes[0].display}0 ->> ${participantTypes[1].display}1: Regular message\n`;
6dd74de146 diagramCode += ` Note right of ${participantTypes[1].display}1: Regular note\n`;
6dd74de147 imgSnapshotTest(diagramCode, {
6dd74de148 look,
6dd74de149 sequence: {
6dd74de150 actorFontFamily: 'courier',
6dd74de151 actorFontSize: 14,
6dd74de152 messageFontFamily: 'Arial',
6dd74de153 messageFontSize: 12,
6dd74de154 noteFontFamily: 'times',
6dd74de155 noteFontSize: 16,
6dd74de156 noteAlign: 'left',
6dd74de157 },
6dd74de158 });
6dd74de159 });
6dd74de160 });
6dd74de161});
6dd74de162
6dd74de163// Additional tests for specific combinations
6dd74de164describe('Sequence Diagram Special Cases', () => {
6dd74de165 it('should render complex sequence with all features', () => {
6dd74de166 const diagramCode = `
6dd74de167 sequenceDiagram
6dd74de168 box rgb(200,220,255) Authentication
6dd74de169 actor User
6dd74de170 participant LoginUI@{ "type": "boundary" }
6dd74de171 participant AuthService@{ "type": "control" }
6dd74de172 participant UserDB@{ "type": "database" }
6dd74de173 end
6dd74de174
6dd74de175 box rgb(200,255,220) Order Processing
6dd74de176 participant Order@{ "type": "entity" }
6dd74de177 participant OrderQueue@{ "type": "queue" }
6dd74de178 participant AuditLogs@{ "type": "collections" }
6dd74de179 end
6dd74de180
6dd74de181 User ->> LoginUI: Enter credentials
6dd74de182 LoginUI ->> AuthService: Validate
6dd74de183 AuthService ->> UserDB: Query user
6dd74de184 UserDB -->> AuthService: User data
6dd74de185 alt Valid credentials
6dd74de186 AuthService -->> LoginUI: Success
6dd74de187 LoginUI -->> User: Welcome
6dd74de188
6dd74de189 par Place order
6dd74de190 User ->> Order: New order
6dd74de191 Order ->> OrderQueue: Process
6dd74de192 and
6dd74de193 Order ->> AuditLogs: Record
6dd74de194 end
6dd74de195
6dd74de196 loop Until confirmed
6dd74de197 OrderQueue ->> Order: Update status
6dd74de198 Order -->> User: Notification
6dd74de199 end
6dd74de200 else Invalid credentials
6dd74de201 AuthService --x LoginUI: Failure
6dd74de202 LoginUI --x User: Retry
6dd74de203 end
6dd74de204 `;
6dd74de205 imgSnapshotTest(diagramCode, {});
6dd74de206 });
6dd74de207
6dd74de208 it('should render with wrapped messages and notes', () => {
6dd74de209 const diagramCode = `
6dd74de210 sequenceDiagram
6dd74de211 participant A
6dd74de212 participant B
6dd74de213
6dd74de214 A ->> B: This is a very long message that should wrap properly in the diagram rendering
6dd74de215 Note over A,B: This is a very long note that should also wrap properly when rendered in the diagram
6dd74de216
6dd74de217 par Wrapped parallel
6dd74de218 A ->> B: Parallel message 1<br>with explicit line break
6dd74de219 and
6dd74de220 B ->> A: Parallel message 2<br>with explicit line break
6dd74de221 end
6dd74de222
6dd74de223 loop Wrapped loop
6dd74de224 Note right of B: This is a long note<br>in a loop
6dd74de225 A ->> B: Message in loop
6dd74de226 end
6dd74de227 `;
6dd74de228 imgSnapshotTest(diagramCode, { sequence: { wrap: true } });
6dd74de229 });
6dd74de230 describe('Sequence Diagram Rendering with Different Participant Types', () => {
6dd74de231 it('should render a sequence diagram with various participant types', () => {
6dd74de232 imgSnapshotTest(
6dd74de233 `
6dd74de234 sequenceDiagram
6dd74de235 participant User@{ "type": "actor" }
6dd74de236 participant AuthService@{ "type": "control" }
6dd74de237 participant UI@{ "type": "boundary" }
6dd74de238 participant OrderController@{ "type": "control" }
6dd74de239 participant Product@{ "type": "entity" }
6dd74de240 participant MongoDB@{ "type": "database" }
6dd74de241 participant Products@{ "type": "collections" }
6dd74de242 participant OrderQueue@{ "type": "queue" }
6dd74de243 User ->> UI: Login request
6dd74de244 UI ->> AuthService: Validate credentials
6dd74de245 AuthService -->> UI: Authentication token
6dd74de246 UI ->> OrderController: Place order
6dd74de247 OrderController ->> Product: Check availability
6dd74de248 Product -->> OrderController: Available
6dd74de249 OrderController ->> MongoDB: Save order
6dd74de250 MongoDB -->> OrderController: Order saved
6dd74de251 OrderController ->> OrderQueue: Process payment
6dd74de252 OrderQueue -->> User: Order confirmation
6dd74de253 `
6dd74de254 );
6dd74de255 });
6dd74de256
6dd74de257 it('should render participant creation and destruction with different types', () => {
6dd74de258 imgSnapshotTest(`
6dd74de259 sequenceDiagram
6dd74de260 participant Alice@{ "type" : "boundary" }
6dd74de261 Alice->>Bob: Hello Bob, how are you ?
6dd74de262 Bob->>Alice: Fine, thank you. And you?
6dd74de263 create participant Carl@{ "type" : "control" }
6dd74de264 Alice->>Carl: Hi Carl!
6dd74de265 create actor D as Donald
6dd74de266 Carl->>D: Hi!
6dd74de267 destroy Carl
6dd74de268 Alice-xCarl: We are too many
6dd74de269 destroy Bob
6dd74de270 Bob->>Alice: I agree
6dd74de271 `);
6dd74de272 });
6dd74de273
6dd74de274 it('should handle complex interactions between different participant types', () => {
6dd74de275 imgSnapshotTest(
6dd74de276 `
6dd74de277 sequenceDiagram
6dd74de278 box rgb(200,220,255) Authentication
6dd74de279 participant User@{ "type": "actor" }
6dd74de280 participant LoginUI@{ "type": "boundary" }
6dd74de281 participant AuthService@{ "type": "control" }
6dd74de282 participant UserDB@{ "type": "database" }
6dd74de283 end
6dd74de284
6dd74de285 box rgb(200,255,220) Order Processing
6dd74de286 participant Order@{ "type": "entity" }
6dd74de287 participant OrderQueue@{ "type": "queue" }
6dd74de288 participant AuditLogs@{ "type": "collections" }
6dd74de289 end
6dd74de290
6dd74de291 User ->> LoginUI: Enter credentials
6dd74de292 LoginUI ->> AuthService: Validate
6dd74de293 AuthService ->> UserDB: Query user
6dd74de294 UserDB -->> AuthService: User data
6dd74de295
6dd74de296 alt Valid credentials
6dd74de297 AuthService -->> LoginUI: Success
6dd74de298 LoginUI -->> User: Welcome
6dd74de299
6dd74de300 par Place order
6dd74de301 User ->> Order: New order
6dd74de302 Order ->> OrderQueue: Process
6dd74de303 and
6dd74de304 Order ->> AuditLogs: Record
6dd74de305 end
6dd74de306
6dd74de307 loop Until confirmed
6dd74de308 OrderQueue ->> Order: Update status
6dd74de309 Order -->> User: Notification
6dd74de310 end
6dd74de311 else Invalid credentials
6dd74de312 AuthService --x LoginUI: Failure
6dd74de313 LoginUI --x User: Retry
6dd74de314 end
6dd74de315 `,
6dd74de316 { sequence: { useMaxWidth: false } }
6dd74de317 );
6dd74de318 });
6dd74de319
6dd74de320 it('should render parallel processes with different participant types', () => {
6dd74de321 imgSnapshotTest(
6dd74de322 `
6dd74de323 sequenceDiagram
6dd74de324 participant Customer@{ "type": "actor" }
6dd74de325 participant Frontend@{ "type": "participant" }
6dd74de326 participant PaymentService@{ "type": "boundary" }
6dd74de327 participant InventoryManager@{ "type": "control" }
6dd74de328 participant Order@{ "type": "entity" }
6dd74de329 participant OrdersDB@{ "type": "database" }
6dd74de330 participant NotificationQueue@{ "type": "queue" }
6dd74de331
6dd74de332 Customer ->> Frontend: Place order
6dd74de333 Frontend ->> Order: Create order
6dd74de334 par Parallel Processing
6dd74de335 Order ->> PaymentService: Process payment
6dd74de336 and
6dd74de337 Order ->> InventoryManager: Reserve items
6dd74de338 end
6dd74de339 PaymentService -->> Order: Payment confirmed
6dd74de340 InventoryManager -->> Order: Items reserved
6dd74de341 Order ->> OrdersDB: Save finalized order
6dd74de342 OrdersDB -->> Order: Order saved
6dd74de343 Order ->> NotificationQueue: Send confirmation
6dd74de344 NotificationQueue -->> Customer: Order confirmation
6dd74de345 `
6dd74de346 );
6dd74de347 });
6dd74de348 });
6dd74de349 it('should render different participant types with notes and loops', () => {
6dd74de350 imgSnapshotTest(
6dd74de351 `
6dd74de352 sequenceDiagram
6dd74de353 actor Admin
6dd74de354 participant Dashboard
6dd74de355 participant AuthService@{ "type" : "boundary" }
6dd74de356 participant UserManager@{ "type" : "control" }
6dd74de357 participant UserProfile@{ "type" : "entity" }
6dd74de358 participant UserDB@{ "type" : "database" }
6dd74de359 participant Logs@{ "type" : "database" }
6dd74de360
6dd74de361 Admin ->> Dashboard: Open user management
6dd74de362 loop Authentication check
6dd74de363 Dashboard ->> AuthService: Verify admin rights
6dd74de364 AuthService ->> Dashboard: Access granted
6dd74de365 end
6dd74de366 Dashboard ->> UserManager: List users
6dd74de367 UserManager ->> UserDB: Query users
6dd74de368 UserDB ->> UserManager: Return user data
6dd74de369 Note right of UserDB: Encrypted data<br/>requires decryption
6dd74de370 UserManager ->> UserProfile: Format profiles
6dd74de371 UserProfile ->> UserManager: Formatted data
6dd74de372 UserManager ->> Dashboard: Display users
6dd74de373 Dashboard ->> Logs: Record access
6dd74de374 Logs ->> Admin: Audit trail
6dd74de375 `
6dd74de376 );
6dd74de377 });
6dd74de378
6dd74de379 it('should render different participant types with alternative flows', () => {
6dd74de380 imgSnapshotTest(
6dd74de381 `
6dd74de382 sequenceDiagram
6dd74de383 actor Client
6dd74de384 participant MobileApp
6dd74de385 participant CloudService@{ "type" : "boundary" }
6dd74de386 participant DataProcessor@{ "type" : "control" }
6dd74de387 participant Transaction@{ "type" : "entity" }
6dd74de388 participant TransactionsDB@{ "type" : "database" }
6dd74de389 participant EventBus@{ "type" : "queue" }
6dd74de390
6dd74de391 Client ->> MobileApp: Initiate transaction
6dd74de392 MobileApp ->> CloudService: Authenticate
6dd74de393 alt Authentication successful
6dd74de394 CloudService -->> MobileApp: Auth token
6dd74de395 MobileApp ->> DataProcessor: Process data
6dd74de396 DataProcessor ->> Transaction: Create transaction
6dd74de397 Transaction ->> TransactionsDB: Save record
6dd74de398 TransactionsDB -->> Transaction: Confirmation
6dd74de399 Transaction ->> EventBus: Publish event
6dd74de400 EventBus -->> Client: Notification
6dd74de401 else Authentication failed
6dd74de402 CloudService -->> MobileApp: Error
6dd74de403 MobileApp -->> Client: Show error
6dd74de404 end
6dd74de405 `
6dd74de406 );
6dd74de407 });
6dd74de408
6dd74de409 it('should render different participant types with wrapping text', () => {
6dd74de410 imgSnapshotTest(
6dd74de411 `
6dd74de412 sequenceDiagram
6dd74de413 participant B@{ "type" : "boundary" }
6dd74de414 participant C@{ "type" : "control" }
6dd74de415 participant E@{ "type" : "entity" }
6dd74de416 participant DB@{ "type" : "database" }
6dd74de417 participant COL@{ "type" : "collections" }
6dd74de418 participant Q@{ "type" : "queue" }
6dd74de419
6dd74de420 FE ->> B: Another long message<br/>with explicit<br/>line breaks
6dd74de421 B -->> FE: Response message that is also quite long and needs to wrap
6dd74de422 FE ->> C: Process data
6dd74de423 C ->> E: Validate
6dd74de424 E -->> C: Validation result
6dd74de425 C ->> DB: Save
6dd74de426 DB -->> C: Save result
6dd74de427 C ->> COL: Log
6dd74de428 COL -->> Q: Forward
6dd74de429 Q -->> LongNameUser: Final response with confirmation of all actions taken
6dd74de430 `,
6dd74de431 { sequence: { wrap: true } }
6dd74de432 );
6dd74de433 });
6dd74de434
6dd74de435 describe('Sequence Diagram - New Participant Types with Long Notes and Messages', () => {
6dd74de436 it('should render long notes left of boundary', () => {
6dd74de437 imgSnapshotTest(
6dd74de438 `
6dd74de439 sequenceDiagram
6dd74de440 participant Alice@{ "type" : "boundary" }
6dd74de441 actor Bob
6dd74de442 Alice->>Bob: Hola
6dd74de443 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
6dd74de444 Bob->>Alice: I'm short though
6dd74de445 `,
6dd74de446 {}
6dd74de447 );
6dd74de448 });
6dd74de449
6dd74de450 it('should render wrapped long notes left of control', () => {
6dd74de451 imgSnapshotTest(
6dd74de452 `
6dd74de453 sequenceDiagram
6dd74de454 participant Alice@{ "type" : "control" }
6dd74de455 actor Bob
6dd74de456 Alice->>Bob: Hola
6dd74de457 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
6dd74de458 Bob->>Alice: I'm short though
6dd74de459 `,
6dd74de460 {}
6dd74de461 );
6dd74de462 });
6dd74de463
6dd74de464 it('should render long notes right of entity', () => {
6dd74de465 imgSnapshotTest(
6dd74de466 `
6dd74de467 sequenceDiagram
6dd74de468 participant Alice@{ "type" : "entity" }
6dd74de469 actor Bob
6dd74de470 Alice->>Bob: Hola
6dd74de471 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
6dd74de472 Bob->>Alice: I'm short though
6dd74de473 `,
6dd74de474 {}
6dd74de475 );
6dd74de476 });
6dd74de477
6dd74de478 it('should render wrapped long notes right of database', () => {
6dd74de479 imgSnapshotTest(
6dd74de480 `
6dd74de481 sequenceDiagram
6dd74de482 participant Alice@{ "type" : "database" }
6dd74de483 actor Bob
6dd74de484 Alice->>Bob: Hola
6dd74de485 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
6dd74de486 Bob->>Alice: I'm short though
6dd74de487 `,
6dd74de488 {}
6dd74de489 );
6dd74de490 });
6dd74de491
6dd74de492 it('should render long notes over collections', () => {
6dd74de493 imgSnapshotTest(
6dd74de494 `
6dd74de495 sequenceDiagram
6dd74de496 participant Alice@{ "type" : "collections" }
6dd74de497 actor Bob
6dd74de498 Alice->>Bob: Hola
6dd74de499 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
6dd74de500 Bob->>Alice: I'm short though
6dd74de501 `,
6dd74de502 {}
6dd74de503 );
6dd74de504 });
6dd74de505
6dd74de506 it('should render wrapped long notes over queue', () => {
6dd74de507 imgSnapshotTest(
6dd74de508 `
6dd74de509 sequenceDiagram
6dd74de510 participant Alice@{ "type" : "queue" }
6dd74de511 actor Bob
6dd74de512 Alice->>Bob: Hola
6dd74de513 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
6dd74de514 Bob->>Alice: I'm short though
6dd74de515 `,
6dd74de516 {}
6dd74de517 );
6dd74de518 });
6dd74de519
6dd74de520 it('should render notes over actor and boundary', () => {
6dd74de521 imgSnapshotTest(
6dd74de522 `
6dd74de523 sequenceDiagram
6dd74de524 actor Alice
6dd74de525 participant Charlie@{ "type" : "boundary" }
6dd74de526 note over Alice: Some note
6dd74de527 note over Charlie: Other note
6dd74de528 `,
6dd74de529 {}
6dd74de530 );
6dd74de531 });
6dd74de532
6dd74de533 it('should render long messages from database to collections', () => {
6dd74de534 imgSnapshotTest(
6dd74de535 `
6dd74de536 sequenceDiagram
6dd74de537 participant Alice@{ "type" : "database" }
6dd74de538 participant Bob@{ "type" : "collections" }
6dd74de539 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
6dd74de540 Bob->>Alice: I'm short though
6dd74de541 `,
6dd74de542 {}
6dd74de543 );
6dd74de544 });
6dd74de545
6dd74de546 it('should render wrapped long messages from control to entity', () => {
6dd74de547 imgSnapshotTest(
6dd74de548 `
6dd74de549 sequenceDiagram
6dd74de550 participant Alice@{ "type" : "control" }
6dd74de551 participant Bob@{ "type" : "entity" }
6dd74de552 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
6dd74de553 Bob->>Alice: I'm short though
6dd74de554 `,
6dd74de555 {}
6dd74de556 );
6dd74de557 });
6dd74de558
6dd74de559 it('should render long messages from queue to boundary', () => {
6dd74de560 imgSnapshotTest(
6dd74de561 `
6dd74de562 sequenceDiagram
6dd74de563 participant Alice@{ "type" : "queue" }
6dd74de564 participant Bob@{ "type" : "boundary" }
6dd74de565 Alice->>Bob: I'm short
6dd74de566 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
6dd74de567 `,
6dd74de568 {}
6dd74de569 );
6dd74de570 });
6dd74de571
6dd74de572 it('should render wrapped long messages from actor to database', () => {
6dd74de573 imgSnapshotTest(
6dd74de574 `
6dd74de575 sequenceDiagram
6dd74de576 actor Alice
6dd74de577 participant Bob@{ "type" : "database" }
6dd74de578 Alice->>Bob: I'm short
6dd74de579 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
6dd74de580 `,
6dd74de581 {}
6dd74de582 );
6dd74de583 });
6dd74de584 });
6dd74de585
6dd74de586 describe('svg size', () => {
6dd74de587 it('should render a sequence diagram when useMaxWidth is true (default)', () => {
6dd74de588 renderGraph(
6dd74de589 `
6dd74de590 sequenceDiagram
6dd74de591 actor Alice
6dd74de592 participant Bob@{ "type" : "boundary" }
6dd74de593 participant John@{ "type" : "control" }
6dd74de594 Alice ->> Bob: Hello Bob, how are you?
6dd74de595 Bob-->>John: How about you John?
6dd74de596 Bob--x Alice: I am good thanks!
6dd74de597 Bob-x John: I am good thanks!
6dd74de598 Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
6dd74de599 Bob-->Alice: Checking with John...
6dd74de600 alt either this
6dd74de601 Alice->>John: Yes
6dd74de602 else or this
6dd74de603 Alice->>John: No
6dd74de604 else or this will happen
6dd74de605 Alice->John: Maybe
6dd74de606 end
6dd74de607 par this happens in parallel
6dd74de608 Alice -->> Bob: Parallel message 1
6dd74de609 and
6dd74de610 Alice -->> John: Parallel message 2
6dd74de611 end
6dd74de612 `,
6dd74de613 { sequence: { useMaxWidth: true } }
6dd74de614 );
6dd74de615 cy.get('svg').should((svg) => {
6dd74de616 expect(svg).to.have.attr('width', '100%');
6dd74de617 const style = svg.attr('style');
6dd74de618 expect(style).to.match(/^max-width: [\d.]+px;$/);
6dd74de619 const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
6dd74de620 expect(maxWidthValue).to.be.within(820 * 0.95, 820 * 1.05);
6dd74de621 });
6dd74de622 });
6dd74de623
6dd74de624 it('should render a sequence diagram when useMaxWidth is false', () => {
6dd74de625 renderGraph(
6dd74de626 `
6dd74de627 sequenceDiagram
6dd74de628 actor Alice
6dd74de629 participant Bob@{ "type" : "boundary" }
6dd74de630 participant John@{ "type" : "control" }
6dd74de631 Alice ->> Bob: Hello Bob, how are you?
6dd74de632 Bob-->>John: How about you John?
6dd74de633 Bob--x Alice: I am good thanks!
6dd74de634 Bob-x John: I am good thanks!
6dd74de635 Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
6dd74de636 Bob-->Alice: Checking with John...
6dd74de637 alt either this
6dd74de638 Alice->>John: Yes
6dd74de639 else or this
6dd74de640 Alice->>John: No
6dd74de641 else or this will happen
6dd74de642 Alice->John: Maybe
6dd74de643 end
6dd74de644 par this happens in parallel
6dd74de645 Alice -->> Bob: Parallel message 1
6dd74de646 and
6dd74de647 Alice -->> John: Parallel message 2
6dd74de648 end
6dd74de649 `,
6dd74de650 { sequence: { useMaxWidth: false } }
6dd74de651 );
6dd74de652 cy.get('svg').should((svg) => {
6dd74de653 const width = parseFloat(svg.attr('width'));
6dd74de654 expect(width).to.be.within(820 * 0.95, 820 * 1.05);
6dd74de655 expect(svg).to.not.have.attr('style');
6dd74de656 });
6dd74de657 });
6dd74de658
6dd74de659 describe('Central Connection Rendering Tests', () => {
6dd74de660 it('should render central connection circles on actor vertical lines', () => {
6dd74de661 imgSnapshotTest(
6dd74de662 `sequenceDiagram
6dd74de663 participant Alice
6dd74de664 participant Bob
6dd74de665 participant Charlie
6dd74de666 Alice ()->>() Bob: Central connection
6dd74de667 Bob ()-->> Charlie: Reverse central connection
6dd74de668 Charlie ()<<-->>() Alice: Dual central connection`,
6dd74de669 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de670 );
6dd74de671 });
6dd74de672
6dd74de673 it('should render central connections with different arrow types', () => {
6dd74de674 imgSnapshotTest(
6dd74de675 `sequenceDiagram
6dd74de676 participant Alice
6dd74de677 participant Bob
6dd74de678 Alice ()->>() Bob: Solid open arrow
6dd74de679 Alice ()-->>() Bob: Dotted open arrow
6dd74de680 Alice ()-x() Bob: Solid cross
6dd74de681 Alice ()--x() Bob: Dotted cross
6dd74de682 Alice ()->() Bob: Solid arrow`,
6dd74de683 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de684 );
6dd74de685 });
6dd74de686
6dd74de687 it('should render central connections with bidirectional arrows', () => {
6dd74de688 imgSnapshotTest(
6dd74de689 `sequenceDiagram
6dd74de690 participant Alice
6dd74de691 participant Bob
6dd74de692 Alice ()<<->>() Bob: Bidirectional solid
6dd74de693 Alice ()<<-->>() Bob: Bidirectional dotted`,
6dd74de694 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de695 );
6dd74de696 });
6dd74de697
6dd74de698 it('should render central connections with activations', () => {
6dd74de699 imgSnapshotTest(
6dd74de700 `sequenceDiagram
6dd74de701 participant Alice
6dd74de702 participant Bob
6dd74de703 participant Charlie
6dd74de704 Alice ()->>() Bob: Activate Bob
6dd74de705 activate Bob
6dd74de706 Bob ()-->> Charlie: Message to Charlie
6dd74de707 Bob ()->>() Alice: Response to Alice
6dd74de708 deactivate Bob`,
6dd74de709 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de710 );
6dd74de711 });
6dd74de712
6dd74de713 it('should render central connections mixed with normal messages', () => {
6dd74de714 imgSnapshotTest(
6dd74de715 `sequenceDiagram
6dd74de716 participant Alice
6dd74de717 participant Bob
6dd74de718 participant Charlie
6dd74de719 Alice ->> Bob: Normal message
6dd74de720 Bob ()->>() Charlie: Central connection
6dd74de721 Charlie -->> Alice: Normal dotted message
6dd74de722 Alice ()<<-->>() Bob: Dual central connection
6dd74de723 Bob -x Charlie: Normal cross message`,
6dd74de724 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de725 );
6dd74de726 });
6dd74de727
6dd74de728 it('should render central connections with notes', () => {
6dd74de729 imgSnapshotTest(
6dd74de730 `sequenceDiagram
6dd74de731 participant Alice
6dd74de732 participant Bob
6dd74de733 participant Charlie
6dd74de734 Alice ()->>() Bob: Central connection
6dd74de735 Note over Alice,Bob: Central connection note
6dd74de736 Bob ()-->> Charlie: Reverse central connection
6dd74de737 Note right of Charlie: Response note
6dd74de738 Charlie ()<<-->>() Alice: Dual central connection`,
6dd74de739 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de740 );
6dd74de741 });
6dd74de742
6dd74de743 it('should render central connections with loops and alternatives', () => {
6dd74de744 imgSnapshotTest(
6dd74de745 `sequenceDiagram
6dd74de746 participant Alice
6dd74de747 participant Bob
6dd74de748 participant Charlie
6dd74de749 loop Every minute
6dd74de750 Alice ()->>() Bob: Central heartbeat
6dd74de751 Bob ()-->> Charlie: Forward heartbeat
6dd74de752 end
6dd74de753 alt Success
6dd74de754 Charlie ()<<-->>() Alice: Success response
6dd74de755 else Failure
6dd74de756 Charlie ()-x() Alice: Failure response
6dd74de757 end`,
6dd74de758 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de759 );
6dd74de760 });
6dd74de761
6dd74de762 it('should render central connections with different participant types', () => {
6dd74de763 imgSnapshotTest(
6dd74de764 `sequenceDiagram
6dd74de765 participant Alice
6dd74de766 actor Bob
6dd74de767 participant Charlie@{"type":"boundary"}
6dd74de768 participant David@{"type":"control"}
6dd74de769 participant Eve@{"type":"entity"}
6dd74de770 Alice ()->>() Bob: To actor
6dd74de771 Bob ()-->> Charlie: To boundary
6dd74de772 Charlie ()->>() David: To control
6dd74de773 David ()<<-->>() Eve: To entity
6dd74de774 Eve ()-x() Alice: Back to participant`,
6dd74de775 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de776 );
6dd74de777 });
6dd74de778 });
6dd74de779
6dd74de780 describe('Sequence Diagram Rendering with Autonumber and All Arrow Types', () => {
6dd74de781 describe('Autonumber with All Arrow Types', () => {
6dd74de782 it('should render all arrow types with autonumbering', () => {
6dd74de783 imgSnapshotTest(
6dd74de784 `%%{init: {'theme':'base'}}%%
6dd74de785sequenceDiagram
6dd74de786 autonumber
6dd74de787 Alice->>Bob: Solid arrow (->>)
6dd74de788 Bob-->>Alice: Dotted arrow (-->>)
6dd74de789 Alice->Charlie: Solid open arrow (->)
6dd74de790 Charlie-->Dave: Dotted open arrow (-->)
6dd74de791 Alice-xBob: Solid cross (-x)
6dd74de792 Bob--xAlice: Dotted cross (--x)
6dd74de793 Alice-)Charlie: Solid point async (-)
6dd74de794 Charlie--)Dave: Dotted point async (--)
6dd74de795 Alice<<->>Bob: Bidirectional solid (<<->>)
6dd74de796 Charlie<<-->>Dave: Bidirectional dotted (<<-->>)
6dd74de797 Alice-|\\Bob: Solid top half (-|\\)
6dd74de798 Bob-|/Alice: Solid bottom half (-|/)
6dd74de799 Alice-\\\\Charlie: Stick top half (-\\\\)
6dd74de800 Charlie-//Dave: Stick bottom half (-//)
6dd74de801 Dave/|-Charlie: Solid top reverse (/|-)
6dd74de802 Charlie\\|-Bob: Solid bottom reverse (\\|-)
6dd74de803 Bob//-Alice: Stick top reverse (//-)
6dd74de804 Alice\\\\-Bob: Stick bottom reverse (\\\\-)
6dd74de805 Alice--|\\Bob: Dotted solid top (--|\\)
6dd74de806 Bob--|/Alice: Dotted solid bottom (--|/)
6dd74de807 Alice--\\\\Charlie: Dotted stick top (--\\\\)
6dd74de808 Charlie--//Dave: Dotted stick bottom (--//)
6dd74de809 Dave/|--Charlie: Dotted solid top reverse (/|--)
6dd74de810 Charlie\\|--Bob: Dotted solid bottom reverse (\\|--)
6dd74de811 Bob//--Alice: Dotted stick top reverse (//--)
6dd74de812 Alice\\\\--Bob: Dotted stick bottom reverse (\\\\--)
6dd74de813 Alice->>()Bob: Solid with central connection
6dd74de814 Bob()-->>Alice: Dotted with reverse central
6dd74de815 Alice()->>()Charlie: Dual central connections`,
6dd74de816 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de817 );
6dd74de818 });
6dd74de819
6dd74de820 it('should render all arrow types with autonumbering - left to right only', () => {
6dd74de821 imgSnapshotTest(
6dd74de822 `%%{init: {'theme':'base'}}%%
6dd74de823sequenceDiagram
6dd74de824 autonumber
6dd74de825 Alice->>Bob: Solid arrow (->>)
6dd74de826 Alice-->>Bob: Dotted arrow (-->>)
6dd74de827 Alice->Bob: Solid open arrow (->)
6dd74de828 Alice-->Bob: Dotted open arrow (-->)
6dd74de829 Alice-xBob: Solid cross (-x)
6dd74de830 Alice--xBob: Dotted cross (--x)
6dd74de831 Alice-)Bob: Solid point async (-)
6dd74de832 Alice--)Bob: Dotted point async (--)
6dd74de833 Alice<<->>Bob: Bidirectional solid (<<->>)
6dd74de834 Alice<<-->>Bob: Bidirectional dotted (<<-->>)
6dd74de835 Alice-|\\Bob: Solid top half (-|\\)
6dd74de836 Alice-|/Bob: Solid bottom half (-|/)
6dd74de837 Alice-\\\\Bob: Stick top half (-\\\\)
6dd74de838 Alice-//Bob: Stick bottom half (-//)
6dd74de839 Bob/|-Alice: Solid top reverse (/|-)
6dd74de840 Bob\\|-Alice: Solid bottom reverse (\\|-)
6dd74de841 Bob//-Alice: Stick top reverse (//-)
6dd74de842 Bob\\\\-Alice: Stick bottom reverse (\\\\-)
6dd74de843 Alice--|\\Bob: Dotted solid top (--|\\)
6dd74de844 Alice--|/Bob: Dotted solid bottom (--|/)
6dd74de845 Alice--\\\\Bob: Dotted stick top (--\\\\)
6dd74de846 Alice--//Bob: Dotted stick bottom (--//)
6dd74de847 Bob/|--Alice: Dotted solid top reverse (/|--)
6dd74de848 Bob\\|--Alice: Dotted solid bottom reverse (\\|--)
6dd74de849 Bob//--Alice: Dotted stick top reverse (//--)
6dd74de850 Bob\\\\--Alice: Dotted stick bottom reverse (\\\\--)
6dd74de851 Alice->>()Bob: Solid with central connection
6dd74de852 Alice()-->>Bob: Dotted with reverse central
6dd74de853 Alice()->>()Bob: Dual central connections`,
6dd74de854 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de855 );
6dd74de856 });
6dd74de857
6dd74de858 it('should render central connections with autonumbering', () => {
6dd74de859 imgSnapshotTest(
6dd74de860 `%%{init: {'theme':'base'}}%%
6dd74de861sequenceDiagram
6dd74de862 autonumber
6dd74de863 participant Alice
6dd74de864 participant Bob
6dd74de865 participant Charlie
6dd74de866 Alice->>()Bob: Central connection at destination
6dd74de867 Bob()->>Alice: Reverse central at source
6dd74de868 Alice()->>()Bob: Dual central connections
6dd74de869 Bob->>()Charlie: Another central connection
6dd74de870 Charlie()-->>Alice: Reverse central dotted
6dd74de871 Alice()<<-->>()Bob: Dual central bidirectional`,
6dd74de872 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de873 );
6dd74de874 });
6dd74de875
6dd74de876 it('should render bidirectional arrows with autonumbering', () => {
6dd74de877 imgSnapshotTest(
6dd74de878 `%%{init: {'theme':'base'}}%%
6dd74de879sequenceDiagram
6dd74de880 autonumber
6dd74de881 participant Alice
6dd74de882 participant Bob
6dd74de883 participant Charlie
6dd74de884 Alice<<->>Bob: Bidirectional solid left to right
6dd74de885 Bob<<->>Alice: Bidirectional solid right to left
6dd74de886 Alice<<-->>Charlie: Bidirectional dotted left to right
6dd74de887 Charlie<<-->>Alice: Bidirectional dotted right to left
6dd74de888 Bob<<->>Charlie: Bidirectional solid
6dd74de889 Charlie<<-->>Bob: Bidirectional dotted`,
6dd74de890 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de891 );
6dd74de892 });
6dd74de893
6dd74de894 it('should render reverse arrows with autonumbering', () => {
6dd74de895 imgSnapshotTest(
6dd74de896 `%%{init: {'theme':'base'}}%%
6dd74de897sequenceDiagram
6dd74de898 autonumber
6dd74de899 participant Alice
6dd74de900 participant Bob
6dd74de901 participant Charlie
6dd74de902 Bob/|-Alice: Solid top reverse left to right
6dd74de903 Alice/|-Bob: Solid top reverse right to left
6dd74de904 Bob\\|-Alice: Solid bottom reverse left to right
6dd74de905 Alice\\|-Bob: Solid bottom reverse right to left
6dd74de906 Bob//-Alice: Stick top reverse left to right
6dd74de907 Alice//-Bob: Stick top reverse right to left
6dd74de908 Bob\\\\-Alice: Stick bottom reverse left to right
6dd74de909 Alice\\\\-Bob: Stick bottom reverse right to left
6dd74de910 Bob/|--Alice: Dotted solid top reverse
6dd74de911 Alice\\|--Bob: Dotted solid bottom reverse
6dd74de912 Bob//--Alice: Dotted stick top reverse
6dd74de913 Alice\\\\--Bob: Dotted stick bottom reverse`,
6dd74de914 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de915 );
6dd74de916 });
6dd74de917 });
6dd74de918
6dd74de919 describe('Central Connections with Autonumber - Comprehensive Coverage', () => {
6dd74de920 it('should render CENTRAL_CONNECTION with normal arrows - left to right', () => {
6dd74de921 imgSnapshotTest(
6dd74de922 `%%{init: {'theme':'base'}}%%
6dd74de923sequenceDiagram
6dd74de924 autonumber
6dd74de925 participant Alice
6dd74de926 participant Bob
6dd74de927 participant Charlie
6dd74de928 Alice->>()Bob: Solid arrow with circle at destination
6dd74de929 Alice-->>()Bob: Dotted arrow with circle at destination
6dd74de930 Alice->()Bob: Open arrow with circle at destination
6dd74de931 Alice--x()Bob: Cross arrow with circle at destination
6dd74de932 Alice--)()Bob: Close arrow with circle at destination`,
6dd74de933 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de934 );
6dd74de935 });
6dd74de936
6dd74de937 it('should render CENTRAL_CONNECTION with normal arrows - right to left', () => {
6dd74de938 imgSnapshotTest(
6dd74de939 `%%{init: {'theme':'base'}}%%
6dd74de940sequenceDiagram
6dd74de941 autonumber
6dd74de942 participant Alice
6dd74de943 participant Bob
6dd74de944 participant Charlie
6dd74de945 Bob->>()Alice: Solid arrow with circle at destination (RTL)
6dd74de946 Charlie-->>()Bob: Dotted arrow with circle at destination (RTL)
6dd74de947 Bob->()Alice: Open arrow with circle at destination (RTL)
6dd74de948 Charlie--x()Alice: Cross arrow with circle at destination (RTL)
6dd74de949 Bob--)()Alice: Close arrow with circle at destination (RTL)`,
6dd74de950 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de951 );
6dd74de952 });
6dd74de953
6dd74de954 it('should render CENTRAL_CONNECTION with reverse arrows - left to right', () => {
6dd74de955 imgSnapshotTest(
6dd74de956 `%%{init: {'theme':'base'}}%%
6dd74de957sequenceDiagram
6dd74de958 autonumber
6dd74de959 participant Alice
6dd74de960 participant Bob
6dd74de961 participant Charlie
6dd74de962 Bob/|-()Alice: Solid top reverse with circle (LTR)
6dd74de963 Bob\\|-()Alice: Solid bottom reverse with circle (LTR)
6dd74de964 Bob//-()Alice: Stick top reverse with circle (LTR)
6dd74de965 Bob\\\\-()Alice: Stick bottom reverse with circle (LTR)
6dd74de966 Bob/|--()Alice: Dotted solid top reverse with circle (LTR)
6dd74de967 Bob\\|--()Alice: Dotted solid bottom reverse with circle (LTR)
6dd74de968 Bob//--()Alice: Dotted stick top reverse with circle (LTR)
6dd74de969 Bob\\\\--()Alice: Dotted stick bottom reverse with circle (LTR)`,
6dd74de970 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de971 );
6dd74de972 });
6dd74de973
6dd74de974 it('should render CENTRAL_CONNECTION with reverse arrows - right to left', () => {
6dd74de975 imgSnapshotTest(
6dd74de976 `%%{init: {'theme':'base'}}%%
6dd74de977sequenceDiagram
6dd74de978 autonumber
6dd74de979 participant Alice
6dd74de980 participant Bob
6dd74de981 participant Charlie
6dd74de982 Alice/|-()Bob: Solid top reverse with circle (RTL)
6dd74de983 Alice\\|-()Bob: Solid bottom reverse with circle (RTL)
6dd74de984 Alice//-()Bob: Stick top reverse with circle (RTL)
6dd74de985 Alice\\\\-()Bob: Stick bottom reverse with circle (RTL)
6dd74de986 Alice/|--()Bob: Dotted solid top reverse with circle (RTL)
6dd74de987 Alice\\|--()Bob: Dotted solid bottom reverse with circle (RTL)
6dd74de988 Alice//--()Bob: Dotted stick top reverse with circle (RTL)
6dd74de989 Alice\\\\--()Bob: Dotted stick bottom reverse with circle (RTL)`,
6dd74de990 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de991 );
6dd74de992 });
6dd74de993
6dd74de994 it('should render Central_Connection_REVERSE ()->> normal LTR', () => {
6dd74de995 imgSnapshotTest(
6dd74de996 `%%{init: {'theme':'base'}}%%
6dd74de997sequenceDiagram
6dd74de998 autonumber
6dd74de999 participant Alice
6dd74de1000 participant Bob
6dd74de1001 participant Charlie
6dd74de1002 Alice()->>Bob: Circle at source with solid arrow
6dd74de1003 Alice()-->>Bob: Circle at source with dotted arrow
6dd74de1004 Alice()->Bob: Circle at source with open arrow
6dd74de1005 Alice()--xBob: Circle at source with cross arrow
6dd74de1006 Alice()--)Bob: Circle at source with close arrow`,
6dd74de1007 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1008 );
6dd74de1009 });
6dd74de1010
6dd74de1011 it('should render Central_Connection_REVERSE ()->> normal RTL', () => {
6dd74de1012 imgSnapshotTest(
6dd74de1013 `%%{init: {'theme':'base'}}%%
6dd74de1014sequenceDiagram
6dd74de1015 autonumber
6dd74de1016 participant Alice
6dd74de1017 participant Bob
6dd74de1018 participant Charlie
6dd74de1019 Bob()->>Alice: Circle at source with solid arrow (RTL)
6dd74de1020 Charlie()-->>Bob: Circle at source with dotted arrow (RTL)
6dd74de1021 Bob()->Alice: Circle at source with open arrow (RTL)
6dd74de1022 Charlie()--xAlice: Circle at source with cross arrow (RTL)
6dd74de1023 Bob()--)Alice: Circle at source with close arrow (RTL)`,
6dd74de1024 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1025 );
6dd74de1026 });
6dd74de1027
6dd74de1028 it('should render Central_Connection_REVERSE ()->> reverse LTR', () => {
6dd74de1029 imgSnapshotTest(
6dd74de1030 `%%{init: {'theme':'base'}}%%
6dd74de1031sequenceDiagram
6dd74de1032 autonumber
6dd74de1033 participant Alice
6dd74de1034 participant Bob
6dd74de1035 participant Charlie
6dd74de1036 Bob()/|-Alice: Circle at source with solid top reverse (LTR)
6dd74de1037 Bob()\\|-Alice: Circle at source with solid bottom reverse (LTR)
6dd74de1038 Bob()//-Alice: Circle at source with stick top reverse (LTR)
6dd74de1039 Bob()\\\\-Alice: Circle at source with stick bottom reverse (LTR)
6dd74de1040 Bob()/|--Alice: Circle at source with dotted solid top reverse (LTR)
6dd74de1041 Bob()\\|--Alice: Circle at source with dotted solid bottom reverse (LTR)
6dd74de1042 Bob()//--Alice: Circle at source with dotted stick top reverse (LTR)
6dd74de1043 Bob()\\\\--Alice: Circle at source with dotted stick bottom reverse (LTR)`,
6dd74de1044 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1045 );
6dd74de1046 });
6dd74de1047
6dd74de1048 it('should render Central_Connection_REVERSE ()->> reverse RTL', () => {
6dd74de1049 imgSnapshotTest(
6dd74de1050 `%%{init: {'theme':'base'}}%%
6dd74de1051sequenceDiagram
6dd74de1052 autonumber
6dd74de1053 participant Alice
6dd74de1054 participant Bob
6dd74de1055 participant Charlie
6dd74de1056 Alice()/|-Bob: Circle at source with solid top reverse (RTL)
6dd74de1057 Alice()\\|-Bob: Circle at source with solid bottom reverse (RTL)
6dd74de1058 Alice()//-Bob: Circle at source with stick top reverse (RTL)
6dd74de1059 Alice()\\\\-Bob: Circle at source with stick bottom reverse (RTL)
6dd74de1060 Alice()/|--Bob: Circle at source with dotted solid top reverse (RTL)
6dd74de1061 Alice()\\|--Bob: Circle at source with dotted solid bottom reverse (RTL)
6dd74de1062 Alice()//--Bob: Circle at source with dotted stick top reverse (RTL)
6dd74de1063 Alice()\\\\--Bob: Circle at source with dotted stick bottom reverse (RTL)`,
6dd74de1064 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1065 );
6dd74de1066 });
6dd74de1067
6dd74de1068 it('should render Central_Connection_DUAL ()->>() normal LTR', () => {
6dd74de1069 imgSnapshotTest(
6dd74de1070 `%%{init: {'theme':'base'}}%%
6dd74de1071sequenceDiagram
6dd74de1072 autonumber
6dd74de1073 participant Alice
6dd74de1074 participant Bob
6dd74de1075 participant Charlie
6dd74de1076 Alice()->>()Bob: Circles at both ends with solid arrow
6dd74de1077 Alice()-->>()Bob: Circles at both ends with dotted arrow
6dd74de1078 Alice()->()Bob: Circles at both ends with open arrow
6dd74de1079 Alice()--x()Bob: Circles at both ends with cross arrow
6dd74de1080 Alice()--)()Bob: Circles at both ends with close arrow`,
6dd74de1081 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1082 );
6dd74de1083 });
6dd74de1084
6dd74de1085 it('should render Central_Connection_DUAL ()->>() normal RTL', () => {
6dd74de1086 imgSnapshotTest(
6dd74de1087 `%%{init: {'theme':'base'}}%%
6dd74de1088sequenceDiagram
6dd74de1089 autonumber
6dd74de1090 participant Alice
6dd74de1091 participant Bob
6dd74de1092 participant Charlie
6dd74de1093 Bob()->>()Alice: Circles at both ends with solid arrow (RTL)
6dd74de1094 Charlie()-->>()Bob: Circles at both ends with dotted arrow (RTL)
6dd74de1095 Bob()->()Alice: Circles at both ends with open arrow (RTL)
6dd74de1096 Charlie()--x()Alice: Circles at both ends with cross arrow (RTL)
6dd74de1097 Bob()--)()Alice: Circles at both ends with close arrow (RTL)`,
6dd74de1098 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1099 );
6dd74de1100 });
6dd74de1101
6dd74de1102 it('should render Central_Connection_DUAL ()->>() reverse LTR', () => {
6dd74de1103 imgSnapshotTest(
6dd74de1104 `%%{init: {'theme':'base'}}%%
6dd74de1105sequenceDiagram
6dd74de1106 autonumber
6dd74de1107 participant Alice
6dd74de1108 participant Bob
6dd74de1109 participant Charlie
6dd74de1110 Bob()/|-()Alice: Circles at both ends with solid top reverse (LTR)
6dd74de1111 Bob()\\|-()Alice: Circles at both ends with solid bottom reverse (LTR)
6dd74de1112 Bob()//-()Alice: Circles at both ends with stick top reverse (LTR)
6dd74de1113 Bob()\\\\-()Alice: Circles at both ends with stick bottom reverse (LTR)
6dd74de1114 Bob()/|--()Alice: Circles at both ends with dotted solid top reverse (LTR)
6dd74de1115 Bob()\\|--()Alice: Circles at both ends with dotted solid bottom reverse (LTR)
6dd74de1116 Bob()//--()Alice: Circles at both ends with dotted stick top reverse (LTR)
6dd74de1117 Bob()\\\\--()Alice: Circles at both ends with dotted stick bottom reverse (LTR)`,
6dd74de1118 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1119 );
6dd74de1120 });
6dd74de1121
6dd74de1122 it('should render Central_Connection_DUAL ()->>() reverse RTL', () => {
6dd74de1123 imgSnapshotTest(
6dd74de1124 `%%{init: {'theme':'base'}}%%
6dd74de1125sequenceDiagram
6dd74de1126 autonumber
6dd74de1127 participant Alice
6dd74de1128 participant Bob
6dd74de1129 participant Charlie
6dd74de1130 Alice()/|-()Bob: Circles at both ends with solid top reverse (RTL)
6dd74de1131 Alice()\\|-()Bob: Circles at both ends with solid bottom reverse (RTL)
6dd74de1132 Alice()//-()Bob: Circles at both ends with stick top reverse (RTL)
6dd74de1133 Alice()\\\\-()Bob: Circles at both ends with stick bottom reverse (RTL)
6dd74de1134 Alice()/|--()Bob: Circles at both ends with dotted solid top reverse (RTL)
6dd74de1135 Alice()\\|--()Bob: Circles at both ends with dotted solid bottom reverse (RTL)
6dd74de1136 Alice()//--()Bob: Circles at both ends with dotted stick top reverse (RTL)
6dd74de1137 Alice()\\\\--()Bob: Circles at both ends with dotted stick bottom reverse (RTL)`,
6dd74de1138 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1139 );
6dd74de1140 });
6dd74de1141
6dd74de1142 it('should render mixed central connections with autonumber', () => {
6dd74de1143 imgSnapshotTest(
6dd74de1144 `%%{init: {'theme':'base'}}%%
6dd74de1145sequenceDiagram
6dd74de1146 autonumber
6dd74de1147 participant Alice
6dd74de1148 participant Bob
6dd74de1149 participant Charlie
6dd74de1150 participant David
6dd74de1151
6dd74de1152 Note over Alice,David: Normal arrows with central connections
6dd74de1153 Alice->>()Bob: CENTRAL_CONNECTION LTR
6dd74de1154 Bob->>()Alice: CENTRAL_CONNECTION RTL
6dd74de1155 Alice()->>Bob: CENTRAL_CONNECTION_REVERSE LTR
6dd74de1156 Bob()->>Alice: CENTRAL_CONNECTION_REVERSE RTL
6dd74de1157 Alice()->>()Bob: CENTRAL_CONNECTION_DUAL LTR
6dd74de1158 Bob()->>()Alice: CENTRAL_CONNECTION_DUAL RTL
6dd74de1159
6dd74de1160 Note over Alice,David: Reverse arrows with central connections
6dd74de1161 Bob/|-()Alice: Reverse with CENTRAL_CONNECTION LTR
6dd74de1162 Alice/|-()Bob: Reverse with CENTRAL_CONNECTION RTL
6dd74de1163 Bob()/|-Alice: Reverse with CENTRAL_CONNECTION_REVERSE LTR
6dd74de1164 Alice()/|-Bob: Reverse with CENTRAL_CONNECTION_REVERSE RTL
6dd74de1165 Bob()/|-()Alice: Reverse with CENTRAL_CONNECTION_DUAL LTR
6dd74de1166 Alice()/|-()Bob: Reverse with CENTRAL_CONNECTION_DUAL RTL
6dd74de1167
6dd74de1168 Note over Alice,David: Mixed with different participants
6dd74de1169 Alice->>()Charlie: Skip participant
6dd74de1170 Charlie()->>Alice: Back skip
6dd74de1171 Bob()->>()David: Another skip
6dd74de1172 David()->>()Bob: Return skip`,
6dd74de1173 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1174 );
6dd74de1175 });
6dd74de1176
6dd74de1177 it('should render central connections with bidirectional arrows and autonumber', () => {
6dd74de1178 imgSnapshotTest(
6dd74de1179 `%%{init: {'theme':'base'}}%%
6dd74de1180sequenceDiagram
6dd74de1181 autonumber
6dd74de1182 participant Alice
6dd74de1183 participant Bob
6dd74de1184 participant Charlie
6dd74de1185 Alice()<<->>()Bob: Dual central with bidirectional solid LTR
6dd74de1186 Bob()<<->>()Alice: Dual central with bidirectional solid RTL
6dd74de1187 Alice()<<-->>()Bob: Dual central with bidirectional dotted LTR
6dd74de1188 Bob()<<-->>()Alice: Dual central with bidirectional dotted RTL
6dd74de1189 Alice<<->>()Bob: Central at end with bidirectional LTR
6dd74de1190 Bob()<<->>Alice: Central at start with bidirectional RTL`,
6dd74de1191 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1192 );
6dd74de1193 });
6dd74de1194 });
6dd74de1195
6dd74de1196 describe('Self-Reference Arrows - Comprehensive Coverage', () => {
6dd74de1197 it('should render self-reference with normal arrows - without autonumber', () => {
6dd74de1198 imgSnapshotTest(
6dd74de1199 `%%{init: {'theme':'base'}}%%
6dd74de1200sequenceDiagram
6dd74de1201 participant Alice
6dd74de1202 participant Bob
6dd74de1203 participant Charlie
6dd74de1204 Alice->>Alice: Solid arrow self-reference
6dd74de1205 Bob-->>Bob: Dotted arrow self-reference
6dd74de1206 Charlie->Charlie: Open arrow self-reference
6dd74de1207 Alice-->Alice: Dotted open arrow self-reference
6dd74de1208 Bob-xBob: Cross arrow self-reference
6dd74de1209 Charlie--xCharlie: Dotted cross self-reference`,
6dd74de1210 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1211 );
6dd74de1212 });
6dd74de1213
6dd74de1214 it('should render self-reference with normal arrows - with autonumber', () => {
6dd74de1215 imgSnapshotTest(
6dd74de1216 `%%{init: {'theme':'base'}}%%
6dd74de1217sequenceDiagram
6dd74de1218 autonumber
6dd74de1219 participant Alice
6dd74de1220 participant Bob
6dd74de1221 participant Charlie
6dd74de1222 Alice->>Alice: Solid arrow self-reference
6dd74de1223 Bob-->>Bob: Dotted arrow self-reference
6dd74de1224 Charlie->Charlie: Open arrow self-reference
6dd74de1225 Alice-->Alice: Dotted open arrow self-reference
6dd74de1226 Bob-xBob: Cross arrow self-reference
6dd74de1227 Charlie--xCharlie: Dotted cross self-reference`,
6dd74de1228 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1229 );
6dd74de1230 });
6dd74de1231
6dd74de1232 it('should render self-reference with reverse arrows - without autonumber', () => {
6dd74de1233 imgSnapshotTest(
6dd74de1234 `%%{init: {'theme':'base'}}%%
6dd74de1235 sequenceDiagram
6dd74de1236 participant Alice
6dd74de1237 participant Bob
6dd74de1238 participant Charlie
6dd74de1239 Alice/|-Alice: Solid top reverse self-reference
6dd74de1240 Bob\\|-Bob: Solid bottom reverse self-reference
6dd74de1241 Charlie//-Charlie: Stick top reverse self-reference
6dd74de1242 Alice\\\\-Alice: Stick bottom reverse self-reference
6dd74de1243 Bob/|--Bob: Dotted solid top reverse self-reference
6dd74de1244 Charlie\\|--Charlie: Dotted solid bottom reverse self-reference
6dd74de1245 Alice//--Alice: Dotted stick top reverse self-reference
6dd74de1246 Bob\\\\--Bob: Dotted stick bottom reverse self-reference`,
6dd74de1247 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1248 );
6dd74de1249 });
6dd74de1250
6dd74de1251 it('should render self-reference with reverse arrows - with autonumber', () => {
6dd74de1252 imgSnapshotTest(
6dd74de1253 `%%{init: {'theme':'base'}}%%
6dd74de1254sequenceDiagram
6dd74de1255 autonumber
6dd74de1256 participant Alice
6dd74de1257 participant Bob
6dd74de1258 participant Charlie
6dd74de1259 Alice/|-Alice: Solid top reverse self-reference
6dd74de1260 Bob\\|-Bob: Solid bottom reverse self-reference
6dd74de1261 Charlie//-Charlie: Stick top reverse self-reference
6dd74de1262 Alice\\\\-Alice: Stick bottom reverse self-reference
6dd74de1263 Bob/|--Bob: Dotted solid top reverse self-reference
6dd74de1264 Charlie\\|--Charlie: Dotted solid bottom reverse self-reference
6dd74de1265 Alice//--Alice: Dotted stick top reverse self-reference
6dd74de1266 Bob\\\\--Bob: Dotted stick bottom reverse self-reference`,
6dd74de1267 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1268 );
6dd74de1269 });
6dd74de1270
6dd74de1271 it('should render self-reference with bidirectional arrows - without autonumber', () => {
6dd74de1272 imgSnapshotTest(
6dd74de1273 `%%{init: {'theme':'base'}}%%
6dd74de1274sequenceDiagram
6dd74de1275 participant Alice
6dd74de1276 participant Bob
6dd74de1277 participant Charlie
6dd74de1278 Alice<<->>Alice: Bidirectional solid self-reference
6dd74de1279 Bob<<-->>Bob: Bidirectional dotted self-reference
6dd74de1280 Charlie<<->>Charlie: Another bidirectional solid
6dd74de1281 Alice<<-->>Alice: Another bidirectional dotted`,
6dd74de1282 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1283 );
6dd74de1284 });
6dd74de1285
6dd74de1286 it('should render self-reference with bidirectional arrows - with autonumber', () => {
6dd74de1287 imgSnapshotTest(
6dd74de1288 `%%{init: {'theme':'base'}}%%
6dd74de1289sequenceDiagram
6dd74de1290 autonumber
6dd74de1291 participant Alice
6dd74de1292 participant Bob
6dd74de1293 participant Charlie
6dd74de1294 Alice<<->>Alice: Bidirectional solid self-reference
6dd74de1295 Bob<<-->>Bob: Bidirectional dotted self-reference
6dd74de1296 Charlie<<->>Charlie: Another bidirectional solid
6dd74de1297 Alice<<-->>Alice: Another bidirectional dotted`,
6dd74de1298 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1299 );
6dd74de1300 });
6dd74de1301
6dd74de1302 it('should render comprehensive self-reference scenario - all arrow types mixed', () => {
6dd74de1303 imgSnapshotTest(
6dd74de1304 `%%{init: {'theme':'base'}}%%
6dd74de1305sequenceDiagram
6dd74de1306 autonumber
6dd74de1307 participant Alice
6dd74de1308 participant Bob
6dd74de1309 participant Charlie
6dd74de1310
6dd74de1311 Note over Alice,Charlie: Normal arrows
6dd74de1312 Alice->>Alice: Normal solid
6dd74de1313 Bob-->>Bob: Normal dotted
6dd74de1314 Charlie->Charlie: Normal open
6dd74de1315
6dd74de1316 Note over Alice,Charlie: Reverse arrows
6dd74de1317 Alice/|-Alice: Reverse solid top
6dd74de1318 Bob\\|-Bob: Reverse solid bottom
6dd74de1319
6dd74de1320 Note over Alice,Charlie: Bidirectional arrows
6dd74de1321 Charlie<<->>Charlie: Bidirectional solid
6dd74de1322 Alice<<-->>Alice: Bidirectional dotted`,
6dd74de1323 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1324 );
6dd74de1325 });
6dd74de1326
6dd74de1327 it('should render self-reference mixed with regular messages and autonumber', () => {
6dd74de1328 imgSnapshotTest(
6dd74de1329 `%%{init: {'theme':'base'}}%%
6dd74de1330sequenceDiagram
6dd74de1331 autonumber
6dd74de1332 participant Alice
6dd74de1333 participant Bob
6dd74de1334 participant Charlie
6dd74de1335
6dd74de1336 Alice->>Bob: Regular message
6dd74de1337 Bob->>Bob: Self-reference solid
6dd74de1338 Bob-->>Charlie: Regular dotted
6dd74de1339 Charlie->>Alice: Regular back
6dd74de1340 Alice<<->>Alice: Self-ref bidirectional
6dd74de1341 Alice()->>Bob: Regular with central
6dd74de1342 Bob-->>Alice: Regular dotted back`,
6dd74de1343 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1344 );
6dd74de1345 });
6dd74de1346 });
6dd74de1347 });
6dd74de1348
6dd74de1349 describe('Comprehensive Test - All Message Types and Arrow Types', () => {
6dd74de1350 it('should render all message types and arrow types in a single comprehensive test', () => {
6dd74de1351 imgSnapshotTest(
6dd74de1352 `%%{init: {'theme':'base'}}%%
6dd74de1353sequenceDiagram
6dd74de1354 autonumber
6dd74de1355 participant Alice
6dd74de1356 participant Bob
6dd74de1357 participant Charlie
6dd74de1358 participant David
6dd74de1359
6dd74de1360 Note over Alice,David: SOLID ARROWS (Filled arrowhead)
6dd74de1361 Alice->>Bob: Solid arrow (->>)
6dd74de1362 Alice->Charlie: Solid open arrow (->)
6dd74de1363 Alice-xDavid: Solid cross (-x)
6dd74de1364 Alice-)Bob: Solid point async (-)
6dd74de1365
6dd74de1366 Note over Alice,David: DOTTED ARROWS (Dashed line)
6dd74de1367 Bob-->>Alice: Dotted arrow (-->>)
6dd74de1368 Bob-->Charlie: Dotted open arrow (-->)
6dd74de1369 Bob--xDavid: Dotted cross (--x)
6dd74de1370 Bob--)Alice: Dotted point async (--)
6dd74de1371
6dd74de1372 Note over Alice,David: BIDIRECTIONAL ARROWS
6dd74de1373 Alice<<->>Bob: Bidirectional solid (<<->>)
6dd74de1374 Charlie<<-->>David: Bidirectional dotted (<<-->>)
6dd74de1375
6dd74de1376 Note over Alice,David: REVERSE ARROWS (Half arrows)
6dd74de1377 Bob/|-Alice: Solid top reverse (/|-)
6dd74de1378 Charlie\\|-Bob: Solid bottom reverse (\\|-)
6dd74de1379 David//-Alice: Stick top reverse (//)
6dd74de1380 Alice\\\\-Bob: Stick bottom reverse (\\\\-)
6dd74de1381
6dd74de1382 Note over Alice,David: DOTTED REVERSE ARROWS
6dd74de1383 Bob/|--Alice: Dotted solid top reverse (/|--)
6dd74de1384 Charlie\\|--Bob: Dotted solid bottom reverse (\\|--)
6dd74de1385 David//--Alice: Dotted stick top reverse (//--)
6dd74de1386 Alice\\\\--Bob: Dotted stick bottom reverse (\\\\--)
6dd74de1387
6dd74de1388 Note over Alice,David: CENTRAL CONNECTIONS (Circle at destination)
6dd74de1389 Alice->>()Bob: Solid with circle at destination
6dd74de1390 Alice-->>()Charlie: Dotted with circle at destination
6dd74de1391 Alice->()David: Open with circle at destination
6dd74de1392 Alice--x()Bob: Cross with circle at destination
6dd74de1393
6dd74de1394 Note over Alice,David: CENTRAL CONNECTIONS REVERSE (Circle at source)
6dd74de1395 Bob()->>Alice: Circle at source with solid
6dd74de1396 Charlie()-->>Bob: Circle at source with dotted
6dd74de1397 David()->Alice: Circle at source with open
6dd74de1398 Bob()--xAlice: Circle at source with cross
6dd74de1399
6dd74de1400 Note over Alice,David: CENTRAL CONNECTIONS DUAL (Circles at both ends)
6dd74de1401 Alice()->>()Bob: Dual circles with solid
6dd74de1402 Alice()-->>()Charlie: Dual circles with dotted
6dd74de1403 Alice()->()David: Dual circles with open
6dd74de1404 Alice()--x()Bob: Dual circles with cross
6dd74de1405
6dd74de1406 Note over Alice,David: BIDIRECTIONAL WITH CENTRAL CONNECTIONS
6dd74de1407 Alice()<<->>()Bob: Dual circles with bidirectional solid
6dd74de1408 Charlie()<<-->>()David: Dual circles with bidirectional dotted
6dd74de1409
6dd74de1410 Note over Alice,David: SELF-REFERENCES (Same participant)
6dd74de1411 Alice->>Alice: Self-reference solid
6dd74de1412 Bob-->>Bob: Self-reference dotted
6dd74de1413 Charlie->Charlie: Self-reference open
6dd74de1414 David-xDavid: Self-reference cross
6dd74de1415
6dd74de1416 Note over Alice,David: SELF-REFERENCES WITH REVERSE ARROWS
6dd74de1417 Alice/|-Alice: Self-ref reverse solid top
6dd74de1418 Bob\\|-Bob: Self-ref reverse solid bottom
6dd74de1419 Charlie//-Charlie: Self-ref reverse stick top
6dd74de1420 David\\\\-David: Self-ref reverse stick bottom
6dd74de1421
6dd74de1422 Note over Alice,David: SELF-REFERENCES BIDIRECTIONAL
6dd74de1423 Alice<<->>Alice: Self-ref bidirectional solid
6dd74de1424 Bob<<-->>Bob: Self-ref bidirectional dotted
6dd74de1425
6dd74de1426 Note over Alice,David: MIXED COMPLEX SCENARIO
6dd74de1427 Alice->>Bob: Regular message
6dd74de1428 Bob()->>()Charlie: Central dual connection
6dd74de1429 Charlie-->>David: Dotted response
6dd74de1430 David/|-Alice: Reverse arrow
6dd74de1431 Alice<<->>Bob: Bidirectional back
6dd74de1432 Bob-xCharlie: Cross message
6dd74de1433 Charlie()->>David: Central reverse
6dd74de1434 David-->>()Alice: Dotted with circle`,
6dd74de1435 { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1436 );
6dd74de1437 });
6dd74de1438 });
6dd74de1439
6dd74de1440 describe('Participant Stereotypes with Aliases', () => {
6dd74de1441 it('should render participants with stereotypes and aliases', () => {
6dd74de1442 imgSnapshotTest(
6dd74de1443 `sequenceDiagram
6dd74de1444 participant API@{ "type" : "boundary" } as Public API
6dd74de1445 participant Auth@{ "type" : "control" } as Auth Controller
6dd74de1446 participant DB@{ "type" : "database" } as User Database
6dd74de1447 participant Cache@{ "type" : "entity" } as Cache Layer
6dd74de1448 API ->> Auth: Authenticate request
6dd74de1449 Auth ->> DB: Query user
6dd74de1450 DB -->> Auth: User data
6dd74de1451 Auth ->> Cache: Store session
6dd74de1452 Cache -->> Auth: Confirmed
6dd74de1453 Auth -->> API: Token`,
6dd74de1454 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1455 );
6dd74de1456 });
6dd74de1457
6dd74de1458 it('should render actors with stereotypes and aliases', () => {
6dd74de1459 imgSnapshotTest(
6dd74de1460 `sequenceDiagram
6dd74de1461 actor U@{ "type" : "actor" } as End User
6dd74de1462 actor A@{ "type" : "boundary" } as API Gateway
6dd74de1463 actor S@{ "type" : "control" } as Service Layer
6dd74de1464 actor D@{ "type" : "database" } as Data Store
6dd74de1465 U ->> A: Send request
6dd74de1466 A ->> S: Process
6dd74de1467 S ->> D: Persist
6dd74de1468 D -->> S: Success
6dd74de1469 S -->> A: Response
6dd74de1470 A -->> U: Result`,
6dd74de1471 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1472 );
6dd74de1473 });
6dd74de1474
6dd74de1475 it('should render mixed participants and actors with stereotypes and aliases', () => {
6dd74de1476 imgSnapshotTest(
6dd74de1477 `sequenceDiagram
6dd74de1478 actor Client@{ "type" : "actor" } AS Mobile Client
6dd74de1479 participant Gateway@{ "type" : "boundary" } as API Gateway
6dd74de1480 participant OrderSvc@{ "type" : "control" } as Order Service
6dd74de1481 participant Queue@{ "type" : "queue" } as Message Queue
6dd74de1482 participant DB@{ "type" : "database" } as Order Database
6dd74de1483 participant Logs@{ "type" : "collections" } as Audit Logs
6dd74de1484 Client ->> Gateway: Place order
6dd74de1485 Gateway ->> OrderSvc: Validate order
6dd74de1486 OrderSvc ->> Queue: Queue for processing as well
6dd74de1487 OrderSvc ->> DB: Save order
6dd74de1488 OrderSvc ->> Logs: Log transaction
6dd74de1489 Queue -->> OrderSvc: Processing started AS Well
6dd74de1490 DB -->> OrderSvc: Order saved
6dd74de1491 Logs -->> OrderSvc: Logged
6dd74de1492 OrderSvc -->> Gateway: Order confirmed
6dd74de1493 Gateway -->> Client: Confirmation`,
6dd74de1494 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1495 );
6dd74de1496 });
6dd74de1497
6dd74de1498 it('should render stereotypes with aliases in boxes', () => {
6dd74de1499 imgSnapshotTest(
6dd74de1500 `sequenceDiagram
6dd74de1501 box rgb(200,220,255) Frontend Layer
6dd74de1502 actor User@{ "type" : "actor" } as End User
6dd74de1503 participant UI@{ "type" : "boundary" } as User Interface
6dd74de1504 end
6dd74de1505 box rgb(255,220,200) Backend Layer
6dd74de1506 participant API@{ "type" : "boundary" } as REST API
6dd74de1507 participant Svc@{ "type" : "control" } as Business Logic
6dd74de1508 end
6dd74de1509 box rgb(220,255,200) Data Layer
6dd74de1510 participant DB@{ "type" : "database" } as Primary DB
6dd74de1511 participant Cache@{ "type" : "entity" } as Cache Store
6dd74de1512 end
6dd74de1513 User ->> UI: Click button
6dd74de1514 UI ->> API: HTTP request
6dd74de1515 API ->> Svc: Process
6dd74de1516 Svc ->> Cache: Check cache
6dd74de1517 Cache -->> Svc: Cache miss
6dd74de1518 Svc ->> DB: Query data
6dd74de1519 DB -->> Svc: Data
6dd74de1520 Svc ->> Cache: Update cache
6dd74de1521 Svc -->> API: Response
6dd74de1522 API -->> UI: Data
6dd74de1523 UI -->> User: Display`,
6dd74de1524 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1525 );
6dd74de1526 });
6dd74de1527
6dd74de1528 it('should render stereotypes with aliases and complex interactions', () => {
6dd74de1529 imgSnapshotTest(
6dd74de1530 `sequenceDiagram
6dd74de1531 participant Web@{ "type" : "boundary" } as Web Portal
6dd74de1532 participant Auth@{ "type" : "control" } as Auth Service
6dd74de1533 participant UserDB@{ "type" : "database" } as User DB
6dd74de1534 participant Queue@{ "type" : "queue" } as Event Queue
6dd74de1535 participant Audit@{ "type" : "collections" } as Audit Trail
6dd74de1536 Web ->> Auth: Login request
6dd74de1537 activate Auth
6dd74de1538 Auth ->> UserDB: Verify credentials
6dd74de1539 activate UserDB
6dd74de1540 UserDB -->> Auth: User found
6dd74de1541 deactivate UserDB
6dd74de1542 alt Valid credentials
6dd74de1543 Auth ->> Queue: Publish login event
6dd74de1544 Auth ->> Audit: Log success
6dd74de1545 par Parallel processing
6dd74de1546 Queue -->> Auth: Event queued
6dd74de1547 and
6dd74de1548 Audit -->> Auth: Logged
6dd74de1549 end
6dd74de1550 Auth -->> Web: Success token
6dd74de1551 else Invalid credentials
6dd74de1552 Auth ->> Audit: Log failure
6dd74de1553 Audit -->> Auth: Logged
6dd74de1554 Auth --x Web: Access denied
6dd74de1555 end
6dd74de1556 deactivate Auth
6dd74de1557 Note over Web,Audit: All interactions logged`,
6dd74de1558 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1559 );
6dd74de1560 });
6dd74de1561 });
6dd74de1562
6dd74de1563 describe('Participant Inline Alias in Config', () => {
6dd74de1564 it('should render participants with inline alias in config object', () => {
6dd74de1565 imgSnapshotTest(
6dd74de1566 `sequenceDiagram
6dd74de1567 participant API@{ "type" : "boundary", "alias": "Public API" }
6dd74de1568 participant Auth@{ "type" : "control", "alias": "Auth Service" }
6dd74de1569 participant DB@{ "type" : "database", "alias": "User DB" }
6dd74de1570 API ->> Auth: Login request
6dd74de1571 Auth ->> DB: Query user
6dd74de1572 DB -->> Auth: User data
6dd74de1573 Auth -->> API: Token`,
6dd74de1574 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1575 );
6dd74de1576 });
6dd74de1577
6dd74de1578 it('should render actors with inline alias in config object', () => {
6dd74de1579 imgSnapshotTest(
6dd74de1580 `sequenceDiagram
6dd74de1581 actor U@{ "type" : "actor", "alias": "End User" }
6dd74de1582 actor G@{ "type" : "boundary", "alias": "Gateway" }
6dd74de1583 actor S@{ "type" : "control", "alias": "Service" }
6dd74de1584 U ->> G: Request
6dd74de1585 G ->> S: Process
6dd74de1586 S -->> G: Response
6dd74de1587 G -->> U: Result`,
6dd74de1588 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1589 );
6dd74de1590 });
6dd74de1591
6dd74de1592 it('should handle mixed inline and external alias syntax', () => {
6dd74de1593 imgSnapshotTest(
6dd74de1594 `sequenceDiagram
6dd74de1595 participant A@{ "type" : "boundary", "alias": "Service A" }
6dd74de1596 participant B@{ "type" : "control" } as Service B
6dd74de1597 participant C@{ "type" : "database" }
6dd74de1598 A ->> B: Request
6dd74de1599 B ->> C: Query
6dd74de1600 C -->> B: Data
6dd74de1601 B -->> A: Response`,
6dd74de1602 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1603 );
6dd74de1604 });
6dd74de1605
6dd74de1606 it('should prioritize external alias over inline alias', () => {
6dd74de1607 imgSnapshotTest(
6dd74de1608 `sequenceDiagram
6dd74de1609 participant API@{ "type" : "boundary", "alias": "Internal Name" } as External Name
6dd74de1610 participant DB@{ "type" : "database", "alias": "Internal DB" } AS External DB
6dd74de1611 API ->> DB: Query
6dd74de1612 DB -->> API: Result`,
6dd74de1613 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1614 );
6dd74de1615 });
6dd74de1616
6dd74de1617 it('should render inline alias with only alias field (no type)', () => {
6dd74de1618 imgSnapshotTest(
6dd74de1619 `sequenceDiagram
6dd74de1620 participant API@{ "alias": "Public API" }
6dd74de1621 participant Auth@{ "alias": "Auth Service" }
6dd74de1622 API ->> Auth: Request
6dd74de1623 Auth -->> API: Response`,
6dd74de1624 { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
6dd74de1625 );
6dd74de1626 });
6dd74de1627 });
6dd74de1628 });
6dd74de1629});