How can I change the position in my HTML of the created graph by graphviz if I am using DOT & doxygen?

Question

I using dot and Graphviz in doxygen to create a user manual of my code in HTML. The doxygen code looks somewhat like this:

/**<br>
 *@addtogroup MainProgram 
 *     @dot
 *          digraph G { 
 *                      Main    [label = "Main()"];
 *                      START   [label = "Start"];
 *                      FINISH  [label = "Finish"];
 *
 *                      START -> Main;
 *                      Main  -> FINISH;
 *                    }
 *        
 *     @enddot
 */

This of course generates a nice picture. Unfortunately, the picture is not displayed the way I want it in the HTML page. It is always centered on page. I want the alignment to be on the left side of the page. The generated HTML code looks like:

<div align="center">
<img src="inline_dotgraph_2.dot.gif" alt="inline_dotgraph_2.dot" border="0" usemap="#inline_dotgraph_2.dot.map">
<map name="inline_dotgraph_2.dot.map" id="inline_dotgraph_2.dot.map"></map>
</div>

Can anyone help me? It's either a doxygen problem or a graphiz/dot problem. I can't seem to find the answer.

Thanks,

Maurice

Katmandu

Answer 1

You could customize the html layout by assign a CSS file to HTML_EXTRA_STYLESHEET in your doxygen configuration file:

HTML_EXTRA_STYLESHEET = myStyle.css

.image
{
   text-align: left;
}

Obovate

As @doxygen mentioned, the image is embedded into a <dev align="center"> element - therefore the mentioned solution doesn't work. – Rifkin

That statement aligns all the images to the left, how about aligning only one image with a specific id. – Darius

Answer 2

Doxygen generates the <div align="center">..</div> section which causes the centering, so it is a doxygen problem.

Would have been better if doxygen used a class for the div instead, so that you could customize the layout via a custom stylesheet (doxygen supports customization via HTML_STYLESHEET). I suggest to submit a bug report in the bug tracker for this (see https://bugzilla.gnome.org/enter_bug.cgi?product=doxygen).

Muricate

How is this being out-dated? Current Doxygen (1.8.12) still does it. It would help to include a reference - also in comments. – Rifkin

Answer 3

Once the HTML output has been created, open the doxygen.css file in a text editor.

Search and edit the following:

.image
{
        text-align: center;
}

Change 'center' to 'left'.

Replace the previous doxygen.css with this new file.

Next reload the index.html file that was generated by doxygen. (Highlight the contents in the address bar and press enter).

Images will be left justified.

Bullnose

It is not advised to change the "doxygen.css" file. Instead use a separate custom CSS file via HTML_EXTRA_STYLESHEET as explained in the answer of user2689108. – Auckland