mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-06 17:16:43 +02:00
181 lines
4.8 KiB
HTML
181 lines
4.8 KiB
HTML
<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 {
|
|
font-family: 'Arial';
|
|
background-color: #333;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="diagram"></div>
|
|
<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);
|
|
};
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
//look: 'handdrawn',
|
|
layout: 'fixed',
|
|
theme: 'neo-dark',
|
|
//layout: 'elk',
|
|
fontFamily: 'Kalam',
|
|
logLevel: 1,
|
|
class: {
|
|
hideEmptyMembersBox: true,
|
|
},
|
|
});
|
|
|
|
let shape = 'circle';
|
|
|
|
let code = `
|
|
flowchart TB
|
|
n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
|
|
n80@{ shape: '${shape}'}
|
|
n81["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
|
|
n82["A single line of text"]
|
|
n81@{ shape: '${shape}'}
|
|
n82@{ shape: '${shape}'}
|
|
n83@{ label: "A single line of text", shape: '${shape}'}
|
|
n84@{ shape: '${shape}'}
|
|
`;
|
|
|
|
let code2 = `
|
|
classDiagram
|
|
class class1 {
|
|
int num
|
|
string test
|
|
string test
|
|
string test
|
|
string test
|
|
string test
|
|
method()
|
|
}
|
|
class class2 {
|
|
int num
|
|
string test
|
|
string test
|
|
string test
|
|
string test
|
|
string test
|
|
method()
|
|
method()
|
|
}
|
|
class class3 {
|
|
int test
|
|
}
|
|
<<interface>> class3
|
|
class class4 {
|
|
int[] id
|
|
method()
|
|
method()
|
|
method()
|
|
method()
|
|
}
|
|
<<interface>> class4
|
|
`;
|
|
|
|
let positions = {
|
|
edges: {},
|
|
nodes: {
|
|
n81: {
|
|
x: 0,
|
|
y: 10,
|
|
width: 300,
|
|
height: 200,
|
|
},
|
|
n80: {
|
|
x: -400,
|
|
y: 10,
|
|
width: 100,
|
|
height: 50,
|
|
},
|
|
n82: {
|
|
x: 400,
|
|
y: 10,
|
|
width: 300,
|
|
height: 200,
|
|
},
|
|
n83: {
|
|
x: 800,
|
|
y: 10,
|
|
},
|
|
n84: {
|
|
x: 1200,
|
|
y: 10,
|
|
width: 300,
|
|
height: 200,
|
|
},
|
|
},
|
|
};
|
|
|
|
let positions2 = {
|
|
edges: {},
|
|
nodes: {
|
|
class1: {
|
|
x: 0,
|
|
y: 10,
|
|
width: 100,
|
|
height: 400,
|
|
},
|
|
class2: {
|
|
x: -300,
|
|
y: 100,
|
|
width: 100,
|
|
height: 0,
|
|
},
|
|
class3: {
|
|
x: 400,
|
|
y: 10,
|
|
width: 0,
|
|
height: 0,
|
|
},
|
|
class4: {
|
|
x: 800,
|
|
y: 10,
|
|
width: 0,
|
|
height: 0,
|
|
},
|
|
},
|
|
};
|
|
|
|
const { svg } = await mermaid.render('the-id-of-the-svg', code2, undefined, positions2);
|
|
const elem = document.querySelector('#diagram');
|
|
elem.innerHTML = svg;
|
|
</script>
|
|
</body>
|
|
</html>
|