mermaid-js · sidharthv96 · Jan 23, 2024 · Sep 14, 2023 · Sep 14, 2023 · Sep 14, 2023
diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts
@@ -23,6 +23,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'gitGraph',
   'c4',
   'sankey',
+  'packet',
 ] as const;
 
 /**

diff --git a/.esbuild/server.ts b/.esbuild/server.ts
@@ -9,9 +9,10 @@ import { generateLangium } from '../.build/generateLangium.js';
 const parserCtx = await context(
   getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'parser' })
 );
-const mermaidCtx = await context(
-  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid' })
-);
+const mermaidCtx = await context({
+  ...getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid' }),
+  sourcemap: 'linked',
+});
 const mermaidIIFECtx = await context(
   getBuildConfig({
     ...defaultOptions,

diff --git a/cypress/integration/rendering/packet.spec.ts b/cypress/integration/rendering/packet.spec.ts
@@ -0,0 +1,65 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+
+describe('packet structure', () => {
+  it('should render a simple packet diagram', () => {
+    imgSnapshotTest(
+      `packet-beta
+  0-10: "hello"
+`
+    );
+  });
+
+  it('should render a complex packet diagram', () => {
+    imgSnapshotTest(
+      `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"
+      `
+    );
+  });
+
+  it('should render a complex packet diagram with showBits false', () => {
+    imgSnapshotTest(
+      `
+      ---
+      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"
+      `
+    );
+  });
+});
diff --git a/demos/packet.html b/demos/packet.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Packet diagram demo</h1>
+    <pre class="mermaid">
+      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>
+
+    <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({
+        theme: 'forest',
+        logLevel: 3,
+        securityLevel: 'loose',
+      });
+    </script>
+  </body>
+</html>
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:268](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L268)
+[defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275)
 
 ---
 

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
@@ -140,10 +140,43 @@ export interface MermaidConfig {
   gitGraph?: GitGraphDiagramConfig;
   c4?: C4DiagramConfig;
   sankey?: SankeyDiagramConfig;
+  packet?: PacketDiagramConfig;
   dompurifyConfig?: DOMPurifyConfiguration;
   wrap?: boolean;
   fontSize?: number;
 }
+/**
+ * The object containing configurations specific for packet diagrams.
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "PacketDiagramConfig".
+ */
+export interface PacketDiagramConfig extends BaseDiagramConfig {
+  /**
+   * The height of each row in the packet diagram.
+   */
+  rowHeight?: number;
+  /**
+   * The width of each bit in the packet diagram.
+   */
+  bitWidth?: number;
+  /**
+   * The number of bits to display per row.
+   */
+  bitsPerRow?: number;
+  /**
+   * Toggle to display or hide bit numbers.
+   */
+  showBits?: boolean;
+  /**
+   * The horizontal padding between the blocks in a row.
+   */
+  paddingX?: number;
+  /**
+   * The vertical padding between the rows.
+   */
+  paddingY?: number;
+}
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
  * via the `definition` "BaseDiagramConfig".

diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
@@ -253,6 +253,13 @@ const config: RequiredDeep<MermaidConfig> = {
     // TODO: can we make this default to `true` instead?
     useMaxWidth: false,
   },
+  packet: {
+    ...defaultConfigJson.packet,
+    useWidth: undefined,
+    // this is false, unlike every other diagram (other than gitGraph)
+    // TODO: can we make this default to `true` instead?
+    useMaxWidth: false,
+  },
 };
 
 const keyify = (obj: any, prefix = ''): string[] =>

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -19,6 +19,7 @@ import flowchartElk from '../diagrams/flowchart/elk/detector.js';
 import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';
 import sankey from '../diagrams/sankey/sankeyDetector.js';
+import { packet } from '../diagrams/packet/detector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
 
@@ -84,6 +85,7 @@ export const addDiagrams = () => {
     state,
     journey,
     quadrantChart,
-    sankey
+    sankey,
+    packet
   );
 };
diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts
@@ -0,0 +1,110 @@
+import type { Block, PacketDB, Row } from './types.js';
+import type { PacketDiagramConfig } from '../../config.type.js';
+
+import { log } from '../../logger.js';
+import DEFAULT_CONFIG from '../../defaultConfig.js';
+import { getConfig as commonGetConfig } from '../../config.js';
+
+interface PacketData {
+  packet: Row[];
+}
+
+const defaultPacketData: PacketData = {
+  packet: [],
+};
+
+let data: PacketData = structuredClone(defaultPacketData);
+export const DEFAULT_PACKET_CONFIG: Required<PacketDiagramConfig> = DEFAULT_CONFIG.packet;
+
+export const getConfig = (): Required<PacketDiagramConfig> => {
+  const config = structuredClone({
+    ...DEFAULT_PACKET_CONFIG,
+    ...commonGetConfig().packet,
+  });
+  if (config.showBits) {
+    config.paddingY += 10;
+  }
+  return config;
+};
+
+export const getPacket = (): Row[] => data.packet;
+
+export const getNextFittingBlock = (
+  block: Block,
+  row: number,
+  bitsPerRow: number
+): [Required<Block>, Block | undefined] => {
+  if (block.end === undefined) {
+    block.end = block.start;
+  }
+
+  if (block.start > block.end) {
+    throw new Error(`Block start ${block.start} is greater than block end ${block.end}.`);
+  }
+
+  if (block.end + 1 <= row * bitsPerRow) {
+    return [block as Required<Block>, undefined];
+  }
+
+  return [
+    {
+      start: block.start,
+      end: row * bitsPerRow - 1,
+      label: block.label,
+    },
+    {
+      start: row * bitsPerRow,
+      end: block.end,
+      label: block.label,
+    },
+  ];
+};
+
+export const populate = ({ blocks }: { blocks: Block[] }) => {
+  let lastByte = -1;
+  let word: Row = [];
+  data.packet = [];
+  let row = 1;
+  const { bitsPerRow } = getConfig();
+  for (let { start, end, label } of blocks) {
+    if (end && end < start) {
+      throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`);
+    }
+    if (start != lastByte + 1) {
+      throw new Error(
+        `Packet block ${start} - ${end ?? start} is not contiguous. It should start from ${
+          lastByte + 1
+        }.`
+      );
+    }
+    lastByte = end ?? start;
+    log.debug(`Packet block ${start} - ${lastByte} with label ${label}`);
+
+    while (word.length <= bitsPerRow + 1 && data.packet.length < 10_000) {
+      const [block, nextBlock] = getNextFittingBlock({ start, end, label }, row, bitsPerRow);
+      word.push(block);
+      if (block.end + 1 === row * bitsPerRow) {
+        data.packet.push(word);
+        word = [];
+        row++;
+      }
+      if (!nextBlock) {
+        break;
+      }
+      ({ start, end, label } = nextBlock);
+    }
+  }
+  if (word.length > 0) {
+    data.packet.push(word);
+  }
+  log.debug(data);
+};
+
+export const clear = () => {
+  data = structuredClone(defaultPacketData);
+};
+
+export const db: PacketDB = {
+  getPacket,
+  getConfig,
+};
diff --git a/packages/mermaid/src/diagrams/packet/detector.ts b/packages/mermaid/src/diagrams/packet/detector.ts
@@ -0,0 +1,22 @@
+import type {
+  DiagramDetector,
+  DiagramLoader,
+  ExternalDiagramDefinition,
+} from '../../diagram-api/types.js';
+
+const id = 'packet';
+
+const detector: DiagramDetector = (txt) => {
+  return /^\s*packet-beta/.test(txt);
+};
+
+const loader: DiagramLoader = async () => {
+  const { diagram } = await import('./diagram.js');
+  return { id, diagram };
+};
+
+export const packet: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
diff --git a/packages/mermaid/src/diagrams/packet/diagram.ts b/packages/mermaid/src/diagrams/packet/diagram.ts
@@ -0,0 +1,12 @@
+import type { DiagramDefinition } from '../../diagram-api/types.js';
+import { parser } from './parser.js';
+import { db } from './db.js';
+import { renderer } from './renderer.js';
+import { styles } from './styles.js';
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+  styles,
+};