Merge pull request mermaid-js#4839 from mermaid-js/feat/948_packetDia…

…gram feat: Add packet diagram
Yokozuna59 · Jan 23, 2024 · b7c72cb · b7c72cb
2 parents ce9a9db + 5cc20b5
commit b7c72cb
Show file tree

Hide file tree

Showing 52 changed files with 1,300 additions and 256 deletions.
diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts
@@ -24,6 +24,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'gitGraph',
   'c4',
   'sankey',
+  'packet',
 ] as const;
 
 /**

diff --git a/.esbuild/build.ts b/.esbuild/build.ts
@@ -1,8 +1,8 @@
 import { build } from 'esbuild';
 import { mkdir, writeFile } from 'node:fs/promises';
-import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
+import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
 
 const shouldVisualize = process.argv.includes('--visualize');
 
@@ -56,7 +56,7 @@ const main = async () => {
   await generateLangium();
   await mkdir('stats').catch(() => {});
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  // it should build `parser` before `mermaid` because it's a dependecy
+  // it should build `parser` before `mermaid` because it's a dependency
   for (const pkg of packageNames) {
     await buildPackage(pkg).catch(handler);
   }

diff --git a/__mocks__/c4Renderer.js b/__mocks__/c4Renderer.js
diff --git a/__mocks__/classRenderer-v2.js b/__mocks__/classRenderer-v2.js
diff --git a/__mocks__/classRenderer.js b/__mocks__/classRenderer.js
diff --git a/__mocks__/dagre-d3.ts b/__mocks__/dagre-d3.ts
diff --git a/__mocks__/entity-decode/browser.ts b/__mocks__/entity-decode/browser.ts
diff --git a/__mocks__/erRenderer.js b/__mocks__/erRenderer.js
diff --git a/__mocks__/flowRenderer-v2.js b/__mocks__/flowRenderer-v2.js
diff --git a/__mocks__/ganttRenderer.js b/__mocks__/ganttRenderer.js
diff --git a/__mocks__/gitGraphRenderer.js b/__mocks__/gitGraphRenderer.js
diff --git a/__mocks__/journeyRenderer.js b/__mocks__/journeyRenderer.js
diff --git a/__mocks__/pieRenderer.ts b/__mocks__/pieRenderer.ts
diff --git a/__mocks__/requirementRenderer.js b/__mocks__/requirementRenderer.js
diff --git a/__mocks__/sankeyRenderer.js b/__mocks__/sankeyRenderer.js
diff --git a/__mocks__/sequenceRenderer.js b/__mocks__/sequenceRenderer.js
diff --git a/__mocks__/stateRenderer-v2.js b/__mocks__/stateRenderer-v2.js
diff --git a/cypress/integration/rendering/packet.spec.ts b/cypress/integration/rendering/packet.spec.ts
@@ -0,0 +1,67 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('packet structure', () => {
+  it('should render a simple packet diagram', () => {
+    imgSnapshotTest(
+      `packet-beta
+  title Hello world
+  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(
+      `
+      ---
+      title: "Packet Diagram"
+      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/dev/example.html b/demos/dev/example.html
@@ -3,10 +3,24 @@
 <html>
   <head>
     <title>Mermaid development page</title>
+    <style>
+      .container {
+        display: flex;
+        flex-direction: row;
+      }
+
+      #code {
+        max-width: 30vw;
+        width: 30vw;
+      }
+
+      #dynamicDiagram {
+        padding-left: 2em;
+        flex: 1;
+      }
+    </style>
   </head>
   <body>
-    <pre class="mermaid">info</pre>
-
     <pre id="diagram" class="mermaid">
 graph TB
       a --> b
@@ -15,22 +29,35 @@
       c --> d
     </pre>
 
-    <div id="dynamicDiagram"></div>
+    <hr />
+    Type code to view diagram:
+    <div class="container">
+      <textarea name="code" id="code" cols="30" rows="10"></textarea>
+      <div id="dynamicDiagram"></div>
+    </div>
+    <pre class="mermaid">info</pre>
 
     <script type="module">
       import mermaid from '/mermaid.esm.mjs';
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
+      async function render(str) {
+        const { svg } = await mermaid.render('dynamic', str);
+        document.getElementById('dynamicDiagram').innerHTML = svg;
+      }
+      const storeKey = window.location.pathname;
+      const code = localStorage.getItem(storeKey);
+      if (code) {
+        document.getElementById('code').value = code;
+        await render(code);
+      }
       mermaid.initialize({
         startOnLoad: true,
         logLevel: 0,
       });
-      const value = `graph TD\nHello --> World`;
-      const el = document.getElementById('dynamicDiagram');
-      const { svg } = await mermaid.render('dd', value);
-      console.log(svg);
-      el.innerHTML = svg;
+      document.getElementById('code').addEventListener('input', async (e) => {
+        const value = e.target.value;
+        localStorage.setItem(storeKey, value);
+        await render(value);
+      });
     </script>
 
     <script src="/dev/reload.js"></script>