Changing the node size
Methods to change the node size differ for the different map exports. We start with the methods for Dot, VizJs and Dagre and end with the method for GraphML.
Changing the node size for Dot/VizJs/Dagre
The dot export, VizJs map and Dagre map support two methods of changing the node width.
In both cases the Argdown app has to add line breaks to the node labels to force a certain node width. The node width is changed by customizing the method by which the line breaks are added.
By default a line break is added after a certain maximum number of characters (respecting word boundaries). This behaviour is customized by using the
charactersInLine setting. This simple method is fast and works surprisingly well in practice.
Here is an example of customizing the dot export with different
charactersInLine settings for groups, arguments and nodes:
Note that you have to define separate
charactersInLine settings for the title labels and text labels of argument and statement nodes. This is necessary because you can also use different font sizes for them, so you might want to set
charactersInLine lower if the font size is larger.
Alternatively, you can try a more exact and slower method by turning on
measureLineWidth. In this case the actual pixel width of each word is measured and a line break is added after a certain maximum number of pixels (once again respecting word boundaries).
This behaviour is customized by using the
lineWidth setting. Here is an example of turning on and customizing
measureLineWidth for the VizJs map:
In this case there are no separate settings for title and text as the line width is measured by taking different font sizes into account.
For the text measurement we use the string-pixel-width library to be able to measure text outside of the browser. Please note that the library only supports measuring a limited number of fonts, so this option might not work with your font. Please consult the library's Readme for further information.
minWidth to Set a Uniform Minimum Node Width in Dot
In the dot export (and the VizJs map by extension) the
minWidth property will be used as a minimum node width. If
minWidth = 0 the default GraphViz behaviour will be used, which means that the node width is set to
maxLineWidthInLabel + horizontalMargin. This behaviour saves space, but it has the downside that nodes have different widths, depending on their label content. This lack of uniformity might make the map look messy.
Argdown sets the minWidth for argument and statement nodes by default to
180 which means that the node width is now set to
max(180, maxLineWidthInLabel) + horizontalMargin.
Here is the default behaviour:
Here is the result if you use
Setting Margins for Nodes and Groups in Dot
You can use the
margin dot setting to customize the sizing of statements, arguments and groups in dot (and the VizJs map):
Changing the Node Size in GraphML
Because the GraphML export is not used in a live preview, performance is not as important so it always uses the line measurement method.
In contrast to the Dot export and the Dagre map, node width can be set directly. Together with the
horizontalPadding setting it determines the node's line width.
Here are the node size configuration options for GraphML: