mirror of
https://github.com/mermaid-js/mermaid.git
synced 2026-05-23 20:10:38 +00:00
Ladislav Gazo
9dde184de5
- Add EM theme variables to all built-in themes (dark, default, forest, neutral) so dark mode and other themes render with appropriate colors instead of always falling back to light-theme defaults. - Apply wrapLabel() to plain text before HTML assembly to prevent splitting inside HTML tags. Also remove redundant newline replacement in data block path since wrapLabel now handles line breaking on plain text. - Read relation stroke color from themeVariables.emRelationStroke in renderer instead of using hardcoded '#000' from db.ts. - Add emRelationStroke variable to all theme files including theme-base.
79 lines
1.9 KiB
HTML
79 lines
1.9 KiB
HTML
<!--Do not edit this file-->
|
|
<!--Duplicate this file to any name you like, run `pnpm dev`, open http://localhost:9000/dev/name.html to view-->
|
|
<html>
|
|
<head>
|
|
<title>Mermaid development page</title>
|
|
<style>
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.code-container {
|
|
position: fixed;
|
|
}
|
|
|
|
#code {
|
|
max-width: 30vw;
|
|
width: 30vw;
|
|
}
|
|
|
|
#dynamicDiagram {
|
|
padding-left: 580px;
|
|
flex: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Event Modeling</h1>
|
|
<!--pre id="diagram" class="mermaid">
|
|
eventmodeling
|
|
|
|
entity Komand
|
|
|
|
tf 01 cmd Komand
|
|
tf 02 evt Udalost [[Udalost02]]
|
|
|
|
data Udalost02 `jsobj`{ a: 20 }
|
|
</pre-->
|
|
|
|
<hr />
|
|
Type code to view diagram:
|
|
<div class="container">
|
|
<div class="code-container">
|
|
<textarea name="code" id="code" cols="30" rows="10"></textarea>
|
|
</div>
|
|
<div id="dynamicDiagram"></div>
|
|
</div>
|
|
<pre class="mermaid">info</pre>
|
|
|
|
<script type="module">
|
|
import mermaid from '/mermaid.esm.mjs';
|
|
import layouts from '/mermaid-layout-elk.esm.mjs';
|
|
mermaid.registerLayoutLoaders(layouts);
|
|
async function render(str) {
|
|
const { svg } = await mermaid.render('dynamic', str);
|
|
document.getElementById('dynamicDiagram').innerHTML = svg;
|
|
}
|
|
const storeKey = window.location.pathname;
|
|
const code = localStorage.getItem(storeKey);
|
|
if (code) {
|
|
document.getElementById('code').value = code;
|
|
await render(code);
|
|
}
|
|
mermaid.initialize({
|
|
startOnLoad: true,
|
|
logLevel: 0,
|
|
theme: 'base',
|
|
});
|
|
document.getElementById('code').addEventListener('input', async (e) => {
|
|
const value = e.target.value;
|
|
localStorage.setItem(storeKey, value);
|
|
await render(value);
|
|
});
|
|
</script>
|
|
|
|
<script src="/dev/reload.js"></script>
|
|
</body>
|
|
</html>
|