feat: Support showBits

demos/packet.html

@@ -35,6 +35,32 @@
         192-223: "data"
     </pre>
 
+    <pre class="mermaid">
+      ---
+      config:
+        packet:
+          showBits: false
+      ---
+      packet-beta
+        0-15: "Source Port"
+        16-31: "Destination Port"
+        32-63: "Sequence Number"
+        64-95: "Acknowledgment Number"
+        96-99: "Data Offset"
+        100-105: "Reserved"
+        106: "URG"
+        107: "ACK"
+        108: "PSH"
+        109: "RST"
+        110: "SYN"
+        111: "FIN"
+        112-127: "Window"
+        128-143: "Checksum"
+        144-159: "Urgent Pointer"
+        160-191: "(Options and Padding)"
+        192-223: "data"
+    </pre>
+
     <script type="module">
       import mermaid from '/mermaid.esm.mjs';
       mermaid.initialize({

packages/mermaid/src/diagrams/packet/db.ts

@@ -16,10 +16,14 @@ let data: PacketData = structuredClone(defaultPacketData);
 export const DEFAULT_PACKET_CONFIG: Required<PacketDiagramConfig> = DEFAULT_CONFIG.packet;
 
 export const getConfig = (): Required<PacketDiagramConfig> => {
-  return structuredClone({
+  const config = structuredClone({
     ...DEFAULT_PACKET_CONFIG,
     ...commonGetConfig().packet,
   });
+  if (config.showBits) {
+    config.paddingY += 10;
+  }
+  return config;
 };
 
 export const getPacket = (): Row[] => data.packet;

packages/mermaid/src/diagrams/packet/renderer.ts

@@ -27,7 +27,7 @@ const drawWord = (
   svg: SVG,
   row: Row,
   rowNumber: number,
-  { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow }: Required<PacketDiagramConfig>
+  { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required<PacketDiagramConfig>
 ) => {
   const group: Group = svg.append('g');
   const wordY = rowNumber * (rowHeight + paddingY) + paddingY;
@@ -53,13 +53,16 @@ const drawWord = (
       .attr('text-anchor', 'middle')
       .text(block.label);
 
+    if (!showBits) {
+      continue;
+    }
     // Start byte count
     const isSingleBlock = block.end === block.start;
-    const byteNumberY = wordY - 2;
+    const bitNumberY = wordY - 2;
     group
       .append('text')
       .attr('x', blockX + (isSingleBlock ? width / 2 : 0))
-      .attr('y', byteNumberY)
+      .attr('y', bitNumberY)
       .attr('class', 'byte start')
       .attr('dominant-baseline', 'auto')
       .attr('text-anchor', isSingleBlock ? 'middle' : 'start')
@@ -70,7 +73,7 @@ const drawWord = (
       group
         .append('text')
         .attr('x', blockX + width)
-        .attr('y', byteNumberY)
+        .attr('y', bitNumberY)
         .attr('class', 'byte end')
         .attr('dominant-baseline', 'auto')
         .attr('text-anchor', 'end')

packages/mermaid/src/schemas/config.schema.yaml

@@ -1880,7 +1880,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
         default: 5
       paddingY:
         description: The vertical padding between the rows.
-        default: 15
+        default: 5
 
   FontCalculator:
     title: Font Calculator