1. Graphs from graphviz 🔗
The Graphviz functionnality requires the dot executable. More information on Graphviz's website.
2. Synopsis 🔗
Graphs blocks are delimited by [graph]...[/graph]
3. Properties 🔗
layout
The layout engine, defaults to dot see Graphviz's documentation. Allowed values:width
The resulting svg's width property, defaults to 100%
4. Examples 🔗
Generated by the following code:
[graph] |
digraph UML_Class_diagram { |
bgcolor=transparent; |
graph[fontcolor=darkgray]; |
node[fontcolor=darkgray]; |
edge[fontcolor=darkgray, color=gray90]; |
graph [ |
label="UML Class diagram demo" |
labelloc="t" |
fontname="Helvetica,Arial,sans-serif" |
] |
node [ |
fontname="Helvetica,Arial,sans-serif" |
shape=record |
style=filled |
fillcolor=gray95 |
] |
edge [fontname="Helvetica,Arial,sans-serif"] |
edge [arrowhead=vee style=dashed] |
Client -> Interface1 [label=dependency] |
Client -> Interface2 |
edge [dir=back arrowtail=empty style=""] |
Interface1 -> Class1 [xlabel=inheritance] |
Interface2 -> Class1 [dir=none] |
Interface2 [label="" xlabel="Simple\ninterface" shape=circle] |
Interface1[label = <{<b>«interface» I/O</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>] |
Class1[label = <{<b>I/O class</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>] |
edge [dir=back arrowtail=empty style=dashed] |
Class1 -> System_1 [label=implementation] |
System_1 [ |
shape=plain |
label=<<table border="0" cellborder="1" cellspacing="0" cellpadding="4"> |
<tr> <td> <b>System</b> </td> </tr> |
<tr> <td> |
<table border="0" cellborder="0" cellspacing="0" > |
<tr> <td align="left" >+ property</td> </tr> |
<tr> <td port="ss1" align="left" >- Subsystem 1</td> </tr> |
<tr> <td port="ss2" align="left" >- Subsystem 2</td> </tr> |
<tr> <td port="ss3" align="left" >- Subsystem 3</td> </tr> |
<tr> <td align="left">...</td> </tr> |
</table> |
</td> </tr> |
<tr> <td align="left">+ method<br/>...<br align="left"/></td> </tr> |
</table>> |
] |
edge [dir=back arrowtail=diamond] |
System_1:ss1 -> Subsystem_1 [xlabel="composition"] |
Subsystem_1 [ |
shape=plain |
label=<<table border="0" cellborder="1" cellspacing="0" cellpadding="4"> |
<tr> <td> <b>Subsystem 1</b> </td> </tr> |
<tr> <td> |
<table border="0" cellborder="0" cellspacing="0" > |
<tr> <td align="left">+ property</td> </tr> |
<tr> <td align="left" port="r1">- resource</td> </tr> |
<tr> <td align="left">...</td> </tr> |
</table> |
</td> </tr> |
<tr> <td align="left"> |
+ method<br/> |
...<br align="left"/> |
</td> </tr> |
</table>> |
] |
Subsystem_2 [ |
shape=plain |
label=<<table border="0" cellborder="1" cellspacing="0" cellpadding="4"> |
<tr> <td> <b>Subsystem 2</b> </td> </tr> |
<tr> <td> |
<table align="left" border="0" cellborder="0" cellspacing="0" > |
<tr> <td align="left">+ property</td> </tr> |
<tr> <td align="left" port="r1">- resource</td> </tr> |
<tr> <td align="left">...</td> </tr> |
</table> |
</td> </tr> |
<tr> <td align="left"> |
+ method<br/> |
...<br align="left"/> |
</td> </tr> |
</table>> |
] |
Subsystem_3 [ |
shape=plain |
label=<<table border="0" cellborder="1" cellspacing="0" cellpadding="4"> |
<tr> <td> <b>Subsystem 3</b> </td> </tr> |
<tr> <td> |
<table border="0" cellborder="0" cellspacing="0" > |
<tr> <td align="left">+ property</td> </tr> |
<tr> <td align="left" port="r1">- resource</td> </tr> |
<tr> <td align="left">...</td> </tr> |
</table> |
</td> </tr> |
<tr> <td align="left"> |
+ method<br/> |
...<br align="left"/> |
</td> </tr> |
</table>> |
] |
System_1:ss2 -> Subsystem_2; |
System_1:ss3 -> Subsystem_3; |
edge [xdir=back arrowtail=odiamond] |
Subsystem_1:r1 -> "Shared resource" [label=aggregation] |
Subsystem_2:r1 -> "Shared resource" |
Subsystem_3:r1 -> "Shared resource" |
"Shared resource" [ |
label = <{ |
<b>Shared resource</b> |
| |
+ property<br align="left"/> |
...<br align="left"/> |
| |
+ method<br align="left"/> |
...<br align="left"/> |
}> |
] |
} |
[/graph] |
5. Graphiz cache 🔗
Graphviz graphs that have been rendered to svg are stored in the cache database, under table cached_dot
. Unless you modify the graph or it's properties, it won't be rendered again, instead it will be sourced from the database.