marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-30 21:56:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1693 Added support for custom cssClass and styling to classDiagram-v2

Browse Source
This commit is contained in:
Ashish Jain
2020-09-23 19:27:09 +02:00
parent f856782528
commit c04dac65ac
2 changed files with 52 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
cypress/platform/class.html
View File

@@ -16,21 +16,63 @@
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.customCss > rect, .customCss{
fill:#FF0000 !important;
stroke:#FFFF00 !important;
stroke-width:4px !important;
}
</style> </style>
</head> </head>
<body> <body>
<h1>info below</h1> <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'}}}%% %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
classDiagram-v2 classDiagram
class BankAccount{ class BankAccount{
+String owner +String owner
+BigDecimal balance +BigDecimal balance
+deposit(amount) bool +deposit(amount) bool
+withdrawl(amount) int +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>
<div class="mermaid" style="width: 100%; height: 20%;"> <div class="mermaid2" style="width: 100%; height: 20%;">
flowchart TB flowchart TB
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c a_a --> c --> d_d --> c_c

9
src/diagrams/class/classRenderer-v2.js
View File

@@ -42,7 +42,10 @@ export const addClasses = function(classes, g) {
* Variable for storing the classes for the vertex * Variable for storing the classes for the vertex
* @type {string} * @type {string}
*/ */
let classStr = 'default'; let cssClassStr = '';
if (vertex.cssClasses.length > 0) {
cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' ');
}
// if (vertex.classes.length > 0) { // if (vertex.classes.length > 0) {
// classStr = vertex.classes.join(' '); // classStr = vertex.classes.join(' ');
// } // }
@@ -98,7 +101,7 @@ export const addClasses = function(classes, g) {
classData: vertex, classData: vertex,
rx: radious, rx: radious,
ry: radious, ry: radious,
class: classStr, class: cssClassStr,
style: styles.style, style: styles.style,
id: vertex.id, id: vertex.id,
domId: vertex.domId, domId: vertex.domId,
@@ -115,7 +118,7 @@ export const addClasses = function(classes, g) {
labelText: vertexText, labelText: vertexText,
rx: radious, rx: radious,
ry: radious, ry: radious,
class: classStr, class: cssClassStr,
style: styles.style, style: styles.style,
id: vertex.id, id: vertex.id,
width: vertex.type === 'group' ? 500 : undefined, width: vertex.type === 'group' ? 500 : undefined,