mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-01 19:34:17 +01:00
Merge branch 'develop' into tmp/feature/4706_allow_notes_in_namespace
This commit is contained in:
kairi003
@@ -10,7 +10,7 @@
|
||||
<body>
|
||||
<h1>Block diagram demos</h1>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
block
|
||||
columns 1
|
||||
db(("DB"))
|
||||
blockArrowId6<[" "]>(down)
|
||||
@@ -26,7 +26,7 @@ columns 1
|
||||
style B fill:#f9F,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
block
|
||||
A1["square"]
|
||||
B1("rounded")
|
||||
C1(("circle"))
|
||||
@@ -36,7 +36,7 @@ block-beta
|
||||
</pre>
|
||||
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
block
|
||||
A1(["stadium"])
|
||||
A2[["subroutine"]]
|
||||
B1[("cylinder")]
|
||||
@@ -48,7 +48,7 @@ block-beta
|
||||
</pre>
|
||||
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
block
|
||||
block:e:4
|
||||
columns 2
|
||||
f
|
||||
@@ -57,7 +57,7 @@ block-beta
|
||||
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
block
|
||||
block:e:4
|
||||
columns 2
|
||||
f
|
||||
@@ -67,7 +67,7 @@ block-beta
|
||||
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
block
|
||||
columns 3
|
||||
a:3
|
||||
block:e:3
|
||||
@@ -80,7 +80,7 @@ block-beta
|
||||
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
block
|
||||
columns 4
|
||||
a b c d
|
||||
block:e:4
|
||||
@@ -97,19 +97,19 @@ flowchart LR
|
||||
X-- "a label" -->z
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
block
|
||||
columns 5
|
||||
A space B
|
||||
A --x B
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
block
|
||||
columns 3
|
||||
a["A wide one"] b:2 c:2 d
|
||||
</pre>
|
||||
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
block
|
||||
columns 3
|
||||
a b c
|
||||
e:3
|
||||
@@ -117,7 +117,7 @@ columns 3
|
||||
</pre>
|
||||
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
block
|
||||
|
||||
A1:3
|
||||
A2:1
|
||||
|
||||
@@ -110,7 +110,7 @@
|
||||
title Component diagram for Internet Banking System - API Application
|
||||
|
||||
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile device.")
|
||||
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
|
||||
@@ -148,7 +148,7 @@
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
class Person {
|
||||
+Id : Guid
|
||||
+ID : Guid
|
||||
+FirstName : string
|
||||
+LastName : string
|
||||
-privateProperty : string
|
||||
@@ -219,10 +219,10 @@
|
||||
+double side
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Shape <|-- Circle
|
||||
Shape <|-- Square
|
||||
|
||||
|
||||
namespace Vehicles {
|
||||
class Vehicle {
|
||||
+String brand
|
||||
@@ -234,12 +234,12 @@
|
||||
+boolean hasGears
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Vehicle <|-- Car
|
||||
Vehicle <|-- Bike
|
||||
Car --> Circle : "Logo Shape"
|
||||
Bike --> Square : "Logo Shape"
|
||||
|
||||
|
||||
</pre>
|
||||
<hr />
|
||||
<pre class="mermaid">
|
||||
|
||||
222
demos/er-multiline.html
Normal file
222
demos/er-multiline.html
Normal file
@@ -0,0 +1,222 @@
|
||||
<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.7.2/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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<style>
|
||||
.recursive-500 {
|
||||
font-family: 'Recursive', serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
'slnt' 0,
|
||||
'CASL' 0,
|
||||
'CRSV' 0.5,
|
||||
'MONO' 0;
|
||||
}
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background: #333; */
|
||||
/* font-family: 'Arial'; */
|
||||
font-family: 'Recursive', serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
'slnt' 0,
|
||||
'CASL' 0,
|
||||
'CRSV' 0.5,
|
||||
'MONO' 0;
|
||||
/* color: white; */
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
.gridify.tiny {
|
||||
background-image:
|
||||
linear-gradient(transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px),
|
||||
linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
|
||||
background-size:
|
||||
100% 12px,
|
||||
12px 100%;
|
||||
}
|
||||
|
||||
.gridify.dots {
|
||||
background-image: radial-gradient(
|
||||
circle at center,
|
||||
rgba(220, 220, 200, 0.8) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mermaid svg {
|
||||
font-size: 16px !important;
|
||||
font-family: 'Recursive', serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
'slnt' 0,
|
||||
'CASL' 0,
|
||||
'CRSV' 0.5,
|
||||
'MONO' 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
width: 100%;
|
||||
/*box-shadow: 4px 4px 0px 0px #0000000F;*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="gridify dots">
|
||||
<div class="w-full h-64">
|
||||
<pre id="diagram4" class="mermaid" style="background: rgb(255, 255, 255)">
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR ::: Pine {
|
||||
string registrationNumber PK "Primary Key<br><strong>Unique registration number</strong>"
|
||||
string make "Car make<br><strong>e.g., Toyota</strong>"
|
||||
string model "Model of the car<br><strong>e.g., Corolla</strong>"
|
||||
string[] parts "List of parts<br><strong>Stored as array</strong>"
|
||||
}
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON ::: someclass {
|
||||
string driversLicense PK "The license #<br><strong>Primary Key</strong>"
|
||||
string(99) firstName "Only 99 characters <br>are allowed <br> <strong>e.g., Smith</strong>"
|
||||
string lastName "Last name of person<br><strong>e.g., Smith</strong>"
|
||||
string phone UK "Unique phone number<br><strong>Used for contact</strong>"
|
||||
int age "Age of the person<br><strong>Must be numeric</strong>"
|
||||
}
|
||||
NAMED-DRIVER {
|
||||
string carRegistrationNumber PK, FK, UK, PK "Foreign key to CAR<br><strong>Also part of PK</strong>"
|
||||
string driverLicence PK, FK "Foreign key to PERSON<br><strong>Also part of PK</strong>"
|
||||
}
|
||||
MANUFACTURER only one to zero or more CAR : makesx
|
||||
</pre>
|
||||
<hr />
|
||||
<pre class="mermaid">
|
||||
erDiagram
|
||||
_**testẽζ➕Ø😀㌕ぼ**_ {
|
||||
*__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
|
||||
string last*Name*
|
||||
string __phone__ UK
|
||||
*string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
|
||||
int _age_
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
|
||||
const staticBellIconPack = {
|
||||
prefix: 'fa6-regular',
|
||||
icons: {
|
||||
bell: {
|
||||
body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
|
||||
width: 448,
|
||||
},
|
||||
},
|
||||
width: 512,
|
||||
height: 512,
|
||||
};
|
||||
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
|
||||
},
|
||||
{
|
||||
name: 'fa',
|
||||
loader: () => staticBellIconPack,
|
||||
},
|
||||
]);
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
window.callback = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
await mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
|
||||
theme: 'forest',
|
||||
look: 'classic',
|
||||
layout: 'dagre',
|
||||
|
||||
// theme: 'default',
|
||||
// look: 'classic',
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
fontFamily: 'Recursive',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
messageFontFamily: 'courier',
|
||||
},
|
||||
kanban: {
|
||||
htmlLabels: false,
|
||||
},
|
||||
fontSize: 16,
|
||||
logLevel: 0,
|
||||
securityLevel: 'loose',
|
||||
callback,
|
||||
});
|
||||
// setTimeout(() => {
|
||||
mermaid.init(undefined, document.querySelectorAll('.mermaid'));
|
||||
// }, 1000);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -91,6 +91,9 @@
|
||||
<li>
|
||||
<h2><a href="./architecture.html">Architecture</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a href="./radar.html">Radar</a></h2>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
<div class="diagrams">
|
||||
<pre class="mermaid">
|
||||
packet-beta
|
||||
packet
|
||||
0-15: "Source Port"
|
||||
16-31: "Destination Port"
|
||||
32-63: "Sequence Number"
|
||||
@@ -44,7 +44,7 @@
|
||||
packet:
|
||||
showBits: false
|
||||
---
|
||||
packet-beta
|
||||
packet
|
||||
0-15: "Source Port"
|
||||
16-31: "Destination Port"
|
||||
32-63: "Sequence Number"
|
||||
@@ -70,7 +70,7 @@
|
||||
config:
|
||||
theme: forest
|
||||
---
|
||||
packet-beta
|
||||
packet
|
||||
title Forest theme
|
||||
0-15: "Source Port"
|
||||
16-31: "Destination Port"
|
||||
@@ -97,7 +97,7 @@
|
||||
config:
|
||||
theme: dark
|
||||
---
|
||||
packet-beta
|
||||
packet
|
||||
title Dark theme
|
||||
0-15: "Source Port"
|
||||
16-31: "Destination Port"
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
y-axis Not Important --> important
|
||||
quadrant-1 Plan
|
||||
quadrant-2 Do
|
||||
quadrant-3 Deligate
|
||||
quadrant-3 Delegate
|
||||
quadrant-4 Delete
|
||||
</pre>
|
||||
|
||||
|
||||
157
demos/radar.html
Normal file
157
demos/radar.html
Normal file
@@ -0,0 +1,157 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<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: 'Courier New', Courier, monospace !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Radar diagram demo</h1>
|
||||
|
||||
<div class="diagrams">
|
||||
<pre class="mermaid">
|
||||
radar-beta
|
||||
title My favorite ninjas
|
||||
axis Agility, Speed, Strength
|
||||
axis Stam["Stamina"] , Intel["Intelligence"]
|
||||
|
||||
curve Ninja1["Naruto"]{
|
||||
Agility 2, Speed 2,
|
||||
Strength 3, Stam 5,
|
||||
Intel 0
|
||||
}
|
||||
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
|
||||
curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
|
||||
|
||||
showLegend true
|
||||
ticks 3
|
||||
max 8
|
||||
min 0
|
||||
graticule circle
|
||||
</pre
|
||||
>
|
||||
|
||||
<pre class="mermaid">
|
||||
---
|
||||
config:
|
||||
radar:
|
||||
axisScaleFactor: 0.25
|
||||
axisLabelFactor: 0.95
|
||||
---
|
||||
radar-beta
|
||||
title DevOps Radar
|
||||
axis f["Feature Velocity"], s["Stability"]
|
||||
axis r["Resilience"], e["Efficiency"]
|
||||
axis c["Cost"], d["DevSecOps"]
|
||||
|
||||
curve app1["App1"]{
|
||||
f 5, s 4.5, r 3.8, d 4.2, e 4.5, c 3.5
|
||||
}
|
||||
curve app2["App2"]{4, 3, 4, 3, 3, 4}, app3["App3"]{3, 2, 4, 3, 2, 3}
|
||||
curve app4["App4"]{2, 1, 3.2, 2.5, 1, 2}
|
||||
|
||||
showLegend true
|
||||
ticks 3
|
||||
max 5
|
||||
graticule polygon
|
||||
</pre
|
||||
>
|
||||
|
||||
<pre class="mermaid">
|
||||
%%{init: {'theme': 'forest'} }%%
|
||||
radar-beta
|
||||
title Forest theme
|
||||
axis Agility, Speed, Strength
|
||||
axis Stam["Stamina"] , Intel["Intelligence"]
|
||||
|
||||
curve Ninja1["Naruto"]{
|
||||
Agility 2, Speed 2,
|
||||
Strength 3, Stam 5,
|
||||
Intel 0
|
||||
}
|
||||
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
|
||||
curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
|
||||
</pre
|
||||
>
|
||||
|
||||
<pre class="mermaid" style="background-color: black">
|
||||
%%{init: {'theme': 'dark'} }%%
|
||||
radar-beta
|
||||
title Dark theme
|
||||
axis Agility, Speed, Strength
|
||||
axis Stam["Stamina"] , Intel["Intelligence"]
|
||||
|
||||
curve Ninja1["Naruto"]{
|
||||
Agility 2, Speed 2,
|
||||
Strength 3, Stam 5,
|
||||
Intel 0
|
||||
}
|
||||
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
|
||||
curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
|
||||
</pre
|
||||
>
|
||||
<pre class="mermaid">
|
||||
%%{init: {'theme': 'base', 'themeVariables': {'cScale0': '#ff0000', 'cScale1': '#00ff00', 'cScale2': '#0000ff'}} }%%
|
||||
radar-beta
|
||||
title Custom colors
|
||||
axis Agility, Speed, Strength
|
||||
axis Stam["Stamina"] , Intel["Intelligence"]
|
||||
|
||||
curve Ninja1["Naruto"]{
|
||||
Agility 2, Speed 2,
|
||||
Strength 3, Stam 5,
|
||||
Intel 0
|
||||
}
|
||||
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
|
||||
curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
|
||||
</pre
|
||||
>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
config:
|
||||
radar:
|
||||
axisScaleFactor: 0.25
|
||||
curveTension: 0.1
|
||||
theme: base
|
||||
themeVariables:
|
||||
cScale0: "#FF0000"
|
||||
cScale1: "#00FF00"
|
||||
cScale2: "#0000FF"
|
||||
radar:
|
||||
curveOpacity: 0
|
||||
---
|
||||
radar-beta
|
||||
title Custom colors, axisScaleFactor, curveTension, opacity
|
||||
axis A, B, C, D, E
|
||||
curve c1{1,2,3,4,5}
|
||||
curve c2{5,4,3,2,1}
|
||||
curve c3{3,3,3,3,3}
|
||||
</pre>
|
||||
</div>
|
||||
<script type="module">
|
||||
import mermaid from '/mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
logLevel: 3,
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diagrams {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
pre {
|
||||
width: 45vw;
|
||||
padding: 2em;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
@@ -20,12 +20,14 @@
|
||||
width: 800
|
||||
nodeAlignment: left
|
||||
---
|
||||
sankey-beta
|
||||
Revenue,Expenses,10
|
||||
Revenue,Profit,10
|
||||
Expenses,Manufacturing,5
|
||||
Expenses,Tax,3
|
||||
Expenses,Research,2
|
||||
sankey
|
||||
a,b,8
|
||||
b,c,8
|
||||
c,d,8
|
||||
d,e,8
|
||||
|
||||
x,c,4
|
||||
c,y,4
|
||||
</pre>
|
||||
|
||||
<h2>Energy flow</h2>
|
||||
@@ -40,7 +42,7 @@
|
||||
linkColor: gradient
|
||||
nodeAlignment: justify
|
||||
---
|
||||
sankey-beta
|
||||
sankey
|
||||
|
||||
Agricultural 'waste',Bio-conversion,124.729
|
||||
Bio-conversion,Liquid,0.597
|
||||
|
||||
@@ -23,6 +23,23 @@
|
||||
1940 : fourth step : fifth step
|
||||
</pre>
|
||||
|
||||
<h2>Medical Device Lifecycle Timeline</h2>
|
||||
<pre class="mermaid">
|
||||
timeline
|
||||
title Medical Device Lifecycle
|
||||
section Planning
|
||||
Quality Management System (4) : Regulatory Compliance (4.1) : Risk Management (4.1.3) : Management Review (5.6) : Infrastructure (6.3)
|
||||
Management Responsibility (5) : Planning Activities (5.2) : Human Resources (6.2) : RnD Planning (7.3.2) : Purchasing Process (7.4.1) : Production Activities (7.5.1) : Installation Activities (7.5.3) : Servicing Activities (7.5.4)
|
||||
section Realization
|
||||
Research and Development (7.3) : Inputs (7.3.3) : Outputs (7.3.4) : Review (7.3.5) : Verification (7.3.6) : Validation (7.3.7)
|
||||
Purchasing (7.4) : Purchasing Information (7.4.2) : Production Feedback (8.2.1)
|
||||
Production (7.5) : Production Feedback (8.2.1)
|
||||
Installation (7.5.3) : Installation Activities (7.5.3)
|
||||
Servicing (7.5.4) : Servicing Activities (7.5.4)
|
||||
section Post-Production
|
||||
Post-Market Activities (8) : Feedback (8.2.1) : Complaints (8.2.2) : Adverse Events (8.2.3)
|
||||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
|
||||
75
demos/treemap.html
Normal file
75
demos/treemap.html
Normal 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>
|
||||
@@ -16,7 +16,7 @@
|
||||
<body>
|
||||
<h1>XY Charts demos</h1>
|
||||
<pre class="mermaid">
|
||||
xychart-beta
|
||||
xychart
|
||||
title "Sales Revenue (in $)"
|
||||
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
@@ -26,7 +26,7 @@
|
||||
<hr />
|
||||
<h1>XY Charts horizontal</h1>
|
||||
<pre class="mermaid">
|
||||
xychart-beta horizontal
|
||||
xychart horizontal
|
||||
title "Basic xychart"
|
||||
x-axis "this is x axis" [category1, "category 2", category3, category4]
|
||||
y-axis yaxisText 10 --> 150
|
||||
@@ -36,7 +36,7 @@
|
||||
<hr />
|
||||
<h1>XY Charts only lines and bar</h1>
|
||||
<pre class="mermaid">
|
||||
xychart-beta
|
||||
xychart
|
||||
line [23, 46, 77, 34]
|
||||
line [45, 32, 33, 12]
|
||||
line [87, 54, 99, 85]
|
||||
@@ -48,13 +48,13 @@
|
||||
<hr />
|
||||
<h1>XY Charts with +ve and -ve numbers</h1>
|
||||
<pre class="mermaid">
|
||||
xychart-beta
|
||||
xychart
|
||||
line [+1.3, .6, 2.4, -.34]
|
||||
</pre>
|
||||
|
||||
<h1>XY Charts Bar with multiple category</h1>
|
||||
<pre class="mermaid">
|
||||
xychart-beta
|
||||
xychart
|
||||
title "Basic xychart with many categories"
|
||||
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
|
||||
y-axis yaxisText 10 --> 150
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
<h1>XY Charts line with multiple category</h1>
|
||||
<pre class="mermaid">
|
||||
xychart-beta
|
||||
xychart
|
||||
title "Line chart with many category"
|
||||
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
|
||||
y-axis yaxisText 10 --> 150
|
||||
@@ -72,7 +72,7 @@
|
||||
|
||||
<h1>XY Charts category with large text</h1>
|
||||
<pre class="mermaid">
|
||||
xychart-beta
|
||||
xychart
|
||||
title "Basic xychart with many categories with category overlap"
|
||||
x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
|
||||
y-axis yaxisText 10 --> 150
|
||||
@@ -89,7 +89,7 @@ config:
|
||||
height: 20
|
||||
plotReservedSpacePercent: 100
|
||||
---
|
||||
xychart-beta
|
||||
xychart
|
||||
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
|
||||
</pre>
|
||||
|
||||
@@ -103,7 +103,7 @@ config:
|
||||
height: 20
|
||||
plotReservedSpacePercent: 100
|
||||
---
|
||||
xychart-beta
|
||||
xychart
|
||||
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
|
||||
</pre>
|
||||
|
||||
@@ -136,7 +136,7 @@ config:
|
||||
chartOrientation: horizontal
|
||||
plotReservedSpacePercent: 60
|
||||
---
|
||||
xychart-beta
|
||||
xychart
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
@@ -162,7 +162,7 @@ config:
|
||||
xAxisLineColor: "#87ceeb"
|
||||
plotColorPalette: "#008000, #faba63"
|
||||
---
|
||||
xychart-beta
|
||||
xychart
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
|
||||
@@ -10,16 +10,20 @@
|
||||
<h1>Zenuml demos</h1>
|
||||
<pre class="mermaid">
|
||||
zenuml
|
||||
title Sync Messages (Design Pattern: Adapter)
|
||||
@Starter(Client)
|
||||
Adapter.interfaceMethod() {
|
||||
translateParameter(parameter)
|
||||
|
||||
result = Implementation.implementationMethod()
|
||||
|
||||
translateResult()
|
||||
return translatedResult
|
||||
}
|
||||
BookLibService.Borrow(id) {
|
||||
User = Session.GetUser()
|
||||
if(User.isActive) {
|
||||
try {
|
||||
BookRepository.Update(id, onLoan, User)
|
||||
receipt = new Receipt(id, dueDate)
|
||||
} catch (BookNotFoundException) {
|
||||
ErrorService.onException(BookNotFoundException)
|
||||
} finally {
|
||||
Connection.close()
|
||||
}
|
||||
}
|
||||
return receipt
|
||||
}
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
zenuml
|
||||
|
||||
Reference in New Issue
Block a user