mirror of
https://github.com/mermaid-js/mermaid.git
synced 2024-09-12 04:22:50 +02:00
52 lines
1.4 KiB
HTML
52 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<link rel="stylesheet" href="../../dist/mermaid.css"/>
|
|
<script src="../../dist/mermaid.js"></script>
|
|
<style>
|
|
.cluster {
|
|
fill: #fcac93;
|
|
rx:4px;
|
|
stroke: grey;
|
|
}
|
|
.cssClass > rect{
|
|
fill:#FF0000;
|
|
stroke:#FFFF00;
|
|
stroke-width:4px;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
|
|
</head>
|
|
<body>
|
|
<h1>Css classes</h1>
|
|
A should have a red background with styling from class.
|
|
<div class="mermaid" id="i211">
|
|
graph LR;
|
|
A-->B[AAA<span>BBB</span>];
|
|
B-->D;
|
|
class A cssClass;
|
|
|
|
</div>
|
|
A should have a red background with styling from style definition.
|
|
<div class="mermaid" id="i212">
|
|
graph LR;
|
|
A-->B[AAA<span>BBB</span>];
|
|
B-->D;
|
|
style A fill:#FF0000,stroke:#FFFF00,stroke-width:4px;
|
|
</div>
|
|
|
|
A should have orange background with styling from local class definition definition.
|
|
<div class="mermaid" id="i213">
|
|
graph LR;
|
|
A-->B[AAA<span>BBB</span>];
|
|
B-->D;
|
|
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
|
|
class A orange;
|
|
linkStyle 0 stroke:#ff3,stroke-width:4px;
|
|
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
|
|
</div>
|
|
</body>
|
|
</html>
|