marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-28 11:49:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into update-er-diagram

Browse Source
This commit is contained in:
Yari DeWalt
2024-10-29 10:23:14 -07:00
committed by GitHub
parent 5ae5a0cea3 8d0902de4c
commit 9854748fc3
62 changed files with 7222 additions and 741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1037
cypress/integration/rendering/classDiagram-elk-v3.spec.js Normal file
View File

File diff suppressed because it is too large Load Diff

1041
cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js Normal file
View File

File diff suppressed because it is too large Load Diff

1031
cypress/integration/rendering/classDiagram-v3.spec.js Normal file
View File

File diff suppressed because it is too large Load Diff

136
cypress/integration/rendering/kanban.spec.ts Normal file
View File

@@ -0,0 +1,136 @@
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Kanban diagram', () => {
it('1: should render a kanban with a single section', () => {
imgSnapshotTest(
`kanban
id1[Todo]
docs[Create Documentation]
docs[Create Blog about the new diagram]
`,
{}
);
});
it('2: should render a kanban with multiple sections', () => {
imgSnapshotTest(
`kanban
id1[Todo]
docs[Create Documentation]
id2
docs[Create Blog about the new diagram]
`,
{}
);
});
it('3: should render a kanban with a single wrapping node', () => {
imgSnapshotTest(
`kanban
id1[Todo]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
`,
{}
);
});
it('4: should handle the height of a section with a wrapping node at the end', () => {
imgSnapshotTest(
`kanban
id1[Todo]
id2[One line]
id3[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
`,
{}
);
});
it('5: should handle the height of a section with a wrapping node at the top', () => {
imgSnapshotTest(
`kanban
id1[Todo]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
id3[One line]
`,
{}
);
});
it('6: should handle the height of a section with a wrapping node in the middle', () => {
imgSnapshotTest(
`kanban
id1[Todo]
id2[One line]
id3[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
id4[One line]
`,
{}
);
});
it('6: should handle assigments', () => {
imgSnapshotTest(
`kanban
id1[Todo]
docs[Create Documentation]
id2[In progress]
docs[Create Blog about the new diagram]@{ assigned: 'knsv' }
`,
{}
);
});
it('7: should handle prioritization', () => {
imgSnapshotTest(
`kanban
id2[In progress]
vh[Very High]@{ priority: 'Very High' }
h[High]@{ priority: 'High' }
m[Default priority]
l[Low]@{ priority: 'Low' }
vl[Very Low]@{ priority: 'Very Low' }
`,
{}
);
});
it('7: should handle external tickets', () => {
imgSnapshotTest(
`kanban
id1[Todo]
docs[Create Documentation]
id2[In progress]
docs[Create Blog about the new diagram]@{ ticket: MC-2037 }
`,
{}
);
});
it('8: should handle assignments, prioritization and tickets ids in the same item', () => {
imgSnapshotTest(
`kanban
id2[In progress]
docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
`,
{}
);
});
it('10: Full example', () => {
imgSnapshotTest(
`---
config:
kanban:
ticketBaseUrl: 'https://abc123.atlassian.net/browse/#TICKET#'
---
kanban
id1[Todo]
docs[Create Documentation]
docs[Create Blog about the new diagram]
id7[In progress]
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
id8[Design grammar]@{ assigned: 'knsv' }
id9[Ready for deploy]
id10[Ready for test]
id11[Done]
id5[define getData]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
id12[Can't reproduce]
`,
{}
);
});
});

377
cypress/platform/knsv2.html
View File

@@ -34,6 +34,7 @@
/* background: rgb(221, 208, 208); */
/* background: #333; */
font-family: 'Arial';
/* color: white; */
/* font-size: 18px !important; */
}
@@ -83,349 +84,36 @@
</head>
<body>
<div class="flex">
<pre id="diagram" class="mermaid2">
---
title: hello2
config:
look: handDrawn
layout: elk
elk:
<!-- nodePlacementStrategy: INTERACTIVE -->
<!-- mergeEdges: true -->
---
stateDiagram-v2
direction LR
accTitle: An idealized Open Source supply-chain graph
%%
state "🟦 Importer" as author_importer
state "🟥 Supplier, Owner" as author_owner
state "🟨🟥 Maintainer, Author\n🟨 Custodian" as author
state "🟩 Distributor" as repository_distributor
state "🟦 Importer" as language_importer
state "🟦🟨 Packager" as language_packager
state "🟦🟨 OSS Steward" as language_steward
state "🟨 Curator" as language_curator
state "🟩 Distributor" as language_distributor
state "🟦 Contributor" as contributor
state "🟦 Importer" as package_importer
state "🟨 Patcher" as package_patcher
state "🟨🟦 Builder\n🟨🟦 Packager\n🟨🟦 Containerizer" as package_packager
state "🟨 Curator" as package_curator
state "🟩 Distributor" as package_distributor
state "🟦 Importer" as integrator_importer
state "🟥 Supplier, Manufacturer, Owner" as integrator_owner
state "🟦🟨🟥 Integrator, Developer" as integrator_developer
state "🟩🟨 SBOM Redactor\n🟩 Publisher" as integrator_publisher
state "🟦🟨 Builder" as integrator_builder
state "🟨 Deployer" as deployer
state "🟦 Vuln. Checker" as integrator_checker
state "🟩🟨 SBOM Redactor" as redactor
state "🟦 Consumer\n🟦 User" as consumer
state "🟦 Auditor" as auditor_internal
state "🟦 Auditor" as auditor_external
%%
classDef createsSBOM stroke:red,stroke-width:3px;
classDef updatesSBOM stroke:yellow,stroke-width:3px;
classDef assemblesSBOM stroke:yellow,stroke-width:3px;
classDef distributesSBOM stroke:green,stroke-width:3px;
classDef verifiesSBOM stroke:#07f,stroke-width:3px;
%%
class author_importer verifiesSBOM
class author_owner createsSBOM
class manufacturer_owner createsSBOM
class author assemblesSBOM
class package_importer verifiesSBOM
class package_patcher updatesSBOM
class package_packager assemblesSBOM
class package_curator distributesSBOM
class package_distributor distributesSBOM
class language_importer verifiesSBOM
class language_packager assemblesSBOM
class language_steward updatesSBOM
class language_curator distributesSBOM
class language_distributor distributesSBOM
class repository_distributor distributesSBOM
class integrator_importer verifiesSBOM
class integrator_owner createsSBOM
class integrator_developer assemblesSBOM
class integrator_publisher distributesSBOM
class integrator_builder assemblesSBOM
class integrator_checker verifiesSBOM
class deployer assemblesSBOM
class redactor distributesSBOM
class auditor_internal verifiesSBOM
class auditor_external verifiesSBOM
state "Maintainer Environment" as environment_maintainer {
[*] --> author_importer
[*] --> author
author_importer --> author
author_owner --> author
author --> language_packager
}
[*] --> environment_maintainer
state "Language Ecosystem" as ecosystem_lang {
[*] --> language_importer
[*] --> language_steward
[*] --> language_curator
[*] --> language_distributor
language_importer --> language_distributor
language_importer --> language_curator
language_steward --> language_curator
language_curator --> language_distributor
}
language_packager --> ecosystem_lang
ecosystem_lang --> ecosystem_lang
state "Public Collaboration Ecosystem" as ecosystem_repo {
[*] --> repository_distributor
}
author --> ecosystem_repo
ecosystem_repo --> author
repository_distributor --> contributor
contributor --> repository_distributor
state "Package Ecosystem" as ecosystem_package {
[*] --> package_importer
[*] --> package_packager
[*] --> package_patcher
package_importer --> package_patcher
package_importer --> package_packager
package_patcher --> package_packager
package_packager --> package_curator
package_packager --> package_distributor
package_curator --> package_distributor
}
repository_distributor --> ecosystem_package
language_distributor --> ecosystem_package
ecosystem_package --> ecosystem_package
state "Integrator Environment" as environment_integrator {
[*] --> integrator_developer
[*] --> integrator_importer
integrator_importer --> integrator_developer
integrator_owner --> integrator_developer
integrator_builder --> integrator_publisher
integrator_developer --> integrator_checker
integrator_checker --> integrator_developer
auditor_internal --> integrator_developer
integrator_developer --> integrator_builder
integrator_developer --> auditor_internal
}
repository_distributor --> environment_integrator
language_distributor --> environment_integrator
package_distributor --> environment_integrator
state "Production Environment" as environment_prod {
[*] --> deployer
deployer --> redactor
}
integrator_publisher --> [*]
integrator_developer --> environment_prod
integrator_builder --> environment_prod
integrator_publisher --> environment_prod
deployer --> auditor_external
deployer --> consumer
redactor --> consumer
</pre>
<pre id="diagram" class="mermaid2">
---
config:
look: neo
---
flowchart RL
subgraph " "
A5@{ shape: manual-file, label: "a label"}
B5@{ shape: manual-input, label: "a label" }
C5@{ shape: mul-doc, label: "a label" }
D5@{ shape: mul-proc, label: "a label" }
E5@{ shape: paper-tape, label: "a label" }
B3@{ shape: das, label: "a label" }
C3@{ shape: disk, label: "a label" }
D4@{ shape: lin-doc, label: "a label" }
E4@{ shape: loop-limit, label: "a label" }
end
subgraph " "
B6@{ shape: summary, label: "a label" }
C6@{ shape: tag-we-rect, label: "a label" }
D6@{ shape: tag-rect, label: "a label" }
A2@{ shape: fork}
B2@{ shape: hourglass }
C2@{ shape: comment, label: "I am a comment" }
D2@{ shape: bolt }
D3@{ shape: disp, label: "a label" }
C4@{ shape: junction, label: "a label" }
A4@{ shape: extract, label: "a label"}
B52[a fr]@{ shape: fr }
end
subgraph " "
A1@{ shape: text, label: This is a textblock}
B1@{ shape: card, label: "a label" }
C1@{ shape: lined-proc, label: "a label" }
D1@{ shape: start, label: "a label" }
E1@{ shape: stop, label: "a label" }
E2@{ shape: doc, label: "a label" }
A6@{ shape: stored-data, label: "a label"}
A3@{ shape: delay, label: "a label" }
E3@{ shape: div-proc, label: "a label" }
B4[a label]@{ shape: win-pane }
end
</pre>
<pre id="diagram" class="mermaid2">
---
title: hello2
config:
look: handDrawn
elk:
<!-- nodePlacementStrategy: SIMPLE -->
---
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart TD
A([Start]) -->|go to booking page| B("select
ISBS booking no")
A --> QQ{cancel booking}
A --> RR{no show}
A --> SS{change booking}
B -->C(wmpay_request_payment.request_type= 'partial',
wmpay_request_payment.status= 'paid',
pos_booking.booking_status= ‘partial’ and 'full_deposit')
style C text-align:left
C -->D{manage booking}
D -->|cancel|E[ระบบแสดงช่องให้กรอกเหตุผล]
E -->F{กดปุ่ม 'cancel' หรือไม่}
F -->|Yes|G[ระบบบันทึกค่าใหม่
และไม่สามารถแก้ไขข้อมูลได้]
F -->|No|H[กดปุ่ม 'close']
H -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
G -->|ระบบส่งข้อมูล|I[(POS_database)]
I -->|pos_booking.booking_status='cancel'|Z([End])
D -->|no show|J[ระบบแสดงช่องให้กรอกเหตุผล]
J -->K{กดปุ่ม 'noshow' หรือไม่}
K -->|Yes|L[ระบบสร้างใบเสร็จอัตโนมัติ
Product_id: 439,
ItemName: no show]
style L text-align:left
K -->|No|O[กดปุ่ม 'close']
O -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
L -->M[ระบบบันทึกค่าใหม่]
M -->|ระบบส่งข้อมูล|N[(POS_database)]
N -->|pos_booking.booking_status=‘noshow’|Z
</pre>
<pre id="diagram" class="mermaid2">
---
title: hello2
config:
look: handDrawn
layout: dagre
elk:
nodePlacementStrategy: BRANDES_KOEPF
---
flowchart
A --> A
subgraph A
B --> B
subgraph B
C
end
end
</pre
>
<pre id="diagram" class="mermaid2">
---
config:
look: handdrawn
flowchart:
htmlLabels: true
---
flowchart
A[I am a long text, where do I go??? handdrawn - true]
</pre
>
</div>
<div class="flex">
<pre id="diagram" class="mermaid2">
---
config:
flowchart:
htmlLabels: false
---
flowchart
A[I am a long text, where do I go??? classic - false]
</pre
>
<pre id="diagram" class="mermaid2">
---
config:
flowchart:
htmlLabels: true
---
flowchart
A[I am a long text, where do I go??? classic - true]
</pre
>
</div>
<pre id="diagram2" class="mermaid2">
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
</pre>
<pre id="diagram3" class="mermaid2">
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef ash color:red
class C ash
style C stroke:#00f, fill:black
</pre>
<pre id="diagram4" class="mermaid2">
stateDiagram
A:::foo
B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
style C stroke:#00f, fill:black, color:white
kanban
id2[In progress]
docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
</pre>
<pre id="diagram4" class="mermaid">
flowchart TB
A@{
label: "aksljhf kasjdh"
}
---
config:
kanban:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
# sectionWidth: 300
---
kanban
Todo
[Create Documentation]
docs[Create Blog about the new diagram]
id7[In progress]
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
id9[Ready for deploy]
id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for test]
id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
id11[Done]
id5[define getData]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
id12[Can't reproduce]
id3[Weird flickering in Firefox]
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
@@ -439,13 +127,15 @@ flowchart TB
};
mermaid.initialize({
// theme: 'base',
// theme: 'default',
// theme: 'forest',
// handDrawnSeed: 12,
// look: 'handDrawn',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// layout: 'dagre',
// layout: 'elk',
// layout: 'fixed',
// htmlLabels: false,
htmlLabels: false,
flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat',
// fontFamily: 'Kalam',
@@ -455,8 +145,11 @@ flowchart TB
noteFontFamily: 'courier',
messageFontFamily: 'courier',
},
kanban: {
htmlLabels: false,
},
fontSize: 12,
logLevel: 3,
logLevel: 0,
securityLevel: 'loose',
});
function callback() {

663
cypress/platform/yari.html Normal file
View File

@@ -0,0 +1,663 @@
<html>
<body>
<h1 class="header">Class Nodes</h1>
<div class="node-showcase">
<div class="test">
<h2>Basic Class</h2>
<pre class="mermaid">
---
config:
htmlLabels: false
---
classDiagram
class _Duck_ {
+String beakColor
_+_swim_()a_
__+quack() test__
}
</pre>
</div>
<div class="test">
<h2>Basic Class</h2>
<pre class="mermaid">
---
config:
htmlLabels: false
---
classDiagram
class Class10:::exClass2 {
int[] id
List~int~ ids
test(List~int~ ids) List~bool~
testArray() bool[]
}
</pre>
</div>
<div class="test">
<h2>Basic Class</h2>
<pre class="mermaid">
flowchart TD
Start --> Stop
</pre>
</div>
<div class="test">
<h2>Complex Class</h2>
<pre class="mermaid">
classDiagram
class Square~Shape~{
int id
List~int~ position
setPoints(List~int~ points)
getPoints() List~int~
}
Square : -List~string~ messages
Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
Square : +getDistanceMatrix() List~List~int~~
</pre
>
</div>
<div class="test">
<h2>No Attributes</h2>
<pre class="mermaid">
classDiagram
class Duck {
+swim()
+quack()
}
</pre>
</div>
<div class="test">
<h2>No Methods</h2>
<pre class="mermaid">
classDiagram
class Duck {
+String beakColor
}
</pre>
</div>
<div class="test">
<h2>Only Class Name</h2>
<p>Empty line as attribute</p>
<pre class="mermaid">
---
config:
class:
hideEmptyMembersBox: false
---
classDiagram
class Duck {
}
</pre>
</div>
<div class="test">
<h2>Visibility and Types</h2>
<p>(Further tilde testing)</p>
<div class="mermaid">
classDiagram class Duck { ~interface~~~ +String beakColor #swim() ~quack()~~~
-test()~~~~~~~ +deposit(amount) bool }
</div>
</div>
<div class="test">
<h2>Additional Classifiers</h2>
<p>(* Abstract | $ Static)</p>
<div class="mermaid">
classDiagram class Square~Shape~ { int id* List~int~ position* setPoints(List~int~points)*
getPoints()* List~int~ } Square : -List~string~ messages$ Square :
+setMessages(List~string~ messages)* Square : +getMessages()$ List~string~ Square :
+getDistanceMatrix() List~List~int~~$
</div>
</div>
<div class="test">
<h2>Label</h2>
<pre class="mermaid">
classDiagram
class Animal~test~["Animal with a label"]
</pre>
</div>
<div class="test">
<h2>Spacing</h2>
<p>(Fix ensures consistent spacing rules)</p>
<p>(No space or single space?)</p>
<pre class="mermaid">
classDiagram
class ClassName {
-attribute:type
- attribute : type
test
+ GetAttribute() type
+ GetAttribute() type
}
</pre>
</div>
<div class="test">
<h2>Annotation</h2>
<pre class="mermaid">
classDiagram
class Shape
&lt;&lt;interface&gt;&gt; Shape
Shape : noOfVertices
Shape : draw()
</pre>
</div>
<div class="test">
<h2>Long Class Name Text</h2>
<pre class="mermaid">
classDiagram
class ThisIsATestForALongClassName {
&lt;&lt;interface&gt;&gt;
noOfLetters
delete()
}
</pre>
</div>
<div class="test">
<h2>Long Annotation Text</h2>
<pre class="mermaid">
classDiagram
class Shape
&lt;&lt;superlongannotationtext&gt;&gt; Shape
Shape : noOfVertices
Shape : draw()
</pre>
</div>
<div class="test">
<h2>Long Member Text</h2>
<pre class="mermaid">
classDiagram
class Shape
&lt;&lt;interface&gt;&gt; Shape
Shape : noOfVertices
Shape : longtexttestkeepgoingandgoing
Shape : draw()
</pre>
</div>
<div class="test">
<h2>Link</h2>
<pre class="mermaid">
classDiagram
class Shape
link Shape "https://www.github.com" "This is a tooltip for a link"
</pre>
</div>
<div class="test">
<h2>Click</h2>
<pre class="mermaid">
classDiagram
class Shape
click Shape href "https://www.github.com" "This is a tooltip for a link"
</pre>
</div>
<div class="test">
<h2>Hand Drawn</h2>
<pre class="mermaid">
---
config:
look: handDrawn
htmlLabels: true
---
classDiagram
class Hand {
+String beakColor
+swim()
+quack()
}
style Hand fill:#f9f,stroke:#29f,stroke-width:2px
</pre>
</div>
<div class="test">
<h2>Neutral Theme</h2>
<pre class="mermaid">
---
config:
theme: neutral
---
classDiagram
class Duck {
+String beakColor
+swim()
+quack()
}
</pre>
</div>
<div class="test">
<h2>Dark Theme</h2>
<pre class="mermaid">
---
config:
theme: dark
---
classDiagram
class Duck {
+String beakColor
+swim()
+quack()
}
</pre>
</div>
<div class="test">
<h2>Forest Theme</h2>
<pre class="mermaid">
---
config:
theme: forest
---
classDiagram
class Duck {
+String beakColor
+swim()
+quack()
}
</pre>
</div>
<div class="test">
<h2>Base Theme</h2>
<pre class="mermaid">
---
config:
theme: base
---
classDiagram
class Duck {
+String beakColor
+swim()
+quack()
}
</pre>
</div>
<div class="test">
<h2>Custom Theme</h2>
<pre class="mermaid">
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#BB2528',
'primaryTextColor': '#fff',
'primaryBorderColor': '#7C0000',
'lineColor': '#F83d29',
'secondaryColor': '#006100',
'tertiaryColor': '#fff'
}
}
}%%
classDiagram
class Duck {
+String beakColor
+swim()
+quack()
}
Duck--Dog
</pre>
</div>
<div class="test">
<h2>Styling within Diagram</h2>
<pre class="mermaid">
classDiagram
class Duck {
+String beakColor
+swim()
+quack()
}
style Duck fill:#f9f,stroke:#333,stroke-width:8px
</pre>
</div>
<div class="test">
<h2>Styling with classDef Statement</h2>
<pre class="mermaid">
classDiagram
class Duck:::bold {
+String beakColor
+swim()
+quack()
}
class Dog {
+int numTeeth
+bark()
}
cssClass "Duck,Dog" pink
classDef pink fill:#f9f
classDef default color:#f1e
classDef bold stroke:#333,stroke-width:6px,color:#fff
</pre>
</div>
<div class="test">
<h2>Styling with Class in Stylesheet</h2>
<pre class="mermaid">
classDiagram
class Duck {
+String beakColor
+swim()
+quack()
}
class Duck:::styleClass
</pre>
</div>
</div>
<h1 class="header">Diagram Testing</h1>
<div class="diagram-showcase">
<div class="test">
<h2>Class Nodes Only</h2>
<pre class="mermaid">
---
title: Animal example
---
classDiagram
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
</pre>
</div>
<div class="test">
<h2>Class Nodes LR</h2>
<pre class="mermaid">
---
title: Animal example
---
classDiagram
direction LR
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
</pre>
</div>
<div class="test">
<h2>Relations</h2>
<pre class="mermaid">
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
</pre>
</div>
<div class="test">
<h2>Two Way Relation</h2>
<pre class="mermaid">
classDiagram
class Animal {
int size
walk()
}
class Zebra {
int size
walk()
}
Animal o--|> Zebra
</pre>
</div>
<div class="test">
<h2>Relations with Labels</h2>
<pre class="mermaid">
classDiagram
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation
</pre>
</div>
<div class="test">
<h2>Cardinality / Multiplicity</h2>
<pre class="mermaid">
classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains
</pre>
</div>
<div class="test">
<h2>Complex Relations with Theme</h2>
<pre class="mermaid">
---
config:
theme: forest
look: handDrawns
layout: elk
---
classDiagram
direction RL
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" o--o "1" IdCard : carries
Student "1" o--o "1" Bike : rides
</pre>
</div>
<div class="test">
<h2>Notes</h2>
<pre class="mermaid">
classDiagram
note "This is a general note"
note for MyClass "This is a note for a class"
class MyClass
</pre>
</div>
<div class="test">
<h2>Namespaces</h2>
<pre class="mermaid">
classDiagram
namespace BaseShapes {
class Triangle
class Rectangle {
double width
double height
}
}
</pre>
</div>
<div class="test">
<h2>Namespaces</h2>
<pre class="mermaid">
---
config:
layout: elk
---
classDiagram
namespace Namespace1 {
class C1
class C2
}
C1 --> C2
class C3
class C4
</pre>
</div>
<div class="test">
<h2>Full Example</h2>
<pre class="mermaid">
---
title: Animal example
config:
layout: dagre
---
classDiagram
note "From Duck till Zebra"
Animal <|--|> Duck
note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
Animal <|-- Fish
Animal <|--|> Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
cssClass "Duck" test
classDef test fill:#f71
%%classDef default fill:#f93
</pre>
</div>
<div class="test">
<h2>Full Example</h2>
<pre class="mermaid">
---
config:
theme: forest
look: handDrawn
---
classDiagram
note for Outside "Note testing"
namespace Test {
class Outside
}
namespace BaseShapes {
class Triangle
class Rectangle {
double width
double height
}
}
Outside <|--|> Rectangle
style Triangle fill:#f9f,stroke:#333,stroke-width:4px
</pre>
</div>
<div class="test">
<pre class="mermaid">
---
config:
look: handDrawn
layout: elk
---
classDiagram
Class01 "1" <|--|> "*" AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 "1" *-- "*" Class04
Class05 "1" o-- "many" Class06
Class07 "1" .. "*" Class08
Class09 "1" --> "*" C2 : Where am i?
Class09 "*" --* "*" C3
Class09 "1" --|> "1" Class07
NewClass ()--() Class04
Class09 <|--|> AveryLongClass
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 "1" <--> "*" C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
Class10 o--o AveryLongClass
Class10 <--> Class07
</pre>
</div>
<div class="test">
<pre class="mermaid">
classDiagram
test ()--() test2
</pre>
</div>
</div>
<script type="module">
import mermaid from './mermaid.esm.mjs';
import layouts from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) {
console.error('Mermaid error: ', err);
};
mermaid.initialize();
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
</script>
</body>
<style>
.header {
text-decoration: underline;
text-align: center;
}
.node-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
}
.test {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
.test > h2 {
margin: 0;
text-align: center;
}
.test > p {
margin-top: -6px;
color: gray;
}
.diagram-showcase {
display: grid;
grid-template-columns: 1fr;
}
.styleClass > * > path {
fill: #ff0000 !important;
stroke: #ffff00 !important;
stroke-width: 4px !important;
stroke-dasharray: 2 !important;
}
</style>
</html>