GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-21 06:53:17 +08:00
Code Issues Projects Releases Wiki Activity
mermaid/test/web_style.html

145 lines
4.8 KiB
HTML
Raw Normal View History

Added class definitions to nodes Removed the inline styling of nodes with classes, replaced with class attributes and a common CSS Style section at the start of the SVG.
2014-12-14 00:32:27 +01:00
<!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; }
Improved class styling for nodes 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
2014-12-14 22:15:47 +01:00
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
Added class definitions to nodes Removed the inline styling of nodes with classes, replaced with class attributes and a common CSS Style section at the start of the SVG.
2014-12-14 00:32:27 +01:00
</style>
</head>
<body>
Improved class styling for nodes 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
2014-12-14 22:15:47 +01:00
<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>
Added class definitions to nodes Removed the inline styling of nodes with classes, replaced with class attributes and a common CSS Style section at the start of the SVG.
2014-12-14 00:32:27 +01:00
<pre>
Improved class styling for nodes 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
2014-12-14 22:15:47 +01:00
&lt;style&gt;
.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; }
&lt;/style&gt;
</pre>
<h3>Graph definition</h3>
<pre>
graph TD;
noc[No class&lt;br />using default];
cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
Added class definitions to nodes Removed the inline styling of nodes with classes, replaced with class attributes and a common CSS Style section at the start of the SVG.
2014-12-14 00:32:27 +01:00
Improved class styling for nodes 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
2014-12-14 22:15:47 +01:00
sq[Class node-square&lt;br /&gt;defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq--&gt;ncss;
cyr[Class node-cyr&lt;br /&gt;defined by classDef];
od2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;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;
Added class definitions to nodes Removed the inline styling of nodes with classes, replaced with class attributes and a common CSS Style section at the start of the SVG.
2014-12-14 00:32:27 +01:00
Improved class styling for nodes 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
2014-12-14 22:15:47 +01:00
e1[Class node-cyr&lt;br /&gt;defined by classDef&lt;br /&gt;and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef&lt;br /&gt;and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in&lt;br /&gt;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;
Added class definitions to nodes Removed the inline styling of nodes with classes, replaced with class attributes and a common CSS Style section at the start of the SVG.
2014-12-14 00:32:27 +01:00
</pre>
<div class="mermaid">
graph TD;
Improved class styling for nodes 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
2014-12-14 22:15:47 +01:00
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];
Added class definitions to nodes Removed the inline styling of nodes with classes, replaced with class attributes and a common CSS Style section at the start of the SVG.
2014-12-14 00:32:27 +01:00
class sq node-square;
Improved class styling for nodes 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
2014-12-14 22:15:47 +01:00
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];
Added edge labels
2015-01-11 16:16:50 +01:00
od2-->|Simple edge label|ncdef;
cyr-->|Complex<br>multiline<br>edge label|ncdef;
Improved class styling for nodes 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
2014-12-14 22:15:47 +01:00
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;
Added class definitions to nodes Removed the inline styling of nodes with classes, replaced with class attributes and a common CSS Style section at the start of the SVG.
2014-12-14 00:32:27 +01:00
</div>
</body>
</html>
Reference in New Issue Copy Permalink