mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-25 00:44:10 +02:00
103 lines
4.3 KiB
HTML
103 lines
4.3 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/6.5.2/css/font-awesome.min.css"
|
|
/>
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<style>
|
|
body {
|
|
/* background: rgb(221, 208, 208); */
|
|
/* background:#333; */
|
|
font-family: 'Arial';
|
|
}
|
|
h1 {
|
|
color: grey;
|
|
}
|
|
.mermaid2 {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>info below</h1>
|
|
<div class="flex">
|
|
<div class="mermaid" style="width: 50%; height: 20%">
|
|
flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
|
|
</div>
|
|
<div class="mermaid2" style="width: 50%; height: 200px">
|
|
sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
|
|
overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
|
|
though
|
|
</div>
|
|
<div class="mermaid2" style="width: 50%; height: 200px">
|
|
%%{init: {'securityLevel': 'loose'}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) B
|
|
--> C{{Let me think...<br />Do I want something for work,<br />something to spend every free
|
|
second with,<br />or something to get around?}} C -->|One| D[Laptop] C -->|Two| E[iPhone] C
|
|
-->|Three| F[Car] click A "index.html#link-clicked" "link test" click B callback "click
|
|
test" classDef someclass fill:#f96; class A someclass; class C someclass;
|
|
</div>
|
|
<div class="mermaid2" style="width: 50%; height: 200px">
|
|
flowchart BT subgraph a b1 -- ok --> b2 end a -- sert --> c c --> d b1 --> d a --asd123 -->
|
|
d
|
|
</div>
|
|
<div class="mermaid2" style="width: 50%; height: 20%">
|
|
stateDiagram-v2 state A { B1 --> B2: ok } A --> C: sert C --> D B1 --> D A --> D: asd123
|
|
</div>
|
|
</div>
|
|
<div class="mermaid2" style="width: 50%; height: 40%">
|
|
%% this does not produce the desired result flowchart TB subgraph container_Beta
|
|
process_C-->Process_D end subgraph container_Alpha process_A-->process_B
|
|
process_B-->|via_AWSBatch|container_Beta process_A-->|messages|process_C end
|
|
</div>
|
|
<div class="mermaid" style="width: 50%; height: 40%">
|
|
flowchart TB a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}} -->
|
|
b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing
|
|
#quot;elit#quot;."}}
|
|
</div>
|
|
<div class="mermaid2" style="width: 50%; height: 50%">
|
|
flowchart TB internet nat routeur lb1 lb2 compute1 compute2 subgraph project routeur nat
|
|
subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> routeur
|
|
routeur --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
|
|
</div>
|
|
<div class="mermaid2" style="width: 50%; height: 50%">
|
|
flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end end subgraph two[Two]
|
|
_two end sub_one --> two
|
|
</div>
|
|
<div class="mermaid2" style="width: 50%; height: 50%">
|
|
flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end subgraph sub_two[Sub
|
|
Two] _sub_two end _one end %% here, either the first or the second one sub_one --> sub_two
|
|
_one --> b
|
|
</div>
|
|
|
|
<script src="./mermaid.js"></script>
|
|
<script>
|
|
mermaid.parseError = function (err, hash) {
|
|
// console.error('Mermaid error: ', err);
|
|
};
|
|
mermaid.initialize({
|
|
// theme: 'forest',
|
|
// themeVariables:{primaryColor: '#ff0000'},
|
|
// arrowMarkerAbsolute: true,
|
|
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
|
logLevel: 0,
|
|
flowchart: { curve: 'cardinal', htmlLabels: false },
|
|
// gantt: { axisFormat: '%m/%d/%Y' },
|
|
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
|
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
|
fontFamily: '"arial", sans-serif',
|
|
curve: 'cardinal',
|
|
securityLevel: 'strict',
|
|
});
|
|
function callback() {
|
|
alert('It worked');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|