mirror of
				https://github.com/mermaid-js/mermaid.git
				synced 2025-10-25 00:44:10 +02:00 
			
		
		
		
	
		
			
				
	
	
		
			30 lines
		
	
	
		
			884 B
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			30 lines
		
	
	
		
			884 B
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <html>
 | |
|   <script>
 | |
|     //      %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
 | |
|   </script>
 | |
|   <body>
 | |
|     <div id="target">
 | |
|       <h1>This element does not belong to the SVG but we can style it</h1>
 | |
|     </div>
 | |
|     <svg id="diagram"></svg>
 | |
| 
 | |
|     <script type="module">
 | |
|       import mermaid from './mermaid.esm.mjs';
 | |
|       mermaid.initialize({ startOnLoad: false, logLevel: 0 });
 | |
| 
 | |
|       const graph = `
 | |
|      %%{ init: { "fontFamily" : "&125; * { background: red }" } }%%
 | |
|             graph TD
 | |
|                 A[Goose]
 | |
|             `;
 | |
| 
 | |
|       const diagram = document.getElementById('diagram');
 | |
|       const { svg } = await mermaid.render('diagram-svg', graph);
 | |
|       diagram.innerHTML = svg;
 | |
|       if (window.Cypress) {
 | |
|         window.rendered = true;
 | |
|       }
 | |
|     </script>
 | |
|   </body>
 | |
| </html>
 | 
