| 6dd74de | | | 1 | import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; |
| 6dd74de | | | 2 | |
| 6dd74de | | | 3 | describe('Flowchart v2', () => { |
| 6dd74de | | | 4 | it('1: should render a simple flowchart', () => { |
| 6dd74de | | | 5 | imgSnapshotTest( |
| 6dd74de | | | 6 | `flowchart TD |
| 6dd74de | | | 7 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 8 | B --> C{Let me think} |
| 6dd74de | | | 9 | C -->|One| D[Laptop] |
| 6dd74de | | | 10 | C -->|Two| E[iPhone] |
| 6dd74de | | | 11 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 12 | `, |
| 6dd74de | | | 13 | {} |
| 6dd74de | | | 14 | ); |
| 6dd74de | | | 15 | }); |
| 6dd74de | | | 16 | |
| 6dd74de | | | 17 | it('2: should render a simple flowchart with diagramPadding set to 0', () => { |
| 6dd74de | | | 18 | imgSnapshotTest( |
| 6dd74de | | | 19 | `flowchart TD |
| 6dd74de | | | 20 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 21 | B --> C{Let me think} |
| 6dd74de | | | 22 | %% this is a comment |
| 6dd74de | | | 23 | C -->|One| D[Laptop] |
| 6dd74de | | | 24 | C -->|Two| E[iPhone] |
| 6dd74de | | | 25 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 26 | `, |
| 6dd74de | | | 27 | { flowchart: { diagramPadding: 0 } } |
| 6dd74de | | | 28 | ); |
| 6dd74de | | | 29 | }); |
| 6dd74de | | | 30 | |
| 6dd74de | | | 31 | it('3: a link with correct arrowhead to a subgraph', () => { |
| 6dd74de | | | 32 | imgSnapshotTest( |
| 6dd74de | | | 33 | `flowchart TD |
| 6dd74de | | | 34 | P1 |
| 6dd74de | | | 35 | P1 -->P1.5 |
| 6dd74de | | | 36 | subgraph P1.5 |
| 6dd74de | | | 37 | P2 |
| 6dd74de | | | 38 | P2.5(( A )) |
| 6dd74de | | | 39 | P3 |
| 6dd74de | | | 40 | end |
| 6dd74de | | | 41 | P2 --> P4 |
| 6dd74de | | | 42 | P3 --> P6 |
| 6dd74de | | | 43 | P1.5 --> P5 |
| 6dd74de | | | 44 | `, |
| 6dd74de | | | 45 | {} |
| 6dd74de | | | 46 | ); |
| 6dd74de | | | 47 | }); |
| 6dd74de | | | 48 | |
| 6dd74de | | | 49 | it('4: Length of edges', () => { |
| 6dd74de | | | 50 | imgSnapshotTest( |
| 6dd74de | | | 51 | `flowchart TD |
| 6dd74de | | | 52 | L1 --- L2 |
| 6dd74de | | | 53 | L2 --- C |
| 6dd74de | | | 54 | M1 ---> C |
| 6dd74de | | | 55 | R1 .-> R2 |
| 6dd74de | | | 56 | R2 <.-> C |
| 6dd74de | | | 57 | C -->|Label 1| E1 |
| 6dd74de | | | 58 | C <-- Label 2 ---> E2 |
| 6dd74de | | | 59 | C ----> E3 |
| 6dd74de | | | 60 | C <-...-> E4 |
| 6dd74de | | | 61 | C ======> E5 |
| 6dd74de | | | 62 | `, |
| 6dd74de | | | 63 | {} |
| 6dd74de | | | 64 | ); |
| 6dd74de | | | 65 | }); |
| 6dd74de | | | 66 | it('5: should render escaped without html labels', () => { |
| 6dd74de | | | 67 | imgSnapshotTest( |
| 6dd74de | | | 68 | `flowchart TD |
| 6dd74de | | | 69 | a["<strong>Haiya</strong>"]---->b |
| 6dd74de | | | 70 | `, |
| 6dd74de | | | 71 | { htmlLabels: false, flowchart: { htmlLabels: false } } |
| 6dd74de | | | 72 | ); |
| 6dd74de | | | 73 | }); |
| 6dd74de | | | 74 | it('6: should render non-escaped with html labels', () => { |
| 6dd74de | | | 75 | imgSnapshotTest( |
| 6dd74de | | | 76 | `flowchart TD |
| 6dd74de | | | 77 | a["<strong>Haiya</strong>"]===>b |
| 6dd74de | | | 78 | `, |
| 6dd74de | | | 79 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 80 | ); |
| 6dd74de | | | 81 | }); |
| 6dd74de | | | 82 | it('6a: should render complex HTML in labels with sandbox security', () => { |
| 6dd74de | | | 83 | imgSnapshotTest( |
| 6dd74de | | | 84 | `flowchart TD |
| 6dd74de | | | 85 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 86 | B --> C{Let me think} |
| 6dd74de | | | 87 | C -->|One| D[Laptop] |
| 6dd74de | | | 88 | C -->|Two| E[iPhone] |
| 6dd74de | | | 89 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 90 | `, |
| 6dd74de | | | 91 | { securityLevel: 'sandbox', flowchart: { htmlLabels: true } } |
| 6dd74de | | | 92 | ); |
| 6dd74de | | | 93 | }); |
| 6dd74de | | | 94 | it('7: should render a flowchart when useMaxWidth is true (default)', () => { |
| 6dd74de | | | 95 | renderGraph( |
| 6dd74de | | | 96 | `flowchart TD |
| 6dd74de | | | 97 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 98 | B --> C{Let me think} |
| 6dd74de | | | 99 | C -->|One| D[Laptop] |
| 6dd74de | | | 100 | C -->|Two| E[iPhone] |
| 6dd74de | | | 101 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 102 | `, |
| 6dd74de | | | 103 | { flowchart: { useMaxWidth: true } } |
| 6dd74de | | | 104 | ); |
| 6dd74de | | | 105 | cy.get('svg').should((svg) => { |
| 6dd74de | | | 106 | expect(svg).to.have.attr('width', '100%'); |
| 6dd74de | | | 107 | // expect(svg).to.have.attr('height'); |
| 6dd74de | | | 108 | // use within because the absolute value can be slightly different depending on the environment ±5% |
| 6dd74de | | | 109 | // const height = parseFloat(svg.attr('height')); |
| 6dd74de | | | 110 | // expect(height).to.be.within(446 * 0.95, 446 * 1.05); |
| 6dd74de | | | 111 | const style = svg.attr('style'); |
| 6dd74de | | | 112 | expect(style).to.match(/^max-width: [\d.]+px;$/); |
| 6dd74de | | | 113 | const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); |
| 6dd74de | | | 114 | expect(maxWidthValue).to.be.within(440 * 0.95, 440 * 1.05); |
| 6dd74de | | | 115 | }); |
| 6dd74de | | | 116 | }); |
| 6dd74de | | | 117 | it('8: should render a flowchart when useMaxWidth is false', () => { |
| 6dd74de | | | 118 | renderGraph( |
| 6dd74de | | | 119 | `flowchart TD |
| 6dd74de | | | 120 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 121 | B --> C{Let me think} |
| 6dd74de | | | 122 | C -->|One| D[Laptop] |
| 6dd74de | | | 123 | C -->|Two| E[iPhone] |
| 6dd74de | | | 124 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 125 | `, |
| 6dd74de | | | 126 | { flowchart: { useMaxWidth: false } } |
| 6dd74de | | | 127 | ); |
| 6dd74de | | | 128 | cy.get('svg').should((svg) => { |
| 6dd74de | | | 129 | // const height = parseFloat(svg.attr('height')); |
| 6dd74de | | | 130 | const width = parseFloat(svg.attr('width')); |
| 6dd74de | | | 131 | // use within because the absolute value can be slightly different depending on the environment ±5% |
| 6dd74de | | | 132 | // expect(height).to.be.within(446 * 0.95, 446 * 1.05); |
| 6dd74de | | | 133 | expect(width).to.be.within(440 * 0.95, 440 * 1.05); |
| 6dd74de | | | 134 | expect(svg).to.not.have.attr('style'); |
| 6dd74de | | | 135 | }); |
| 6dd74de | | | 136 | }); |
| 6dd74de | | | 137 | |
| 6dd74de | | | 138 | it('V2 - 16: Render Stadium shape', () => { |
| 6dd74de | | | 139 | imgSnapshotTest( |
| 6dd74de | | | 140 | ` flowchart TD |
| 6dd74de | | | 141 | A([stadium shape test]) |
| 6dd74de | | | 142 | A -->|Get money| B([Go shopping]) |
| 6dd74de | | | 143 | B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]) |
| 6dd74de | | | 144 | C -->|One| D([Laptop]) |
| 6dd74de | | | 145 | C -->|Two| E([iPhone]) |
| 6dd74de | | | 146 | C -->|Three| F([Car<br/>wroom wroom]) |
| 6dd74de | | | 147 | click A "index.html#link-clicked" "link test" |
| 6dd74de | | | 148 | click B testClick "click test" |
| 6dd74de | | | 149 | classDef someclass fill:#f96; |
| 6dd74de | | | 150 | class A someclass; |
| 6dd74de | | | 151 | class C someclass; |
| 6dd74de | | | 152 | `, |
| 6dd74de | | | 153 | { flowchart: { htmlLabels: false }, fontFamily: 'courier' } |
| 6dd74de | | | 154 | ); |
| 6dd74de | | | 155 | }); |
| 6dd74de | | | 156 | |
| 6dd74de | | | 157 | it('50: handle nested subgraphs in reverse order', () => { |
| 6dd74de | | | 158 | imgSnapshotTest( |
| 6dd74de | | | 159 | `flowchart LR |
| 6dd74de | | | 160 | a -->b |
| 6dd74de | | | 161 | subgraph A |
| 6dd74de | | | 162 | B |
| 6dd74de | | | 163 | end |
| 6dd74de | | | 164 | subgraph B |
| 6dd74de | | | 165 | b |
| 6dd74de | | | 166 | end |
| 6dd74de | | | 167 | `, |
| 6dd74de | | | 168 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 169 | ); |
| 6dd74de | | | 170 | }); |
| 6dd74de | | | 171 | |
| 6dd74de | | | 172 | it('51: handle nested subgraphs in reverse order', () => { |
| 6dd74de | | | 173 | imgSnapshotTest( |
| 6dd74de | | | 174 | `flowchart LR |
| 6dd74de | | | 175 | a -->b |
| 6dd74de | | | 176 | subgraph A |
| 6dd74de | | | 177 | B |
| 6dd74de | | | 178 | end |
| 6dd74de | | | 179 | subgraph B |
| 6dd74de | | | 180 | b |
| 6dd74de | | | 181 | end |
| 6dd74de | | | 182 | `, |
| 6dd74de | | | 183 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 184 | ); |
| 6dd74de | | | 185 | }); |
| 6dd74de | | | 186 | |
| 6dd74de | | | 187 | it('52: handle nested subgraphs in several levels.', () => { |
| 6dd74de | | | 188 | imgSnapshotTest( |
| 6dd74de | | | 189 | `flowchart TB |
| 6dd74de | | | 190 | b-->B |
| 6dd74de | | | 191 | a-->c |
| 6dd74de | | | 192 | subgraph O |
| 6dd74de | | | 193 | A |
| 6dd74de | | | 194 | end |
| 6dd74de | | | 195 | subgraph B |
| 6dd74de | | | 196 | c |
| 6dd74de | | | 197 | end |
| 6dd74de | | | 198 | subgraph A |
| 6dd74de | | | 199 | a |
| 6dd74de | | | 200 | b |
| 6dd74de | | | 201 | B |
| 6dd74de | | | 202 | end |
| 6dd74de | | | 203 | `, |
| 6dd74de | | | 204 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 205 | ); |
| 6dd74de | | | 206 | }); |
| 6dd74de | | | 207 | |
| 6dd74de | | | 208 | it('53: handle nested subgraphs with edges in and out', () => { |
| 6dd74de | | | 209 | imgSnapshotTest( |
| 6dd74de | | | 210 | `flowchart TB |
| 6dd74de | | | 211 | internet |
| 6dd74de | | | 212 | nat |
| 6dd74de | | | 213 | router |
| 6dd74de | | | 214 | lb1 |
| 6dd74de | | | 215 | lb2 |
| 6dd74de | | | 216 | compute1 |
| 6dd74de | | | 217 | compute2 |
| 6dd74de | | | 218 | subgraph project |
| 6dd74de | | | 219 | router |
| 6dd74de | | | 220 | nat |
| 6dd74de | | | 221 | subgraph subnet1 |
| 6dd74de | | | 222 | compute1 |
| 6dd74de | | | 223 | lb1 |
| 6dd74de | | | 224 | end |
| 6dd74de | | | 225 | subgraph subnet2 |
| 6dd74de | | | 226 | compute2 |
| 6dd74de | | | 227 | lb2 |
| 6dd74de | | | 228 | end |
| 6dd74de | | | 229 | end |
| 6dd74de | | | 230 | internet --> router |
| 6dd74de | | | 231 | router --> subnet1 & subnet2 |
| 6dd74de | | | 232 | subnet1 & subnet2 --> nat --> internet |
| 6dd74de | | | 233 | `, |
| 6dd74de | | | 234 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 235 | ); |
| 6dd74de | | | 236 | }); |
| 6dd74de | | | 237 | |
| 6dd74de | | | 238 | it('54: handle nested subgraphs with outgoing links', () => { |
| 6dd74de | | | 239 | imgSnapshotTest( |
| 6dd74de | | | 240 | `flowchart TD |
| 6dd74de | | | 241 | subgraph main |
| 6dd74de | | | 242 | subgraph subcontainer |
| 6dd74de | | | 243 | subcontainer-child |
| 6dd74de | | | 244 | end |
| 6dd74de | | | 245 | subcontainer-child--> subcontainer-sibling |
| 6dd74de | | | 246 | end |
| 6dd74de | | | 247 | `, |
| 6dd74de | | | 248 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 249 | ); |
| 6dd74de | | | 250 | }); |
| 6dd74de | | | 251 | |
| 6dd74de | | | 252 | it('55: handle nested subgraphs with outgoing links 2', () => { |
| 6dd74de | | | 253 | imgSnapshotTest( |
| 6dd74de | | | 254 | `flowchart TD |
| 6dd74de | | | 255 | |
| 6dd74de | | | 256 | subgraph one[One] |
| 6dd74de | | | 257 | subgraph sub_one[Sub One] |
| 6dd74de | | | 258 | _sub_one |
| 6dd74de | | | 259 | end |
| 6dd74de | | | 260 | subgraph sub_two[Sub Two] |
| 6dd74de | | | 261 | _sub_two |
| 6dd74de | | | 262 | end |
| 6dd74de | | | 263 | _one |
| 6dd74de | | | 264 | end |
| 6dd74de | | | 265 | |
| 6dd74de | | | 266 | %% here, either the first or the second one |
| 6dd74de | | | 267 | sub_one --> sub_two |
| 6dd74de | | | 268 | _one --> b |
| 6dd74de | | | 269 | `, |
| 6dd74de | | | 270 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 271 | ); |
| 6dd74de | | | 272 | }); |
| 6dd74de | | | 273 | |
| 6dd74de | | | 274 | it('56: handle nested subgraphs with outgoing links 3', () => { |
| 6dd74de | | | 275 | imgSnapshotTest( |
| 6dd74de | | | 276 | `flowchart TB |
| 6dd74de | | | 277 | subgraph container_Beta |
| 6dd74de | | | 278 | process_C-->Process_D |
| 6dd74de | | | 279 | end |
| 6dd74de | | | 280 | subgraph container_Alpha |
| 6dd74de | | | 281 | process_A-->process_B |
| 6dd74de | | | 282 | process_A-->|messages|process_C |
| 6dd74de | | | 283 | end |
| 6dd74de | | | 284 | process_B-->|via_AWSBatch|container_Beta |
| 6dd74de | | | 285 | `, |
| 6dd74de | | | 286 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 287 | ); |
| 6dd74de | | | 288 | }); |
| 6dd74de | | | 289 | it('57: handle nested subgraphs with outgoing links 4', () => { |
| 6dd74de | | | 290 | imgSnapshotTest( |
| 6dd74de | | | 291 | `flowchart LR |
| 6dd74de | | | 292 | subgraph A |
| 6dd74de | | | 293 | a -->b |
| 6dd74de | | | 294 | end |
| 6dd74de | | | 295 | subgraph B |
| 6dd74de | | | 296 | b |
| 6dd74de | | | 297 | end |
| 6dd74de | | | 298 | `, |
| 6dd74de | | | 299 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 300 | ); |
| 6dd74de | | | 301 | }); |
| 6dd74de | | | 302 | |
| 6dd74de | | | 303 | it('57: handle nested subgraphs with outgoing links 2', () => { |
| 6dd74de | | | 304 | imgSnapshotTest( |
| 6dd74de | | | 305 | `flowchart TB |
| 6dd74de | | | 306 | c1-->a2 |
| 6dd74de | | | 307 | subgraph one |
| 6dd74de | | | 308 | a1-->a2 |
| 6dd74de | | | 309 | end |
| 6dd74de | | | 310 | subgraph two |
| 6dd74de | | | 311 | b1-->b2 |
| 6dd74de | | | 312 | end |
| 6dd74de | | | 313 | subgraph three |
| 6dd74de | | | 314 | c1-->c2 |
| 6dd74de | | | 315 | end |
| 6dd74de | | | 316 | one --> two |
| 6dd74de | | | 317 | three --> two |
| 6dd74de | | | 318 | two --> c2 |
| 6dd74de | | | 319 | `, |
| 6dd74de | | | 320 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 321 | ); |
| 6dd74de | | | 322 | }); |
| 6dd74de | | | 323 | it('57.x: handle nested subgraphs with outgoing links 5', () => { |
| 6dd74de | | | 324 | imgSnapshotTest( |
| 6dd74de | | | 325 | `%% this does not produce the desired result |
| 6dd74de | | | 326 | flowchart TB |
| 6dd74de | | | 327 | subgraph container_Beta |
| 6dd74de | | | 328 | process_C-->Process_D |
| 6dd74de | | | 329 | end |
| 6dd74de | | | 330 | subgraph container_Alpha |
| 6dd74de | | | 331 | process_A-->process_B |
| 6dd74de | | | 332 | process_B-->|via_AWSBatch|container_Beta |
| 6dd74de | | | 333 | process_A-->|messages|process_C |
| 6dd74de | | | 334 | end |
| 6dd74de | | | 335 | `, |
| 6dd74de | | | 336 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 337 | ); |
| 6dd74de | | | 338 | }); |
| 6dd74de | | | 339 | it('58: handle styling with style expressions', () => { |
| 6dd74de | | | 340 | imgSnapshotTest( |
| 6dd74de | | | 341 | ` |
| 6dd74de | | | 342 | flowchart LR |
| 6dd74de | | | 343 | id1(Start)-->id2(Stop) |
| 6dd74de | | | 344 | style id1 fill:#f9f,stroke:#333,stroke-width:4px |
| 6dd74de | | | 345 | style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 |
| 6dd74de | | | 346 | `, |
| 6dd74de | | | 347 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 348 | ); |
| 6dd74de | | | 349 | }); |
| 6dd74de | | | 350 | it('59: handle styling of subgraphs and links', () => { |
| 6dd74de | | | 351 | imgSnapshotTest( |
| 6dd74de | | | 352 | ` |
| 6dd74de | | | 353 | flowchart TD |
| 6dd74de | | | 354 | A[Christmas] ==> D |
| 6dd74de | | | 355 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 356 | A[Christmas] ==> C |
| 6dd74de | | | 357 | subgraph T ["Test"] |
| 6dd74de | | | 358 | A |
| 6dd74de | | | 359 | B |
| 6dd74de | | | 360 | C |
| 6dd74de | | | 361 | end |
| 6dd74de | | | 362 | |
| 6dd74de | | | 363 | classDef Test fill:#F84E68,stroke:#333,color:white; |
| 6dd74de | | | 364 | class A,T Test |
| 6dd74de | | | 365 | classDef TestSub fill:green; |
| 6dd74de | | | 366 | class T TestSub |
| 6dd74de | | | 367 | linkStyle 0,1 color:orange, stroke: orange; |
| 6dd74de | | | 368 | `, |
| 6dd74de | | | 369 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 370 | ); |
| 6dd74de | | | 371 | }); |
| 6dd74de | | | 372 | it('60: handle styling for all node shapes - v2', () => { |
| 6dd74de | | | 373 | imgSnapshotTest( |
| 6dd74de | | | 374 | ` |
| 6dd74de | | | 375 | flowchart LR |
| 6dd74de | | | 376 | A[red text] -->|default style| B(blue text) |
| 6dd74de | | | 377 | C([red text]) -->|default style| D[[blue text]] |
| 6dd74de | | | 378 | E[(red text)] -->|default style| F((blue text)) |
| 6dd74de | | | 379 | G>red text] -->|default style| H{blue text} |
| 6dd74de | | | 380 | I{{red text}} -->|default style| J[/blue text/] |
| 6dd74de | | | 381 | K[\\ red text\\] -->|default style| L[/blue text\\] |
| 6dd74de | | | 382 | M[\\ red text/] -->|default style| N[blue text]; |
| 6dd74de | | | 383 | O(((red text))) -->|default style| P(((blue text))); |
| 6dd74de | | | 384 | linkStyle default color:Sienna; |
| 6dd74de | | | 385 | style A stroke:#ff0000,fill:#ffcccc,color:#ff0000; |
| 6dd74de | | | 386 | style B stroke:#0000ff,fill:#ccccff,color:#0000ff; |
| 6dd74de | | | 387 | style C stroke:#ff0000,fill:#ffcccc,color:#ff0000; |
| 6dd74de | | | 388 | style D stroke:#0000ff,fill:#ccccff,color:#0000ff; |
| 6dd74de | | | 389 | style E stroke:#ff0000,fill:#ffcccc,color:#ff0000; |
| 6dd74de | | | 390 | style F stroke:#0000ff,fill:#ccccff,color:#0000ff; |
| 6dd74de | | | 391 | style G stroke:#ff0000,fill:#ffcccc,color:#ff0000; |
| 6dd74de | | | 392 | style H stroke:#0000ff,fill:#ccccff,color:#0000ff; |
| 6dd74de | | | 393 | style I stroke:#ff0000,fill:#ffcccc,color:#ff0000; |
| 6dd74de | | | 394 | style J stroke:#0000ff,fill:#ccccff,color:#0000ff; |
| 6dd74de | | | 395 | style K stroke:#ff0000,fill:#ffcccc,color:#ff0000; |
| 6dd74de | | | 396 | style L stroke:#0000ff,fill:#ccccff,color:#0000ff; |
| 6dd74de | | | 397 | style M stroke:#ff0000,fill:#ffcccc,color:#ff0000; |
| 6dd74de | | | 398 | style N stroke:#0000ff,fill:#ccccff,color:#0000ff; |
| 6dd74de | | | 399 | style O stroke:#ff0000,fill:#ffcccc,color:#ff0000; |
| 6dd74de | | | 400 | style P stroke:#0000ff,fill:#ccccff,color:#0000ff; |
| 6dd74de | | | 401 | `, |
| 6dd74de | | | 402 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose', logLevel: 2 } |
| 6dd74de | | | 403 | ); |
| 6dd74de | | | 404 | }); |
| 6dd74de | | | 405 | it('61: fontawesome icons in edge labels', () => { |
| 6dd74de | | | 406 | imgSnapshotTest( |
| 6dd74de | | | 407 | ` |
| 6dd74de | | | 408 | flowchart TD |
| 6dd74de | | | 409 | C -->|fa:fa-car Car| F[fa:fa-car Car] |
| 6dd74de | | | 410 | `, |
| 6dd74de | | | 411 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 412 | ); |
| 6dd74de | | | 413 | }); |
| 6dd74de | | | 414 | it('62: should render styled subgraphs', () => { |
| 6dd74de | | | 415 | imgSnapshotTest( |
| 6dd74de | | | 416 | ` |
| 6dd74de | | | 417 | flowchart TB |
| 6dd74de | | | 418 | A |
| 6dd74de | | | 419 | B |
| 6dd74de | | | 420 | subgraph foo[Foo SubGraph] |
| 6dd74de | | | 421 | C |
| 6dd74de | | | 422 | D |
| 6dd74de | | | 423 | end |
| 6dd74de | | | 424 | subgraph bar[Bar SubGraph] |
| 6dd74de | | | 425 | E |
| 6dd74de | | | 426 | F |
| 6dd74de | | | 427 | end |
| 6dd74de | | | 428 | G |
| 6dd74de | | | 429 | |
| 6dd74de | | | 430 | A-->B |
| 6dd74de | | | 431 | B-->C |
| 6dd74de | | | 432 | C-->D |
| 6dd74de | | | 433 | B-->D |
| 6dd74de | | | 434 | D-->E |
| 6dd74de | | | 435 | E-->A |
| 6dd74de | | | 436 | E-->F |
| 6dd74de | | | 437 | F-->D |
| 6dd74de | | | 438 | F-->G |
| 6dd74de | | | 439 | B-->G |
| 6dd74de | | | 440 | G-->D |
| 6dd74de | | | 441 | |
| 6dd74de | | | 442 | style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred |
| 6dd74de | | | 443 | style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue |
| 6dd74de | | | 444 | `, |
| 6dd74de | | | 445 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 446 | ); |
| 6dd74de | | | 447 | }); |
| 6dd74de | | | 448 | it('63: title on subgraphs should be themeable', () => { |
| 6dd74de | | | 449 | imgSnapshotTest( |
| 6dd74de | | | 450 | ` |
| 6dd74de | | | 451 | %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%% |
| 6dd74de | | | 452 | flowchart LR |
| 6dd74de | | | 453 | subgraph A |
| 6dd74de | | | 454 | a --> b |
| 6dd74de | | | 455 | end |
| 6dd74de | | | 456 | subgraph B |
| 6dd74de | | | 457 | i -->f |
| 6dd74de | | | 458 | end |
| 6dd74de | | | 459 | A --> B |
| 6dd74de | | | 460 | `, |
| 6dd74de | | | 461 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 462 | ); |
| 6dd74de | | | 463 | }); |
| 6dd74de | | | 464 | it('65-1: text-color from classes', () => { |
| 6dd74de | | | 465 | imgSnapshotTest( |
| 6dd74de | | | 466 | ` |
| 6dd74de | | | 467 | flowchart LR |
| 6dd74de | | | 468 | classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff |
| 6dd74de | | | 469 | Lorem --> Ipsum --> Dolor |
| 6dd74de | | | 470 | class Lorem,Dolor dark |
| 6dd74de | | | 471 | `, |
| 6dd74de | | | 472 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 473 | ); |
| 6dd74de | | | 474 | }); |
| 6dd74de | | | 475 | it('65-2: bold text from classes', () => { |
| 6dd74de | | | 476 | imgSnapshotTest( |
| 6dd74de | | | 477 | ` |
| 6dd74de | | | 478 | flowchart |
| 6dd74de | | | 479 | classDef cat fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold; |
| 6dd74de | | | 480 | CS(A long bold text to be viewed):::cat |
| 6dd74de | | | 481 | `, |
| 6dd74de | | | 482 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 483 | ); |
| 6dd74de | | | 484 | }); |
| 6dd74de | | | 485 | it('65-3: bigger font from classes', () => { |
| 6dd74de | | | 486 | imgSnapshotTest( |
| 6dd74de | | | 487 | ` |
| 6dd74de | | | 488 | flowchart |
| 6dd74de | | | 489 | Node1:::class1 --> Node2:::class2 |
| 6dd74de | | | 490 | Node1:::class1 --> Node3:::class2 |
| 6dd74de | | | 491 | Node3 --> Node4((I am a circle)):::larger |
| 6dd74de | | | 492 | |
| 6dd74de | | | 493 | classDef class1 fill:lightblue |
| 6dd74de | | | 494 | classDef class2 fill:pink |
| 6dd74de | | | 495 | classDef larger font-size:30px,fill:yellow |
| 6dd74de | | | 496 | `, |
| 6dd74de | | | 497 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 498 | ); |
| 6dd74de | | | 499 | }); |
| 6dd74de | | | 500 | it('66: More nested subgraph cases (TB)', () => { |
| 6dd74de | | | 501 | imgSnapshotTest( |
| 6dd74de | | | 502 | ` |
| 6dd74de | | | 503 | flowchart TB |
| 6dd74de | | | 504 | subgraph two |
| 6dd74de | | | 505 | b1 |
| 6dd74de | | | 506 | end |
| 6dd74de | | | 507 | subgraph three |
| 6dd74de | | | 508 | c2 |
| 6dd74de | | | 509 | end |
| 6dd74de | | | 510 | |
| 6dd74de | | | 511 | three --> two |
| 6dd74de | | | 512 | two --> c2 |
| 6dd74de | | | 513 | |
| 6dd74de | | | 514 | `, |
| 6dd74de | | | 515 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 516 | ); |
| 6dd74de | | | 517 | }); |
| 6dd74de | | | 518 | it('67: More nested subgraph cases (RL)', () => { |
| 6dd74de | | | 519 | imgSnapshotTest( |
| 6dd74de | | | 520 | ` |
| 6dd74de | | | 521 | flowchart RL |
| 6dd74de | | | 522 | subgraph two |
| 6dd74de | | | 523 | b1 |
| 6dd74de | | | 524 | end |
| 6dd74de | | | 525 | subgraph three |
| 6dd74de | | | 526 | c2 |
| 6dd74de | | | 527 | end |
| 6dd74de | | | 528 | |
| 6dd74de | | | 529 | three --> two |
| 6dd74de | | | 530 | two --> c2 |
| 6dd74de | | | 531 | |
| 6dd74de | | | 532 | `, |
| 6dd74de | | | 533 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 534 | ); |
| 6dd74de | | | 535 | }); |
| 6dd74de | | | 536 | it('68: More nested subgraph cases (BT)', () => { |
| 6dd74de | | | 537 | imgSnapshotTest( |
| 6dd74de | | | 538 | ` |
| 6dd74de | | | 539 | flowchart BT |
| 6dd74de | | | 540 | subgraph two |
| 6dd74de | | | 541 | b1 |
| 6dd74de | | | 542 | end |
| 6dd74de | | | 543 | subgraph three |
| 6dd74de | | | 544 | c2 |
| 6dd74de | | | 545 | end |
| 6dd74de | | | 546 | |
| 6dd74de | | | 547 | three --> two |
| 6dd74de | | | 548 | two --> c2 |
| 6dd74de | | | 549 | |
| 6dd74de | | | 550 | `, |
| 6dd74de | | | 551 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 552 | ); |
| 6dd74de | | | 553 | }); |
| 6dd74de | | | 554 | it('69: More nested subgraph cases (LR)', () => { |
| 6dd74de | | | 555 | imgSnapshotTest( |
| 6dd74de | | | 556 | ` |
| 6dd74de | | | 557 | flowchart LR |
| 6dd74de | | | 558 | subgraph two |
| 6dd74de | | | 559 | b1 |
| 6dd74de | | | 560 | end |
| 6dd74de | | | 561 | subgraph three |
| 6dd74de | | | 562 | c2 |
| 6dd74de | | | 563 | end |
| 6dd74de | | | 564 | |
| 6dd74de | | | 565 | three --> two |
| 6dd74de | | | 566 | two --> c2 |
| 6dd74de | | | 567 | |
| 6dd74de | | | 568 | `, |
| 6dd74de | | | 569 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 570 | ); |
| 6dd74de | | | 571 | }); |
| 6dd74de | | | 572 | it('70: Handle nested subgraph cases (TB) link out and link between subgraphs', () => { |
| 6dd74de | | | 573 | imgSnapshotTest( |
| 6dd74de | | | 574 | ` |
| 6dd74de | | | 575 | flowchart TB |
| 6dd74de | | | 576 | subgraph S1 |
| 6dd74de | | | 577 | sub1 -->sub2 |
| 6dd74de | | | 578 | end |
| 6dd74de | | | 579 | subgraph S2 |
| 6dd74de | | | 580 | sub4 |
| 6dd74de | | | 581 | end |
| 6dd74de | | | 582 | S1 --> S2 |
| 6dd74de | | | 583 | sub1 --> sub4 |
| 6dd74de | | | 584 | `, |
| 6dd74de | | | 585 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 586 | ); |
| 6dd74de | | | 587 | }); |
| 6dd74de | | | 588 | it('71: Handle nested subgraph cases (RL) link out and link between subgraphs', () => { |
| 6dd74de | | | 589 | imgSnapshotTest( |
| 6dd74de | | | 590 | ` |
| 6dd74de | | | 591 | flowchart RL |
| 6dd74de | | | 592 | subgraph S1 |
| 6dd74de | | | 593 | sub1 -->sub2 |
| 6dd74de | | | 594 | end |
| 6dd74de | | | 595 | subgraph S2 |
| 6dd74de | | | 596 | sub4 |
| 6dd74de | | | 597 | end |
| 6dd74de | | | 598 | S1 --> S2 |
| 6dd74de | | | 599 | sub1 --> sub4 |
| 6dd74de | | | 600 | `, |
| 6dd74de | | | 601 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 602 | ); |
| 6dd74de | | | 603 | }); |
| 6dd74de | | | 604 | it('72: Handle nested subgraph cases (BT) link out and link between subgraphs', () => { |
| 6dd74de | | | 605 | imgSnapshotTest( |
| 6dd74de | | | 606 | ` |
| 6dd74de | | | 607 | flowchart BT |
| 6dd74de | | | 608 | subgraph S1 |
| 6dd74de | | | 609 | sub1 -->sub2 |
| 6dd74de | | | 610 | end |
| 6dd74de | | | 611 | subgraph S2 |
| 6dd74de | | | 612 | sub4 |
| 6dd74de | | | 613 | end |
| 6dd74de | | | 614 | S1 --> S2 |
| 6dd74de | | | 615 | sub1 --> sub4 |
| 6dd74de | | | 616 | `, |
| 6dd74de | | | 617 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 618 | ); |
| 6dd74de | | | 619 | }); |
| 6dd74de | | | 620 | it('74: Handle nested subgraph cases (RL) link out and link between subgraphs', () => { |
| 6dd74de | | | 621 | imgSnapshotTest( |
| 6dd74de | | | 622 | ` |
| 6dd74de | | | 623 | flowchart RL |
| 6dd74de | | | 624 | subgraph S1 |
| 6dd74de | | | 625 | sub1 -->sub2 |
| 6dd74de | | | 626 | end |
| 6dd74de | | | 627 | subgraph S2 |
| 6dd74de | | | 628 | sub4 |
| 6dd74de | | | 629 | end |
| 6dd74de | | | 630 | S1 --> S2 |
| 6dd74de | | | 631 | sub1 --> sub4 |
| 6dd74de | | | 632 | `, |
| 6dd74de | | | 633 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 634 | ); |
| 6dd74de | | | 635 | }); |
| 6dd74de | | | 636 | it('74: Handle labels for multiple edges from and to the same couple of nodes', () => { |
| 6dd74de | | | 637 | imgSnapshotTest( |
| 6dd74de | | | 638 | ` |
| 6dd74de | | | 639 | flowchart RL |
| 6dd74de | | | 640 | subgraph one |
| 6dd74de | | | 641 | a1 -- l1 --> a2 |
| 6dd74de | | | 642 | a1 -- l2 --> a2 |
| 6dd74de | | | 643 | end |
| 6dd74de | | | 644 | `, |
| 6dd74de | | | 645 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 646 | ); |
| 6dd74de | | | 647 | }); |
| 6dd74de | | | 648 | |
| 6dd74de | | | 649 | it('76: handle unicode encoded character with HTML labels true', () => { |
| 6dd74de | | | 650 | imgSnapshotTest( |
| 6dd74de | | | 651 | `flowchart TB |
| 6dd74de | | | 652 | a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}} |
| 6dd74de | | | 653 | --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}} |
| 6dd74de | | | 654 | `, |
| 6dd74de | | | 655 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 656 | ); |
| 6dd74de | | | 657 | }); |
| 6dd74de | | | 658 | |
| 6dd74de | | | 659 | it('2050: handling of different rendering direction in subgraphs', () => { |
| 6dd74de | | | 660 | imgSnapshotTest( |
| 6dd74de | | | 661 | ` |
| 6dd74de | | | 662 | flowchart LR |
| 6dd74de | | | 663 | |
| 6dd74de | | | 664 | subgraph TOP |
| 6dd74de | | | 665 | direction TB |
| 6dd74de | | | 666 | subgraph B1 |
| 6dd74de | | | 667 | direction RL |
| 6dd74de | | | 668 | i1 -->f1 |
| 6dd74de | | | 669 | end |
| 6dd74de | | | 670 | subgraph B2 |
| 6dd74de | | | 671 | direction BT |
| 6dd74de | | | 672 | i2 -->f2 |
| 6dd74de | | | 673 | end |
| 6dd74de | | | 674 | end |
| 6dd74de | | | 675 | A --> TOP --> B |
| 6dd74de | | | 676 | B1 --> B2 |
| 6dd74de | | | 677 | `, |
| 6dd74de | | | 678 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 679 | ); |
| 6dd74de | | | 680 | }); |
| 6dd74de | | | 681 | |
| 6dd74de | | | 682 | it('2388: handling default in the node name', () => { |
| 6dd74de | | | 683 | imgSnapshotTest( |
| 6dd74de | | | 684 | ` |
| 6dd74de | | | 685 | flowchart LR |
| 6dd74de | | | 686 | default-index.js --> dot.template.js |
| 6dd74de | | | 687 | index.js --> module-utl.js |
| 6dd74de | | | 688 | `, |
| 6dd74de | | | 689 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 690 | ); |
| 6dd74de | | | 691 | }); |
| 6dd74de | | | 692 | it('2824: Clipping of edges', () => { |
| 6dd74de | | | 693 | imgSnapshotTest( |
| 6dd74de | | | 694 | ` |
| 6dd74de | | | 695 | flowchart TD |
| 6dd74de | | | 696 | A --> B |
| 6dd74de | | | 697 | A --> C |
| 6dd74de | | | 698 | B --> C |
| 6dd74de | | | 699 | `, |
| 6dd74de | | | 700 | { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } |
| 6dd74de | | | 701 | ); |
| 6dd74de | | | 702 | }); |
| 6dd74de | | | 703 | it('1433: should render a titled flowchart with titleTopMargin set to 0', () => { |
| 6dd74de | | | 704 | imgSnapshotTest( |
| 6dd74de | | | 705 | `--- |
| 6dd74de | | | 706 | title: Simple flowchart |
| 6dd74de | | | 707 | --- |
| 6dd74de | | | 708 | flowchart TD |
| 6dd74de | | | 709 | A --> B |
| 6dd74de | | | 710 | `, |
| 6dd74de | | | 711 | { flowchart: { titleTopMargin: 10 } } |
| 6dd74de | | | 712 | ); |
| 6dd74de | | | 713 | }); |
| 6dd74de | | | 714 | it('3192: It should be possible to render flowcharts with invisible edges', () => { |
| 6dd74de | | | 715 | imgSnapshotTest( |
| 6dd74de | | | 716 | `--- |
| 6dd74de | | | 717 | title: Simple flowchart with invisible edges |
| 6dd74de | | | 718 | --- |
| 6dd74de | | | 719 | flowchart TD |
| 6dd74de | | | 720 | A ~~~ B |
| 6dd74de | | | 721 | `, |
| 6dd74de | | | 722 | { flowchart: { titleTopMargin: 10 } } |
| 6dd74de | | | 723 | ); |
| 6dd74de | | | 724 | }); |
| 6dd74de | | | 725 | it('4023: Should render html labels with images and-or text correctly', () => { |
| 6dd74de | | | 726 | imgSnapshotTest( |
| 6dd74de | | | 727 | `flowchart TD |
| 6dd74de | | | 728 | B[<img src='https://mermaid.js.org/mermaid-logo.svg'>] |
| 6dd74de | | | 729 | B-->C[<img src="https://mermaid.js.org/mermaid-logo.svg"> more text <img src='https://mermaid.js.org/mermaid-logo.svg'>] |
| 6dd74de | | | 730 | B-->D(<img src='https://mermaid.js.org/mermaid-logo.svg'> some text) |
| 6dd74de | | | 731 | B-->E(plain)`, |
| 6dd74de | | | 732 | {} |
| 6dd74de | | | 733 | ); |
| 6dd74de | | | 734 | }); |
| 6dd74de | | | 735 | |
| 6dd74de | | | 736 | it('4439: Should render the graph even if some images are missing', () => { |
| 6dd74de | | | 737 | imgSnapshotTest( |
| 6dd74de | | | 738 | `flowchart TD |
| 6dd74de | | | 739 | B[<img>] |
| 6dd74de | | | 740 | B-->C[<img>]`, |
| 6dd74de | | | 741 | {} |
| 6dd74de | | | 742 | ); |
| 6dd74de | | | 743 | }); |
| 6dd74de | | | 744 | |
| 6dd74de | | | 745 | it('5064: Should render when subgraph child has links to outside node and subgraph', () => { |
| 6dd74de | | | 746 | imgSnapshotTest( |
| 6dd74de | | | 747 | `flowchart TB |
| 6dd74de | | | 748 | Out --> In |
| 6dd74de | | | 749 | subgraph Sub |
| 6dd74de | | | 750 | In |
| 6dd74de | | | 751 | end |
| 6dd74de | | | 752 | Sub --> In` |
| 6dd74de | | | 753 | ); |
| 6dd74de | | | 754 | }); |
| 6dd74de | | | 755 | |
| 6dd74de | | | 756 | it('5059: Should render when subgraph contains only subgraphs, has link to outside and itself is part of a link', () => { |
| 6dd74de | | | 757 | imgSnapshotTest( |
| 6dd74de | | | 758 | `flowchart |
| 6dd74de | | | 759 | |
| 6dd74de | | | 760 | subgraph Main |
| 6dd74de | | | 761 | subgraph Child1 |
| 6dd74de | | | 762 | Node1 |
| 6dd74de | | | 763 | Node2 |
| 6dd74de | | | 764 | end |
| 6dd74de | | | 765 | subgraph Child2 |
| 6dd74de | | | 766 | Node3 |
| 6dd74de | | | 767 | Node4 |
| 6dd74de | | | 768 | end |
| 6dd74de | | | 769 | end |
| 6dd74de | | | 770 | Main --> Out1 |
| 6dd74de | | | 771 | Child2 --> Out2` |
| 6dd74de | | | 772 | ); |
| 6dd74de | | | 773 | }); |
| 6dd74de | | | 774 | |
| 6dd74de | | | 775 | it('3258: Should render subgraphs with main graph nodeSpacing and rankSpacing', () => { |
| 6dd74de | | | 776 | imgSnapshotTest( |
| 6dd74de | | | 777 | `--- |
| 6dd74de | | | 778 | title: Subgraph nodeSpacing and rankSpacing example |
| 6dd74de | | | 779 | --- |
| 6dd74de | | | 780 | flowchart LR |
| 6dd74de | | | 781 | X --> Y |
| 6dd74de | | | 782 | subgraph X |
| 6dd74de | | | 783 | direction LR |
| 6dd74de | | | 784 | A |
| 6dd74de | | | 785 | C |
| 6dd74de | | | 786 | end |
| 6dd74de | | | 787 | subgraph Y |
| 6dd74de | | | 788 | B |
| 6dd74de | | | 789 | D |
| 6dd74de | | | 790 | end |
| 6dd74de | | | 791 | `, |
| 6dd74de | | | 792 | { flowchart: { nodeSpacing: 1, rankSpacing: 1 } } |
| 6dd74de | | | 793 | ); |
| 6dd74de | | | 794 | }); |
| 6dd74de | | | 795 | |
| 6dd74de | | | 796 | it('3258: Should render subgraphs with large nodeSpacing and rankSpacing', () => { |
| 6dd74de | | | 797 | imgSnapshotTest( |
| 6dd74de | | | 798 | `--- |
| 6dd74de | | | 799 | title: Subgraph nodeSpacing and rankSpacing example |
| 6dd74de | | | 800 | config: |
| 6dd74de | | | 801 | flowchart: |
| 6dd74de | | | 802 | nodeSpacing: 250 |
| 6dd74de | | | 803 | rankSpacing: 250 |
| 6dd74de | | | 804 | --- |
| 6dd74de | | | 805 | flowchart LR |
| 6dd74de | | | 806 | X --> Y |
| 6dd74de | | | 807 | subgraph X |
| 6dd74de | | | 808 | direction LR |
| 6dd74de | | | 809 | A |
| 6dd74de | | | 810 | C |
| 6dd74de | | | 811 | end |
| 6dd74de | | | 812 | subgraph Y |
| 6dd74de | | | 813 | B |
| 6dd74de | | | 814 | D |
| 6dd74de | | | 815 | end |
| 6dd74de | | | 816 | ` |
| 6dd74de | | | 817 | ); |
| 6dd74de | | | 818 | }); |
| 6dd74de | | | 819 | |
| 6dd74de | | | 820 | describe('Markdown strings flowchart (#4220)', () => { |
| 6dd74de | | | 821 | describe('html labels', () => { |
| 6dd74de | | | 822 | it('With styling and classes', () => { |
| 6dd74de | | | 823 | imgSnapshotTest( |
| 6dd74de | | | 824 | `%%{init: {"flowchart": {"htmlLabels": true}} }%% |
| 6dd74de | | | 825 | flowchart LR |
| 6dd74de | | | 826 | A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass |
| 6dd74de | | | 827 | id1(Start)-->id2(Stop) |
| 6dd74de | | | 828 | style id1 fill:#f9f,stroke:#333,stroke-width:4px |
| 6dd74de | | | 829 | style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 |
| 6dd74de | | | 830 | classDef someclass fill:#f96 |
| 6dd74de | | | 831 | `, |
| 6dd74de | | | 832 | { flowchart: { titleTopMargin: 0 } } |
| 6dd74de | | | 833 | ); |
| 6dd74de | | | 834 | }); |
| 6dd74de | | | 835 | it('With formatting in a node', () => { |
| 6dd74de | | | 836 | imgSnapshotTest( |
| 6dd74de | | | 837 | `%%{init: {"flowchart": {"htmlLabels": true}} }%% |
| 6dd74de | | | 838 | flowchart LR |
| 6dd74de | | | 839 | a{"\`The **cat** in the hat\`"} -- 1o --> b |
| 6dd74de | | | 840 | a -- 2o --> c |
| 6dd74de | | | 841 | a -- 3o --> d |
| 6dd74de | | | 842 | g --2i--> a |
| 6dd74de | | | 843 | d --1i--> a |
| 6dd74de | | | 844 | h --3i -->a |
| 6dd74de | | | 845 | b --> d(The dog in the hog) |
| 6dd74de | | | 846 | c --> d |
| 6dd74de | | | 847 | `, |
| 6dd74de | | | 848 | { flowchart: { titleTopMargin: 0 } } |
| 6dd74de | | | 849 | ); |
| 6dd74de | | | 850 | }); |
| 6dd74de | | | 851 | it('New line in node and formatted edge label', () => { |
| 6dd74de | | | 852 | imgSnapshotTest( |
| 6dd74de | | | 853 | `%%{init: {"flowchart": {"htmlLabels": true}} }%% |
| 6dd74de | | | 854 | flowchart LR |
| 6dd74de | | | 855 | b("\`The dog in **the** hog.(1) |
| 6dd74de | | | 856 | NL\`") --"\`1o **bold**\`"--> c |
| 6dd74de | | | 857 | `, |
| 6dd74de | | | 858 | { flowchart: { titleTopMargin: 0 } } |
| 6dd74de | | | 859 | ); |
| 6dd74de | | | 860 | }); |
| 6dd74de | | | 861 | it('Wrapping long text with a new line', () => { |
| 6dd74de | | | 862 | imgSnapshotTest( |
| 6dd74de | | | 863 | `%%{init: {"flowchart": {"htmlLabels": true}} }%% |
| 6dd74de | | | 864 | flowchart LR |
| 6dd74de | | | 865 | b("\`The dog in **the** hog.(1).. a a a a *very long text* about it |
| 6dd74de | | | 866 | Word! |
| 6dd74de | | | 867 | |
| 6dd74de | | | 868 | Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c |
| 6dd74de | | | 869 | |
| 6dd74de | | | 870 | `, |
| 6dd74de | | | 871 | { flowchart: { titleTopMargin: 0 } } |
| 6dd74de | | | 872 | ); |
| 6dd74de | | | 873 | }); |
| 6dd74de | | | 874 | it('Sub graphs and markdown strings', () => { |
| 6dd74de | | | 875 | imgSnapshotTest( |
| 6dd74de | | | 876 | `%%{init: {"flowchart": {"htmlLabels": true}} }%% |
| 6dd74de | | | 877 | flowchart LR |
| 6dd74de | | | 878 | subgraph "One" |
| 6dd74de | | | 879 | a("\`The **cat** |
| 6dd74de | | | 880 | in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}} |
| 6dd74de | | | 881 | end |
| 6dd74de | | | 882 | subgraph "\`**Two**\`" |
| 6dd74de | | | 883 | c("\`The **cat** |
| 6dd74de | | | 884 | in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog") |
| 6dd74de | | | 885 | end |
| 6dd74de | | | 886 | |
| 6dd74de | | | 887 | `, |
| 6dd74de | | | 888 | { flowchart: { titleTopMargin: 0 } } |
| 6dd74de | | | 889 | ); |
| 6dd74de | | | 890 | }); |
| 6dd74de | | | 891 | }); |
| 6dd74de | | | 892 | |
| 6dd74de | | | 893 | describe('svg text labels', () => { |
| 6dd74de | | | 894 | it('With styling and classes', () => { |
| 6dd74de | | | 895 | imgSnapshotTest( |
| 6dd74de | | | 896 | `%%{init: {"flowchart": {"htmlLabels": false}} }%% |
| 6dd74de | | | 897 | flowchart LR |
| 6dd74de | | | 898 | A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass |
| 6dd74de | | | 899 | id1(Start)-->id2(Stop) |
| 6dd74de | | | 900 | style id1 fill:#f9f,stroke:#333,stroke-width:4px |
| 6dd74de | | | 901 | style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 |
| 6dd74de | | | 902 | classDef someclass fill:#f96 |
| 6dd74de | | | 903 | `, |
| 6dd74de | | | 904 | { flowchart: { titleTopMargin: 0 } } |
| 6dd74de | | | 905 | ); |
| 6dd74de | | | 906 | }); |
| 6dd74de | | | 907 | it('With formatting in a node', () => { |
| 6dd74de | | | 908 | imgSnapshotTest( |
| 6dd74de | | | 909 | `%%{init: {"flowchart": {"htmlLabels": false}} }%% |
| 6dd74de | | | 910 | flowchart LR |
| 6dd74de | | | 911 | a{"\`The **cat** in the hat\`"} -- 1o --> b |
| 6dd74de | | | 912 | a -- 2o --> c |
| 6dd74de | | | 913 | a -- 3o --> d |
| 6dd74de | | | 914 | g --2i--> a |
| 6dd74de | | | 915 | d --1i--> a |
| 6dd74de | | | 916 | h --3i -->a |
| 6dd74de | | | 917 | b --> d(The dog in the hog) |
| 6dd74de | | | 918 | c --> d |
| 6dd74de | | | 919 | `, |
| 6dd74de | | | 920 | { flowchart: { titleTopMargin: 0 } } |
| 6dd74de | | | 921 | ); |
| 6dd74de | | | 922 | }); |
| 6dd74de | | | 923 | it('New line in node and formatted edge label', () => { |
| 6dd74de | | | 924 | imgSnapshotTest( |
| 6dd74de | | | 925 | `%%{init: {"flowchart": {"htmlLabels": false}} }%% |
| 6dd74de | | | 926 | flowchart LR |
| 6dd74de | | | 927 | b("\`The dog in **the** hog.(1) |
| 6dd74de | | | 928 | NL\`") --"\`1o **bold**\`"--> c |
| 6dd74de | | | 929 | `, |
| 6dd74de | | | 930 | { flowchart: { titleTopMargin: 0 } } |
| 6dd74de | | | 931 | ); |
| 6dd74de | | | 932 | }); |
| 6dd74de | | | 933 | it('Wrapping long text with a new line', () => { |
| 6dd74de | | | 934 | imgSnapshotTest( |
| 6dd74de | | | 935 | `%%{init: {"flowchart": {"htmlLabels": false}} }%% |
| 6dd74de | | | 936 | flowchart LR |
| 6dd74de | | | 937 | b("\`The dog in **the** hog.(1).. a a a a *very long text* about it |
| 6dd74de | | | 938 | Word! |
| 6dd74de | | | 939 | |
| 6dd74de | | | 940 | Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c |
| 6dd74de | | | 941 | |
| 6dd74de | | | 942 | `, |
| 6dd74de | | | 943 | { flowchart: { titleTopMargin: 0 } } |
| 6dd74de | | | 944 | ); |
| 6dd74de | | | 945 | }); |
| 6dd74de | | | 946 | it('Sub graphs and markdown strings', () => { |
| 6dd74de | | | 947 | imgSnapshotTest( |
| 6dd74de | | | 948 | `%%{init: {"flowchart": {"htmlLabels": false}} }%% |
| 6dd74de | | | 949 | flowchart LR |
| 6dd74de | | | 950 | subgraph "One" |
| 6dd74de | | | 951 | a("\`The **cat** |
| 6dd74de | | | 952 | in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}} |
| 6dd74de | | | 953 | end |
| 6dd74de | | | 954 | subgraph "\`**Two**\`" |
| 6dd74de | | | 955 | c("\`The **cat** |
| 6dd74de | | | 956 | in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog") |
| 6dd74de | | | 957 | end |
| 6dd74de | | | 958 | |
| 6dd74de | | | 959 | `, |
| 6dd74de | | | 960 | { flowchart: { titleTopMargin: 0 } } |
| 6dd74de | | | 961 | ); |
| 6dd74de | | | 962 | }); |
| 6dd74de | | | 963 | }); |
| 6dd74de | | | 964 | |
| 6dd74de | | | 965 | it('should not auto wrap when markdownAutoWrap is false', () => { |
| 6dd74de | | | 966 | imgSnapshotTest( |
| 6dd74de | | | 967 | `flowchart TD |
| 6dd74de | | | 968 | angular_velocity["\`**angular_velocity** |
| 6dd74de | | | 969 | *angular_displacement / duration* |
| 6dd74de | | | 970 | [rad/s, 1/s] |
| 6dd74de | | | 971 | {vector}\`"] |
| 6dd74de | | | 972 | frequency["frequency\n(1 / period_duration)\n[Hz, 1/s]"]`, |
| 6dd74de | | | 973 | { markdownAutoWrap: false } |
| 6dd74de | | | 974 | ); |
| 6dd74de | | | 975 | }); |
| 6dd74de | | | 976 | }); |
| 6dd74de | | | 977 | describe('Subgraph title margins', () => { |
| 6dd74de | | | 978 | it('Should render subgraphs with title margins set (LR)', () => { |
| 6dd74de | | | 979 | imgSnapshotTest( |
| 6dd74de | | | 980 | `flowchart LR |
| 6dd74de | | | 981 | |
| 6dd74de | | | 982 | subgraph TOP |
| 6dd74de | | | 983 | direction TB |
| 6dd74de | | | 984 | subgraph B1 |
| 6dd74de | | | 985 | direction RL |
| 6dd74de | | | 986 | i1 -->f1 |
| 6dd74de | | | 987 | end |
| 6dd74de | | | 988 | subgraph B2 |
| 6dd74de | | | 989 | direction BT |
| 6dd74de | | | 990 | i2 -->f2 |
| 6dd74de | | | 991 | end |
| 6dd74de | | | 992 | end |
| 6dd74de | | | 993 | A --> TOP --> B |
| 6dd74de | | | 994 | B1 --> B2 |
| 6dd74de | | | 995 | `, |
| 6dd74de | | | 996 | { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } } |
| 6dd74de | | | 997 | ); |
| 6dd74de | | | 998 | }); |
| 6dd74de | | | 999 | it('Should render subgraphs with title margins set (TD)', () => { |
| 6dd74de | | | 1000 | imgSnapshotTest( |
| 6dd74de | | | 1001 | `flowchart TD |
| 6dd74de | | | 1002 | |
| 6dd74de | | | 1003 | subgraph TOP |
| 6dd74de | | | 1004 | direction LR |
| 6dd74de | | | 1005 | subgraph B1 |
| 6dd74de | | | 1006 | direction RL |
| 6dd74de | | | 1007 | i1 -->f1 |
| 6dd74de | | | 1008 | end |
| 6dd74de | | | 1009 | subgraph B2 |
| 6dd74de | | | 1010 | direction BT |
| 6dd74de | | | 1011 | i2 -->f2 |
| 6dd74de | | | 1012 | end |
| 6dd74de | | | 1013 | end |
| 6dd74de | | | 1014 | A --> TOP --> B |
| 6dd74de | | | 1015 | B1 --> B2 |
| 6dd74de | | | 1016 | `, |
| 6dd74de | | | 1017 | { flowchart: { subGraphTitleMargin: { top: 8, bottom: 16 } } } |
| 6dd74de | | | 1018 | ); |
| 6dd74de | | | 1019 | }); |
| 6dd74de | | | 1020 | it('Should render subgraphs with title margins set (LR) and htmlLabels set to false', () => { |
| 6dd74de | | | 1021 | imgSnapshotTest( |
| 6dd74de | | | 1022 | `flowchart LR |
| 6dd74de | | | 1023 | |
| 6dd74de | | | 1024 | subgraph TOP |
| 6dd74de | | | 1025 | direction TB |
| 6dd74de | | | 1026 | subgraph B1 |
| 6dd74de | | | 1027 | direction RL |
| 6dd74de | | | 1028 | i1 -->f1 |
| 6dd74de | | | 1029 | end |
| 6dd74de | | | 1030 | subgraph B2 |
| 6dd74de | | | 1031 | direction BT |
| 6dd74de | | | 1032 | i2 -->f2 |
| 6dd74de | | | 1033 | end |
| 6dd74de | | | 1034 | end |
| 6dd74de | | | 1035 | A --> TOP --> B |
| 6dd74de | | | 1036 | B1 --> B2 |
| 6dd74de | | | 1037 | `, |
| 6dd74de | | | 1038 | { |
| 6dd74de | | | 1039 | htmlLabels: false, |
| 6dd74de | | | 1040 | flowchart: { htmlLabels: false, subGraphTitleMargin: { top: 10, bottom: 5 } }, |
| 6dd74de | | | 1041 | } |
| 6dd74de | | | 1042 | ); |
| 6dd74de | | | 1043 | }); |
| 6dd74de | | | 1044 | it('Should render subgraphs with title margins and edge labels', () => { |
| 6dd74de | | | 1045 | imgSnapshotTest( |
| 6dd74de | | | 1046 | `flowchart LR |
| 6dd74de | | | 1047 | |
| 6dd74de | | | 1048 | subgraph TOP |
| 6dd74de | | | 1049 | direction TB |
| 6dd74de | | | 1050 | subgraph B1 |
| 6dd74de | | | 1051 | direction RL |
| 6dd74de | | | 1052 | i1 --lb1-->f1 |
| 6dd74de | | | 1053 | end |
| 6dd74de | | | 1054 | subgraph B2 |
| 6dd74de | | | 1055 | direction BT |
| 6dd74de | | | 1056 | i2 --lb2-->f2 |
| 6dd74de | | | 1057 | end |
| 6dd74de | | | 1058 | end |
| 6dd74de | | | 1059 | A --lb3--> TOP --lb4--> B |
| 6dd74de | | | 1060 | B1 --lb5--> B2 |
| 6dd74de | | | 1061 | `, |
| 6dd74de | | | 1062 | { |
| 6dd74de | | | 1063 | flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } }, |
| 6dd74de | | | 1064 | } |
| 6dd74de | | | 1065 | ); |
| 6dd74de | | | 1066 | }); |
| 6dd74de | | | 1067 | it('Should render self-loops', () => { |
| 6dd74de | | | 1068 | imgSnapshotTest( |
| 6dd74de | | | 1069 | `flowchart |
| 6dd74de | | | 1070 | A --> A |
| 6dd74de | | | 1071 | subgraph B |
| 6dd74de | | | 1072 | B1 --> B1 |
| 6dd74de | | | 1073 | end |
| 6dd74de | | | 1074 | subgraph C |
| 6dd74de | | | 1075 | subgraph C1 |
| 6dd74de | | | 1076 | C2 --> C2 |
| 6dd74de | | | 1077 | subgraph D |
| 6dd74de | | | 1078 | D1 --> D1 |
| 6dd74de | | | 1079 | end |
| 6dd74de | | | 1080 | D --> D |
| 6dd74de | | | 1081 | end |
| 6dd74de | | | 1082 | C1 --> C1 |
| 6dd74de | | | 1083 | end |
| 6dd74de | | | 1084 | `, |
| 6dd74de | | | 1085 | { |
| 6dd74de | | | 1086 | flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } }, |
| 6dd74de | | | 1087 | } |
| 6dd74de | | | 1088 | ); |
| 6dd74de | | | 1089 | }); |
| 6dd74de | | | 1090 | }); |
| 6dd74de | | | 1091 | describe('New @ syntax for node metadata edge cases', () => { |
| 6dd74de | | | 1092 | it('should be possible to use @ syntax to add labels on multi nodes', () => { |
| 6dd74de | | | 1093 | imgSnapshotTest( |
| 6dd74de | | | 1094 | `flowchart TB |
| 6dd74de | | | 1095 | n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"} |
| 6dd74de | | | 1096 | `, |
| 6dd74de | | | 1097 | {} |
| 6dd74de | | | 1098 | ); |
| 6dd74de | | | 1099 | }); |
| 6dd74de | | | 1100 | it('should be possible to use @ syntax to add labels with trail spaces and &', () => { |
| 6dd74de | | | 1101 | imgSnapshotTest( |
| 6dd74de | | | 1102 | `flowchart TB |
| 6dd74de | | | 1103 | n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"} |
| 6dd74de | | | 1104 | `, |
| 6dd74de | | | 1105 | {} |
| 6dd74de | | | 1106 | ); |
| 6dd74de | | | 1107 | }); |
| 6dd74de | | | 1108 | it('should be possible to use @ syntax to add labels with trail spaces', () => { |
| 6dd74de | | | 1109 | imgSnapshotTest( |
| 6dd74de | | | 1110 | `flowchart TB |
| 6dd74de | | | 1111 | n2["label for n2"] |
| 6dd74de | | | 1112 | n4@{ label: "label for n4"} |
| 6dd74de | | | 1113 | n5@{ label: "label for n5"} |
| 6dd74de | | | 1114 | `, |
| 6dd74de | | | 1115 | {} |
| 6dd74de | | | 1116 | ); |
| 6dd74de | | | 1117 | }); |
| 6dd74de | | | 1118 | it('should be possible to use @ syntax to add labels with trail spaces and edge/link', () => { |
| 6dd74de | | | 1119 | imgSnapshotTest( |
| 6dd74de | | | 1120 | `flowchart TD |
| 6dd74de | | | 1121 | A["A"] --> B["for B"] & C@{ label: "for c"} & E@{label : "for E"} |
| 6dd74de | | | 1122 | D@{label: "for D"} |
| 6dd74de | | | 1123 | `, |
| 6dd74de | | | 1124 | {} |
| 6dd74de | | | 1125 | ); |
| 6dd74de | | | 1126 | }); |
| 6dd74de | | | 1127 | }); |
| 6dd74de | | | 1128 | describe('Flowchart Node Shape Rendering', () => { |
| 6dd74de | | | 1129 | it('should render a stadium-shaped node', () => { |
| 6dd74de | | | 1130 | imgSnapshotTest( |
| 6dd74de | | | 1131 | `flowchart TB |
| 6dd74de | | | 1132 | A(["Start"]) --> n1["Untitled Node"] |
| 6dd74de | | | 1133 | A --> n2["Untitled Node"] |
| 6dd74de | | | 1134 | `, |
| 6dd74de | | | 1135 | {} |
| 6dd74de | | | 1136 | ); |
| 6dd74de | | | 1137 | }); |
| 6dd74de | | | 1138 | it('should render a diamond-shaped node using shape config', () => { |
| 6dd74de | | | 1139 | imgSnapshotTest( |
| 6dd74de | | | 1140 | `flowchart BT |
| 6dd74de | | | 1141 | n2["Untitled Node"] --> n1["Diamond"] |
| 6dd74de | | | 1142 | n1@{ shape: diam} |
| 6dd74de | | | 1143 | `, |
| 6dd74de | | | 1144 | {} |
| 6dd74de | | | 1145 | ); |
| 6dd74de | | | 1146 | }); |
| 6dd74de | | | 1147 | it('should render a rounded rectangle and a normal rectangle', () => { |
| 6dd74de | | | 1148 | imgSnapshotTest( |
| 6dd74de | | | 1149 | `flowchart BT |
| 6dd74de | | | 1150 | n2["Untitled Node"] --> n1["Rounded Rectangle"] |
| 6dd74de | | | 1151 | n3["Untitled Node"] --> n1 |
| 6dd74de | | | 1152 | n1@{ shape: rounded} |
| 6dd74de | | | 1153 | n3@{ shape: rect} |
| 6dd74de | | | 1154 | `, |
| 6dd74de | | | 1155 | {} |
| 6dd74de | | | 1156 | ); |
| 6dd74de | | | 1157 | }); |
| 6dd74de | | | 1158 | }); |
| 6dd74de | | | 1159 | |
| 6dd74de | | | 1160 | it('6617: Per Link Curve Styling using edge Ids', () => { |
| 6dd74de | | | 1161 | imgSnapshotTest( |
| 6dd74de | | | 1162 | `flowchart TD |
| 6dd74de | | | 1163 | A e1@-->B e5@--> E |
| 6dd74de | | | 1164 | E e7@--> D |
| 6dd74de | | | 1165 | B e3@-->D |
| 6dd74de | | | 1166 | A e2@-->C e4@-->D |
| 6dd74de | | | 1167 | C e6@--> F |
| 6dd74de | | | 1168 | F e8@--> D |
| 6dd74de | | | 1169 | e1@{ curve: natural } |
| 6dd74de | | | 1170 | e2@{ curve: stepAfter } |
| 6dd74de | | | 1171 | e3@{ curve: monotoneY } |
| 6dd74de | | | 1172 | e4@{ curve: bumpY } |
| 6dd74de | | | 1173 | e5@{ curve: linear } |
| 6dd74de | | | 1174 | e6@{ curve: catmullRom } |
| 6dd74de | | | 1175 | e7@{ curve: cardinal } |
| 6dd74de | | | 1176 | ` |
| 6dd74de | | | 1177 | ); |
| 6dd74de | | | 1178 | }); |
| 6dd74de | | | 1179 | |
| 6dd74de | | | 1180 | describe('when rendering unsuported markdown', () => { |
| 6dd74de | | | 1181 | const graph = `flowchart TB |
| 6dd74de | | | 1182 | mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"] |
| 6dd74de | | | 1183 | mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"] |
| 6dd74de | | | 1184 | subgraph subgraph1["\`How to fix **fix**\`"] |
| 6dd74de | | | 1185 | broken --> B["B"] |
| 6dd74de | | | 1186 | end |
| 6dd74de | | | 1187 | githost["Github, Gitlab, BitBucket, etc."] |
| 6dd74de | | | 1188 | githost2["\`Github, Gitlab, BitBucket, etc.\`"] |
| 6dd74de | | | 1189 | a["1."] |
| 6dd74de | | | 1190 | b["- x"] |
| 6dd74de | | | 1191 | `; |
| 6dd74de | | | 1192 | |
| 6dd74de | | | 1193 | it('should render raw strings', () => { |
| 6dd74de | | | 1194 | imgSnapshotTest(graph); |
| 6dd74de | | | 1195 | }); |
| 6dd74de | | | 1196 | |
| 6dd74de | | | 1197 | it('should render raw strings with htmlLabels: false', () => { |
| 6dd74de | | | 1198 | imgSnapshotTest(graph, { htmlLabels: false }); |
| 6dd74de | | | 1199 | }); |
| 6dd74de | | | 1200 | }); |
| 6dd74de | | | 1201 | |
| 6dd74de | | | 1202 | it('V2 - 17: should apply class def colour to edge label', () => { |
| 6dd74de | | | 1203 | imgSnapshotTest( |
| 6dd74de | | | 1204 | ` graph LR |
| 6dd74de | | | 1205 | id1(Start) link@-- "Label" -->id2(Stop) |
| 6dd74de | | | 1206 | style id1 fill:#f9f,stroke:#333,stroke-width:4px |
| 6dd74de | | | 1207 | |
| 6dd74de | | | 1208 | class id2 myClass |
| 6dd74de | | | 1209 | classDef myClass fill:#bbf,stroke:#f66,stroke-width:2px,color:white,stroke-dasharray: 5 5 |
| 6dd74de | | | 1210 | class link myClass |
| 6dd74de | | | 1211 | ` |
| 6dd74de | | | 1212 | ); |
| 6dd74de | | | 1213 | }); |
| 6dd74de | | | 1214 | }); |