Style
Styling is applied in the following order:
- Node default style (see wiki)
- CSS on the page
- Class definitions inside the graph definition
- Inline styling inside the graph definition
and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
CSS in the page head:
<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>
Graph definition
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;
graph TD;
noc[No class
using default];
cyr2((Class node-cyr-undefined
is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square
defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq-->ncss;
cyr[Class node-cyr
defined by classDef];
od2>Class node-odd-override
defined in page CSS
and defined by classDef];
ncdef[classDef style];
od2-->|Simple edge label|ncdef;
cyr-->|Complex
multiline
edge label|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
defined by classDef
and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2>Class node-odd-override
defined in page CSS
and defined by classDef
and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in
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;