+
+ 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:
- graph TD;
- sq[Square shape]-->ci((Circle shape));
- od>Odd shape]---|Two line <br>edge comment|ro;
- od2>Really long text in an Odd shape]-->od3>Really long text with linebreak <br>in an Odd shape];
- di{Diamond is <br> broken}-->ro(Rounded <br>square <br>shape);
+ <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;
- %% Comments after double percent signs
- di-->ro2(Rounded square shape);
- e((Inner circle))-->f(,.?!+-*ز);
- style e red;
+ 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;
- class sq node-square;
- class e node-circle;
+ 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;
- sq[Square shape]-->ci((Circle shape));
- od>Odd shape]---|Two line edge comment|ro;
- od2>Really long text in an Odd shape]-->od3>Really long text with linebreak in an Odd shape];
- di{Diamond is broken}-->ro(Rounded square shape);
- di-->ro2(Rounded square shape);
- %% Comments after double percent signs
- e((Inner circle))-->f(,.?!+-*ز);
- cyr[Cyrillic]-->cyr2((Circle shape Начало));
- style e red;
+ 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;
- class e node-circle;
+ 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-->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 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;
diff --git a/test/web_style.svg b/test/web_style.svg
index 5a36691ad..eef22e093 100644
--- a/test/web_style.svg
+++ b/test/web_style.svg
@@ -1,9 +1,10 @@
-
\ No newline at end of file
+
No class .. using default
Class node-cyr-undefined .. is undefined, using default
Default style
Class node-square .. defined in page CSS
Page CSS style
Class node-cyr .. defined by classDef
Class node-odd-override .. defined in page CSS .. and defined by classDef
classDef style
Class node-cyr .. defined by classDef .. and inline style
Class node-odd-override .. defined in page CSS .. and defined by classDef .. and inline style