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

Merge branch 'develop' into 4459-remove-beta-suffix

Browse Source
This commit is contained in:
darshanr0107
2025-07-01 12:34:33 +05:30
committed by GitHub
parent 53d27b771d d9396eedd6
commit 6686ee9253
73 changed files with 3312 additions and 980 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
demos/treemap.html Normal file
View File

@@ -0,0 +1,75 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mermaid Treemap Diagram Demo</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<style>
body {
font-family: 'Montserrat', sans-serif;
margin: 0 auto;
max-width: 900px;
padding: 20px;
}
.mermaid {
margin: 30px 0;
}
h1,
h2 {
color: #333;
}
pre {
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Treemap Diagram Demo</h1>
<p>This is a demo of the new treemap diagram type in Mermaid.</p>
<h2>Basic Treemap Example</h2>
<pre class="mermaid">
treemap
"Root"
"Branch 1"
"Leaf 1.1": 10
"Leaf 1.2": 15
"Branch 2"
"Branch 2.1"
"Leaf 2.1.1": 20
"Leaf 2.1.2": 25
"Leaf 2.2": 25
"Leaf 2.3": 30
</pre>
<h2>Technology Stack Treemap Example</h2>
<pre class="mermaid">
treemap
"Technology Stack"
"Frontend"
"React": 35
"CSS": 15
"HTML": 10
"Backend"
"Node.js": 25
"Express": 10
"MongoDB": 15
"DevOps"
"Docker": 10
"Kubernetes": 15
"CI/CD": 5
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 1,
securityLevel: 'loose',
});
</script>
</body>
</html>