doxygendiagrampacket

How to include packet structure drawing in the HTML documentation?

I'm trying to include in my doxygen documentation (html) a drawing representing the structure of a packet, something similar to the following example:

Packet structure drawing

I know diagrams can be generated from code using several commands (e.g. @startuml/@enduml, @dot/@enddot, @msc/@endmsc), but looking at various usage examples I wasn't able to find a proper way of doing it.

Does anyone know how I can achieve a similar result without having to include an external resource, such as image or diagram file (using one of the commands above, or others if needed)?

Solution

  • Following albert's suggestions, a HTML table seems the reasonable tool to achieve the result I was looking for.

    Here is my attempt:

    <table style="border: none; border-collapse: collapse; margin-left:auto; margin-right:auto; table-layout: fixed; width: 1000px;">
 <caption style="caption-side: bottom" id="Figure-1">Example of binary string: IP packet structure.</caption>
 <tr>
  <td>
  <td style="text-align: left; font-size: 10px;" colspan="8">0
  <td style="text-align: left; font-size: 10px;" colspan="8">8
  <td style="text-align: left; font-size: 10px;" colspan="2">16
  <td style="text-align: right; font-size: 10px;" colspan="1">18
  <td style="text-align: left; font-size: 10px;" colspan="5">
  <td style="text-align: left; font-size: 10px;" colspan="4">24
  <td style="text-align: right; font-size: 10px;" colspan="4">31
 <tr>
  <td text-align="center" vertical-align="middle">1
  <td style="border: 2px solid black; border-collapse: collapse; text-align: center;" colspan="4">Version
  <td style="border: 2px solid black; border-collapse: collapse; text-align: center;" colspan="4">Header Length
  <td style="border: 2px solid black; border-collapse: collapse; text-align: center;" colspan="8">Type of Service
  <td style="border: 2px solid black; border-collapse: collapse; text-align: center;" colspan="16">Total Length
 <tr>
  <td text-align="center" vertical-align="middle">2
  <td style="border: 2px solid black; border-collapse: collapse; text-align: center;" colspan="16">Identification
  <td style="border: 2px solid black; border-collapse: collapse; text-align: center;" colspan="3">Flags
  <td style="border: 2px solid black; border-collapse: collapse; text-align: center;" colspan="13">Fragment Offset
 <tr>
  <td text-align="center" vertical-align="middle">3
  <td style="border: 2px solid black; border-collapse: collapse; text-align: center;" colspan="8">Time To Live
  <td style="border: 2px solid black; border-collapse: collapse; text-align: center;" colspan="8">Protocol
  <td style="border: 2px solid black; border-collapse: collapse; text-align: center;" colspan="16">Header Checksum
 <tr>
  <td text-align="center" vertical-align="middle">4
  <td style="border: 2px solid black; border-collapse: collapse; text-align: center;" colspan="32">Source IP Address
 <tr>
  <td text-align="center" vertical-align="middle">5
  <td style="border: 2px solid black; border-collapse: collapse; text-align: center;" colspan="32">Destination IP Address
 <tr>
  <td text-align="center" vertical-align="middle">6
  <td style="border: 2px solid black; border-collapse: collapse; text-align: center;" colspan="32" rowspan="3">Options
 <tr>
  <td text-align="center" vertical-align="middle">7
 <tr>
  <td text-align="center" vertical-align="middle">8
</table>