Left Justifications in Graphviz Nodes via HTML Formatting in Python

479 Views Asked by At

I'm using the Python graphviz library and my nodes are formatted with HTML.

My python code generates this node:
MyNode [label=<{Topic|<b>SubHeader</b>|field1: int<BR/>fields: dict<BR/>}>]

enter image description here

I want to left align the text on the last (fields) section.

How do I add alignment instructions only for the last section?

Graphviz supports adding \l as a justification escape code, but it does not seem to work for HTML formatted nodes.
Similarly, I cannot figure out how to add <p> tags to the HTML code.

2

There are 2 best solutions below

1
On BEST ANSWER

3 versions, 2 using html-like records:

graph {
  node [shape=Mrecord]
  MyNode [label=<{Topic|<b>SubHeader</b>|field1: int<BR ALIGN="LEFT"/>fields: dict<BR ALIGN="LEFT"/>}>]

  node [shape=plaintext]
  MyNodeA [label=<<table style="rounded">
       <tr><td border="0">Topic</td></tr>
       <hr/>
       <tr><td border="0"><b>SubHeader</b></td></tr>
       <hr/>
       <tr><td border="0" align="left">field1: int</td></tr>
       <tr><td border="0" align="left">fields: dict</td></tr>       
       </table>>]

  MyNodeB [label=<<table style="rounded">
       <tr><td border="0">Topic</td></tr>
       <hr/>
       <tr><td border="0"><b>SubHeader</b></td></tr>
       <hr/>
       <tr><td border="0" align="left" balign="left">field1: int<br/>fields: dict</td></tr>       
       </table>>]
}

giving:
enter image description here

2
On
  • You failed to show that you had set node shape to Mrecord. Hard to understand what you are doing without that information. Next time, please include an entire dot program.
  • Wow, you are mixing record shapes and HTML text. I'm surprised that is even legal. It seems to be, so cool!
  • \l, \r, \c do not seem to be legal inside HTML text (https://graphviz.org/docs/attr-types/lblString/)
  • good news: <BR ALIGN="LEFT"/> is legal. so:
graph {
  node [shape=Mrecord]
  MyNode [label=<{Topic|<b>SubHeader</b>|field1: int<BR ALIGN="LEFT"/>fields: dict<BR ALIGN="LEFT"/>}>]
}

Produces:
enter image description here

p.s. <P> is not legal Graphviz syntax. See https://graphviz.org/doc/info/shapes.html (Graphviz uses HTML-like syntax. Emphasis on -like)
p.p.s. Consider using actual HTML-like records. They give more control.