marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-14 17:54:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

build: group webpack & ignore dist & support yarn1.x (#2551)

Browse Source
This commit is contained in:
Matthieu MOREL
2021-12-11 12:02:39 +01:00
committed by GitHub
parent 67143b7bfd
commit 4cd2621eeb
26 changed files with 836 additions and 144457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
demos/dataflowchart.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<h2>Data Flow Diagram Example</h2>
<div class="mermaid">
flowchart LR
DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
</div>
<h2>Borders Example</h2>
<div class="mermaid">
flowchart TD
allSides[ stroke all sides ];
allSides2[|borders:ltrb| stroke all sides ];
rbSides[|borders:rb| stroke right and bottom sides ];
ltSides[|borders:lt| stroke left and top sides ];
lrSides[|borders:lr| stroke left and right sides ];
noSide[|borders:no| stroke no side ];
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
});
</script>
<script>
function testClick(nodeId) {
console.log('clicked', nodeId);
var originalBgColor = document.querySelector('body').style.backgroundColor;
document.querySelector('body').style.backgroundColor = 'yellow';
setTimeout(function () {
document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100);
}
</script>
</body>
</html>