mirror of
https://github.com/mermaid-js/mermaid.git
synced 2026-05-23 20:10:38 +00:00
style: fix prettier formatting in CHANGELOG, treeView demo, and icon comment
This commit is contained in:
Ben Doherty
+1
-1
@@ -1 +1 @@
|
||||
./packages/mermaid/CHANGELOG.md
|
||||
./packages/mermaid/CHANGELOG.md
|
||||
|
||||
+109
-111
@@ -1,72 +1,71 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Mermaid TreeView 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: 1200px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Mermaid TreeView 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: 1200px;
|
||||
padding: 20px;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #333;
|
||||
}
|
||||
.demo {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.demo {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
align-items: start;
|
||||
}
|
||||
.demo .source {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.demo .source {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
margin: 0;
|
||||
}
|
||||
.demo .rendered {
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.demo .rendered {
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
min-height: 80px;
|
||||
}
|
||||
.demo .rendered .mermaid {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
.demo .rendered .mermaid {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>TreeView Diagram Demo</h1>
|
||||
<p>
|
||||
Each example shows the <strong>input syntax</strong> (left) alongside the
|
||||
<strong>rendered output</strong> (right).
|
||||
</p>
|
||||
|
||||
<body>
|
||||
<h1>TreeView Diagram Demo</h1>
|
||||
<p>
|
||||
Each example shows the <strong>input syntax</strong> (left) alongside the
|
||||
<strong>rendered output</strong> (right).
|
||||
</p>
|
||||
|
||||
<h2>Basic TreeView (quoted labels)</h2>
|
||||
<div class="demo">
|
||||
<pre class="source"></pre>
|
||||
<div class="rendered">
|
||||
<pre class="mermaid">
|
||||
<h2>Basic TreeView (quoted labels)</h2>
|
||||
<div class="demo">
|
||||
<pre class="source"></pre>
|
||||
<div class="rendered">
|
||||
<pre class="mermaid">
|
||||
treeView-beta
|
||||
"docs"
|
||||
"build"
|
||||
@@ -79,14 +78,14 @@ treeView-beta
|
||||
"_templates"
|
||||
"div. Files"
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Bare Labels with Icons</h2>
|
||||
<div class="demo">
|
||||
<pre class="source"></pre>
|
||||
<div class="rendered">
|
||||
<pre class="mermaid">
|
||||
<h2>Bare Labels with Icons</h2>
|
||||
<div class="demo">
|
||||
<pre class="source"></pre>
|
||||
<div class="rendered">
|
||||
<pre class="mermaid">
|
||||
treeView-beta
|
||||
my-project/
|
||||
src/
|
||||
@@ -99,14 +98,14 @@ my-project/
|
||||
package.json
|
||||
README.md
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Annotations: :::class, icon(), ##</h2>
|
||||
<div class="demo">
|
||||
<pre class="source"></pre>
|
||||
<div class="rendered">
|
||||
<pre class="mermaid">
|
||||
<h2>Annotations: :::class, icon(), ##</h2>
|
||||
<div class="demo">
|
||||
<pre class="source"></pre>
|
||||
<div class="rendered">
|
||||
<pre class="mermaid">
|
||||
treeView-beta
|
||||
my-project/
|
||||
src/
|
||||
@@ -119,14 +118,14 @@ my-project/
|
||||
Dockerfile
|
||||
package.json
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Folder Names with Spaces</h2>
|
||||
<div class="demo">
|
||||
<pre class="source"></pre>
|
||||
<div class="rendered">
|
||||
<pre class="mermaid">
|
||||
<h2>Folder Names with Spaces</h2>
|
||||
<div class="demo">
|
||||
<pre class="source"></pre>
|
||||
<div class="rendered">
|
||||
<pre class="mermaid">
|
||||
treeView-beta
|
||||
My Project/
|
||||
Source Files/
|
||||
@@ -138,14 +137,14 @@ My Project/
|
||||
.gitignore
|
||||
README.md
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Custom Config</h2>
|
||||
<div class="demo">
|
||||
<pre class="source"></pre>
|
||||
<div class="rendered">
|
||||
<pre class="mermaid">
|
||||
<h2>Custom Config</h2>
|
||||
<div class="demo">
|
||||
<pre class="source"></pre>
|
||||
<div class="rendered">
|
||||
<pre class="mermaid">
|
||||
---
|
||||
config:
|
||||
treeView:
|
||||
@@ -163,34 +162,33 @@ treeView-beta
|
||||
"src"
|
||||
"parser"
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
// Copy mermaid source text into the paired .source panel before mermaid runs
|
||||
for (const demo of document.querySelectorAll('.demo')) {
|
||||
const mermaidPre = demo.querySelector('.mermaid');
|
||||
const sourcePre = demo.querySelector('.source');
|
||||
if (mermaidPre && sourcePre) {
|
||||
// Dedent: strip common leading whitespace
|
||||
const raw = mermaidPre.textContent || '';
|
||||
const lines = raw.split('\n');
|
||||
// Drop leading/trailing empty lines
|
||||
while (lines.length > 0 && lines[0].trim() === '') lines.shift();
|
||||
while (lines.length > 0 && lines[lines.length - 1].trim() === '') lines.pop();
|
||||
const minIndent = Math.min(
|
||||
...lines.filter((l) => l.trim()).map((l) => l.match(/^ */)[0].length)
|
||||
);
|
||||
sourcePre.textContent = lines.map((l) => l.slice(minIndent)).join('\n');
|
||||
<script type="module">
|
||||
// Copy mermaid source text into the paired .source panel before mermaid runs
|
||||
for (const demo of document.querySelectorAll('.demo')) {
|
||||
const mermaidPre = demo.querySelector('.mermaid');
|
||||
const sourcePre = demo.querySelector('.source');
|
||||
if (mermaidPre && sourcePre) {
|
||||
// Dedent: strip common leading whitespace
|
||||
const raw = mermaidPre.textContent || '';
|
||||
const lines = raw.split('\n');
|
||||
// Drop leading/trailing empty lines
|
||||
while (lines.length > 0 && lines[0].trim() === '') lines.shift();
|
||||
while (lines.length > 0 && lines[lines.length - 1].trim() === '') lines.pop();
|
||||
const minIndent = Math.min(
|
||||
...lines.filter((l) => l.trim()).map((l) => l.match(/^ */)[0].length)
|
||||
);
|
||||
sourcePre.textContent = lines.map((l) => l.slice(minIndent)).join('\n');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
logLevel: 1,
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
logLevel: 1,
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -117,7 +117,7 @@ export function resolveIcon(label: string, nodeType: NodeType): string {
|
||||
/**
|
||||
* Inline SVG icon paths, keyed by icon ID.
|
||||
* Each value is an SVG path `d` attribute for a 24×24 viewBox.
|
||||
* Icon paths from Material Design Icons by Pictogrammers (Apache 2.0).
|
||||
* Icon paths from Material Design Icons (Apache 2.0).
|
||||
* https://github.com/Templarian/MaterialDesign
|
||||
*/
|
||||
export const ICON_PATHS: Record<string, string> = {
|
||||
|
||||
Reference in New Issue
Block a user