mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
325 lines
7.8 KiB
HTML
325 lines
7.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"
|
|
/>
|
|
<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: #eee;
|
|
background-image: radial-gradient(#fff 1%, transparent 11%),
|
|
radial-gradient(#fff 1%, transparent 11%);
|
|
background-size: 20px 20px;
|
|
background-position: 0 0, 10px 10px;
|
|
background-repeat: repeat;
|
|
}
|
|
.malware {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 150px;
|
|
background: red;
|
|
color: black;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: monospace;
|
|
font-size: 72px;
|
|
}
|
|
/* tspan {
|
|
font-size: 6px !important;
|
|
} */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<pre id="diagram" class="mermaid">
|
|
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
|
flowchart-elk LR
|
|
b("`The dog in **the** hog(2)... a a a a *very long text* about it
|
|
Word!
|
|
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `")
|
|
</pre
|
|
>
|
|
<pre id="diagram" class="mermaid2">
|
|
flowchart-elk LR
|
|
b("The dog in the hog... a very<br/>long text about it<br/>Word!")
|
|
</pre>
|
|
<pre id="diagram" class="mermaid2">
|
|
flowchart-elk LR
|
|
b("The dog in the hog... a very<br/>long text about it<br/>Word!")
|
|
</pre>
|
|
>
|
|
<pre id="diagram" class="mermaid2">
|
|
mindmap
|
|
id1[`**Start2**
|
|
second line 😎 with long text that is wrapping to the next line`]
|
|
id2[`Child **with bold** text`]
|
|
id3[`Children of which some
|
|
is using *italic type of* text`]
|
|
id4[Child]
|
|
id5[`Child
|
|
Row
|
|
and another
|
|
`]
|
|
</pre>
|
|
<pre id="diagram" class="mermaid">
|
|
mindmap
|
|
id1["`**Root** with
|
|
a second line
|
|
Unicode works too: 🤓`"]
|
|
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
|
|
id3[Regular labels still works]
|
|
|
|
</pre>
|
|
<pre id="diagram" class="mermaid2">
|
|
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
|
flowchart TB
|
|
%% I could not figure out how to use double quotes in labels in Mermaid
|
|
subgraph ibm[IBM Espresso CPU]
|
|
core0[IBM PowerPC Broadway Core 0]
|
|
core1[IBM PowerPC Broadway Core 1]
|
|
core2[IBM PowerPC Broadway Core 2]
|
|
|
|
rom[16 KB ROM]
|
|
|
|
core0 --- core2
|
|
|
|
rom --> core2
|
|
end
|
|
|
|
subgraph amd[AMD Latte GPU]
|
|
mem[Memory & I/O Bridge]
|
|
dram[DRAM Controller]
|
|
edram[32 MB EDRAM MEM1]
|
|
rom[512 B SEEPROM]
|
|
|
|
sata[SATA IF]
|
|
exi[EXI]
|
|
|
|
subgraph gx[GX]
|
|
sram[3 MB 1T-SRAM]
|
|
end
|
|
|
|
radeon[AMD Radeon R7xx GX2]
|
|
|
|
mem --- gx
|
|
mem --- radeon
|
|
|
|
rom --- mem
|
|
|
|
mem --- sata
|
|
mem --- exi
|
|
|
|
dram --- sata
|
|
dram --- exi
|
|
end
|
|
|
|
ddr3[2 GB DDR3 RAM MEM2]
|
|
|
|
mem --- ddr3
|
|
dram --- ddr3
|
|
edram --- ddr3
|
|
|
|
core1 --- mem
|
|
|
|
exi --- rtc
|
|
rtc{{rtc}}
|
|
</pre
|
|
>
|
|
<br />
|
|
<pre id="diagram" class="mermaid2">
|
|
flowchart TB
|
|
%% I could not figure out how to use double quotes in labels in Mermaid
|
|
subgraph ibm[IBM Espresso CPU]
|
|
core0[IBM PowerPC Broadway Core 0]
|
|
core1[IBM PowerPC Broadway Core 1]
|
|
core2[IBM PowerPC Broadway Core 2]
|
|
|
|
rom[16 KB ROM]
|
|
|
|
core0 --- core2
|
|
|
|
rom --> core2
|
|
end
|
|
|
|
subgraph amd[AMD Latte GPU]
|
|
mem[Memory & I/O Bridge]
|
|
dram[DRAM Controller]
|
|
edram[32 MB EDRAM MEM1]
|
|
rom[512 B SEEPROM]
|
|
|
|
sata[SATA IF]
|
|
exi[EXI]
|
|
|
|
subgraph gx[GX]
|
|
sram[3 MB 1T-SRAM]
|
|
end
|
|
|
|
radeon[AMD Radeon R7xx GX2]
|
|
|
|
mem --- gx
|
|
mem --- radeon
|
|
|
|
rom --- mem
|
|
|
|
mem --- sata
|
|
mem --- exi
|
|
|
|
dram --- sata
|
|
dram --- exi
|
|
end
|
|
|
|
ddr3[2 GB DDR3 RAM MEM2]
|
|
|
|
mem --- ddr3
|
|
dram --- ddr3
|
|
edram --- ddr3
|
|
|
|
core1 --- mem
|
|
|
|
exi --- rtc
|
|
rtc{{rtc}}
|
|
</pre
|
|
>
|
|
<br />
|
|
|
|
<pre id="diagram" class="mermaid2">
|
|
flowchart LR
|
|
B1 --be be--x B2
|
|
B1 --bo bo--o B3
|
|
subgraph Ugge
|
|
B2
|
|
B3
|
|
subgraph inner
|
|
B4
|
|
B5
|
|
end
|
|
subgraph inner2
|
|
subgraph deeper
|
|
C4
|
|
C5
|
|
end
|
|
C6
|
|
end
|
|
|
|
B4 --> C4
|
|
|
|
B3 -- X --> B4
|
|
B2 --> inner
|
|
|
|
C4 --> C5
|
|
end
|
|
|
|
subgraph outer
|
|
B6
|
|
end
|
|
B6 --> B5
|
|
</pre
|
|
>
|
|
<pre id="diagram" class="mermaid2">
|
|
sequenceDiagram
|
|
Customer->>+Stripe: Makes a payment request
|
|
Stripe->>+Bank: Forwards the payment request to the bank
|
|
Bank->>+Customer: Asks for authorization
|
|
Customer->>+Bank: Provides authorization
|
|
Bank->>+Stripe: Sends a response with payment details
|
|
Stripe->>+Merchant: Sends a notification of payment receipt
|
|
Merchant->>+Stripe: Confirms the payment
|
|
Stripe->>+Customer: Sends a confirmation of payment
|
|
Customer->>+Merchant: Receives goods or services
|
|
</pre
|
|
>
|
|
<pre id="diagram" class="mermaid2">
|
|
mindmap
|
|
root((mindmap))
|
|
Origins
|
|
Long history
|
|
::icon(fa fa-book)
|
|
Popularisation
|
|
British popular psychology author Tony Buzan
|
|
Research
|
|
On effectiveness<br/>and features
|
|
On Automatic creation
|
|
Uses
|
|
Creative techniques
|
|
Strategic planning
|
|
Argument mapping
|
|
Tools
|
|
Pen and paper
|
|
Mermaid
|
|
</pre>
|
|
<br />
|
|
<pre id="diagram" class="mermaid2">
|
|
example-diagram
|
|
</pre>
|
|
|
|
<!-- <div id="cy"></div> -->
|
|
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
|
|
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
|
|
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
|
|
<!-- <script src="./mermaid.js"></script> -->
|
|
|
|
<script type="module">
|
|
// import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
|
import example from '../../packages/mermaid-example-diagram/src/detector';
|
|
import mermaid from '../../packages/mermaid/src/mermaid';
|
|
await mermaid.registerExternalDiagrams([example]);
|
|
mermaid.parseError = function (err, hash) {
|
|
// console.error('Mermaid error: ', err);
|
|
};
|
|
mermaid.initialize({
|
|
theme: 'forest',
|
|
startOnLoad: true,
|
|
logLevel: 0,
|
|
flowchart: {
|
|
// defaultRenderer: 'elk',
|
|
useMaxWidth: false,
|
|
htmlLabels: false,
|
|
// htmlLabels: true,
|
|
},
|
|
// htmlLabels: true,
|
|
gantt: {
|
|
useMaxWidth: false,
|
|
},
|
|
useMaxWidth: false,
|
|
});
|
|
function callback() {
|
|
alert('It worked');
|
|
}
|
|
mermaid.parseError = function (err, hash) {
|
|
console.error('In parse error:');
|
|
console.error(err);
|
|
};
|
|
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
|
|
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
|
|
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
|
|
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
|
|
</script>
|
|
</body>
|
|
</html>
|