marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-21 16:29:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1697 from mermaid-js/1676_click_support_v2

Browse Source 
Adds support for custom cssClasses for classDiagram-v2. Also, improved test cases for classDiagram.
This commit is contained in:
Knut Sveidqvist
2020-09-23 20:41:52 +02:00
committed by GitHub
parent 2cbb2d7b6a 93bf8d7414
commit f0a8eaa5be
4 changed files with 58 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cypress/integration/rendering/classDiagram-v2.spec.js
View File

@@ -334,7 +334,7 @@ describe('Class diagram V2', () => {
testArray() bool[]
}
cssClass "Class10" exClass
cssClass "Class10" exClass2
`,
{logLevel : 1, flowchart: { "htmlLabels": false },}
);
@@ -345,7 +345,7 @@ describe('Class diagram V2', () => {
imgSnapshotTest(
`
classDiagram-v2
class Class10:::exClass {
class Class10:::exClass2 {
int[] id
List~int~ ids
test(List~int~ ids) List~bool~
@@ -364,7 +364,7 @@ describe('Class diagram V2', () => {
class Class10
class Class20
cssClass "Class10, class20" exClass
cssClass "Class10, class20" exClass2
`,
{logLevel : 1, flowchart: { "htmlLabels": false },}
);

50
cypress/platform/class.html
View File

@@ -16,21 +16,63 @@
.mermaid2 {
display: none;
}
.customCss > rect, .customCss{
fill:#FF0000 !important;
stroke:#FFFF00 !important;
stroke-width:4px !important;
}
</style>
</head>
<body>
<h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;">
<div class="mermaid" style="width: 100%; height: 20%;">
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawl(amount) int
}
cssClass "BankAccount" customCss
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
classDiagram-v2
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawl(amount) int
}
cssClass "BankAccount" customCss
</div>
<div class="mermaid2" style="width: 100%; height: 20%;">
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
classDiagram-v2
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawl(amount) int
}
}
Class01~T~ <|-- AveryLongClass : Cool
Class03~T~ *-- Class04~T~
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
class Class10~T~ {
&lt;&lt;service&gt;&gt;
int id
test()
}
callback Class01 "callback" "A Tooltip"
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
<div class="mermaid2" style="width: 100%; height: 20%;">
flowchart TB
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c

3
cypress/platform/e2e.html
View File

@@ -27,6 +27,9 @@
svg {
border: 2px solid darkred;
}
.exClass2 > rect, .exClass {
fill: greenyellow !important;
}
</style>
</head>
<body>