| 1 | // TODO: this file should be testing the ./mermaid.core.mjs file, as that's the file listed in the package.json file that users will use |
| 2 | import mermaid from './mermaid.esm.mjs'; |
| 3 | |
| 4 | let code = `flowchart LR |
| 5 | Power_Supply --> Transmitter_A |
| 6 | Power_Supply --> Transmitter_B |
| 7 | Transmitter_A --> D |
| 8 | Transmitter_B --> D`; |
| 9 | |
| 10 | let code2 = `gantt |
| 11 | dateFormat YYYY-MM-DD |
| 12 | title Adding GANTT diagram functionality to mermaid |
| 13 | section A section |
| 14 | Completed task :done, des1, 2014-01-06,2014-01-08 |
| 15 | Active task :active, des2, 2014-01-09, 3d |
| 16 | Future task : des3, after des2, 5d |
| 17 | Future task2 : des4, after des3, 5d |
| 18 | section Critical tasks |
| 19 | Completed task in the critical line :crit, done, 2014-01-06,24h |
| 20 | Implement parser and jison :crit, done, after des1, 2d |
| 21 | Create tests for parser :crit, active, 3d |
| 22 | Future task in critical line :crit, 5d |
| 23 | Create tests for renderer :2d |
| 24 | Add to mermaid :1d`; |
| 25 | |
| 26 | const code3 = `flowchart TD |
| 27 | A(<img scr='https://iconscout.com/ms-icon-310x310.png' width='20' height='20' />) |
| 28 | B(<b>Bold text!</b>)`; |
| 29 | |
| 30 | if (/test-html-escaping/.exec(location.href)) { |
| 31 | code = code3; |
| 32 | } |
| 33 | |
| 34 | mermaid.initialize({ |
| 35 | theme: 'default', |
| 36 | // fontFamily: '"Lucida Console", Monaco, monospace', |
| 37 | startOnLoad: false, |
| 38 | securityLevel: 'loose', |
| 39 | flowchart: { |
| 40 | htmlLabels: true, |
| 41 | }, |
| 42 | gantt: { |
| 43 | axisFormatter: [ |
| 44 | [ |
| 45 | '%Y-%m-%d', |
| 46 | (d) => { |
| 47 | return d.getDay() === 1; |
| 48 | }, |
| 49 | ], |
| 50 | ], |
| 51 | }, |
| 52 | }); |
| 53 | void (async () => { |
| 54 | const { svg } = await mermaid.render('the-id-of-the-svg', code); |
| 55 | console.log(svg); |
| 56 | const elem = document.querySelector('#graph-to-be'); |
| 57 | elem.innerHTML = svg; |
| 58 | })(); |
| 59 | |