mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-20 15:59:51 +02:00
f656269a50
Added unit testing classDefs are now exported to the common style of the SVG Styling is no longer copied from other mermaid SVGs on the same webpage
145 lines
4.7 KiB
HTML
145 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<script src="../dist/mermaid.full.js"></script>
|
|
<script>
|
|
var mermaid_config = {
|
|
startOnLoad:true
|
|
}
|
|
</script>
|
|
<script>
|
|
function apa(){
|
|
console.log('CLICKED');
|
|
}
|
|
</script>
|
|
<style>
|
|
.node-square {
|
|
stroke-width: 4px;
|
|
stroke: #339933;
|
|
fill: #999900;
|
|
font-weight: 300;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
|
|
font-size: 14px; }
|
|
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
|
|
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
|
|
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Style</h1>
|
|
Styling is applied in the following order:
|
|
<ol>
|
|
<li>Node default style (see wiki)</li>
|
|
<li>CSS on the page</li>
|
|
<li>Class definitions inside the graph definition</li>
|
|
<li>Inline styling inside the graph definition</li>
|
|
</ol>
|
|
and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
|
|
|
|
<h3>CSS in the page head:</h3>
|
|
<pre>
|
|
<style>
|
|
.node-square {
|
|
stroke-width: 4px;
|
|
stroke: #339933;
|
|
fill: #999900;
|
|
font-weight: 300;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
|
|
font-size: 14px; }
|
|
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
|
|
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
|
|
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
|
|
|
|
</style>
|
|
</pre>
|
|
<h3>Graph definition</h3>
|
|
<pre>
|
|
graph TD;
|
|
|
|
noc[No class<br />using default];
|
|
cyr2((Class node-cyr-undefined<br />is undefined, using default));
|
|
class cyr2 node-cyr-undefined;
|
|
ndef[Default style];
|
|
noc-->ndef;
|
|
cyr2-->ndef;
|
|
|
|
sq[Class node-square<br />defined in page CSS];
|
|
class sq node-square;
|
|
ncss[Page CSS style];
|
|
sq-->ncss;
|
|
|
|
cyr[Class node-cyr<br />defined by classDef];
|
|
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
|
|
ncdef[classDef style];
|
|
od2-->ncdef;
|
|
cyr-->ncdef;
|
|
class cyr node-cyr;
|
|
class od2 node-odd-override;
|
|
classDef node-odd-override fill:#BB00BB,stroke:#666622;
|
|
classDef node-cyr fill:#BB0099,stroke:#666622;
|
|
|
|
e1[Class node-cyr<br />defined by classDef<br />and inline style];
|
|
class e1 node-e1;
|
|
style e1 fill:#FF0000;
|
|
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
|
|
class e2 node-e2;
|
|
style e2 fill:#FF0000;
|
|
e((Inline style in<br />graph definition));
|
|
style e fill:#FF0000;
|
|
ninl[Inline style];
|
|
e-->ninl;
|
|
e1-->ninl;
|
|
e2-->ninl;
|
|
classDef node-e1 fill:#990066,stroke:#666622;
|
|
classDef node-e2 fill:#990066,stroke:#666622;
|
|
</pre>
|
|
|
|
<div class="mermaid">
|
|
graph TD;
|
|
|
|
noc[No class<br />using default];
|
|
cyr2((Class node-cyr-undefined<br />is undefined, using default));
|
|
class cyr2 node-cyr-undefined;
|
|
ndef[Default style];
|
|
noc-->ndef;
|
|
cyr2-->ndef;
|
|
|
|
sq[Class node-square<br />defined in page CSS];
|
|
class sq node-square;
|
|
ncss[Page CSS style];
|
|
sq-->ncss;
|
|
|
|
cyr[Class node-cyr<br />defined by classDef];
|
|
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
|
|
ncdef[classDef style];
|
|
od2-->ncdef;
|
|
cyr-->ncdef;
|
|
class cyr node-cyr;
|
|
class od2 node-odd-override;
|
|
classDef node-odd-override fill:#BB00BB,stroke:#666622;
|
|
classDef node-cyr fill:#BB0099,stroke:#666622;
|
|
|
|
e1[Class node-cyr<br />defined by classDef<br />and inline style];
|
|
class e1 node-e1;
|
|
style e1 fill:#FF0000;
|
|
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
|
|
class e2 node-e2;
|
|
style e2 fill:#FF0000;
|
|
e((Inline style in<br />graph definition));
|
|
style e fill:#FF0000;
|
|
ninl[Inline style];
|
|
e-->ninl;
|
|
e1-->ninl;
|
|
e2-->ninl;
|
|
classDef node-e1 fill:#990066,stroke:#666622;
|
|
classDef node-e2 fill:#990066,stroke:#666622;
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|