DAGVIZ Metro styling options¶

This notebook demonstrates the various Metro styling options.

In order to apply styling we need to call render_svg by hand with the appropriate renderer and style configuration.

In [1]:
from dagviz import render_svg
from dagviz.style.metro import svg_renderer, StyleConfig
from IPython.display import HTML
import networkx as nx

First we construct a simple graph that demonstrates all the visual aspects a rendering may have.

In [2]:
g = nx.DiGraph()
g.add_node("a", label="switch(value)")
g.add_node("b", label="case 1")
g.add_node("c", label="case 2")
g.add_node("d", label="case 3")
g.add_node("e", label="end")

g.add_edge("a", "b")
g.add_edge("a", "c")
g.add_edge("a", "d")

g.add_edge("b", "e")
g.add_edge("c", "e")
g.add_edge("d", "e")

Default rendering¶

Without any configuration, we get (of course) the default rendering:

In [3]:
HTML(render_svg(g))
Out[3]:
switch(value)case 1case 2case 3end

Scale¶

The scale setting determines the amount of space each node has:

In [4]:
HTML(render_svg(g, style=svg_renderer(StyleConfig(scale=20))))
Out[4]:
switch(value)case 1case 2case 3end

Node radius¶

The node radius determines the size of the bubbles:

In [5]:
HTML(render_svg(g, style=svg_renderer(StyleConfig(node_radius=10))))
Out[5]:
switch(value)case 1case 2case 3end

Node fill¶

By default the node fill color is automatically selected. This can be overriden by specifying a fixed color:

In [6]:
HTML(render_svg(g, style=svg_renderer(StyleConfig(node_fill="black"))))
Out[6]:
switch(value)case 1case 2case 3end

Node stroke¶

The node stroke specifies the color of the border of the bubble:

In [7]:
HTML(render_svg(g, style=svg_renderer(StyleConfig(node_stroke="black"))))
Out[7]:
switch(value)case 1case 2case 3end

Node stroke width¶

The node stroke width determines the width of the border of the bubbles:

In [8]:
HTML(render_svg(g, style=svg_renderer(StyleConfig(node_stroke="black", node_stroke_width=4))))
Out[8]:
switch(value)case 1case 2case 3end

Edge stroke width¶

The edge stroke width determines the width of the edges:

In [9]:
HTML(render_svg(g, style=svg_renderer(StyleConfig(node_fill="black", edge_stroke_width=10))))
Out[9]:
switch(value)case 1case 2case 3end

Label font family¶

The default font family for labels is "sans-serif". This can be changes too:

In [10]:
HTML(render_svg(g, style=svg_renderer(StyleConfig(label_font_family="serif"))))
Out[10]:
switch(value)case 1case 2case 3end

Label font size¶

The font size of the label can be changed as follows:

In [11]:
HTML(render_svg(g, style=svg_renderer(StyleConfig(label_font_size=20))))
Out[11]:
switch(value)case 1case 2case 3end

Label arrow stroke¶

The label arrow stroke determines the color of the line from node to label:

In [12]:
HTML(render_svg(g, style=svg_renderer(StyleConfig(label_arrow_stroke="black"))))
Out[12]:
switch(value)case 1case 2case 3end

Label arrow dash array¶

The label arrow dash array determines how the label arrow is dashed:

In [13]:
HTML(render_svg(g, style=svg_renderer(StyleConfig(label_arrow_dash_array="0"))))
Out[13]:
switch(value)case 1case 2case 3end

Arc radius¶

The arc radius determines the radius of the arc from vertical line to a node:

In [14]:
HTML(render_svg(g, style=svg_renderer(StyleConfig(arc_radius=5))))
Out[14]:
switch(value)case 1case 2case 3end

Label font color¶

The label font color determines the color of the label text. The default is "currentColor", which inherits from the surrounding context. This is useful for dark backgrounds:

In [15]:
HTML(render_svg(g, style=svg_renderer(StyleConfig(label_font_color="red"))))
Out[15]:
switch(value)case 1case 2case 3end

Bridge color¶

The bridge color determines the color of the "bridges" that cover the parts of edges crossing other edges. The default is "white", which works well on light backgrounds. Change this to match your background color:

In [16]:
HTML(render_svg(g, style=svg_renderer(StyleConfig(bridge_color="black"))))
Out[16]:
switch(value)case 1case 2case 3end

Dark theme example¶

By combining label_font_color, bridge_color, and node_stroke, you can create a style suitable for dark backgrounds:

In [17]:
dark_style = svg_renderer(StyleConfig(
    node_stroke="black",
    label_font_color="white",
    bridge_color="black",
    label_arrow_stroke="grey",
))
HTML(f'<div style="background: #333; padding: 10px;">{render_svg(g, style=dark_style)}</div>')
Out[17]:
switch(value)case 1case 2case 3end
In [ ]: