2024-08-07 20:06:18 +05:30
< html >
< head >
< link href = "https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel = "stylesheet" / >
< link href = "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel = "stylesheet" / >
< link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
< link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
< link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC& display=swap"
rel="stylesheet"
/>
< link rel = "preconnect" href = "https://fonts.googleapis.com" / >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin / >
< link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700& display=swap"
rel="stylesheet"
/>
< link
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300; 400;700& family=Rubik+Mono+One& display=swap"
rel="stylesheet"
/>
< link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700& family=Rubik+Mono+One& display=swap"
rel="stylesheet"
/>
< style >
body {
/* background: rgb(221, 208, 208); */
/* background: #333; */
font-family: 'Arial';
/* font-size: 18px !important; */
}
h1 {
color: grey;
}
.mermaid2 {
display: none;
}
.mermaid svg {
/* font-size: 18px !important; */
/* background-color: #efefef;
background-image: radial-gradient(#fff 51%, transparent 91%),
radial-gradient(#fff 51%, transparent 91%);
background-size: 20px 20px;
background-position:
0 0,
10px 10px;
background-repeat: repeat; */
}
< / style >
< / head >
< body >
< pre id = "diagram4" class = "mermaid" >
flowchart
2024-08-09 18:35:32 +05:30
A@{ shape: titledCylinder, label: "title" }@ --> B@{ shape: titledCylinder, label: "title B" }@
C@{ shape: titledCylinder, label: "title with very long text but on single line" }@ --> D@{ shape: titledCylinder, label: "title \n with \n multiple \n lines \n of n text" }@
A --> D
2024-08-07 20:06:18 +05:30
< /pre
>
< script type = "module" >
import mermaid from './mermaid.esm.mjs';
import { layouts } from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) {
console.error('Mermaid error: ', err);
};
window.callback = function () {
alert('A callback was triggered');
};
mermaid.initialize({
// theme: 'base',
// handdrawnSeed: 12,
look: 'classic',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
2024-08-09 18:35:32 +05:30
// 'elk.nodePlacement.strategy': 'SIMPLE',
2024-08-07 20:06:18 +05:30
// 'elk.nodePlacement.strategy': 'LAYERED',
// 'elk.mergeEdges': true,
// layout: 'dagre',
// layout: 'elk',
// layout: 'fixed',
// htmlLabels: false,
flowchart: { titleTopMargin: 100, padding: 50 },
// fontFamily: 'Caveat',
fontFamily: 'Kalam',
// fontFamily: 'courier',
sequence: {
actorFontFamily: 'courier',
noteFontFamily: 'courier',
messageFontFamily: 'courier',
},
fontSize: 12,
logLevel: 0,
securityLevel: 'loose',
});
function callback() {
alert('It worked');
}
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
< / script >
< / body >
< / html >
