From c41594d2201606622bd13f81eec2ede455ff10d9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 14 Sep 2023 22:35:13 +0530 Subject: [PATCH 01/28] feat: Add packet diagram --- .build/jsonSchema.ts | 1 + .esbuild/server.ts | 7 +- demos/packet.html | 47 ++++++++ docs/config/setup/modules/defaultConfig.md | 2 +- packages/mermaid/src/config.type.ts | 33 ++++++ packages/mermaid/src/defaultConfig.ts | 7 ++ .../src/diagram-api/diagram-orchestration.ts | 4 +- packages/mermaid/src/diagrams/packet/db.ts | 101 ++++++++++++++++++ .../mermaid/src/diagrams/packet/detector.ts | 22 ++++ .../mermaid/src/diagrams/packet/diagram.ts | 12 +++ .../src/diagrams/packet/packet.spec.ts | 31 ++++++ .../mermaid/src/diagrams/packet/parser.ts | 14 +++ .../mermaid/src/diagrams/packet/renderer.ts | 81 ++++++++++++++ .../mermaid/src/diagrams/packet/styles.ts | 27 +++++ packages/mermaid/src/diagrams/packet/types.ts | 10 ++ .../mermaid/src/schemas/config.schema.yaml | 29 +++++ packages/mermaid/src/styles.spec.ts | 2 + packages/parser/langium-config.json | 5 + packages/parser/src/index.ts | 2 +- packages/parser/src/language/index.ts | 1 + packages/parser/src/language/packet/index.ts | 1 + packages/parser/src/language/packet/module.ts | 72 +++++++++++++ .../parser/src/language/packet/packet.langium | 14 +++ .../src/language/packet/tokenBuilder.ts | 7 ++ packages/parser/src/parse.ts | 11 +- 25 files changed, 534 insertions(+), 9 deletions(-) create mode 100644 demos/packet.html create mode 100644 packages/mermaid/src/diagrams/packet/db.ts create mode 100644 packages/mermaid/src/diagrams/packet/detector.ts create mode 100644 packages/mermaid/src/diagrams/packet/diagram.ts create mode 100644 packages/mermaid/src/diagrams/packet/packet.spec.ts create mode 100644 packages/mermaid/src/diagrams/packet/parser.ts create mode 100644 packages/mermaid/src/diagrams/packet/renderer.ts create mode 100644 packages/mermaid/src/diagrams/packet/styles.ts create mode 100644 packages/mermaid/src/diagrams/packet/types.ts create mode 100644 packages/parser/src/language/packet/index.ts create mode 100644 packages/parser/src/language/packet/module.ts create mode 100644 packages/parser/src/language/packet/packet.langium create mode 100644 packages/parser/src/language/packet/tokenBuilder.ts diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts index 51b1184fc3..d305e84821 100644 --- 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 index 63d981b99d..ae23212472 100644 --- 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/demos/packet.html b/demos/packet.html new file mode 100644 index 0000000000..3e51de0ded --- /dev/null +++ b/demos/packet.html @@ -0,0 +1,47 @@ + + + + + + Mermaid Quick Test Page + + + + + +

Packet diagram demo

+ 
+      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/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index effaec7b13..d3495bc0c3 100644 --- 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 index bed6d8b9e8..0f8ed7ce06 100644 --- 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 index f8bd9b0b53..06f47e110c 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -253,6 +253,13 @@ const config: RequiredDeep = { // 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 index 624b0286ee..d382a93c11 100644 --- 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 new file mode 100644 index 0000000000..a36fdcaf15 --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -0,0 +1,101 @@ +import type { Block, PacketDB, Word } from './types.js'; +import { log } from '../../logger.js'; +import type { PacketDiagramConfig } from '../../config.type.js'; +import DEFAULT_CONFIG from '../../defaultConfig.js'; +import { getConfig as commonGetConfig } from '../../config.js'; + +interface PacketData { + packet: Word[]; +} + +const defaultPacketData: PacketData = { + packet: [], +}; + +let data: PacketData = structuredClone(defaultPacketData); +export const DEFAULT_PACKET_CONFIG: Required = DEFAULT_CONFIG.packet; + +export const getConfig = (): Required => { + return structuredClone({ + ...DEFAULT_PACKET_CONFIG, + ...commonGetConfig().packet, + }); +}; + +export const getPacket = (): Word[] => data.packet; + +export const getNextFittingBlock = ( + block: Block, + row: number, + bitsPerRow: number +): [Block, Block | undefined] => { + block.end = 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, 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: Block[] = []; + data.packet = []; + let row = 1; + const { bitsPerRow } = getConfig(); + for (let { start, end, label } of blocks) { + if (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} 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 new file mode 100644 index 0000000000..5aca92e6cf --- /dev/null +++ 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 new file mode 100644 index 0000000000..ae9cad4524 --- /dev/null +++ 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, +}; diff --git a/packages/mermaid/src/diagrams/packet/packet.spec.ts b/packages/mermaid/src/diagrams/packet/packet.spec.ts new file mode 100644 index 0000000000..ea115e02ed --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/packet.spec.ts @@ -0,0 +1,31 @@ +import { parser } from './parser.js'; + +describe('info', () => { + it('should handle an info definition', () => { + const str = `info`; + expect(() => { + parser.parse(str); + }).not.toThrow(); + }); + + it('should handle an info definition with showInfo', () => { + const str = `info showInfo`; + expect(() => { + parser.parse(str); + }).not.toThrow(); + }); + + it('should throw because of unsupported info grammar', () => { + const str = `info unsupported`; + expect(() => { + parser.parse(str); + }).toThrow('Parsing failed: unexpected character: ->u<- at offset: 5, skipped 11 characters.'); + }); + + it('should throw because of unsupported info grammar', () => { + const str = `info unsupported`; + expect(() => { + parser.parse(str); + }).toThrow('Parsing failed: unexpected character: ->u<- at offset: 5, skipped 11 characters.'); + }); +}); diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts new file mode 100644 index 0000000000..0a1334faad --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -0,0 +1,14 @@ +import type { Packet } from 'mermaid-parser'; +import type { ParserDefinition } from '../../diagram-api/types.js'; + +import { parse } from 'mermaid-parser'; +import { log } from '../../logger.js'; +import { populate } from './db.js'; + +export const parser: ParserDefinition = { + parse: (input: string): void => { + const ast: Packet = parse('packet', input); + log.debug(ast); + populate(ast); + }, +}; diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts new file mode 100644 index 0000000000..640c2e870c --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -0,0 +1,81 @@ +import { configureSvgSize } from '../../setupGraphViewbox.js'; +import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; +import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import type { PacketDB, Word } from './types.js'; +import type { PacketDiagramConfig } from '../../config.type.js'; +import type { Diagram } from '../../Diagram.js'; + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { + const db = diagram.db as PacketDB; + const config = db.getConfig?.() as Required; + const { rowHeight, paddingY, bitWidth, bitsPerRow } = config; + const words = db.getPacket(); + const svgHeight = (rowHeight + paddingY) * words.length + paddingY; + const svgWidth = bitWidth * bitsPerRow + 2; + + const svg: SVG = selectSvgElement(id); + configureSvgSize(svg, svgHeight, svgWidth, true); + svg.attr('height', svgHeight + 'px'); + + for (const [row, packet] of words.entries()) { + drawWord(svg, packet, row, config); + } +}; + +const drawWord = ( + svg: SVG, + word: Word, + row: number, + { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow }: Required +) => { + const group: Group = svg.append('g'); + const wordY = row * (rowHeight + paddingY) + paddingY; + for (const block of word) { + const blockX = (block.start % bitsPerRow) * bitWidth + 1; + const width = (block.end - block.start + 1) * bitWidth - paddingX; + // Block rectangle + group + .append('rect') + .attr('x', blockX) + .attr('y', wordY) + .attr('width', width) + .attr('height', rowHeight) + .attr('class', 'block'); + + // Block label + group + .append('text') + .attr('x', blockX + width / 2) + .attr('y', wordY + rowHeight / 2) + .attr('class', 'label') + .attr('dominant-baseline', 'middle') + .attr('text-anchor', 'middle') + .text(block.label); + + // Start byte count + const isSingleBlock = block.end === block.start; + const byteNumberY = wordY - 2; + group + .append('text') + .attr('x', blockX + (isSingleBlock ? width / 2 : 0)) + .attr('y', byteNumberY) + .attr('class', 'byte start') + .attr('dominant-baseline', 'auto') + .attr('text-anchor', isSingleBlock ? 'middle' : 'start') + .text(block.start); + + // Draw end byte count if it is not the same as start byte count + if (!isSingleBlock) { + group + .append('text') + .attr('x', blockX + width) + .attr('y', byteNumberY) + .attr('class', 'byte end') + .attr('dominant-baseline', 'auto') + .attr('text-anchor', 'end') + .text(block.end); + } + } +}; +export const renderer = { draw }; diff --git a/packages/mermaid/src/diagrams/packet/styles.ts b/packages/mermaid/src/diagrams/packet/styles.ts new file mode 100644 index 0000000000..d6f738a138 --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/styles.ts @@ -0,0 +1,27 @@ +import { log } from '../../logger.js'; + +export const styles = (options: any = {}) => { + log.debug({ options }); + return ` + .byte { + font-size: ${options.packet?.byteFontSize ?? '10px'}; + } + .byte.start { + fill: ${options.packet?.startByteColor ?? 'black'}; + } + .byte.end { + fill: ${options.packet?.endByteColor ?? 'black'}; + } + .label { + fill: ${options.packet?.labelColor ?? 'black'}; + font-size: ${options.packet?.labelFontSize ?? '12px'}; + } + .block { + stroke: ${options.packet?.blockStrokeColor ?? 'black'}; + stroke-width: ${options.packet?.blockStrokeWidth ?? '1'}; + fill: ${options.packet?.blockFillColor ?? '#efefef'}; + } + `; +}; + +export default styles; diff --git a/packages/mermaid/src/diagrams/packet/types.ts b/packages/mermaid/src/diagrams/packet/types.ts new file mode 100644 index 0000000000..9100558eb2 --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/types.ts @@ -0,0 +1,10 @@ +import type { Packet } from 'mermaid-parser'; +import type { DiagramDB } from '../../diagram-api/types.js'; + +export type ArrayElement = A extends readonly (infer T)[] ? T : never; +export type Block = Pick, 'start' | 'end' | 'label'>; +export type Word = Block[]; + +export interface PacketDB extends DiagramDB { + getPacket: () => Word[]; +} diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 81592d146b..a929e84a95 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -48,6 +48,7 @@ required: - gitGraph - c4 - sankey + - packet properties: theme: description: | @@ -201,6 +202,8 @@ properties: $ref: '#/$defs/C4DiagramConfig' sankey: $ref: '#/$defs/SankeyDiagramConfig' + packet: + $ref: '#/$defs/PacketDiagramConfig' dompurifyConfig: title: DOM Purify Configuration description: Configuration options to pass to the `dompurify` library. @@ -1853,6 +1856,32 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) type: string default: '' + PacketDiagramConfig: + title: Packet Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for packet diagrams. + type: object + unevaluatedProperties: false + properties: + rowHeight: + description: The height of each row in the packet diagram. + default: 32 + bitWidth: + description: The width of each bit in the packet diagram. + default: 32 + bitsPerRow: + description: The number of bits to display per row. + default: 32 + showBits: + description: Toggle to display or hide bit numbers. + default: true + paddingX: + description: The horizontal padding between the blocks in a row. + default: 5 + paddingY: + description: The vertical padding between the rows. + default: 15 + FontCalculator: title: Font Calculator description: | diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts index 420ee9757b..be04286d00 100644 --- a/packages/mermaid/src/styles.spec.ts +++ b/packages/mermaid/src/styles.spec.ts @@ -28,6 +28,7 @@ import state from './diagrams/state/styles.js'; import journey from './diagrams/user-journey/styles.js'; import timeline from './diagrams/timeline/styles.js'; import mindmap from './diagrams/mindmap/styles.js'; +import packet from './diagrams/packet/styles.js'; import themes from './themes/index.js'; async function checkValidStylisCSSStyleSheet(stylisString: string) { @@ -96,6 +97,7 @@ describe('styles', () => { sequence, state, timeline, + packet, })) { test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => { const { default: getStyles, addStylesForDiagram } = await import('./styles.js'); diff --git a/packages/parser/langium-config.json b/packages/parser/langium-config.json index 4ffaaf372f..6daa551c17 100644 --- a/packages/parser/langium-config.json +++ b/packages/parser/langium-config.json @@ -5,6 +5,11 @@ "id": "info", "grammar": "src/language/info/info.langium", "fileExtensions": [".mmd", ".mermaid"] + }, + { + "id": "packet", + "grammar": "src/language/packet/packet.langium", + "fileExtensions": [".mmd", ".mermaid"] } ], "mode": "production", diff --git a/packages/parser/src/index.ts b/packages/parser/src/index.ts index 9dded54fa2..9ec6b4e9b9 100644 --- a/packages/parser/src/index.ts +++ b/packages/parser/src/index.ts @@ -1,3 +1,3 @@ -export type { Info } from './language/index.js'; +export type { Info, Packet } from './language/index.js'; export type { DiagramAST } from './parse.js'; export { parse, MermaidParseError } from './parse.js'; diff --git a/packages/parser/src/language/index.ts b/packages/parser/src/language/index.ts index b6685a07f6..a1c3dfd8d3 100644 --- a/packages/parser/src/language/index.ts +++ b/packages/parser/src/language/index.ts @@ -4,3 +4,4 @@ export * from './generated/module.js'; export * from './common/index.js'; export * from './info/index.js'; +export * from './packet/index.js'; diff --git a/packages/parser/src/language/packet/index.ts b/packages/parser/src/language/packet/index.ts new file mode 100644 index 0000000000..fd3c604b08 --- /dev/null +++ b/packages/parser/src/language/packet/index.ts @@ -0,0 +1 @@ +export * from './module.js'; diff --git a/packages/parser/src/language/packet/module.ts b/packages/parser/src/language/packet/module.ts new file mode 100644 index 0000000000..db9ff4722a --- /dev/null +++ b/packages/parser/src/language/packet/module.ts @@ -0,0 +1,72 @@ +import type { + DefaultSharedModuleContext, + LangiumServices, + LangiumSharedServices, + Module, + PartialLangiumServices, +} from 'langium'; +import { EmptyFileSystem, createDefaultModule, createDefaultSharedModule, inject } from 'langium'; + +import { CommonLexer } from '../common/lexer.js'; +import { MermaidGeneratedSharedModule, PacketGeneratedModule } from '../generated/module.js'; +import { PacketTokenBuilder } from './tokenBuilder.js'; +import { CommonValueConverter } from '../common/valueConverter.js'; + +/** + * Declaration of `Packet` services. + */ +type PacketAddedServices = { + parser: { + Lexer: CommonLexer; + TokenBuilder: PacketTokenBuilder; + ValueConverter: CommonValueConverter; + }; +}; + +/** + * Union of Langium default services and `Packet` services. + */ +export type PacketServices = LangiumServices & PacketAddedServices; + +/** + * Dependency injection module that overrides Langium default services and + * contributes the declared `Packet` services. + */ +export const PacketModule: Module = { + parser: { + Lexer: (services: PacketServices) => new CommonLexer(services), + TokenBuilder: () => new PacketTokenBuilder(), + ValueConverter: () => new CommonValueConverter(), + }, +}; + +/** + * Create the full set of services required by Langium. + * + * First inject the shared services by merging two modules: + * - Langium default shared services + * - Services generated by langium-cli + * + * Then inject the language-specific services by merging three modules: + * - Langium default language-specific services + * - Services generated by langium-cli + * - Services specified in this file + * @param context - Optional module context with the LSP connection + * @returns An object wrapping the shared services and the language-specific services + */ +export function createPacketServices(context: DefaultSharedModuleContext = EmptyFileSystem): { + shared: LangiumSharedServices; + Packet: PacketServices; +} { + const shared: LangiumSharedServices = inject( + createDefaultSharedModule(context), + MermaidGeneratedSharedModule + ); + const Packet: PacketServices = inject( + createDefaultModule({ shared }), + PacketGeneratedModule, + PacketModule + ); + shared.ServiceRegistry.register(Packet); + return { shared, Packet }; +} diff --git a/packages/parser/src/language/packet/packet.langium b/packages/parser/src/language/packet/packet.langium new file mode 100644 index 0000000000..33adf49327 --- /dev/null +++ b/packages/parser/src/language/packet/packet.langium @@ -0,0 +1,14 @@ +grammar Packet +import "../common/common"; + +entry Packet: + "packet-beta" NEWLINE* + TitleAndAccessibilities? + (blocks+=Block)*; + +Block: + start=INT ('-' end=INT)? ':' label=STRING; + +hidden terminal WS: /\s+/; +terminal INT returns number: /[0-9]+/; +terminal STRING: /"[^"]*"|'[^']*'/; diff --git a/packages/parser/src/language/packet/tokenBuilder.ts b/packages/parser/src/language/packet/tokenBuilder.ts new file mode 100644 index 0000000000..3317f85496 --- /dev/null +++ b/packages/parser/src/language/packet/tokenBuilder.ts @@ -0,0 +1,7 @@ +import { MermaidTokenBuilder } from '../common/index.js'; + +export class PacketTokenBuilder extends MermaidTokenBuilder { + public constructor() { + super(['packet-beta']); + } +} diff --git a/packages/parser/src/parse.ts b/packages/parser/src/parse.ts index 90358bbf16..eba118e417 100644 --- a/packages/parser/src/parse.ts +++ b/packages/parser/src/parse.ts @@ -1,8 +1,8 @@ import type { LangiumParser, ParseResult } from 'langium'; -import type { Info } from './index.js'; -import { createInfoServices } from './language/index.js'; +import type { Info, Packet } from './index.js'; +import { createInfoServices, createPacketServices } from './language/index.js'; -export type DiagramAST = Info; +export type DiagramAST = Info | Packet; const parsers: Record = {}; @@ -13,8 +13,13 @@ const initializers = { const parser = createInfoServices().Info.parser.LangiumParser; parsers['info'] = parser; }, + packet: () => { + const parser = createPacketServices().Packet.parser.LangiumParser; + parsers['packet'] = parser; + }, } as const; export function parse(diagramType: 'info', text: string): Info; +export function parse(diagramType: 'packet', text: string): Packet; export function parse( diagramType: keyof typeof initializers, text: string From afd7cf51cf651180707886467f945f2022500782 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 14 Sep 2023 22:46:43 +0530 Subject: [PATCH 02/28] fix: Types and nomenclature --- packages/mermaid/src/diagrams/packet/db.ts | 18 ++++++++++-------- .../mermaid/src/diagrams/packet/renderer.ts | 10 +++++----- packages/mermaid/src/diagrams/packet/types.ts | 4 ++-- 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts index a36fdcaf15..0773a2c0e7 100644 --- a/packages/mermaid/src/diagrams/packet/db.ts +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -1,11 +1,11 @@ -import type { Block, PacketDB, Word } from './types.js'; +import type { Block, PacketDB, Row } from './types.js'; import { log } from '../../logger.js'; import type { PacketDiagramConfig } from '../../config.type.js'; import DEFAULT_CONFIG from '../../defaultConfig.js'; import { getConfig as commonGetConfig } from '../../config.js'; interface PacketData { - packet: Word[]; + packet: Row[]; } const defaultPacketData: PacketData = { @@ -22,21 +22,23 @@ export const getConfig = (): Required => { }); }; -export const getPacket = (): Word[] => data.packet; +export const getPacket = (): Row[] => data.packet; export const getNextFittingBlock = ( block: Block, row: number, bitsPerRow: number -): [Block, Block | undefined] => { - block.end = block.end ?? block.start; +): [Required, 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, undefined]; + return [block as Required, undefined]; } return [ @@ -55,12 +57,12 @@ export const getNextFittingBlock = ( export const populate = ({ blocks }: { blocks: Block[] }) => { let lastByte = -1; - let word: Block[] = []; + let word: Row = []; data.packet = []; let row = 1; const { bitsPerRow } = getConfig(); for (let { start, end, label } of blocks) { - if (end < start) { + if (end && end < start) { throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`); } if (start != lastByte + 1) { diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index 640c2e870c..d6d2a3d2e2 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -1,7 +1,7 @@ import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; -import type { PacketDB, Word } from './types.js'; +import type { PacketDB, Row } from './types.js'; import type { PacketDiagramConfig } from '../../config.type.js'; import type { Diagram } from '../../Diagram.js'; @@ -25,13 +25,13 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { const drawWord = ( svg: SVG, - word: Word, - row: number, + row: Row, + rowNumber: number, { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow }: Required ) => { const group: Group = svg.append('g'); - const wordY = row * (rowHeight + paddingY) + paddingY; - for (const block of word) { + const wordY = rowNumber * (rowHeight + paddingY) + paddingY; + for (const block of row) { const blockX = (block.start % bitsPerRow) * bitWidth + 1; const width = (block.end - block.start + 1) * bitWidth - paddingX; // Block rectangle diff --git a/packages/mermaid/src/diagrams/packet/types.ts b/packages/mermaid/src/diagrams/packet/types.ts index 9100558eb2..5492d40044 100644 --- a/packages/mermaid/src/diagrams/packet/types.ts +++ b/packages/mermaid/src/diagrams/packet/types.ts @@ -3,8 +3,8 @@ import type { DiagramDB } from '../../diagram-api/types.js'; export type ArrayElement = A extends readonly (infer T)[] ? T : never; export type Block = Pick, 'start' | 'end' | 'label'>; -export type Word = Block[]; +export type Row = Required[]; export interface PacketDB extends DiagramDB { - getPacket: () => Word[]; + getPacket: () => Row[]; } From 38d9c6d26b71cb82ad364f3a5d30b8477487ba61 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 14 Sep 2023 23:00:59 +0530 Subject: [PATCH 03/28] test: Add unit tests --- packages/mermaid/src/diagrams/packet/db.ts | 4 +- .../src/diagrams/packet/packet.spec.ts | 174 ++++++++++++++++-- 2 files changed, 166 insertions(+), 12 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts index 0773a2c0e7..b964b88dc2 100644 --- a/packages/mermaid/src/diagrams/packet/db.ts +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -67,7 +67,9 @@ export const populate = ({ blocks }: { blocks: Block[] }) => { } if (start != lastByte + 1) { throw new Error( - `Packet block ${start} - ${end} is not contiguous. It should start from ${lastByte + 1}.` + `Packet block ${start} - ${end ?? start} is not contiguous. It should start from ${ + lastByte + 1 + }.` ); } lastByte = end ?? start; diff --git a/packages/mermaid/src/diagrams/packet/packet.spec.ts b/packages/mermaid/src/diagrams/packet/packet.spec.ts index ea115e02ed..c4ccdba742 100644 --- a/packages/mermaid/src/diagrams/packet/packet.spec.ts +++ b/packages/mermaid/src/diagrams/packet/packet.spec.ts @@ -1,31 +1,183 @@ import { parser } from './parser.js'; +import { clear, getPacket } from './db.js'; +describe('packet diagrams', () => { + beforeEach(() => { + clear(); + }); + + it('should handle a packet-beta definition', () => { + const str = `packet-beta`; + expect(() => { + parser.parse(str); + }).not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot('[]'); + }); + + it('should handle diagram with data', () => { + const str = `packet-beta + 0-10: "test" + `; + expect(() => { + parser.parse(str); + }).not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "end": 10, + "label": "test", + "start": 0, + }, + ], + ] + `); + }); + + it('should handle single bits', () => { + const str = `packet-beta + 0-10: "test" + 11: "single" + `; + expect(() => { + parser.parse(str); + }).not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "end": 10, + "label": "test", + "start": 0, + }, + { + "end": 11, + "label": "single", + "start": 11, + }, + ], + ] + `); + }); -describe('info', () => { - it('should handle an info definition', () => { - const str = `info`; + it('should split into multiple rows', () => { + const str = `packet-beta + 0-10: "test" + 11-90: "multiple" + `; expect(() => { parser.parse(str); }).not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "end": 10, + "label": "test", + "start": 0, + }, + { + "end": 31, + "label": "multiple", + "start": 11, + }, + ], + [ + { + "end": 63, + "label": "multiple", + "start": 32, + }, + ], + [ + { + "end": 90, + "label": "multiple", + "start": 64, + }, + ], + ] + `); }); - it('should handle an info definition with showInfo', () => { - const str = `info showInfo`; + it('should split into multiple rows when cut at exact length', () => { + const str = `packet-beta + 0-16: "test" + 17-63: "multiple" + `; expect(() => { parser.parse(str); }).not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "end": 16, + "label": "test", + "start": 0, + }, + { + "end": 31, + "label": "multiple", + "start": 17, + }, + ], + [ + { + "end": 63, + "label": "multiple", + "start": 32, + }, + ], + ] + `); + }); + + it('should throw error if numbers are not continuous', () => { + const str = `packet-beta + 0-16: "test" + 18-20: "error" + `; + expect(() => { + parser.parse(str); + }).toThrowErrorMatchingInlineSnapshot( + '"Packet block 18 - 20 is not contiguous. It should start from 17."' + ); + }); + + it('should throw error if numbers are not continuous for single packets', () => { + const str = `packet-beta + 0-16: "test" + 18: "error" + `; + expect(() => { + parser.parse(str); + }).toThrowErrorMatchingInlineSnapshot( + '"Packet block 18 - 18 is not contiguous. It should start from 17."' + ); }); - it('should throw because of unsupported info grammar', () => { - const str = `info unsupported`; + it('should throw error if numbers are not continuous for single packets - 2', () => { + const str = `packet-beta + 0-16: "test" + 17: "good" + 19: "error" + `; expect(() => { parser.parse(str); - }).toThrow('Parsing failed: unexpected character: ->u<- at offset: 5, skipped 11 characters.'); + }).toThrowErrorMatchingInlineSnapshot( + '"Packet block 19 - 19 is not contiguous. It should start from 18."' + ); }); - it('should throw because of unsupported info grammar', () => { - const str = `info unsupported`; + it('should throw error if end is less than start', () => { + const str = `packet-beta + 0-16: "test" + 25-20: "error" + `; expect(() => { parser.parse(str); - }).toThrow('Parsing failed: unexpected character: ->u<- at offset: 5, skipped 11 characters.'); + }).toThrowErrorMatchingInlineSnapshot( + '"Packet block 25 - 20 is invalid. End must be greater than start."' + ); }); }); From 75f1f9228d1265e575541a40558a8aa3759866f8 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 14 Sep 2023 23:12:06 +0530 Subject: [PATCH 04/28] test: Add rendering tests --- cypress/integration/rendering/packet.spec.ts | 65 ++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 cypress/integration/rendering/packet.spec.ts diff --git a/cypress/integration/rendering/packet.spec.ts b/cypress/integration/rendering/packet.spec.ts new file mode 100644 index 0000000000..990ce092c9 --- /dev/null +++ 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" + ` + ); + }); +}); From 043729f557f8eb335d1ef842b8fa3bfe0ddaa5cd Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 14 Sep 2023 23:12:42 +0530 Subject: [PATCH 05/28] feat: Support showBits --- demos/packet.html | 26 +++++++++++++++++++ packages/mermaid/src/diagrams/packet/db.ts | 6 ++++- .../mermaid/src/diagrams/packet/renderer.ts | 11 +++++--- .../mermaid/src/schemas/config.schema.yaml | 2 +- 4 files changed, 39 insertions(+), 6 deletions(-) diff --git a/demos/packet.html b/demos/packet.html index 3e51de0ded..3e53f60dba 100644 --- a/demos/packet.html +++ b/demos/packet.html @@ -35,6 +35,32 @@

Packet diagram demo

192-223: "data" + 
+      ---
+      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"
+
+ From 566150977a489bdd69cca5f679235ac0d1d417fc Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 18 Sep 2023 23:31:23 +0530 Subject: [PATCH 08/28] Add mini-live editing to example.html --- demos/dev/example.html | 1 + 1 file changed, 1 insertion(+) diff --git a/demos/dev/example.html b/demos/dev/example.html index eff5881635..4ece7efa8b 100644 --- a/demos/dev/example.html +++ b/demos/dev/example.html @@ -15,6 +15,7 @@ } #dynamicDiagram { + padding-left: 2em; flex: 1; } From 3e3519e8ec59b949b4fb331659d92e1df5f7ee07 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 19 Sep 2023 16:51:42 +0530 Subject: [PATCH 09/28] docs: Add packet to index --- demos/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/demos/index.html b/demos/index.html index 24c4fbf3b0..68981aa8d5 100644 --- a/demos/index.html +++ b/demos/index.html @@ -78,6 +78,9 @@

ZenUML

  • Sankey

    • +
  • +

    Packet

    +
    • From 7c79bbd6b0c0c518665a6233ab535f1b33a05bef Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 14 Nov 2023 11:48:11 +0530 Subject: [PATCH 10/28] refactor: Address review comments Moved some types around Removed unnecessary params Co-authored-by: Reda Al Sulais Co-authored-by: Alois Klink --- cypress/integration/rendering/packet.spec.ts | 2 +- docs/config/setup/modules/defaultConfig.md | 2 +- packages/mermaid/src/defaultConfig.ts | 4 ---- packages/mermaid/src/diagrams/packet/db.ts | 14 +++++--------- packages/mermaid/src/diagrams/packet/styles.ts | 4 +++- packages/mermaid/src/diagrams/packet/types.ts | 16 ++++++++++++++++ .../parser/src/language/packet/packet.langium | 18 ++++++++++++------ 7 files changed, 38 insertions(+), 22 deletions(-) diff --git a/cypress/integration/rendering/packet.spec.ts b/cypress/integration/rendering/packet.spec.ts index 990ce092c9..89dce609bd 100644 --- a/cypress/integration/rendering/packet.spec.ts +++ b/cypress/integration/rendering/packet.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util'; +import { imgSnapshotTest } from '../../helpers/util'; describe('packet structure', () => { it('should render a simple packet diagram', () => { diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index 7a9b891c43..d3495bc0c3 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L272) +[defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275) --- diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 343d667af0..76a8152b7a 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -259,10 +259,6 @@ const config: RequiredDeep = { }, 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, }, }; diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts index d766765fc1..385246d7ad 100644 --- a/packages/mermaid/src/diagrams/packet/db.ts +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -1,13 +1,9 @@ -import type { Block, PacketDB, Row } from './types.js'; +import type { Block, PacketDB, PacketData, 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[]; -} +import { cleanAndMerge } from '../../utils.js'; const defaultPacketData: PacketData = { packet: [], @@ -17,7 +13,7 @@ let data: PacketData = structuredClone(defaultPacketData); export const DEFAULT_PACKET_CONFIG: Required = DEFAULT_CONFIG.packet; export const getConfig = (): Required => { - const config = structuredClone({ + const config = cleanAndMerge({ ...DEFAULT_PACKET_CONFIG, ...commonGetConfig().packet, }); @@ -61,9 +57,9 @@ export const getNextFittingBlock = ( }; export const populate = ({ blocks }: { blocks: Block[] }) => { + clear(); let lastByte = -1; let word: Row = []; - data.packet = []; let row = 1; const { bitsPerRow } = getConfig(); for (let { start, end, label } of blocks) { @@ -97,7 +93,6 @@ export const populate = ({ blocks }: { blocks: Block[] }) => { if (word.length > 0) { data.packet.push(word); } - log.debug(data); }; export const clear = () => { @@ -107,4 +102,5 @@ export const clear = () => { export const db: PacketDB = { getPacket, getConfig, + clear, }; diff --git a/packages/mermaid/src/diagrams/packet/styles.ts b/packages/mermaid/src/diagrams/packet/styles.ts index d6f738a138..28292a0275 100644 --- a/packages/mermaid/src/diagrams/packet/styles.ts +++ b/packages/mermaid/src/diagrams/packet/styles.ts @@ -1,6 +1,8 @@ +import type { DiagramStylesProvider } from '../../diagram-api/types.js'; import { log } from '../../logger.js'; +import type { PacketStyleOptions } from './types.js'; -export const styles = (options: any = {}) => { +export const styles: DiagramStylesProvider = (options: { packet?: PacketStyleOptions } = {}) => { log.debug({ options }); return ` .byte { diff --git a/packages/mermaid/src/diagrams/packet/types.ts b/packages/mermaid/src/diagrams/packet/types.ts index 1ec25c0406..6dc92215a8 100644 --- a/packages/mermaid/src/diagrams/packet/types.ts +++ b/packages/mermaid/src/diagrams/packet/types.ts @@ -9,4 +9,20 @@ export type Row = Required[]; export interface PacketDB extends DiagramDB { getPacket: () => Row[]; getConfig: () => Required; + clear: () => void; +} + +export interface PacketStyleOptions { + byteFontSize?: string; + startByteColor?: string; + endByteColor?: string; + labelColor?: string; + labelFontSize?: string; + blockStrokeColor?: string; + blockStrokeWidth?: string; + blockFillColor?: string; +} + +export interface PacketData { + packet: Row[]; } diff --git a/packages/parser/src/language/packet/packet.langium b/packages/parser/src/language/packet/packet.langium index 33adf49327..6565578dd7 100644 --- a/packages/parser/src/language/packet/packet.langium +++ b/packages/parser/src/language/packet/packet.langium @@ -2,13 +2,19 @@ grammar Packet import "../common/common"; entry Packet: - "packet-beta" NEWLINE* - TitleAndAccessibilities? - (blocks+=Block)*; + NEWLINE* + "packet-beta" + ( + NEWLINE* TitleAndAccessibilities blocks+=PacketBlock* + | NEWLINE+ blocks+=PacketBlock+ + | NEWLINE* + ) +; -Block: - start=INT ('-' end=INT)? ':' label=STRING; +PacketBlock: + start=INT('-' end=INT)? ':' label=STRING NEWLINE+ +; hidden terminal WS: /\s+/; -terminal INT returns number: /[0-9]+/; +terminal INT returns number: /0|[1-9][0-9]*/; terminal STRING: /"[^"]*"|'[^']*'/; From b88d1dfaa95ef71314ac1c7a6642a69567823b45 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 14 Nov 2023 11:59:58 +0530 Subject: [PATCH 11/28] fix(packet): Grammar whitespace Move populate into parser Co-authored-by: Reda Al Sulais --- packages/mermaid/src/diagrams/packet/db.ts | 68 +----------------- .../mermaid/src/diagrams/packet/parser.ts | 72 ++++++++++++++++++- .../parser/src/language/packet/packet.langium | 1 - 3 files changed, 72 insertions(+), 69 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts index 385246d7ad..96648be5f5 100644 --- a/packages/mermaid/src/diagrams/packet/db.ts +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -1,6 +1,5 @@ import type { Block, PacketDB, PacketData, 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'; import { cleanAndMerge } from '../../utils.js'; @@ -10,6 +9,7 @@ const defaultPacketData: PacketData = { }; let data: PacketData = structuredClone(defaultPacketData); + export const DEFAULT_PACKET_CONFIG: Required = DEFAULT_CONFIG.packet; export const getConfig = (): Required => { @@ -25,71 +25,7 @@ export const getConfig = (): Required => { export const getPacket = (): Row[] => data.packet; -export const getNextFittingBlock = ( - block: Block, - row: number, - bitsPerRow: number -): [Required, 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, 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[] }) => { - clear(); - let lastByte = -1; - let word: Row = []; - 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); - } - } +export const pushWord = (word: Row) => { if (word.length > 0) { data.packet.push(word); } diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index 0a1334faad..91f0a87065 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -1,9 +1,77 @@ import type { Packet } from 'mermaid-parser'; import type { ParserDefinition } from '../../diagram-api/types.js'; - import { parse } from 'mermaid-parser'; import { log } from '../../logger.js'; -import { populate } from './db.js'; +import type { Block, Row } from './types.js'; +import { clear, getConfig, getPacket, pushWord } from './db.js'; + +const populate = ({ blocks }: { blocks: Block[] }) => { + clear(); + let lastByte = -1; + let word: Row = []; + 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 && getPacket().length < 10_000) { + const [block, nextBlock] = getNextFittingBlock({ start, end, label }, row, bitsPerRow); + word.push(block); + if (block.end + 1 === row * bitsPerRow) { + pushWord(word); + word = []; + row++; + } + if (!nextBlock) { + break; + } + ({ start, end, label } = nextBlock); + } + } + pushWord(word); +}; + +const getNextFittingBlock = ( + block: Block, + row: number, + bitsPerRow: number +): [Required, 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, undefined]; + } + + return [ + { + start: block.start, + end: row * bitsPerRow - 1, + label: block.label, + }, + { + start: row * bitsPerRow, + end: block.end, + label: block.label, + }, + ]; +}; export const parser: ParserDefinition = { parse: (input: string): void => { diff --git a/packages/parser/src/language/packet/packet.langium b/packages/parser/src/language/packet/packet.langium index 6565578dd7..d14dfdd68a 100644 --- a/packages/parser/src/language/packet/packet.langium +++ b/packages/parser/src/language/packet/packet.langium @@ -15,6 +15,5 @@ PacketBlock: start=INT('-' end=INT)? ':' label=STRING NEWLINE+ ; -hidden terminal WS: /\s+/; terminal INT returns number: /0|[1-9][0-9]*/; terminal STRING: /"[^"]*"|'[^']*'/; From 659db9f04b50dd216c6da8e99b402247870f7389 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 14 Nov 2023 19:44:09 +0530 Subject: [PATCH 12/28] chore: Add types and minimums for packet config --- packages/mermaid/src/schemas/config.schema.yaml | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index a720163130..ce6219eb87 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1994,21 +1994,32 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) properties: rowHeight: description: The height of each row in the packet diagram. + type: number + minimum: 1 default: 32 bitWidth: description: The width of each bit in the packet diagram. + type: number + minimum: 1 default: 32 bitsPerRow: description: The number of bits to display per row. + type: number + minimum: 1 default: 32 showBits: description: Toggle to display or hide bit numbers. + type: boolean default: true paddingX: description: The horizontal padding between the blocks in a row. + type: number + minimum: 0 default: 5 paddingY: description: The vertical padding between the rows. + type: number + minimum: 0 default: 5 FontCalculator: From 9925b9b455bcf930a7dcbb209bf7c4448c0c9ccb Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 00:47:03 +0530 Subject: [PATCH 13/28] feat: Add title support to packetDiagram --- packages/mermaid/src/diagram-api/types.ts | 21 +++++++++++-- packages/mermaid/src/diagrams/packet/db.ts | 31 ++++++++++++++----- .../mermaid/src/diagrams/packet/diagram.ts | 2 +- .../src/diagrams/packet/packet.spec.ts | 5 ++- .../mermaid/src/diagrams/packet/parser.ts | 19 ++++++------ .../mermaid/src/diagrams/packet/renderer.ts | 29 +++++++++++------ .../mermaid/src/diagrams/packet/styles.ts | 14 ++++++--- packages/mermaid/src/diagrams/packet/types.ts | 9 +++--- 8 files changed, 92 insertions(+), 38 deletions(-) diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index d4f34de702..88957b5fb8 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -1,7 +1,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ +import type * as d3 from 'd3'; +import type { SetRequired } from 'type-fest'; import type { Diagram } from '../Diagram.js'; import type { BaseDiagramConfig, MermaidConfig } from '../config.type.js'; -import type * as d3 from 'd3'; export interface DiagramMetadata { title?: string; @@ -32,13 +33,29 @@ export interface DiagramDB { getDiagramTitle?: () => string; setAccTitle?: (title: string) => void; getAccTitle?: () => string; - setAccDescription?: (describetion: string) => void; + setAccDescription?: (description: string) => void; getAccDescription?: () => string; setDisplayMode?: (title: string) => void; bindFunctions?: (element: Element) => void; } +/** + * DiagramDB with fields that is required for all new diagrams. + */ +export type DiagramDBBase = { + getConfig: () => Required; +} & SetRequired< + DiagramDB, + | 'clear' + | 'getAccTitle' + | 'getDiagramTitle' + | 'getAccDescription' + | 'setAccDescription' + | 'setAccTitle' + | 'setDiagramTitle' +>; + // This is what is returned from getClasses(...) methods. // It is slightly renamed to ..StyleClassDef instead of just ClassDef because "class" is a greatly ambiguous and overloaded word. // It makes it clear we're working with a style class definition, even though defining the type is currently difficult. diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts index 96648be5f5..a40b71724d 100644 --- a/packages/mermaid/src/diagrams/packet/db.ts +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -1,8 +1,17 @@ -import type { Block, PacketDB, PacketData, Row } from './types.js'; +import { getConfig as commonGetConfig } from '../../config.js'; import type { PacketDiagramConfig } from '../../config.type.js'; import DEFAULT_CONFIG from '../../defaultConfig.js'; -import { getConfig as commonGetConfig } from '../../config.js'; import { cleanAndMerge } from '../../utils.js'; +import { + clear as commonClear, + getAccDescription, + getAccTitle, + getDiagramTitle, + setAccDescription, + setAccTitle, + setDiagramTitle, +} from '../common/commonDb.js'; +import type { PacketDB, PacketData, Row } from './types.js'; const defaultPacketData: PacketData = { packet: [], @@ -10,9 +19,9 @@ const defaultPacketData: PacketData = { let data: PacketData = structuredClone(defaultPacketData); -export const DEFAULT_PACKET_CONFIG: Required = DEFAULT_CONFIG.packet; +const DEFAULT_PACKET_CONFIG: Required = DEFAULT_CONFIG.packet; -export const getConfig = (): Required => { +const getConfig = (): Required => { const config = cleanAndMerge({ ...DEFAULT_PACKET_CONFIG, ...commonGetConfig().packet, @@ -23,20 +32,28 @@ export const getConfig = (): Required => { return config; }; -export const getPacket = (): Row[] => data.packet; +const getPacket = (): Row[] => data.packet; -export const pushWord = (word: Row) => { +const pushWord = (word: Row) => { if (word.length > 0) { data.packet.push(word); } }; -export const clear = () => { +const clear = () => { + commonClear(); data = structuredClone(defaultPacketData); }; export const db: PacketDB = { + pushWord, getPacket, getConfig, clear, + setAccTitle, + getAccTitle, + setDiagramTitle, + getDiagramTitle, + getAccDescription, + setAccDescription, }; diff --git a/packages/mermaid/src/diagrams/packet/diagram.ts b/packages/mermaid/src/diagrams/packet/diagram.ts index ae9cad4524..a73a77c052 100644 --- a/packages/mermaid/src/diagrams/packet/diagram.ts +++ b/packages/mermaid/src/diagrams/packet/diagram.ts @@ -1,6 +1,6 @@ import type { DiagramDefinition } from '../../diagram-api/types.js'; -import { parser } from './parser.js'; import { db } from './db.js'; +import { parser } from './parser.js'; import { renderer } from './renderer.js'; import { styles } from './styles.js'; diff --git a/packages/mermaid/src/diagrams/packet/packet.spec.ts b/packages/mermaid/src/diagrams/packet/packet.spec.ts index c4ccdba742..6ad24b75e9 100644 --- a/packages/mermaid/src/diagrams/packet/packet.spec.ts +++ b/packages/mermaid/src/diagrams/packet/packet.spec.ts @@ -1,5 +1,8 @@ +import { db } from './db.js'; import { parser } from './parser.js'; -import { clear, getPacket } from './db.js'; + +const { clear, getPacket } = db; + describe('packet diagrams', () => { beforeEach(() => { clear(); diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index 91f0a87065..db1dcde09b 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -1,17 +1,18 @@ import type { Packet } from 'mermaid-parser'; -import type { ParserDefinition } from '../../diagram-api/types.js'; import { parse } from 'mermaid-parser'; +import type { ParserDefinition } from '../../diagram-api/types.js'; import { log } from '../../logger.js'; +import { populateCommonDb } from '../common/populateCommonDb.js'; +import { db } from './db.js'; import type { Block, Row } from './types.js'; -import { clear, getConfig, getPacket, pushWord } from './db.js'; -const populate = ({ blocks }: { blocks: Block[] }) => { - clear(); +const populate = (ast: Packet) => { + populateCommonDb(ast, db); let lastByte = -1; let word: Row = []; let row = 1; - const { bitsPerRow } = getConfig(); - for (let { start, end, label } of blocks) { + const { bitsPerRow } = db.getConfig(); + for (let { start, end, label } of ast.blocks) { if (end && end < start) { throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`); } @@ -25,11 +26,11 @@ const populate = ({ blocks }: { blocks: Block[] }) => { lastByte = end ?? start; log.debug(`Packet block ${start} - ${lastByte} with label ${label}`); - while (word.length <= bitsPerRow + 1 && getPacket().length < 10_000) { + while (word.length <= bitsPerRow + 1 && db.getPacket().length < 10_000) { const [block, nextBlock] = getNextFittingBlock({ start, end, label }, row, bitsPerRow); word.push(block); if (block.end + 1 === row * bitsPerRow) { - pushWord(word); + db.pushWord(word); word = []; row++; } @@ -39,7 +40,7 @@ const populate = ({ blocks }: { blocks: Block[] }) => { ({ start, end, label } = nextBlock); } } - pushWord(word); + db.pushWord(word); }; const getNextFittingBlock = ( diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index 172f4a202e..d846de9e73 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -1,9 +1,9 @@ -import { configureSvgSize } from '../../setupGraphViewbox.js'; +import type { Diagram } from '../../Diagram.js'; +import type { PacketDiagramConfig } from '../../config.type.js'; import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { PacketDB, Row } from './types.js'; -import type { PacketDiagramConfig } from '../../config.type.js'; -import type { Diagram } from '../../Diagram.js'; // eslint-disable-next-line @typescript-eslint/no-unused-vars const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { @@ -11,16 +11,27 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { const config = db.getConfig(); const { rowHeight, paddingY, bitWidth, bitsPerRow } = config; const words = db.getPacket(); - const svgHeight = (rowHeight + paddingY) * words.length + paddingY; + const title = db.getDiagramTitle(); + const totalRowHeight = rowHeight + paddingY; + const svgHeight = totalRowHeight * (words.length + 1) - (title ? 0 : rowHeight); const svgWidth = bitWidth * bitsPerRow + 2; - const svg: SVG = selectSvgElement(id); + configureSvgSize(svg, svgHeight, svgWidth, true); svg.attr('height', svgHeight + 'px'); for (const [row, packet] of words.entries()) { drawWord(svg, packet, row, config); } + + svg + .append('text') + .text(title) + .attr('x', svgWidth / 2) + .attr('y', svgHeight - rowHeight) + .attr('dominant-baseline', 'middle') + .attr('text-anchor', 'middle') + .attr('class', 'packetTitle'); }; const drawWord = ( @@ -41,14 +52,14 @@ const drawWord = ( .attr('y', wordY) .attr('width', width) .attr('height', rowHeight) - .attr('class', 'block'); + .attr('class', 'packetBlock'); // Block label group .append('text') .attr('x', blockX + width / 2) .attr('y', wordY + rowHeight / 2) - .attr('class', 'label') + .attr('class', 'packetLabel') .attr('dominant-baseline', 'middle') .attr('text-anchor', 'middle') .text(block.label); @@ -63,7 +74,7 @@ const drawWord = ( .append('text') .attr('x', blockX + (isSingleBlock ? width / 2 : 0)) .attr('y', bitNumberY) - .attr('class', 'byte start') + .attr('class', 'packetByte start') .attr('dominant-baseline', 'auto') .attr('text-anchor', isSingleBlock ? 'middle' : 'start') .text(block.start); @@ -74,7 +85,7 @@ const drawWord = ( .append('text') .attr('x', blockX + width) .attr('y', bitNumberY) - .attr('class', 'byte end') + .attr('class', 'packetByte end') .attr('dominant-baseline', 'auto') .attr('text-anchor', 'end') .text(block.end); diff --git a/packages/mermaid/src/diagrams/packet/styles.ts b/packages/mermaid/src/diagrams/packet/styles.ts index 28292a0275..101328da7f 100644 --- a/packages/mermaid/src/diagrams/packet/styles.ts +++ b/packages/mermaid/src/diagrams/packet/styles.ts @@ -5,20 +5,24 @@ import type { PacketStyleOptions } from './types.js'; export const styles: DiagramStylesProvider = (options: { packet?: PacketStyleOptions } = {}) => { log.debug({ options }); return ` - .byte { + .packetByte { font-size: ${options.packet?.byteFontSize ?? '10px'}; } - .byte.start { + .packetByte.start { fill: ${options.packet?.startByteColor ?? 'black'}; } - .byte.end { + .packetByte.end { fill: ${options.packet?.endByteColor ?? 'black'}; } - .label { + .packetLabel { fill: ${options.packet?.labelColor ?? 'black'}; font-size: ${options.packet?.labelFontSize ?? '12px'}; } - .block { + .packetTitle { + fill: ${options.packet?.titleColor ?? 'black'}; + font-size: ${options.packet?.titleFontSize ?? '14px'}; + } + .packetBlock { stroke: ${options.packet?.blockStrokeColor ?? 'black'}; stroke-width: ${options.packet?.blockStrokeWidth ?? '1'}; fill: ${options.packet?.blockFillColor ?? '#efefef'}; diff --git a/packages/mermaid/src/diagrams/packet/types.ts b/packages/mermaid/src/diagrams/packet/types.ts index 6dc92215a8..0a4507076d 100644 --- a/packages/mermaid/src/diagrams/packet/types.ts +++ b/packages/mermaid/src/diagrams/packet/types.ts @@ -1,15 +1,14 @@ import type { Packet } from 'mermaid-parser'; -import type { DiagramDB } from '../../diagram-api/types.js'; import type { PacketDiagramConfig } from '../../config.type.js'; +import type { DiagramDBBase } from '../../diagram-api/types.js'; export type ArrayElement = A extends readonly (infer T)[] ? T : never; export type Block = Pick, 'start' | 'end' | 'label'>; export type Row = Required[]; -export interface PacketDB extends DiagramDB { +export interface PacketDB extends DiagramDBBase { + pushWord: (word: Row) => void; getPacket: () => Row[]; - getConfig: () => Required; - clear: () => void; } export interface PacketStyleOptions { @@ -21,6 +20,8 @@ export interface PacketStyleOptions { blockStrokeColor?: string; blockStrokeWidth?: string; blockFillColor?: string; + titleColor?: string; + titleFontSize?: string; } export interface PacketData { From 1a8743ec118d9c8d1563456bc6ccc4bd20f09518 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 00:52:56 +0530 Subject: [PATCH 14/28] refactor: Separate default options in styles --- .../mermaid/src/diagrams/packet/styles.ts | 40 +++++++++++++------ 1 file changed, 27 insertions(+), 13 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/styles.ts b/packages/mermaid/src/diagrams/packet/styles.ts index 101328da7f..ff940d0e63 100644 --- a/packages/mermaid/src/diagrams/packet/styles.ts +++ b/packages/mermaid/src/diagrams/packet/styles.ts @@ -1,31 +1,45 @@ import type { DiagramStylesProvider } from '../../diagram-api/types.js'; -import { log } from '../../logger.js'; +import { cleanAndMerge } from '../../utils.js'; import type { PacketStyleOptions } from './types.js'; -export const styles: DiagramStylesProvider = (options: { packet?: PacketStyleOptions } = {}) => { - log.debug({ options }); +const defaultPacketStyleOptions: PacketStyleOptions = { + byteFontSize: '10px', + startByteColor: 'black', + endByteColor: 'black', + labelColor: 'black', + labelFontSize: '12px', + titleColor: 'black', + titleFontSize: '14px', + blockStrokeColor: 'black', + blockStrokeWidth: '1', + blockFillColor: '#efefef', +}; + +export const styles: DiagramStylesProvider = ({ packet }: { packet?: PacketStyleOptions } = {}) => { + const options = cleanAndMerge(defaultPacketStyleOptions, packet); + return ` .packetByte { - font-size: ${options.packet?.byteFontSize ?? '10px'}; + font-size: ${options.byteFontSize}; } .packetByte.start { - fill: ${options.packet?.startByteColor ?? 'black'}; + fill: ${options.startByteColor}; } .packetByte.end { - fill: ${options.packet?.endByteColor ?? 'black'}; + fill: ${options.endByteColor}; } .packetLabel { - fill: ${options.packet?.labelColor ?? 'black'}; - font-size: ${options.packet?.labelFontSize ?? '12px'}; + fill: ${options.labelColor}; + font-size: ${options.labelFontSize}; } .packetTitle { - fill: ${options.packet?.titleColor ?? 'black'}; - font-size: ${options.packet?.titleFontSize ?? '14px'}; + fill: ${options.titleColor}; + font-size: ${options.titleFontSize}; } .packetBlock { - stroke: ${options.packet?.blockStrokeColor ?? 'black'}; - stroke-width: ${options.packet?.blockStrokeWidth ?? '1'}; - fill: ${options.packet?.blockFillColor ?? '#efefef'}; + stroke: ${options.blockStrokeColor}; + stroke-width: ${options.blockStrokeWidth}; + fill: ${options.blockFillColor}; } `; }; From 068a74adeb35f5e0e872f2e974e0b65b6a037c7e Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 00:55:02 +0530 Subject: [PATCH 15/28] chore: Fix magic number Co-authored-by: Reda Al Sulais --- packages/mermaid/src/diagrams/packet/parser.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index db1dcde09b..c0e9e12a08 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -6,6 +6,8 @@ import { populateCommonDb } from '../common/populateCommonDb.js'; import { db } from './db.js'; import type { Block, Row } from './types.js'; +const maxPacketSize = 10_000; + const populate = (ast: Packet) => { populateCommonDb(ast, db); let lastByte = -1; @@ -16,7 +18,7 @@ const populate = (ast: Packet) => { if (end && end < start) { throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`); } - if (start != lastByte + 1) { + if (start !== lastByte + 1) { throw new Error( `Packet block ${start} - ${end ?? start} is not contiguous. It should start from ${ lastByte + 1 @@ -26,7 +28,7 @@ const populate = (ast: Packet) => { lastByte = end ?? start; log.debug(`Packet block ${start} - ${lastByte} with label ${label}`); - while (word.length <= bitsPerRow + 1 && db.getPacket().length < 10_000) { + while (word.length <= bitsPerRow + 1 && db.getPacket().length < maxPacketSize) { const [block, nextBlock] = getNextFittingBlock({ start, end, label }, row, bitsPerRow); word.push(block); if (block.end + 1 === row * bitsPerRow) { From fc400ea57b8f1feacb269a08a18ea7a4e7ced5a4 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 00:57:39 +0530 Subject: [PATCH 16/28] fix: Langium formatting Co-authored-by: Reda Al Sulais --- packages/parser/src/language/packet/packet.langium | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/parser/src/language/packet/packet.langium b/packages/parser/src/language/packet/packet.langium index d14dfdd68a..dce1c1ef86 100644 --- a/packages/parser/src/language/packet/packet.langium +++ b/packages/parser/src/language/packet/packet.langium @@ -3,7 +3,7 @@ import "../common/common"; entry Packet: NEWLINE* - "packet-beta" + "packet-beta" ( NEWLINE* TitleAndAccessibilities blocks+=PacketBlock* | NEWLINE+ blocks+=PacketBlock+ @@ -12,7 +12,7 @@ entry Packet: ; PacketBlock: - start=INT('-' end=INT)? ':' label=STRING NEWLINE+ + start=INT('-' end=INT)? ':' label=STRING NEWLINE+ ; terminal INT returns number: /0|[1-9][0-9]*/; From b6983e4b21f64f1bb12bf1f5579177bffbe9401f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 00:59:34 +0530 Subject: [PATCH 17/28] Add title to tests --- cypress/integration/rendering/packet.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/cypress/integration/rendering/packet.spec.ts b/cypress/integration/rendering/packet.spec.ts index 89dce609bd..61555ea530 100644 --- a/cypress/integration/rendering/packet.spec.ts +++ b/cypress/integration/rendering/packet.spec.ts @@ -4,6 +4,7 @@ describe('packet structure', () => { it('should render a simple packet diagram', () => { imgSnapshotTest( `packet-beta + title Hello world 0-10: "hello" ` ); @@ -37,6 +38,7 @@ describe('packet structure', () => { imgSnapshotTest( ` --- + title: "Packet Diagram" config: packet: showBits: false From 113a4009522abeaddc3919b846c6323656098ad6 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 01:02:20 +0530 Subject: [PATCH 18/28] Add DiagramRenderer type Co-authored-by: Reda Al Sulais --- packages/mermaid/src/diagrams/packet/renderer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index d846de9e73..c4547fd80d 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -1,6 +1,6 @@ import type { Diagram } from '../../Diagram.js'; import type { PacketDiagramConfig } from '../../config.type.js'; -import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; +import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { PacketDB, Row } from './types.js'; @@ -92,4 +92,4 @@ const drawWord = ( } } }; -export const renderer = { draw }; +export const renderer: DiagramRenderer = { draw }; From f9df193b7b175bc5eaa66adef0663e2d87745fc7 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 01:04:07 +0530 Subject: [PATCH 19/28] chore: Fix imports --- packages/parser/src/language/packet/module.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/parser/src/language/packet/module.ts b/packages/parser/src/language/packet/module.ts index db9ff4722a..183ec0ff83 100644 --- a/packages/parser/src/language/packet/module.ts +++ b/packages/parser/src/language/packet/module.ts @@ -6,11 +6,10 @@ import type { PartialLangiumServices, } from 'langium'; import { EmptyFileSystem, createDefaultModule, createDefaultSharedModule, inject } from 'langium'; - import { CommonLexer } from '../common/lexer.js'; +import { CommonValueConverter } from '../common/valueConverter.js'; import { MermaidGeneratedSharedModule, PacketGeneratedModule } from '../generated/module.js'; import { PacketTokenBuilder } from './tokenBuilder.js'; -import { CommonValueConverter } from '../common/valueConverter.js'; /** * Declaration of `Packet` services. From 99313fe1628599ce05c5707b9c438d3370d3bfe7 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 09:09:48 +0530 Subject: [PATCH 20/28] fix editor build --- scripts/editor.bash | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/editor.bash b/scripts/editor.bash index fd9b415825..421fdec747 100755 --- a/scripts/editor.bash +++ b/scripts/editor.bash @@ -13,8 +13,8 @@ mv package.tmp.json package.json popd pnpm run -r clean +pnpm build:esbuild pnpm build:types -pnpm build:mermaid # Clone the Mermaid Live Editor repository rm -rf mermaid-live-editor From 0d7644c7821630c14be27376f724fadeb0fe1bda Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 09:25:49 +0530 Subject: [PATCH 21/28] refactor: Fix types --- .esbuild/build.ts | 4 ++-- packages/mermaid/src/diagrams/packet/db.ts | 6 +++--- packages/mermaid/src/diagrams/packet/parser.ts | 10 +++++----- packages/mermaid/src/diagrams/packet/renderer.ts | 6 +++--- packages/mermaid/src/diagrams/packet/types.ts | 14 +++++++------- packages/mermaid/src/types.ts | 2 ++ packages/parser/src/index.ts | 11 ++++++++++- 7 files changed, 32 insertions(+), 21 deletions(-) diff --git a/.esbuild/build.ts b/.esbuild/build.ts index 3e829d7193..3c87f9d621 100644 --- 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/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts index a40b71724d..d7b5504723 100644 --- a/packages/mermaid/src/diagrams/packet/db.ts +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -11,7 +11,7 @@ import { setAccTitle, setDiagramTitle, } from '../common/commonDb.js'; -import type { PacketDB, PacketData, Row } from './types.js'; +import type { PacketDB, PacketData, PacketWord } from './types.js'; const defaultPacketData: PacketData = { packet: [], @@ -32,9 +32,9 @@ const getConfig = (): Required => { return config; }; -const getPacket = (): Row[] => data.packet; +const getPacket = (): PacketWord[] => data.packet; -const pushWord = (word: Row) => { +const pushWord = (word: PacketWord) => { if (word.length > 0) { data.packet.push(word); } diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index c0e9e12a08..fa90444df2 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -4,14 +4,14 @@ import type { ParserDefinition } from '../../diagram-api/types.js'; import { log } from '../../logger.js'; import { populateCommonDb } from '../common/populateCommonDb.js'; import { db } from './db.js'; -import type { Block, Row } from './types.js'; +import type { PacketBlock, PacketWord } from './types.js'; const maxPacketSize = 10_000; const populate = (ast: Packet) => { populateCommonDb(ast, db); let lastByte = -1; - let word: Row = []; + let word: PacketWord = []; let row = 1; const { bitsPerRow } = db.getConfig(); for (let { start, end, label } of ast.blocks) { @@ -46,10 +46,10 @@ const populate = (ast: Packet) => { }; const getNextFittingBlock = ( - block: Block, + block: PacketBlock, row: number, bitsPerRow: number -): [Required, Block | undefined] => { +): [Required, PacketBlock | undefined] => { if (block.end === undefined) { block.end = block.start; } @@ -59,7 +59,7 @@ const getNextFittingBlock = ( } if (block.end + 1 <= row * bitsPerRow) { - return [block as Required, undefined]; + return [block as Required, undefined]; } return [ diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index c4547fd80d..21b941a172 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -3,7 +3,7 @@ import type { PacketDiagramConfig } from '../../config.type.js'; import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import type { PacketDB, Row } from './types.js'; +import type { PacketDB, PacketWord } from './types.js'; // eslint-disable-next-line @typescript-eslint/no-unused-vars const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { @@ -36,13 +36,13 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { const drawWord = ( svg: SVG, - row: Row, + word: PacketWord, rowNumber: number, { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required ) => { const group: Group = svg.append('g'); const wordY = rowNumber * (rowHeight + paddingY) + paddingY; - for (const block of row) { + for (const block of word) { const blockX = (block.start % bitsPerRow) * bitWidth + 1; const width = (block.end - block.start + 1) * bitWidth - paddingX; // Block rectangle diff --git a/packages/mermaid/src/diagrams/packet/types.ts b/packages/mermaid/src/diagrams/packet/types.ts index 0a4507076d..bbb87db698 100644 --- a/packages/mermaid/src/diagrams/packet/types.ts +++ b/packages/mermaid/src/diagrams/packet/types.ts @@ -1,14 +1,14 @@ -import type { Packet } from 'mermaid-parser'; +import type { Packet, RecursiveAstOmit } from 'mermaid-parser'; import type { PacketDiagramConfig } from '../../config.type.js'; import type { DiagramDBBase } from '../../diagram-api/types.js'; +import type { ArrayElement } from '../../types.js'; -export type ArrayElement = A extends readonly (infer T)[] ? T : never; -export type Block = Pick, 'start' | 'end' | 'label'>; -export type Row = Required[]; +export type PacketBlock = RecursiveAstOmit>; +export type PacketWord = Required[]; export interface PacketDB extends DiagramDBBase { - pushWord: (word: Row) => void; - getPacket: () => Row[]; + pushWord: (word: PacketWord) => void; + getPacket: () => PacketWord[]; } export interface PacketStyleOptions { @@ -25,5 +25,5 @@ export interface PacketStyleOptions { } export interface PacketData { - packet: Row[]; + packet: PacketWord[]; } diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts index 13da885033..487e089dce 100644 --- a/packages/mermaid/src/types.ts +++ b/packages/mermaid/src/types.ts @@ -32,3 +32,5 @@ export interface EdgeData { labelStyle: string; curve: any; } + +export type ArrayElement = A extends readonly (infer T)[] ? T : never; diff --git a/packages/parser/src/index.ts b/packages/parser/src/index.ts index 9ec6b4e9b9..c72b4fcb6e 100644 --- a/packages/parser/src/index.ts +++ b/packages/parser/src/index.ts @@ -1,3 +1,12 @@ +import type { AstNode } from 'langium'; + export type { Info, Packet } from './language/index.js'; +export { MermaidParseError, parse } from './parse.js'; export type { DiagramAST } from './parse.js'; -export { parse, MermaidParseError } from './parse.js'; + +/** + * Exclude/omit all `AstNode` attributes recursively. + */ +export type RecursiveAstOmit = T extends object + ? { [P in keyof T as Exclude]: RecursiveAstOmit } + : T; From 088fc392abc0c49503b8b0b1c9113442f6be93a1 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 09:42:35 +0530 Subject: [PATCH 22/28] Fix SVG width --- packages/mermaid/src/diagrams/packet/renderer.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index 21b941a172..2ef4ab7cd6 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -2,7 +2,6 @@ import type { Diagram } from '../../Diagram.js'; import type { PacketDiagramConfig } from '../../config.type.js'; import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; -import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { PacketDB, PacketWord } from './types.js'; // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -17,8 +16,8 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { const svgWidth = bitWidth * bitsPerRow + 2; const svg: SVG = selectSvgElement(id); - configureSvgSize(svg, svgHeight, svgWidth, true); - svg.attr('height', svgHeight + 'px'); + svg.attr('width', '100%'); + svg.attr('viewbox', `0 0 ${svgWidth} ${svgHeight}`); for (const [row, packet] of words.entries()) { drawWord(svg, packet, row, config); From 784a853ec7bdf17febcfa668e4142553f66b1988 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 12:20:28 +0530 Subject: [PATCH 23/28] feat: Add theming to packet --- .github/pull_request_template.md | 2 +- demos/packet.html | 78 ++++- docs/syntax/packet.md | 139 ++++++++ .../mermaid/src/diagrams/packet/renderer.ts | 2 +- .../mermaid/src/docs/.vitepress/config.ts | 11 +- packages/mermaid/src/docs/syntax/packet.md | 101 ++++++ packages/mermaid/src/themes/theme-dark.js | 11 +- packages/mermaid/src/themes/theme-forest.js | 13 +- pnpm-lock.yaml | 309 +++--------------- 9 files changed, 396 insertions(+), 270 deletions(-) create mode 100644 docs/syntax/packet.md create mode 100644 packages/mermaid/src/docs/syntax/packet.md diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index ff34d24fd0..9847c25232 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -14,5 +14,5 @@ Make sure you - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) - [ ] :computer: have added necessary unit/e2e tests. -- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/development.md#3-update-documentation) is used for all new features. +- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/code.md#3-update-documentation) is used for all new features. - [ ] :bookmark: targeted `develop` branch diff --git a/demos/packet.html b/demos/packet.html index 3e53f60dba..f332dcf8cf 100644 --- a/demos/packet.html +++ b/demos/packet.html @@ -14,7 +14,9 @@

    Packet diagram demo

    - 
    +
+    
    
+      
           packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
@@ -33,9 +35,10 @@ 
    Packet diagram demo
    
         144-159: "Urgent Pointer"
         160-191: "(Options and Padding)"
         192-223: "data"
-    
    
+
    - 
    +      
           ---
       config:
         packet:
@@ -59,15 +62,80 @@ 
    Packet diagram demo
    
         144-159: "Urgent Pointer"
         160-191: "(Options and Padding)"
         192-223: "data"
-    
    
+
    + 
    +      ---
+      config:
+        theme: forest
+      ---
+      packet-beta
+        title Forest theme
+        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"
+
    + + 
    +      ---
+      config:
+        theme: dark
+      ---
+      packet-beta
+        title Dark theme
+        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/docs/syntax/packet.md b/docs/syntax/packet.md new file mode 100644 index 0000000000..1792daf4c2 --- /dev/null +++ b/docs/syntax/packet.md @@ -0,0 +1,139 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md). + +# Packet Diagram (v\+) + +## Introduction + +A packet diagram is a visual representation used to illustrate the structure and contents of a network packet. Network packets are the fundamental units of data transferred over a network. + +## Usage + +This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets. + +## Syntax + + packet-beta + start: "Block name" %% Single-bit block + start-end: "Block name" %% Multi-bit blocks + ... More Fields ... + +## Examples + +```mermaid-example +--- +title: "TCP Packet" +--- +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-255: "Data (variable length)" +``` + +```mermaid +--- +title: "TCP Packet" +--- +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-255: "Data (variable length)" +``` + +```mermaid-example +packet-beta +title UDP Packet +0-15: "Source Port" +16-31: "Destination Port" +32-47: "Length" +48-63: "Checksum" +64-95: "Data (variable length)" +``` + +```mermaid +packet-beta +title UDP Packet +0-15: "Source Port" +16-31: "Destination Port" +32-47: "Length" +48-63: "Checksum" +64-95: "Data (variable length)" +``` + +## Details of Syntax + +- **Ranges**: Each line after the title represents a different field in the packet. The range (e.g., `0-15`) indicates the bit positions in the packet. +- **Field Description**: A brief description of what the field represents, enclosed in quotes. + +## Configuration + +Please refer to the [configuration](/config/schema-docs/config-defs-packet-diagram-config.html) guide for details. + + diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index 2ef4ab7cd6..27f20cc0da 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -27,7 +27,7 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { .append('text') .text(title) .attr('x', svgWidth / 2) - .attr('y', svgHeight - rowHeight) + .attr('y', svgHeight - totalRowHeight / 2) .attr('dominant-baseline', 'middle') .attr('text-anchor', 'middle') .attr('class', 'packetTitle'); diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 691ca05651..41fd8a09be 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -1,6 +1,6 @@ +import { defineConfig, MarkdownOptions } from 'vitepress'; import { version } from '../../../package.json'; import MermaidExample from './mermaid-markdown-all.js'; -import { defineConfig, MarkdownOptions } from 'vitepress'; const allMarkdownTransformers: MarkdownOptions = { // the shiki theme to highlight code blocks @@ -144,13 +144,14 @@ function sidebarSyntax() { { text: 'Pie Chart', link: '/syntax/pie' }, { text: 'Quadrant Chart', link: '/syntax/quadrantChart' }, { text: 'Requirement Diagram', link: '/syntax/requirementDiagram' }, - { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitgraph' }, + { text: 'Gitgraph (Git) Diagram', link: '/syntax/gitgraph' }, { text: 'C4 Diagram 🦺⚠️', link: '/syntax/c4' }, - { text: 'Mindmaps 🔥', link: '/syntax/mindmap' }, - { text: 'Timeline 🔥', link: '/syntax/timeline' }, - { text: 'Zenuml 🔥', link: '/syntax/zenuml' }, + { text: 'Mindmaps', link: '/syntax/mindmap' }, + { text: 'Timeline', link: '/syntax/timeline' }, + { text: 'Zenuml', link: '/syntax/zenuml' }, { text: 'Sankey 🔥', link: '/syntax/sankey' }, { text: 'XYChart 🔥', link: '/syntax/xyChart' }, + { text: 'Packet 🔥', link: '/syntax/packet' }, { text: 'Other Examples', link: '/syntax/examples' }, ], }, diff --git a/packages/mermaid/src/docs/syntax/packet.md b/packages/mermaid/src/docs/syntax/packet.md new file mode 100644 index 0000000000..99e449e6b1 --- /dev/null +++ b/packages/mermaid/src/docs/syntax/packet.md @@ -0,0 +1,101 @@ +# Packet Diagram (v+) + +## Introduction + +A packet diagram is a visual representation used to illustrate the structure and contents of a network packet. Network packets are the fundamental units of data transferred over a network. + +## Usage + +This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets. + +## Syntax + +``` +packet-beta +start: "Block name" %% Single-bit block +start-end: "Block name" %% Multi-bit blocks +... More Fields ... +``` + +## Examples + +```mermaid-example +--- +title: "TCP Packet" +--- +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-255: "Data (variable length)" +``` + +```mermaid-example +packet-beta +title UDP Packet +0-15: "Source Port" +16-31: "Destination Port" +32-47: "Length" +48-63: "Checksum" +64-95: "Data (variable length)" +``` + +## Details of Syntax + +- **Ranges**: Each line after the title represents a different field in the packet. The range (e.g., `0-15`) indicates the bit positions in the packet. +- **Field Description**: A brief description of what the field represents, enclosed in quotes. + +## Configuration + +Please refer to the [configuration](/config/schema-docs/config-defs-packet-diagram-config.html) guide for details. + + diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index c566251090..dc7a600098 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -1,4 +1,4 @@ -import { invert, lighten, darken, rgba, adjust, isDark } from 'khroma'; +import { adjust, darken, invert, isDark, lighten, rgba } from 'khroma'; import { mkBorder } from './theme-helpers.js'; class Theme { @@ -268,6 +268,15 @@ class Theme { '#3498db,#2ecc71,#e74c3c,#f1c40f,#bdc3c7,#ffffff,#34495e,#9b59b6,#1abc9c,#e67e22', }; + this.packet = { + startByteColor: this.primaryTextColor, + endByteColor: this.primaryTextColor, + labelColor: this.primaryTextColor, + titleColor: this.primaryTextColor, + blockStrokeColor: this.primaryTextColor, + blockFillColor: this.background, + }; + /* class */ this.classText = this.primaryTextColor; diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index 0270f51ff9..eda905c661 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -1,9 +1,9 @@ -import { darken, lighten, adjust, invert, isDark } from 'khroma'; -import { mkBorder } from './theme-helpers.js'; +import { adjust, darken, invert, isDark, lighten } from 'khroma'; import { oldAttributeBackgroundColorEven, oldAttributeBackgroundColorOdd, } from './erDiagram-oldHardcodedValues.js'; +import { mkBorder } from './theme-helpers.js'; class Theme { constructor() { @@ -240,6 +240,15 @@ class Theme { this.quadrantExternalBorderStrokeFill || this.primaryBorderColor; this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; + this.packet = { + startByteColor: this.primaryTextColor, + endByteColor: this.primaryTextColor, + labelColor: this.primaryTextColor, + titleColor: this.primaryTextColor, + blockStrokeColor: this.primaryTextColor, + blockFillColor: this.mainBkg, + }; + /* xychart */ this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e5d16f4cc..a667516d4e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -500,8 +500,8 @@ importers: specifier: ^1.1.16 version: 1.1.16 '@unocss/reset': - specifier: ^0.55.2 - version: 0.55.7 + specifier: ^0.57.0 + version: 0.57.1 '@vite-pwa/vitepress': specifier: ^0.2.0 version: 0.2.0(vite-plugin-pwa@0.16.0) @@ -518,8 +518,8 @@ importers: specifier: ^1.1.0 version: 1.1.1 unocss: - specifier: ^0.55.2 - version: 0.55.7(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0) + specifier: ^0.57.0 + version: 0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0) unplugin-vue-components: specifier: ^0.25.0 version: 0.25.0(rollup@2.79.1)(vue@3.3.7) @@ -530,8 +530,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: - specifier: 1.0.0-rc.12 - version: 1.0.0-rc.12(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)(typescript@5.1.6) + specifier: 1.0.0-rc.25 + version: 1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6) workbox-window: specifier: ^7.0.0 version: 7.0.0 @@ -5059,23 +5059,23 @@ packages: eslint-visitor-keys: 3.4.3 dev: true - /@unocss/astro@0.55.7(rollup@2.79.1)(vite@4.5.0): - resolution: {integrity: sha512-mw8r14ArxUQBVCCisAJlF/WsZb650iBsduD/lXMk56N/nQ3MMArCcn62kcAxgZSb5tfIOQGQu/tbR8hEcD8y2g==} + /@unocss/astro@0.57.1(rollup@2.79.1)(vite@4.4.9): + resolution: {integrity: sha512-KNaqN/SGM/uz1QitajIkzNEw0jy9Zx9Wp8fl4GhfGYEMAN2+M4cuvBZRmlb6cLctSXmSAJQDG91ivbD1JijGnw==} peerDependencies: vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 peerDependenciesMeta: vite: optional: true dependencies: - '@unocss/core': 0.55.7 - '@unocss/reset': 0.55.7 - '@unocss/vite': 0.55.7(rollup@2.79.1)(vite@4.5.0) - vite: 4.5.0(@types/node@18.17.5) + '@unocss/core': 0.57.1 + '@unocss/reset': 0.57.1 + '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.4.9) + vite: 4.4.9(@types/node@18.17.5) transitivePeerDependencies: - rollup dev: true - /@unocss/astro@0.57.1(rollup@2.79.1)(vite@4.4.9): + /@unocss/astro@0.57.1(rollup@2.79.1)(vite@4.5.0): resolution: {integrity: sha512-KNaqN/SGM/uz1QitajIkzNEw0jy9Zx9Wp8fl4GhfGYEMAN2+M4cuvBZRmlb6cLctSXmSAJQDG91ivbD1JijGnw==} peerDependencies: vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 @@ -5085,30 +5085,8 @@ packages: dependencies: '@unocss/core': 0.57.1 '@unocss/reset': 0.57.1 - '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.4.9) - vite: 4.4.9(@types/node@18.17.5) - transitivePeerDependencies: - - rollup - dev: true - - /@unocss/cli@0.55.7(rollup@2.79.1): - resolution: {integrity: sha512-ZHX2SR2WQbKfcmgOOHjBLB3V57Ct76Zb76YULzBj2EVX43lX/YDCVG87n6ePDY7rOcjCAthjrFQYCLV5KVLKHg==} - engines: {node: '>=14'} - hasBin: true - dependencies: - '@ampproject/remapping': 2.2.1 - '@rollup/pluginutils': 5.0.5(rollup@2.79.1) - '@unocss/config': 0.55.7 - '@unocss/core': 0.55.7 - '@unocss/preset-uno': 0.55.7 - cac: 6.7.14 - chokidar: 3.5.3 - colorette: 2.0.20 - consola: 3.2.3 - fast-glob: 3.3.1 - magic-string: 0.30.5 - pathe: 1.1.1 - perfect-debounce: 1.0.0 + '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.5.0) + vite: 4.5.0(@types/node@18.17.5) transitivePeerDependencies: - rollup dev: true @@ -5135,14 +5113,6 @@ packages: - rollup dev: true - /@unocss/config@0.55.7: - resolution: {integrity: sha512-+X6rPScyFEWbkZyCyM+HfoJhJNN+CEl2n2izWkm0kuDj3w9fY9B3f/0dsk+jmx/gJEI5Y797q9zspNMNDib1AA==} - engines: {node: '>=14'} - dependencies: - '@unocss/core': 0.55.7 - unconfig: 0.3.11 - dev: true - /@unocss/config@0.57.1: resolution: {integrity: sha512-mbuVO0mH1PX7rEkViMNWb3jG1ji7TUydo2DdnMHhJE+dOrGtnQzhzXGlAd4qqel1fnt/VWuOyZKwJA3QO6VCtg==} engines: {node: '>=14'} @@ -5151,33 +5121,16 @@ packages: unconfig: 0.3.11 dev: true - /@unocss/core@0.55.7: - resolution: {integrity: sha512-c+bWe844Xjlwc1EPwHj0+n3LpntJG7ELPbEOOxNIG+CQdcEX0l1G0rkM8+nKstJ9WJmgpf1HdJQLVMF62HXvhw==} - dev: true - /@unocss/core@0.57.1: resolution: {integrity: sha512-cqQW/4gCuk+bFMPg9lBanuRNQ9Lx1l4PpMN/6uKxI5WROpq7ce/Xb4uGvAxKLh3ITtFSpXs2cLfsy7QD6cVD/Q==} dev: true - /@unocss/extractor-arbitrary-variants@0.55.7: - resolution: {integrity: sha512-imK2g/frlo5Ag0uVB+C/Psyo5+9AnqhoRAgYa6gyrQ/TJnrnwf+M3jFngU9evIMHw92vig1DGfPa2ZId901DwQ==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/extractor-arbitrary-variants@0.57.1: resolution: {integrity: sha512-9s+azHhBnwjxm46TsD1RY0krDAwOR8tcw58Vtl3emd6C0VQsAOdoprt7UHE7GEXMvDVq7nMf8lAT0BM0LteW3w==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/inspector@0.55.7: - resolution: {integrity: sha512-N0mjZozDDyqx8Mh6C/ZlMTlDzGiq22sXY/hPRX55Cf44WZI4W/ZWajqAAp42B+lw2MN0k1FYEMIAwn9n+xgq/g==} - dependencies: - gzip-size: 6.0.0 - sirv: 2.0.3 - dev: true - /@unocss/inspector@0.57.1: resolution: {integrity: sha512-qV7ta7iHGX2EpZJ4IWY/05kgyhKFeWlvVJbrOnGsaH8gVt33T/43YAhB/8K5GIXBXIwkhwk13iB13nlg2gSheg==} dependencies: @@ -5186,20 +5139,6 @@ packages: sirv: 2.0.3 dev: true - /@unocss/postcss@0.55.7(postcss@8.4.31): - resolution: {integrity: sha512-53Z/yv/CNdlTqKZQ9gpYRoLZSuzQ28J0SDrGCdzwjLcvHG/FD7/x1S7yxE7cUp/4sjvLL15HSzkWq8vNy6SkwQ==} - engines: {node: '>=14'} - peerDependencies: - postcss: ^8.4.21 - dependencies: - '@unocss/config': 0.55.7 - '@unocss/core': 0.55.7 - css-tree: 2.3.1 - fast-glob: 3.3.1 - magic-string: 0.30.5 - postcss: 8.4.31 - dev: true - /@unocss/postcss@0.57.1(postcss@8.4.31): resolution: {integrity: sha512-DexrV+v/qkVh6t660rXigNr2Y6lON8jxD1z2KVk2bjHKhFflF6q6seps6d/MquyLJI1mXF2uANTeFAeL2q6evw==} engines: {node: '>=14'} @@ -5215,28 +5154,12 @@ packages: postcss: 8.4.31 dev: true - /@unocss/preset-attributify@0.55.7: - resolution: {integrity: sha512-L1sNw3DyM4mymIm4DBTTTOllk8LmhYlWMgDlaAW2MYWygjqDCsp99wRKT2175Ya5xHYBA6XetMoBryZD23qJYQ==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/preset-attributify@0.57.1: resolution: {integrity: sha512-pvGQHaqBlB0jQysWhNbcKLOGrkj8b53k0sAa9LYxQjD1fa8t/dwbuMpZv4twX+gysF0vBhxRoWBPLH1/S6zRZg==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/preset-icons@0.55.7: - resolution: {integrity: sha512-JXLOHkyEKKAjLTqjAxYfhwln05WXilGg3jctkZWKpMNawPaonrGt3kZT12YMuMmOryxk7UcyKB0dtYc+p3QYvw==} - dependencies: - '@iconify/utils': 2.1.11 - '@unocss/core': 0.55.7 - ofetch: 1.3.3 - transitivePeerDependencies: - - supports-color - dev: true - /@unocss/preset-icons@0.57.1: resolution: {integrity: sha512-ve4jC6yREfS0mv97DCld9xLjMuiSCcsQPKucdtpUfCjLMqtGd1ZGGdFv02Q+92NkW7HDfgj+izEw1SKh9695Ow==} dependencies: @@ -5247,13 +5170,6 @@ packages: - supports-color dev: true - /@unocss/preset-mini@0.55.7: - resolution: {integrity: sha512-ZCskE2uprjGkpQezEPM6KPMf84rIZEUNc1p2DxWVHaFUPRV24/JSNsO4PsKrQgNIb2dLQxzPNlMzQJI7ssdBXQ==} - dependencies: - '@unocss/core': 0.55.7 - '@unocss/extractor-arbitrary-variants': 0.55.7 - dev: true - /@unocss/preset-mini@0.57.1: resolution: {integrity: sha512-v9ZsIUGDfZNXbIrOc7zrBp+RFbFFGSQN/vKIf761js4fJ31j6lan4pPQPGcY17xHConkI1HJT/+yb/UVJaAcHw==} dependencies: @@ -5262,25 +5178,12 @@ packages: '@unocss/rule-utils': 0.57.1 dev: true - /@unocss/preset-tagify@0.55.7: - resolution: {integrity: sha512-aDsuN3a/ZirbCDKpFsue9tc8MHs3l0Rl81n2ZOdIrJoZW4YWyydMVl++cz/HERZW81ZySK8EJKwGBaMJMgsnHA==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/preset-tagify@0.57.1: resolution: {integrity: sha512-GV8knxnsOVH/XiG2KB+mVZeEJqr0PZvvkSTPftGPbjttoKVZ+28Y5q9/qezH7p4W6RYVAAK+3qHHy5wWZosiMw==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/preset-typography@0.55.7: - resolution: {integrity: sha512-hLV4nsgsDIk66pt7Ej4NYUmaGtI2EfGb1h2yl5FmBtdtACrgPq+Skr2Br9Iq+Bj1QFhbsMOWLDdbojFQwBdH6A==} - dependencies: - '@unocss/core': 0.55.7 - '@unocss/preset-mini': 0.55.7 - dev: true - /@unocss/preset-typography@0.57.1: resolution: {integrity: sha512-C4cqCiGW0OSoSXsVQKgfLulYxY5C8M40f+a8VtBlAaEaN6eSlEt+catXb0chF9T2mvz/b87b0PahPvPwJdDf1Q==} dependencies: @@ -5288,14 +5191,6 @@ packages: '@unocss/preset-mini': 0.57.1 dev: true - /@unocss/preset-uno@0.55.7: - resolution: {integrity: sha512-z4pCxOv/OU1ARo++cvbijWNW2zy/EVTMqJXa+SEep9b99wFXPQE3gaPvLdURp/e5f1PoxVyPZ6JiBknbClSDuA==} - dependencies: - '@unocss/core': 0.55.7 - '@unocss/preset-mini': 0.55.7 - '@unocss/preset-wind': 0.55.7 - dev: true - /@unocss/preset-uno@0.57.1: resolution: {integrity: sha512-0+DKZiowYjYzq2swJzQA2dhqDvLJdm0Y437ITzc2GzZMKGUUuNi+w2v3/SzwkpkRd9zTB9/YaOIJVfdrx6ZOXQ==} dependencies: @@ -5305,13 +5200,6 @@ packages: '@unocss/rule-utils': 0.57.1 dev: true - /@unocss/preset-web-fonts@0.55.7: - resolution: {integrity: sha512-ygAz0540kdBapErW2BcObWfQT/6g0SpVUPYg92PPiZD57CZAvuNXiYTfFMRXd88QrBL1zIrZ6NrzY0NZ645H+w==} - dependencies: - '@unocss/core': 0.55.7 - ofetch: 1.3.3 - dev: true - /@unocss/preset-web-fonts@0.57.1: resolution: {integrity: sha512-9DCIMlBRaGrljLmeciH4WqP+uRx2z2nLxvrvEmGbpJJpMn2H4higR5Zu5tDyKYGr9QBl9vXdWgib+43OSswkqA==} dependencies: @@ -5319,13 +5207,6 @@ packages: ofetch: 1.3.3 dev: true - /@unocss/preset-wind@0.55.7: - resolution: {integrity: sha512-vLi0mtYDnvx3uYtBR4fSCR52T59drTUp3XVAAqQTbhvRctnSWm65MWE4G+gqdt2qQ9fM4SVCsxLLaXuJkI2eqw==} - dependencies: - '@unocss/core': 0.55.7 - '@unocss/preset-mini': 0.55.7 - dev: true - /@unocss/preset-wind@0.57.1: resolution: {integrity: sha512-5UairNahUXNDe9AggPtTCodyPjl6NgPCsiEB22LVgN20UjBXjaqzN5wUe1OgtpLoAUaSk0KI7eLWhnWbTbST3A==} dependencies: @@ -5334,10 +5215,6 @@ packages: '@unocss/rule-utils': 0.57.1 dev: true - /@unocss/reset@0.55.7: - resolution: {integrity: sha512-yvmLhxqUNgf6wue7IvhV/FdrQW9H9LF1Bmmhwwaiz2aV0E74aN4pbuYPZwNq3YafsQvNQ0UdtuXjddY4QMRCPw==} - dev: true - /@unocss/reset@0.57.1: resolution: {integrity: sha512-f/ofoudjFN/HMtv1XV5phP58pOmNruBhr0GbVdBNylyieMQkFHowA7iSemChnC/fTbCcY6oSOAcFl4n9AefjdA==} dev: true @@ -5350,57 +5227,28 @@ packages: magic-string: 0.30.5 dev: true - /@unocss/scope@0.55.7: - resolution: {integrity: sha512-r0CaS1aSpcC37ztqOJ3qaWIzM6zwdlX8r0rib2vTvWTckw1J0ocVhjNkWRBM9kRWte006JhecdiZzXNHA40akg==} - dev: true - /@unocss/scope@0.57.1: resolution: {integrity: sha512-ZAzg6lLGwKNQGCvJXEie3TvGztkAyajEFqygu0mjtHb+CmDql4iAjoygs+3dnRI5hSDwfMYFrJ2azX26+2CsoA==} dev: true - /@unocss/transformer-attributify-jsx-babel@0.55.7: - resolution: {integrity: sha512-xl5K/Zg7tLyI6Oee+xHgvBm0gSEviYdBDwaGC4O6cP9VXTBm6waz9NUU6CmmVYKh4dSeLQ1PKNboMeg2nFuJMw==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/transformer-attributify-jsx-babel@0.57.1: resolution: {integrity: sha512-EOCPB8OGmhroAuFU0i0W5p6GmJpx6mAkP4KmsqVLd4QMgw+8aXkG7SKyLnxQZnekM0/dSo0TcpVGeGrZaUNgvQ==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/transformer-attributify-jsx@0.55.7: - resolution: {integrity: sha512-ZyUBc0wguBhd+nbIlcrSYpmzKtqBi+8BII8SK4lIB/Ol1wBboByPTjBENsQkxRyffp5K9VTuZZ/LamFgPGOWDg==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/transformer-attributify-jsx@0.57.1: resolution: {integrity: sha512-ohgSEwm2j98ltPWl1zRPvZhRjQPpd7qZtgoROTQh6n2W7wEO1SlnYjgBBz+pGuo2dkfBN5NjuZJ93AEjS10Ysw==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/transformer-compile-class@0.55.7: - resolution: {integrity: sha512-tiYiT9EG4ucSBvMo+9Hv43GY0YvXQjfQCXDhDm3tcJyreMg6BRMO412eir54RBS+JAdNU0DUoITVYu+PkF7hLg==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/transformer-compile-class@0.57.1: resolution: {integrity: sha512-z0WZN6hbgpyBm2xqIrojqEjpQMhiyzHRbaBjWzI/6ieHWoFo5ajIwnReaFUEfJRNruLTd7/9hFDZdRXRPhttFw==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/transformer-directives@0.55.7: - resolution: {integrity: sha512-xNmR40FssHWYJSmJv/9TQC2IdTyZPV8U3Iv/PIuke1zndMwMciclghEFiw0wSeRmhoRI7iFZck5EI/Bokyo7CQ==} - dependencies: - '@unocss/core': 0.55.7 - css-tree: 2.3.1 - dev: true - /@unocss/transformer-directives@0.57.1: resolution: {integrity: sha512-rIk3XEU2NywEJUOkngBSmJfvS3IVgxkkqgMvuIqz8ZDbwWhepuMxsiI0QR3ypkipGr/eKK5DJ7eK0OVlo6FPFA==} dependencies: @@ -5409,39 +5257,33 @@ packages: css-tree: 2.3.1 dev: true - /@unocss/transformer-variant-group@0.55.7: - resolution: {integrity: sha512-uLyZ08XXVriUDenZCTGA3xGgMD3B9GVr6mSz002pDlLpQDi8FcMQTOGg8X4ViCGzS3l03S/+r+JY7kJTpMFa9w==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/transformer-variant-group@0.57.1: resolution: {integrity: sha512-qwydzn2Lqz/8zW6UUXdORaUl8humsG8ll74LN/z8cjEsqtXZkVdkV0l6Brpp9Xp/XPbKwO+II+KH3/1LGwXSzQ==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/vite@0.55.7(rollup@2.79.1)(vite@4.5.0): - resolution: {integrity: sha512-xmdyDnt9Ag4o7DGl22/P6MaB+HSjWOQw9qYYzIefSv3SVUvn3cEhIX/PCWqFp8Kts2HyvAoJLbZmygSf1XdZNQ==} + /@unocss/vite@0.57.1(rollup@2.79.1)(vite@4.4.9): + resolution: {integrity: sha512-kEBDvGgQNkX2n87S6Ao5seyFb1kuWZ5p96dGOS7VFpD7HvR5xholkJXaVhUK9/exCldjLExbo5UtVlbxFLUFYg==} peerDependencies: vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 dependencies: '@ampproject/remapping': 2.2.1 '@rollup/pluginutils': 5.0.5(rollup@2.79.1) - '@unocss/config': 0.55.7 - '@unocss/core': 0.55.7 - '@unocss/inspector': 0.55.7 - '@unocss/scope': 0.55.7 - '@unocss/transformer-directives': 0.55.7 + '@unocss/config': 0.57.1 + '@unocss/core': 0.57.1 + '@unocss/inspector': 0.57.1 + '@unocss/scope': 0.57.1 + '@unocss/transformer-directives': 0.57.1 chokidar: 3.5.3 fast-glob: 3.3.1 magic-string: 0.30.5 - vite: 4.5.0(@types/node@18.17.5) + vite: 4.4.9(@types/node@18.17.5) transitivePeerDependencies: - rollup dev: true - /@unocss/vite@0.57.1(rollup@2.79.1)(vite@4.4.9): + /@unocss/vite@0.57.1(rollup@2.79.1)(vite@4.5.0): resolution: {integrity: sha512-kEBDvGgQNkX2n87S6Ao5seyFb1kuWZ5p96dGOS7VFpD7HvR5xholkJXaVhUK9/exCldjLExbo5UtVlbxFLUFYg==} peerDependencies: vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 @@ -5456,7 +5298,7 @@ packages: chokidar: 3.5.3 fast-glob: 3.3.1 magic-string: 0.30.5 - vite: 4.4.9(@types/node@18.17.5) + vite: 4.5.0(@types/node@18.17.5) transitivePeerDependencies: - rollup dev: true @@ -5466,7 +5308,7 @@ packages: peerDependencies: vite-plugin-pwa: '>=0.16.3 <1' dependencies: - vite-plugin-pwa: 0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0) + vite-plugin-pwa: 0.16.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0) dev: true /@vitejs/plugin-vue@4.2.1(vite@4.4.9)(vue@3.3.4): @@ -15784,11 +15626,11 @@ packages: engines: {node: '>= 10.0.0'} dev: true - /unocss@0.55.7(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0): - resolution: {integrity: sha512-3W9P7vj2EhSk/4oPCHBS0VgrwSf5zZL6Az1/XARVOpBnRJtCM2szFInYxHkMgt9pkZTsW8SFCuk/g+QIJ6A8tg==} + /unocss@0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.4.9): + resolution: {integrity: sha512-xLsyJ8+T1/Ux93yrqOvuQy268wF5rSzydlsbqZ5EVfi01PxYyydez3nycPqbyPZientkJ0Yohzd5aBqmZgku3A==} engines: {node: '>=14'} peerDependencies: - '@unocss/webpack': 0.55.7 + '@unocss/webpack': 0.57.1 vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 peerDependenciesMeta: '@unocss/webpack': @@ -15796,34 +15638,34 @@ packages: vite: optional: true dependencies: - '@unocss/astro': 0.55.7(rollup@2.79.1)(vite@4.5.0) - '@unocss/cli': 0.55.7(rollup@2.79.1) - '@unocss/core': 0.55.7 - '@unocss/extractor-arbitrary-variants': 0.55.7 - '@unocss/postcss': 0.55.7(postcss@8.4.31) - '@unocss/preset-attributify': 0.55.7 - '@unocss/preset-icons': 0.55.7 - '@unocss/preset-mini': 0.55.7 - '@unocss/preset-tagify': 0.55.7 - '@unocss/preset-typography': 0.55.7 - '@unocss/preset-uno': 0.55.7 - '@unocss/preset-web-fonts': 0.55.7 - '@unocss/preset-wind': 0.55.7 - '@unocss/reset': 0.55.7 - '@unocss/transformer-attributify-jsx': 0.55.7 - '@unocss/transformer-attributify-jsx-babel': 0.55.7 - '@unocss/transformer-compile-class': 0.55.7 - '@unocss/transformer-directives': 0.55.7 - '@unocss/transformer-variant-group': 0.55.7 - '@unocss/vite': 0.55.7(rollup@2.79.1)(vite@4.5.0) - vite: 4.5.0(@types/node@18.17.5) + '@unocss/astro': 0.57.1(rollup@2.79.1)(vite@4.4.9) + '@unocss/cli': 0.57.1(rollup@2.79.1) + '@unocss/core': 0.57.1 + '@unocss/extractor-arbitrary-variants': 0.57.1 + '@unocss/postcss': 0.57.1(postcss@8.4.31) + '@unocss/preset-attributify': 0.57.1 + '@unocss/preset-icons': 0.57.1 + '@unocss/preset-mini': 0.57.1 + '@unocss/preset-tagify': 0.57.1 + '@unocss/preset-typography': 0.57.1 + '@unocss/preset-uno': 0.57.1 + '@unocss/preset-web-fonts': 0.57.1 + '@unocss/preset-wind': 0.57.1 + '@unocss/reset': 0.57.1 + '@unocss/transformer-attributify-jsx': 0.57.1 + '@unocss/transformer-attributify-jsx-babel': 0.57.1 + '@unocss/transformer-compile-class': 0.57.1 + '@unocss/transformer-directives': 0.57.1 + '@unocss/transformer-variant-group': 0.57.1 + '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.4.9) + vite: 4.4.9(@types/node@18.17.5) transitivePeerDependencies: - postcss - rollup - supports-color dev: true - /unocss@0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.4.9): + /unocss@0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0): resolution: {integrity: sha512-xLsyJ8+T1/Ux93yrqOvuQy268wF5rSzydlsbqZ5EVfi01PxYyydez3nycPqbyPZientkJ0Yohzd5aBqmZgku3A==} engines: {node: '>=14'} peerDependencies: @@ -15835,7 +15677,7 @@ packages: vite: optional: true dependencies: - '@unocss/astro': 0.57.1(rollup@2.79.1)(vite@4.4.9) + '@unocss/astro': 0.57.1(rollup@2.79.1)(vite@4.5.0) '@unocss/cli': 0.57.1(rollup@2.79.1) '@unocss/core': 0.57.1 '@unocss/extractor-arbitrary-variants': 0.57.1 @@ -15854,8 +15696,8 @@ packages: '@unocss/transformer-compile-class': 0.57.1 '@unocss/transformer-directives': 0.57.1 '@unocss/transformer-variant-group': 0.57.1 - '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.4.9) - vite: 4.4.9(@types/node@18.17.5) + '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.5.0) + vite: 4.5.0(@types/node@18.17.5) transitivePeerDependencies: - postcss - rollup @@ -16237,49 +16079,6 @@ packages: - terser dev: true - /vitepress@1.0.0-rc.12(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)(typescript@5.1.6): - resolution: {integrity: sha512-mZknN5l9lgbBjXwumwdOQQDM+gPivswFEykEQeenY0tv7eocS+bb801IpFZT3mFV6YRhSddmbutHlFgPPADjEg==} - hasBin: true - dependencies: - '@docsearch/css': 3.5.2 - '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0) - '@vue/devtools-api': 6.5.1 - '@vueuse/core': 10.5.0(vue@3.3.7) - '@vueuse/integrations': 10.5.0(focus-trap@7.5.4)(vue@3.3.7) - focus-trap: 7.5.4 - mark.js: 8.11.1 - minisearch: 6.1.0 - shiki: 0.14.5 - vite: 4.5.0(@types/node@18.17.5) - vue: 3.3.7(typescript@5.1.6) - transitivePeerDependencies: - - '@algolia/client-search' - - '@types/node' - - '@types/react' - - '@vue/composition-api' - - async-validator - - axios - - change-case - - drauu - - fuse.js - - idb-keyval - - jwt-decode - - less - - lightningcss - - nprogress - - qrcode - - react - - react-dom - - sass - - search-insights - - sortablejs - - stylus - - sugarss - - terser - - typescript - - universal-cookie - dev: true - /vitepress@1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6): resolution: {integrity: sha512-1dqWiHNThNrVZ08ixmfEDBEH+764KOgnev9oXga/x6cN++Vb9pnuu8p3K6DQP+KZrYcG+WiX7jxal0iSNpAWuQ==} hasBin: true From 480645d22f7e8cdbb3a399636d3cc5537fd4d804 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 12:26:24 +0530 Subject: [PATCH 24/28] fix: Add language to codeblock --- docs/syntax/packet.md | 10 ++++++---- packages/mermaid/src/docs/syntax/packet.md | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md index 1792daf4c2..5cd0b5638a 100644 --- a/docs/syntax/packet.md +++ b/docs/syntax/packet.md @@ -16,10 +16,12 @@ This diagram type is particularly useful for network engineers, educators, and s ## Syntax - packet-beta - start: "Block name" %% Single-bit block - start-end: "Block name" %% Multi-bit blocks - ... More Fields ... +```md +packet-beta +start: "Block name" %% Single-bit block +start-end: "Block name" %% Multi-bit blocks +... More Fields ... +``` ## Examples diff --git a/packages/mermaid/src/docs/syntax/packet.md b/packages/mermaid/src/docs/syntax/packet.md index 99e449e6b1..b509cf130f 100644 --- a/packages/mermaid/src/docs/syntax/packet.md +++ b/packages/mermaid/src/docs/syntax/packet.md @@ -10,7 +10,7 @@ This diagram type is particularly useful for network engineers, educators, and s ## Syntax -``` +```md packet-beta start: "Block name" %% Single-bit block start-end: "Block name" %% Multi-bit blocks From a8105f084ef06f7ebcbb856b428673384053022a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 16 Nov 2023 10:42:41 +0530 Subject: [PATCH 25/28] fix: Use configureSvgSize Co-authored-by: Reda Al Sulais --- packages/mermaid/src/diagrams/packet/renderer.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index 27f20cc0da..84feb8c439 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -2,6 +2,7 @@ import type { Diagram } from '../../Diagram.js'; import type { PacketDiagramConfig } from '../../config.type.js'; import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { PacketDB, PacketWord } from './types.js'; // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -16,11 +17,11 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { const svgWidth = bitWidth * bitsPerRow + 2; const svg: SVG = selectSvgElement(id); - svg.attr('width', '100%'); svg.attr('viewbox', `0 0 ${svgWidth} ${svgHeight}`); + configureSvgSize(svg, svgHeight, svgWidth, config.useMaxWidth); - for (const [row, packet] of words.entries()) { - drawWord(svg, packet, row, config); + for (const [word, packet] of words.entries()) { + drawWord(svg, packet, word, config); } svg From bca645f63dbda0993b6792b0014ecbe56e39f10a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 16 Nov 2023 10:48:25 +0530 Subject: [PATCH 26/28] test: Add packet and xychart into mermaidAPI test --- packages/mermaid/src/mermaidAPI.spec.ts | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts index 4a64e9c03f..c4db60fffa 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -1,4 +1,3 @@ -'use strict'; import { vi } from 'vitest'; // ------------------------------------- @@ -27,26 +26,26 @@ vi.mock('./diagrams/git/gitGraphRenderer.js'); vi.mock('./diagrams/gantt/ganttRenderer.js'); vi.mock('./diagrams/user-journey/journeyRenderer.js'); vi.mock('./diagrams/pie/pieRenderer.js'); +vi.mock('./diagrams/packet/renderer.js'); +vi.mock('./diagrams/xychart/xychartRenderer.js'); vi.mock('./diagrams/requirement/requirementRenderer.js'); vi.mock('./diagrams/sequence/sequenceRenderer.js'); vi.mock('./diagrams/state/stateRenderer-v2.js'); // ------------------------------------- -import mermaid from './mermaid.js'; +import assignWithDepth from './assignWithDepth.js'; import type { MermaidConfig } from './config.type.js'; - -import mermaidAPI, { removeExistingElements } from './mermaidAPI.js'; -import { - createCssStyles, - createUserStyles, +import mermaid from './mermaid.js'; +import mermaidAPI, { appendDivSvgG, cleanUpSvgCode, + createCssStyles, + createUserStyles, putIntoIFrame, + removeExistingElements, } from './mermaidAPI.js'; -import assignWithDepth from './assignWithDepth.js'; - // -------------- // Mocks // To mock a module, first define a mock for it, then (if used explicitly in the tests) import it. Be sure the path points to exactly the same file as is imported in mermaidAPI (the module being tested) @@ -56,6 +55,7 @@ vi.mock('./styles.js', () => { default: vi.fn().mockReturnValue(' .userStyle { font-weight:bold; }'), }; }); + import getStyles from './styles.js'; vi.mock('stylis', () => { @@ -65,6 +65,7 @@ vi.mock('stylis', () => { serialize: vi.fn().mockReturnValue('stylis serialized css'), }; }); + import { compile, serialize } from 'stylis'; import { decodeEntities, encodeEntities } from './utils.js'; @@ -714,6 +715,8 @@ describe('mermaidAPI', () => { { textDiagramType: 'gantt', expectedType: 'gantt' }, { textDiagramType: 'journey', expectedType: 'journey' }, { textDiagramType: 'pie', expectedType: 'pie' }, + { textDiagramType: 'packet-beta', expectedType: 'packet' }, + { textDiagramType: 'xychart-beta', expectedType: 'xychart' }, { textDiagramType: 'requirementDiagram', expectedType: 'requirement' }, { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' }, { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' }, From 96ae4a596776092dadd4f018f3673008270a4671 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 16 Nov 2023 10:49:26 +0530 Subject: [PATCH 27/28] chore: Remove unnecessary(?) mocks. --- __mocks__/c4Renderer.js | 21 --------------------- __mocks__/classRenderer-v2.js | 16 ---------------- __mocks__/classRenderer.js | 13 ------------- __mocks__/dagre-d3.ts | 1 - __mocks__/entity-decode/browser.ts | 3 --- __mocks__/erRenderer.js | 16 ---------------- __mocks__/flowRenderer-v2.js | 24 ------------------------ __mocks__/ganttRenderer.js | 16 ---------------- __mocks__/gitGraphRenderer.js | 13 ------------- __mocks__/journeyRenderer.js | 15 --------------- __mocks__/pieRenderer.ts | 8 -------- __mocks__/requirementRenderer.js | 13 ------------- __mocks__/sankeyRenderer.js | 13 ------------- __mocks__/sequenceRenderer.js | 23 ----------------------- __mocks__/stateRenderer-v2.js | 22 ---------------------- 15 files changed, 217 deletions(-) delete mode 100644 __mocks__/c4Renderer.js delete mode 100644 __mocks__/classRenderer-v2.js delete mode 100644 __mocks__/classRenderer.js delete mode 100644 __mocks__/dagre-d3.ts delete mode 100644 __mocks__/entity-decode/browser.ts delete mode 100644 __mocks__/erRenderer.js delete mode 100644 __mocks__/flowRenderer-v2.js delete mode 100644 __mocks__/ganttRenderer.js delete mode 100644 __mocks__/gitGraphRenderer.js delete mode 100644 __mocks__/journeyRenderer.js delete mode 100644 __mocks__/pieRenderer.ts delete mode 100644 __mocks__/requirementRenderer.js delete mode 100644 __mocks__/sankeyRenderer.js delete mode 100644 __mocks__/sequenceRenderer.js delete mode 100644 __mocks__/stateRenderer-v2.js diff --git a/__mocks__/c4Renderer.js b/__mocks__/c4Renderer.js deleted file mode 100644 index 576d5d8634..0000000000 --- a/__mocks__/c4Renderer.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Mocked C4Context diagram renderer - */ - -import { vi } from 'vitest'; - -export const drawPersonOrSystemArray = vi.fn(); -export const drawBoundary = vi.fn(); - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - drawPersonOrSystemArray, - drawBoundary, - setConf, - draw, -}; diff --git a/__mocks__/classRenderer-v2.js b/__mocks__/classRenderer-v2.js deleted file mode 100644 index 1ad95806fc..0000000000 --- a/__mocks__/classRenderer-v2.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Mocked class diagram v2 renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - draw, -}; diff --git a/__mocks__/classRenderer.js b/__mocks__/classRenderer.js deleted file mode 100644 index 1c20de4b18..0000000000 --- a/__mocks__/classRenderer.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Mocked class diagram renderer - */ - -import { vi } from 'vitest'; - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - draw, -}; diff --git a/__mocks__/dagre-d3.ts b/__mocks__/dagre-d3.ts deleted file mode 100644 index bf6d341dc5..0000000000 --- a/__mocks__/dagre-d3.ts +++ /dev/null @@ -1 +0,0 @@ -// DO NOT delete this file. It is used by vitest to mock the dagre-d3 module. diff --git a/__mocks__/entity-decode/browser.ts b/__mocks__/entity-decode/browser.ts deleted file mode 100644 index bd82d79fd9..0000000000 --- a/__mocks__/entity-decode/browser.ts +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = function (txt: string) { - return txt; -}; diff --git a/__mocks__/erRenderer.js b/__mocks__/erRenderer.js deleted file mode 100644 index 845d641f75..0000000000 --- a/__mocks__/erRenderer.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Mocked er diagram renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - draw, -}; diff --git a/__mocks__/flowRenderer-v2.js b/__mocks__/flowRenderer-v2.js deleted file mode 100644 index 89cc86031e..0000000000 --- a/__mocks__/flowRenderer-v2.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Mocked flow (flowchart) diagram v2 renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); -export const addVertices = vi.fn(); -export const addEdges = vi.fn(); -export const getClasses = vi.fn().mockImplementation(() => { - return {}; -}); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - addVertices, - addEdges, - getClasses, - draw, -}; diff --git a/__mocks__/ganttRenderer.js b/__mocks__/ganttRenderer.js deleted file mode 100644 index 9572498321..0000000000 --- a/__mocks__/ganttRenderer.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Mocked gantt diagram renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - draw, -}; diff --git a/__mocks__/gitGraphRenderer.js b/__mocks__/gitGraphRenderer.js deleted file mode 100644 index 1daa82ca4c..0000000000 --- a/__mocks__/gitGraphRenderer.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Mocked git (graph) diagram renderer - */ - -import { vi } from 'vitest'; - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - draw, -}; diff --git a/__mocks__/journeyRenderer.js b/__mocks__/journeyRenderer.js deleted file mode 100644 index 2bc77c0b10..0000000000 --- a/__mocks__/journeyRenderer.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Mocked pie (picChart) diagram renderer - */ - -import { vi } from 'vitest'; -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - draw, -}; diff --git a/__mocks__/pieRenderer.ts b/__mocks__/pieRenderer.ts deleted file mode 100644 index 439800f8c5..0000000000 --- a/__mocks__/pieRenderer.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Mocked pie (picChart) diagram renderer - */ -import { vi } from 'vitest'; - -const draw = vi.fn().mockImplementation(() => ''); - -export const renderer = { draw }; diff --git a/__mocks__/requirementRenderer.js b/__mocks__/requirementRenderer.js deleted file mode 100644 index 48d8997ac1..0000000000 --- a/__mocks__/requirementRenderer.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Mocked requirement diagram renderer - */ - -import { vi } from 'vitest'; - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - draw, -}; diff --git a/__mocks__/sankeyRenderer.js b/__mocks__/sankeyRenderer.js deleted file mode 100644 index 76324c93f1..0000000000 --- a/__mocks__/sankeyRenderer.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Mocked Sankey diagram renderer - */ - -import { vi } from 'vitest'; - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - draw, -}; diff --git a/__mocks__/sequenceRenderer.js b/__mocks__/sequenceRenderer.js deleted file mode 100644 index 11080c6bbf..0000000000 --- a/__mocks__/sequenceRenderer.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Mocked sequence diagram renderer - */ - -import { vi } from 'vitest'; - -export const bounds = vi.fn(); -export const drawActors = vi.fn(); -export const drawActorsPopup = vi.fn(); - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - bounds, - drawActors, - drawActorsPopup, - setConf, - draw, -}; diff --git a/__mocks__/stateRenderer-v2.js b/__mocks__/stateRenderer-v2.js deleted file mode 100644 index a2d103b50e..0000000000 --- a/__mocks__/stateRenderer-v2.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Mocked state diagram v2 renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); -export const getClasses = vi.fn().mockImplementation(() => { - return {}; -}); -export const stateDomId = vi.fn().mockImplementation(() => { - return 'mocked-stateDiagram-stateDomId'; -}); -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - getClasses, - draw, -}; From 7ef61d58fd736964c56ffd808cf369e297ee0193 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 16 Nov 2023 10:58:25 +0530 Subject: [PATCH 28/28] test: Add packet test for title, accTitle, accDescr --- packages/mermaid/src/diagrams/packet/packet.spec.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/packet.spec.ts b/packages/mermaid/src/diagrams/packet/packet.spec.ts index 6ad24b75e9..87432f4891 100644 --- a/packages/mermaid/src/diagrams/packet/packet.spec.ts +++ b/packages/mermaid/src/diagrams/packet/packet.spec.ts @@ -1,7 +1,7 @@ import { db } from './db.js'; import { parser } from './parser.js'; -const { clear, getPacket } = db; +const { clear, getPacket, getDiagramTitle, getAccTitle, getAccDescription } = db; describe('packet diagrams', () => { beforeEach(() => { @@ -16,13 +16,19 @@ describe('packet diagrams', () => { expect(getPacket()).toMatchInlineSnapshot('[]'); }); - it('should handle diagram with data', () => { + it('should handle diagram with data and title', () => { const str = `packet-beta + title Packet diagram + accTitle: Packet accTitle + accDescr: Packet accDescription 0-10: "test" `; expect(() => { parser.parse(str); }).not.toThrow(); + expect(getDiagramTitle()).toMatchInlineSnapshot('"Packet diagram"'); + expect(getAccTitle()).toMatchInlineSnapshot('"Packet accTitle"'); + expect(getAccDescription()).toMatchInlineSnapshot('"Packet accDescription"'); expect(getPacket()).toMatchInlineSnapshot(` [ [