Node layout using html

Hi all, I'm using graphviz to draw a graph a squash players that play together. The current graph contains players photo or name whether the picture is available or not ( I would like to enhance that display using HTML in nodes to display and layout addition information (picture, name, rank, etc) and add links to let players not directly connected to contact each others. I tried the following HTML code at the node definition: (html brackets removed on purpose to allow posting)

3353 [ label=<


TR TD A HREF="url" IMG SRC "player.jpg" /A /TD /TR

TR TD A HREF="url" Pierre /A /TD /TR


> shape="box" tooltip="Pierre" ]

Dot reports "Error: Unknown HTML element A" - with proper html brackets

My questions now:

  1. is there a way to add html links to HTML elements in the node layout?
  2. may on use CSS together with HTML tags? Thanks in advance Pierre

​I'm using dot as part of graphviz 2.34

Thanks in advance


HTML or HyperText Markup

HTML or HyperText Markup Language is the main markup language for creating web pages and other information that can be displayed in a web browser.HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets,within the web page content.


The HTML-like labels don't

The HTML-like labels don't support a general-purpose anchor element <A>, but you can attach links to tables and cells using the HREF attribute in <TABLE> and <TD> elements. See for more details,

To use CSS, you can use the stylesheet attribute for SVG output. At present, Graphviz doesn't support a CSS mechanism directly.

Hi, thanks for your prompt

Hi, thanks for your prompt reply. HTML links in table href elements is fine. However, it seems that complex links containing parameters (e.g. index.php?p=1&a=5) are not accepted. From the various trials, it appears that "&" is the issue in the URL.



The input to HTML-like

The input to HTML-like strings is handled by the expat library, which doesn't like raw &'s in strings. So, replace your & characters with &amp;

That will get the right string into the graph. Unfortunately, the current svg output will convert those &'s back into &amp; on output. My current reading of the standard says that this is wrong, that attribute values can contain & characters, which is what you want. I have modified the code, so the change will appear in tomorrow's packages. If your reading of what legal svg is different from mine, please let me know.

Thanks for this. I'm

Thanks for this. I'm definitly not an expert, just trying to add cool stuff to let our squash players get to know additional opponents. My web site is in php which - apparently - requires the & to pass parameters. I think graphviz is a nice way to display players relationship, may be an html5 graph display on top of graphviz would also make sense these days (except for former IE users).

Recent comments