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