17.1 KB252 lines
Blame
1import externalExample from './mermaid-example-diagram.esm.mjs';
2import layouts from './mermaid-layout-elk.esm.mjs';
3import tidyTree from './mermaid-layout-tidy-tree.esm.mjs';
4import zenUml from './mermaid-zenuml.esm.mjs';
5import mermaid from './mermaid.esm.mjs';
6
7function b64ToUtf8(str) {
8 return decodeURIComponent(escape(window.atob(str)));
9}
10
11// Adds a rendered flag to window when rendering is done, so cypress can wait for it.
12function markRendered() {
13 if (window.Cypress) {
14 window.rendered = true;
15 }
16}
17
18function loadFontAwesomeCSS() {
19 const link = document.createElement('link');
20 link.rel = 'stylesheet';
21 link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css';
22
23 document.head.appendChild(link);
24
25 return new Promise((resolve, reject) => {
26 link.onload = resolve;
27 link.onerror = () => reject(new Error('Failed to load FontAwesome'));
28 });
29}
30
31/**
32 * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
33 * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
34 * page.
35 */
36const contentLoaded = async function () {
37 await loadFontAwesomeCSS();
38 await Promise.all(Array.from(document.fonts, (font) => font.load()));
39
40 let pos = document.location.href.indexOf('?graph=');
41 if (pos > 0) {
42 pos = pos + 7;
43 const graphBase64 = document.location.href.substr(pos);
44 const graphObj = JSON.parse(b64ToUtf8(graphBase64));
45 if (graphObj.mermaid && graphObj.mermaid.theme === 'dark') {
46 document.body.style.background = '#3f3f3f';
47 }
48 console.log(graphObj);
49 if (Array.isArray(graphObj.code)) {
50 const numCodes = graphObj.code.length;
51 for (let i = 0; i < numCodes; i++) {
52 const div = document.createElement('div');
53 div.id = 'block' + i;
54 div.className = 'mermaid';
55 div.innerHTML = graphObj.code[i];
56 document.getElementsByTagName('body')[0].appendChild(div);
57 }
58 } else {
59 const div = document.createElement('div');
60 div.id = 'block';
61 div.className = 'mermaid';
62 div.innerHTML = graphObj.code;
63 document.getElementsByTagName('body')[0].appendChild(div);
64 }
65
66 await mermaid.registerExternalDiagrams([externalExample, zenUml]);
67
68 mermaid.registerLayoutLoaders(layouts);
69 mermaid.registerLayoutLoaders(tidyTree);
70 mermaid.initialize(graphObj.mermaid);
71 /**
72 * CC-BY-4.0
73 * Copyright (c) Fonticons, Inc. - https://fontawesome.com/license/free
74 * https://fontawesome.com/icons/bell?f=classic&s=regular
75 */
76 const staticBellIconPack = {
77 prefix: 'fa',
78 icons: {
79 bell: {
80 body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
81 width: 448,
82 },
83 },
84 width: 512,
85 height: 512,
86 };
87 /* MIT License
88
89 Copyright (c) Microsoft Corporation.
90
91 Permission is hereby granted, free of charge, to any person obtaining a copy
92 of this software and associated documentation files (the "Software"), to deal
93 in the Software without restriction, including without limitation the rights
94 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
95 copies of the Software, and to permit persons to whom the Software is
96 furnished to do so, subject to the following conditions:
97
98 The above copyright notice and this permission notice shall be included in all
99 copies or substantial portions of the Software.
100
101 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
102 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
103 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
104 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
105 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
106 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
107 SOFTWARE */
108 const staticAwsLogoIconPack = {
109 prefix: 'fluent-emoji',
110 icons: {
111 'tropical-fish': {
112 width: 32,
113 height: 32,
114 body: '<g fill="none"><circle cx="3.055" cy="19.945" r="1.055" fill="url(#f2515id0)" /><circle cx="3.055" cy="19.945" r="1.055" fill="url(#f2515id1)" /><circle cx="3.055" cy="17.945" r="1.055" fill="url(#f2515id2)" /><path fill="url(#f2515idj)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id3)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id4)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515idk)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id5)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id6)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id7)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515idl)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><circle cx="14.5" cy="18.5" r="11.5" fill="url(#f2515id8)" /><circle cx="14.5" cy="18.5" r="11.5" fill="url(#f2515id9)" /><circle cx="14.5" cy="18.5" r="11.5" fill="url(#f2515ida)" /><circle cx="14.5" cy="18.5" r="11.5" fill="url(#f2515idb)" /><path fill="url(#f2515idc)" d="M6.7 10.05a10.8 10.8 0 0 1 3.988 8.388c0 3.417-1.586 6.464-4.06 8.445A11.47 11.47 0 0 1 3 18.5a11.47 11.47 0 0 1 3.7-8.45" /><g filter="url(#f2515idp)"><path fill="#4d82fd" d="M17.61 21.717v-5.873a.7.7 0 0 0-1.174-.516l-2.998 2.753a1 1 0 0 0 .01 1.483l2.995 2.675a.7.7 0 0 0 1.166-.522" /></g><path fill="url(#f2515idm)" d="M18 21.452v-5.874a.7.7 0 0 0-1.174-.516l-2.997 2.754a1 1 0 0 0 .01 1.482l2.995 2.676A.7.7 0 0 0 18 21.452" /><path fill="url(#f2515idn)" d="M18 21.452v-5.874a.7.7 0 0 0-1.174-.516l-2.997 2.754a1 1 0 0 0 .01 1.482l2.995 2.676A.7.7 0 0 0 18 21.452" /><path fill="url(#f2515idd)" d="M18 21.452v-5.874a.7.7 0 0 0-1.174-.516l-2.997 2.754a1 1 0 0 0 .01 1.482l2.995 2.676A.7.7 0 0 0 18 21.452" /><circle cx="7.422" cy="16.391" r=".5" fill="url(#f2515ide)" /><circle cx="7.422" cy="16.391" r=".5" fill="url(#f2515idf)" /><circle cx="7.422" cy="16.391" r=".5" fill="url(#f2515ido)" /><path fill="url(#f2515idg)" d="M30.063 15.955c0-.672-.766-1.476-1.82-.956A4.5 4.5 0 0 0 26 18.893c0 1.662.901 3.114 2.242 3.893c.759.441 1.82-.073 1.82-.83z" /><path fill="url(#f2515idh)" d="M30.063 15.955c0-.672-.766-1.476-1.82-.956A4.5 4.5 0 0 0 26 18.893c0 1.662.901 3.114 2.242 3.893c.759.441 1.82-.073 1.82-.83z" /><path fill="url(#f2515idi)" d="M30.063 15.955c0-.672-.766-1.476-1.82-.956A4.5 4.5 0 0 0 26 18.893c0 1.662.901 3.114 2.242 3.893c.759.441 1.82-.073 1.82-.83z" /><defs><radialGradient id="f2515id0" cx="0" cy="0" r="1" gradientTransform="matrix(1.3125 -.53906 .83075 2.02268 2 20.484)" gradientUnits="userSpaceOnUse"><stop stop-color="#6d5a93" /><stop offset="1" stop-color="#5f498c" /></radialGradient><radialGradient id="f2515id1" cx="0" cy="0" r="1" gradientTransform="rotate(98.219 -6.59 10.698)scale(.71042 .794)" gradientUnits="userSpaceOnUse"><stop stop-color="#442e79" /><stop offset="1" stop-color="#442e79" stop-opacity="0" /></radialGradient><radialGradient id="f2515id2" cx="0" cy="0" r="1" gradientTransform="matrix(1.625 0 0 2.50428 1.875 17.945)" gradientUnits="userSpaceOnUse"><stop stop-color="#6d5a93" /><stop offset="1" stop-color="#5f498c" /></radialGradient><radialGradient id="f2515id3" cx="0" cy="0" r="1" gradientTransform="matrix(8.0625 -3.625 5.13835 11.4284 17.188 31.625)" gradientUnits="userSpaceOnUse"><stop stop-color="#ff835d" /><stop offset="1" stop-color="#ff835d" stop-opacity="0" /></radialGradient><radialGradient id="f2515id4" cx="0" cy="0" r="1" gradientTransform="rotate(46.65 -12.942 36.264)scale(5.37182 7.61442)" gradientUnits="userSpaceOnUse"><stop stop-color="#ff835d" /><stop offset="1" stop-color="#ff835d" stop-opacity="0" /></radialGradient><radialGradient id="f2515id5" cx="0" cy="0" r="1" gradientTransform="matrix(16.7498 18.68764 -12.28497 11.01107 9.25 10.625)" gradientUnits="userSpaceOnUse"><stop offset=".943" stop-color="#ff835d" stop-opacity="0" /><stop offset="1" stop-color="#ff835d" /></radialGradient><radialGradient id="f2515id6" cx="0" cy="0" r="1" gradientTransform="rotate(143.673 11.127 8.392)scale(3.95643 5.87059)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe65e" /><stop offset=".654" stop-color="#ffe65e" stop-opacity="0" /></radialGradient><radialGradient id="f2515id7" cx="0" cy="0" r="1" gradientTransform="matrix(0 -6.0625 11.8125 0 27.125 14.938)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe65e" /><stop offset="1" stop-color="#ffe65e" stop-opacity="0" /></radialGradient><radialGradient id="f2515id8" cx="0" cy="0" r="1" gradientTransform="matrix(-10.49993 18.125 -19.41091 -11.24487 22.813 9.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#76cdff" /><stop offset="1" stop-color="#5181ff" /></radialGradient><radialGradient id="f2515id9" cx="0" cy="0" r="1" gradientTransform="matrix(0 23.0625 -17.9752 0 14.5 9.063)" gradientUnits="userSpaceOnUse"><stop offset=".786" stop-color="#5a67ff" stop-opacity="0" /><stop offset=".929" stop-color="#5a67ff" /></radialGradient><radialGradient id="f2515ida" cx="0" cy="0" r="1" gradientTransform="matrix(-3.6875 0 0 -6.17092 28.5 18.813)" gradientUnits="userSpaceOnUse"><stop offset=".017" stop-color="#5a67ff" /><stop offset="1" stop-color="#5a67ff" stop-opacity="0" /></radialGradient><radialGradient id="f2515idb" cx="0" cy="0" r="1" gradientTransform="matrix(2.37499 2.81251 -7.52137 6.35133 7.875 8.125)" gradientUnits="userSpaceOnUse"><stop stop-color="#65afe3" /><stop offset="1" stop-color="#65afe3" stop-opacity="0" /></radialGradient><radialGradient id="f2515idc" cx="0" cy="0" r="1" gradientTransform="matrix(23.875 0 0 34.7797 .625 18.467)" gradientUnits="userSpaceOnUse"><stop offset=".065" stop-color="#80739f" /><stop offset=".262" stop-color="#6f53a3" /></radialGradient><radialGradient id="f2515idd" cx="0" cy="0" r="1" gradientTransform="matrix(0 4.5 -.71873 0 18 15.844)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd65c" /><stop offset="1" stop-color="#ffd65c" stop-opacity="0" /></radialGradient><radialGradient id="f2515ide" cx="0" cy="0" r="1" gradientTransform="matrix(-.40625 .5625 -.5015 -.3622 7.57 16.23)" gradientUnits="userSpaceOnUse"><stop offset=".006" stop-color="#433437" /><stop offset="1" stop-color="#3b2838" /></radialGradient><radialGradient id="f2515idf" cx="0" cy="0" r="1" gradientTransform="rotate(137.643 .653 9.607)scale(.35946 .31624)" gradientUnits="userSpaceOnUse"><stop stop-color="#5c5051" /><stop offset="1" stop-color="#5c5051" stop-opacity="0" /></radialGradient><radialGradient id="f2515idg" cx="0" cy="0" r="1" gradientTransform="matrix(-4.375 0 0 -8.85937 30.375 18.89)" gradientUnits="userSpaceOnUse"><stop offset=".329" stop-color="#ffc256" /><stop offset="1" stop-color="#ff8646" /></radialGradient><radialGradient id="f2515idh" cx="0" cy="0" r="1" gradientTransform="matrix(0 4.59375 -1.28023 0 30.063 17.094)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd661" /><stop offset="1" stop-color="#ffd661" stop-opacity="0" /></radialGradient><radialGradient id="f2515idi" cx="0" cy="0" r="1" gradientTransform="matrix(-5.375 0 0 -5.125 31.188 18.89)" gradientUnits="userSpaceOnUse"><stop offset=".892" stop-color="#f37539" stop-opacity="0" /><stop offset="1" stop-color="#f37539" /></radialGradient><linearGradient id="f2515idj" x1="30.813" x2="20.5" y1="17.375" y2="17.375" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe359" /><stop offset="1" stop-color="#ffbe3e" /></linearGradient><linearGradient id="f2515idk" x1="26" x2="26" y1="30.656" y2="29.438" gradientUnits="userSpaceOnUse"><stop offset=".118" stop-color="#ff835d" /><stop offset="1" stop-color="#ff835d" stop-opacity="0" /></linearGradient><linearGradient id="f2515idl" x1="19.094" x2="19.219" y1="6.313" y2="7.625" gradientUnits="userSpaceOnUse"><stop stop-color="#ffb941" /><stop offset="1" stop-color="#ffb941" stop-opacity="0" /></linearGradient><linearGradient id="f2515idm" x1="18" x2="13.813" y1="17.875" y2="17.875" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd65c" /><stop offset="1" stop-color="#ff8c42" /></linearGradient><linearGradient id="f2515idn" x1="15.752" x2="14.281" y1="19.594" y2="20.625" gradientUnits="userSpaceOnUse"><stop stop-color="#ff8c42" stop-opacity="0" /><stop offset="1" stop-color="#ff8c42" /></linearGradient><linearGradient id="f2515ido" x1="7.324" x2="6.98" y1="15.998" y2="15.779" gradientUnits="userSpaceOnUse"><stop stop-color="#5c5051" stop-opacity="0" /><stop offset="1" stop-color="#5c5051" /></linearGradient><filter id="f2515idp" width="5.995" height="8.777" x="12.364" y="14.392" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix" /><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" /><feGaussianBlur result="effect1_foregroundBlur_28327_5989" stdDeviation=".375" /></filter></defs></g>',
115 },
116 },
117 width: 256,
118 height: 256,
119 };
120 // Simplified AWS icons with rect elements for testing issue #7185
121 const staticAwsIconPack = {
122 prefix: 'aws',
123 icons: {
124 'arch-amazon-cloudwatch': {
125 width: 80,
126 height: 80,
127 body: '<g><rect x="0" y="0" width="80" height="80" fill="#FF4F8B" rx="4"/><path fill="#FFFFFF" d="M20 25h40v5H20zm0 10h40v5H20zm0 10h40v5H20z"/></g>',
128 },
129 'arch-amazon-route-53': {
130 width: 80,
131 height: 80,
132 body: '<g><rect x="0" y="0" width="80" height="80" fill="#8C4FFF" rx="4"/><circle cx="40" cy="40" r="15" fill="#FFFFFF"/><circle cx="40" cy="40" r="8" fill="#8C4FFF"/></g>',
133 },
134 'arch-amazon-eks-cloud': {
135 width: 80,
136 height: 80,
137 body: '<g><rect x="0" y="0" width="80" height="80" fill="#FF9900" rx="4"/><path fill="#FFFFFF" d="M40 20l15 10v20l-15 10-15-10V30z"/></g>',
138 },
139 },
140 width: 80,
141 height: 80,
142 };
143 mermaid.registerIconPacks([
144 {
145 name: 'fa',
146 loader: () => staticBellIconPack,
147 },
148 {
149 name: 'fluent-emoji',
150 loader: () => staticAwsLogoIconPack,
151 },
152 {
153 name: 'aws',
154 loader: () => staticAwsIconPack,
155 },
156 ]);
157 await mermaid.run();
158 }
159};
160
161/**
162 * @param current
163 * @param update
164 */
165function merge(current, update) {
166 Object.keys(update).forEach(function (key) {
167 // if update[key] exist, and it's not a string or array,
168 // we go in one level deeper
169 if (
170 current.hasOwnProperty(key) &&
171 typeof current[key] === 'object' &&
172 !Array.isArray(current[key])
173 ) {
174 merge(current[key], update[key]);
175
176 // if update[key] doesn't exist in current, or it's a string
177 // or array, then assign/overwrite current[key] to update[key]
178 } else {
179 current[key] = update[key];
180 }
181 });
182 return current;
183}
184
185const contentLoadedApi = async function () {
186 let pos = document.location.href.indexOf('?graph=');
187 if (pos > 0) {
188 pos = pos + 7;
189 const graphBase64 = document.location.href.substr(pos);
190 const graphObj = JSON.parse(b64ToUtf8(graphBase64));
191 // const graph = 'hello'
192 if (Array.isArray(graphObj.code)) {
193 const numCodes = graphObj.code.length;
194 const divs = [];
195 let div;
196 for (let i = 0; i < numCodes; i++) {
197 div = document.createElement('div');
198 div.id = 'block' + i;
199 div.className = 'mermaid';
200 // div.innerHTML = graphObj.code
201 document.getElementsByTagName('body')[0].appendChild(div);
202 divs[i] = div;
203 }
204
205 const defaultE2eCnf = { theme: 'forest', startOnLoad: false };
206
207 const cnf = merge(defaultE2eCnf, graphObj.mermaid);
208
209 mermaid.initialize(cnf);
210
211 for (let i = 0; i < numCodes; i++) {
212 const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]);
213 div.innerHTML = svg;
214 bindFunctions?.(div);
215 }
216 } else {
217 const div = document.createElement('div');
218 div.id = 'block';
219 div.className = 'mermaid';
220 console.warn('graphObj', graphObj);
221 document.getElementsByTagName('body')[0].appendChild(div);
222 mermaid.initialize(graphObj.mermaid);
223 const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div);
224 div.innerHTML = svg;
225 console.log(div.innerHTML);
226 bindFunctions?.(div);
227 }
228 }
229};
230
231if (typeof document !== 'undefined') {
232 mermaid.initialize({
233 startOnLoad: false,
234 });
235 /*!
236 * Wait for document loaded before starting the execution
237 */
238 window.addEventListener(
239 'load',
240 function () {
241 if (/xss.html/.exec(this.location.href)) {
242 this.console.log('Using api');
243 void contentLoadedApi().finally(markRendered);
244 } else {
245 this.console.log('Not using api');
246 void contentLoaded().finally(markRendered);
247 }
248 },
249 false
250 );
251}
252