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

问题

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

回答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;
}

回答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).

回答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.

来源：https://stackoverflow.com/questions/6759077/how-can-i-change-the-position-in-my-html-of-the-created-graph-by-graphviz-if-i-a