mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams and gantt charts.
52 lines (48 loc) • 1.39 kB
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>