@import ../template.nml
%<make_doc({"External Tools"}, "Graphviz", "Graphviz")>%

# Graphs from graphviz

#+LAYOUT_BEGIN Centered
[graph][width=50%]
digraph {
	bgcolor=transparent;
	graph[fontcolor=darkgray];
	node[shape=box,fontcolor=darkgray];
	edge[fontcolor=darkgray, color=gray];

	filelist [color=orange, label="File List"];
	doclist [color=orange, label="Document List"];

	iscached [shape=diamond, color=red, label="Cached?"];
	parse [color=white, label=Parse];
	compile [color=white, label=Compile];
	cache [color=orange, label=Cache];

	filelist -> iscached;
	iscached -> cache[dir=both,color=lightblue,style=dashed];
	iscached -> doclist[label="Yes",color=lightblue,style=dashed];

	iscached -> parse[label="No",color=lightblue,style=dashed];
	subgraph cluster_0 {
		style=dotted;
		color=white;
		label = "Processing";
		labeljust="l";

		parse -> compile;
	}

	compile -> doclist[label=""];


	buildnav [color=white, label="Build Navigation"];
	xref [color=white, label="Resolve Cross-References"];
	
	doclist -> xref;
	doclist -> buildnav[label="Cached",color=lightblue,style=dashed];
	
	subgraph cluster_1 {
		style=dotted;
		color=white;
		label = "Post-Processing";
		labeljust="l";

		xref -> buildnav;
	}
	xref -> cache[color=lightblue,style=dashed];
	output [color=orange, label="Output"];
	buildnav -> output;
}
[/graph]
#+LAYOUT_END

The Graphviz functionnality requires the `dot` executable. More information on [Graphviz's website](file:///home/baraquiel/Programming/nml_rs/out/Graphviz.html).

# Synopsis

Graphs blocks are delimited by `` [graph]...[/graph]``

# Properties
 * ``layout`` The layout engine, defaults to `dot`
	see [Graphviz's documentation](https://graphviz.org/docs/layouts/). Allowed values:
 *- [`dot`](https://graphviz.org/docs/layouts/dot/)
 *- [`neato`](https://graphviz.org/docs/layouts/neato/)
 *- [`fdp`](https://graphviz.org/docs/layouts/fdp/)
 *- [`sfdp`](https://graphviz.org/docs/layouts/sfdp/)
 *- [`circo`](https://graphviz.org/docs/layouts/circo/)
 *- [`twopi`](https://graphviz.org/docs/layouts/twopi/)
 *- [`osage`](https://graphviz.org/docs/layouts/osage/)
 *- [`patchwork`](https://graphviz.org/docs/layouts/patchwork/)
 * ``width`` The resulting svg's width property, defaults to `100%`

# Examples



#+LAYOUT_BEGIN[style=flex:0.33] Split
[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]
#+LAYOUT_NEXT[style=flex:0.66]
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]
``
#+LAYOUT_END

# 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.

# Bindigs

 * ``Lua, nml.graphviz.push(layout, width, dot)``
 ** ``layout`` *(string)* the layout engine
 ** ``width`` *(string)* the width property (empty string for default)
 ** ``dot`` *(string)* the graphviz code