diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts index 82e21695c..317d6b547 100644 --- a/packages/mermaid/scripts/create-types-from-json-schema.mts +++ b/packages/mermaid/scripts/create-types-from-json-schema.mts @@ -10,18 +10,16 @@ /* eslint-disable no-console */ +import _Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js'; +import { JSON_SCHEMA, load } from 'js-yaml'; +import { compile, type JSONSchema } from 'json-schema-to-typescript'; import assert from 'node:assert'; import { execFile } from 'node:child_process'; import { readFile, writeFile } from 'node:fs/promises'; import { join } from 'node:path'; import { promisify } from 'node:util'; - -import { JSON_SCHEMA, load } from 'js-yaml'; -import { compile, type JSONSchema } from 'json-schema-to-typescript'; import prettier from 'prettier'; -import _Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js'; - // Workaround for wrong AJV types, see // https://github.com/ajv-validator/ajv/issues/2132#issuecomment-1290409907 const Ajv2019 = _Ajv2019 as unknown as typeof _Ajv2019.default; @@ -34,28 +32,6 @@ const verifyOnly = process.argv.includes('--verify'); /** If `true`, automatically `git add` any changes (i.e. during `pnpm run pre-commit`)*/ const git = process.argv.includes('--git'); -/** - * All of the keys in the mermaid config that have a mermaid diagram config. - */ -const MERMAID_CONFIG_DIAGRAM_KEYS = [ - 'flowchart', - 'sequence', - 'gantt', - 'journey', - 'class', - 'state', - 'er', - 'pie', - 'quadrantChart', - 'xyChart', - 'requirement', - 'mindmap', - 'timeline', - 'gitGraph', - 'c4', - 'sankey', -]; - /** * Loads the MermaidConfig JSON schema YAML file. * @@ -131,53 +107,9 @@ async function generateTypescript(mermaidConfigSchema: JSONSchemaType) { - return { - ...schema, - properties: Object.fromEntries( - Object.entries(schema.properties).map(([key, propertySchema]) => { - if (MERMAID_CONFIG_DIAGRAM_KEYS.includes(key)) { - const { $ref, ...propertySchemaWithoutRef } = propertySchema as JSONSchemaType; - if ($ref === undefined) { - throw Error( - `subSchema ${key} is in MERMAID_CONFIG_DIAGRAM_KEYS but does not have a $ref field` - ); - } - const [ - _root, // eslint-disable-line @typescript-eslint/no-unused-vars - _defs, // eslint-disable-line @typescript-eslint/no-unused-vars - defName, - ] = $ref.split('/'); - return [ - key, - { - ...propertySchemaWithoutRef, - tsType: defName, - }, - ]; - } - return [key, propertySchema]; - }) - ), - }; - } - assert.ok(mermaidConfigSchema.$defs); const modifiedSchema = { - ...unrefSubschemas(mermaidConfigSchema), + ...mermaidConfigSchema, $defs: Object.fromEntries( Object.entries(mermaidConfigSchema.$defs).map(([key, subSchema]) => { return [key, replaceAllOfWithExtends(subSchema as JSONSchemaType>)]; diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 221763eff..512e86712 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -5,17 +5,6 @@ * and run json-schema-to-typescript to regenerate this file. */ -/** - * Configuration options to pass to the `dompurify` library. - */ -export type DOMPurifyConfiguration = import('dompurify').Config; -/** - * MermaidConfig with all fields optional - * - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "PartialMermaidConfig". - */ -export type PartialMermaidConfig = import('type-fest').PartialDeep; /** * JavaScript function that returns a `FontConfig`. * @@ -57,6 +46,17 @@ export type SankeyLinkColor = 'source' | 'target' | 'gradient'; * via the `definition` "SankeyNodeAlignment". */ export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify'; +/** + * Configuration options to pass to the `dompurify` library. + */ +export type DOMPurifyConfiguration = import('dompurify').Config; +/** + * MermaidConfig with all fields optional + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "PartialMermaidConfig". + */ +export type PartialMermaidConfig = import('type-fest').PartialDeep; /** * The font size to use */ @@ -182,36 +182,77 @@ export interface MermaidConfig { suppressErrorRendering?: boolean; } /** - * The object containing configurations specific for packet diagrams. + * The object containing configurations specific for flowcharts * * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "PacketDiagramConfig". + * via the `definition` "FlowchartDiagramConfig". */ -export interface PacketDiagramConfig extends BaseDiagramConfig { +export interface FlowchartDiagramConfig extends BaseDiagramConfig { /** - * The height of each row in the packet diagram. + * Margin top for the text over the diagram */ - rowHeight?: number; + titleTopMargin: number; /** - * The width of each bit in the packet diagram. + * Defines a top/bottom margin for subgraph titles + * */ - bitWidth?: number; + subGraphTitleMargin: { + top?: number; + bottom?: number; + }; + arrowMarkerAbsolute?: boolean; /** - * The number of bits to display per row. + * The amount of padding around the diagram as a whole so that embedded + * diagrams have margins, expressed in pixels. + * */ - bitsPerRow?: number; + diagramPadding: number; /** - * Toggle to display or hide bit numbers. + * Flag for setting whether or not a html tag should be used for rendering labels on the edges. + * */ - showBits?: boolean; + htmlLabels: boolean; /** - * The horizontal padding between the blocks in a row. + * Defines the spacing between nodes on the same level + * + * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, + * and the vertical spacing for LR as well as RL graphs. + * */ - paddingX?: number; + nodeSpacing: number; /** - * The vertical padding between the rows. + * Defines the spacing between nodes on different levels + * + * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, + * and the vertical spacing for LR as well as RL graphs. + * */ - paddingY?: number; + rankSpacing: number; + /** + * Defines how mermaid renders curves for flowcharts. + * + */ + curve: 'basis' | 'linear' | 'cardinal'; + /** + * Represents the padding between the labels and the shape + * + * **Only used in new experimental rendering.** + * + */ + padding?: number; + /** + * Decides which rendering engine that is to be used for the rendering. + * + */ + defaultRenderer: 'dagre-d3' | 'dagre-wrapper' | 'elk'; + /** + * Width of nodes where text is wrapped. + * + * When using markdown strings the text ius wrapped automatically, this + * value sets the max width of a text before it continues on a new line. + * + */ + wrappingWidth: number; } /** * This interface was referenced by `MermaidConfig`'s JSON-Schema @@ -228,13 +269,752 @@ export interface BaseDiagramConfig { useMaxWidth?: boolean; } /** - * The object containing configurations specific for block diagrams. + * The object containing configurations specific for sequence diagrams * * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "BlockDiagramConfig". + * via the `definition` "SequenceDiagramConfig". */ -export interface BlockDiagramConfig extends BaseDiagramConfig { +export interface SequenceDiagramConfig extends BaseDiagramConfig { + arrowMarkerAbsolute?: boolean; + hideUnusedParticipants?: boolean; + /** + * Width of the activation rect + */ + activationWidth: number; + /** + * Margin to the right and left of the sequence diagram + */ + diagramMarginX: number; + /** + * Margin to the over and under the sequence diagram + */ + diagramMarginY: number; + /** + * Margin between actors + */ + actorMargin: number; + /** + * Width of actor boxes + */ + width: number; + /** + * Height of actor boxes + */ + height: number; + /** + * Margin around loop boxes + */ + boxMargin: number; + /** + * Margin around the text in loop/alt/opt boxes + */ + boxTextMargin: number; + /** + * Margin around notes + */ + noteMargin: number; + /** + * Space between messages. + */ + messageMargin: number; + /** + * Multiline message alignment + */ + messageAlign: 'left' | 'center' | 'right'; + /** + * Mirror actors under diagram + * + */ + mirrorActors: boolean; + /** + * forces actor popup menus to always be visible (to support E2E testing). + * + */ + forceMenus: boolean; + /** + * Prolongs the edge of the diagram downwards. + * + * Depending on css styling this might need adjustment. + * + */ + bottomMarginAdj: number; + /** + * Curved Arrows become Right Angles + * + * This will display arrows that start and begin at the same node as + * right angles, rather than as curves. + * + */ + rightAngles: boolean; + /** + * This will show the node numbers + */ + showSequenceNumbers: boolean; + /** + * This sets the font size of the actor's description + */ + actorFontSize: string | number; + /** + * This sets the font family of the actor's description + */ + actorFontFamily: string; + /** + * This sets the font weight of the actor's description + */ + actorFontWeight: string | number; + /** + * This sets the font size of actor-attached notes + */ + noteFontSize: string | number; + /** + * This sets the font family of actor-attached notes + */ + noteFontFamily: string; + /** + * This sets the font weight of actor-attached notes + */ + noteFontWeight: string | number; + /** + * This sets the text alignment of actor-attached notes + */ + noteAlign: 'left' | 'center' | 'right'; + /** + * This sets the font size of actor messages + */ + messageFontSize: string | number; + /** + * This sets the font family of actor messages + */ + messageFontFamily: string; + /** + * This sets the font weight of actor messages + */ + messageFontWeight: string | number; + /** + * This sets the auto-wrap state for the diagram + */ + wrap?: boolean; + /** + * This sets the auto-wrap padding for the diagram (sides only) + */ + wrapPadding?: number; + /** + * This sets the width of the loop-box (loop, alt, opt, par) + */ + labelBoxWidth?: number; + /** + * This sets the height of the loop-box (loop, alt, opt, par) + */ + labelBoxHeight?: number; + messageFont?: FontCalculator; + noteFont?: FontCalculator; + actorFont?: FontCalculator; +} +/** + * The object containing configurations specific for gantt diagrams + * + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "GanttDiagramConfig". + */ +export interface GanttDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ + titleTopMargin: number; + /** + * The height of the bars in the graph + */ + barHeight: number; + /** + * The margin between the different activities in the gantt diagram + */ + barGap?: number; + /** + * Margin between title and gantt diagram and between axis and gantt diagram. + * + */ + topPadding: number; + /** + * The space allocated for the section name to the right of the activities + * + */ + rightPadding: number; + /** + * The space allocated for the section name to the left of the activities + * + */ + leftPadding: number; + /** + * Vertical starting position of the grid lines + */ + gridLineStartPadding: number; + /** + * Font size + */ + fontSize: number; + /** + * Font size for sections + */ + sectionFontSize: string | number; + /** + * The number of alternating section styles + */ + numberSectionStyles: number; + /** + * Date/time format of the axis + * + * This might need adjustment to match your locale and preferences. + * + */ + axisFormat: string; + /** + * axis ticks + * + * Pattern is: + * + * ```javascript + * /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/ + * ``` + * + */ + tickInterval?: string; + /** + * When this flag is set, date labels will be added to the top of the chart + * + */ + topAxis: boolean; + /** + * Controls the display mode. + * + */ + displayMode?: '' | 'compact'; + /** + * On which day a week-based interval should start + * + */ + weekday: 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday'; +} +/** + * The object containing configurations specific for journey diagrams + * + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "JourneyDiagramConfig". + */ +export interface JourneyDiagramConfig extends BaseDiagramConfig { + /** + * Margin to the right and left of the c4 diagram, must be a positive value. + * + */ + diagramMarginX: number; + /** + * Margin to the over and under the c4 diagram, must be a positive value. + * + */ + diagramMarginY: number; + /** + * Margin between actors + */ + leftMargin: number; + /** + * Width of actor boxes + */ + width: number; + /** + * Height of actor boxes + */ + height: number; + /** + * Margin around loop boxes + */ + boxMargin: number; + /** + * Margin around the text in loop/alt/opt boxes + */ + boxTextMargin: number; + /** + * Margin around notes + */ + noteMargin: number; + /** + * Space between messages. + */ + messageMargin: number; + /** + * Multiline message alignment + */ + messageAlign: 'left' | 'center' | 'right'; + /** + * Prolongs the edge of the diagram downwards. + * + * Depending on css styling this might need adjustment. + * + */ + bottomMarginAdj: number; + /** + * Curved Arrows become Right Angles + * + * This will display arrows that start and begin at the same node as + * right angles, rather than as curves. + * + */ + rightAngles: boolean; + taskFontSize?: string | number; + taskFontFamily?: string; + taskMargin?: number; + /** + * Width of activation box + */ + activationWidth?: number; + /** + * text placement as: tspan | fo | old only text as before + * + */ + textPlacement?: string; + actorColours?: string[]; + sectionFills?: string[]; + sectionColours?: string[]; +} +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "TimelineDiagramConfig". + */ +export interface TimelineDiagramConfig extends BaseDiagramConfig { + /** + * Margin to the right and left of the c4 diagram, must be a positive value. + * + */ + diagramMarginX: number; + /** + * Margin to the over and under the c4 diagram, must be a positive value. + * + */ + diagramMarginY: number; + /** + * Margin between actors + */ + leftMargin: number; + /** + * Width of actor boxes + */ + width: number; + /** + * Height of actor boxes + */ + height: number; padding?: number; + /** + * Margin around loop boxes + */ + boxMargin: number; + /** + * Margin around the text in loop/alt/opt boxes + */ + boxTextMargin: number; + /** + * Margin around notes + */ + noteMargin: number; + /** + * Space between messages. + */ + messageMargin: number; + /** + * Multiline message alignment + */ + messageAlign: 'left' | 'center' | 'right'; + /** + * Prolongs the edge of the diagram downwards. + * + * Depending on css styling this might need adjustment. + * + */ + bottomMarginAdj: number; + /** + * Curved Arrows become Right Angles + * + * This will display arrows that start and begin at the same node as + * right angles, rather than as curves. + * + */ + rightAngles?: boolean; + taskFontSize?: string | number; + taskFontFamily?: string; + taskMargin?: number; + /** + * Width of activation box + */ + activationWidth?: number; + /** + * text placement as: tspan | fo | old only text as before + * + */ + textPlacement?: string; + actorColours?: string[]; + sectionFills?: string[]; + sectionColours?: string[]; + disableMulticolor?: boolean; +} +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "ClassDiagramConfig". + */ +export interface ClassDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ + titleTopMargin: number; + /** + * Controls whether or arrow markers in html code are absolute paths or anchors. + * This matters if you are using base tag settings. + * + */ + arrowMarkerAbsolute?: boolean; + dividerMargin?: number; + padding?: number; + textHeight?: number; + /** + * Decides which rendering engine that is to be used for the rendering. + * + */ + defaultRenderer: 'dagre-d3' | 'dagre-wrapper' | 'elk'; + nodeSpacing?: number; + rankSpacing?: number; + /** + * The amount of padding around the diagram as a whole so that embedded + * diagrams have margins, expressed in pixels. + * + */ + diagramPadding?: number; + htmlLabels?: boolean; +} +/** + * The object containing configurations specific for entity relationship diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "StateDiagramConfig". + */ +export interface StateDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ + titleTopMargin: number; + arrowMarkerAbsolute?: boolean; + dividerMargin?: number; + sizeUnit?: number; + padding?: number; + textHeight?: number; + titleShift?: number; + noteMargin?: number; + forkWidth?: number; + forkHeight?: number; + miniPadding?: number; + /** + * Font size factor, this is used to guess the width of the edges labels + * before rendering by dagre layout. + * This might need updating if/when switching font + * + */ + fontSizeFactor?: number; + fontSize?: number; + labelHeight?: number; + edgeLengthFactor?: string; + compositTitleSize?: number; + radius?: number; + /** + * Decides which rendering engine that is to be used for the rendering. + * + */ + defaultRenderer: 'dagre-d3' | 'dagre-wrapper' | 'elk'; +} +/** + * The object containing configurations specific for entity relationship diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "ErDiagramConfig". + */ +export interface ErDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ + titleTopMargin: number; + /** + * The amount of padding around the diagram as a whole so that embedded + * diagrams have margins, expressed in pixels. + * + */ + diagramPadding: number; + /** + * Directional bias for layout of entities + */ + layoutDirection: 'TB' | 'BT' | 'LR' | 'RL'; + /** + * The minimum width of an entity box. Expressed in pixels. + */ + minEntityWidth: number; + /** + * The minimum height of an entity box. Expressed in pixels. + */ + minEntityHeight: number; + /** + * The minimum internal padding between text in an entity box and the enclosing box borders. + * Expressed in pixels. + * + */ + entityPadding: number; + /** + * Stroke color of box edges and lines. + */ + stroke: string; + /** + * Fill color of entity boxes + */ + fill: string; + /** + * Font size (expressed as an integer representing a number of pixels) + */ + fontSize?: number; +} +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "PieDiagramConfig". + */ +export interface PieDiagramConfig extends BaseDiagramConfig { + /** + * Axial position of slice's label from zero at the center to 1 at the outside edges. + * + */ + textPosition?: number; +} +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "QuadrantChartConfig". + */ +export interface QuadrantChartConfig extends BaseDiagramConfig { + /** + * Width of the chart + */ + chartWidth: number; + /** + * Height of the chart + */ + chartHeight: number; + /** + * Chart title top and bottom padding + */ + titleFontSize: number; + /** + * Padding around the quadrant square + */ + titlePadding: number; + /** + * quadrant title padding from top if the quadrant is rendered on top + */ + quadrantPadding: number; + /** + * Padding around x-axis labels + */ + xAxisLabelPadding: number; + /** + * Padding around y-axis labels + */ + yAxisLabelPadding: number; + /** + * x-axis label font size + */ + xAxisLabelFontSize: number; + /** + * y-axis label font size + */ + yAxisLabelFontSize: number; + /** + * quadrant title font size + */ + quadrantLabelFontSize: number; + /** + * quadrant title padding from top if the quadrant is rendered on top + */ + quadrantTextTopPadding: number; + /** + * padding between point and point label + */ + pointTextPadding: number; + /** + * point title font size + */ + pointLabelFontSize: number; + /** + * radius of the point to be drawn + */ + pointRadius: number; + /** + * position of x-axis labels + */ + xAxisPosition: 'top' | 'bottom'; + /** + * position of y-axis labels + */ + yAxisPosition: 'left' | 'right'; + /** + * stroke width of edges of the box that are inside the quadrant + */ + quadrantInternalBorderStrokeWidth: number; + /** + * stroke width of edges of the box that are outside the quadrant + */ + quadrantExternalBorderStrokeWidth: number; +} +/** + * This object contains configuration specific to XYCharts + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "XYChartConfig". + */ +export interface XYChartConfig extends BaseDiagramConfig { + /** + * width of the chart + */ + width: number; + /** + * height of the chart + */ + height: number; + /** + * Font size of the chart title + */ + titleFontSize: number; + /** + * Top and bottom space from the chart title + */ + titlePadding: number; + /** + * Should show the chart title + */ + showTitle: boolean; + xAxis: XYChartAxisConfig; + yAxis: XYChartAxisConfig; + /** + * How to plot will be drawn horizontal or vertical + */ + chartOrientation: 'vertical' | 'horizontal'; + /** + * Minimum percent of space plots of the chart will take + */ + plotReservedSpacePercent: number; +} +/** + * This object contains configuration for XYChart axis config + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "XYChartAxisConfig". + */ +export interface XYChartAxisConfig { + /** + * Should show the axis labels (tick text) + */ + showLabel: boolean; + /** + * font size of the axis labels (tick text) + */ + labelFontSize: number; + /** + * top and bottom space from axis label (tick text) + */ + labelPadding: number; + /** + * Should show the axis title + */ + showTitle: boolean; + /** + * font size of the axis title + */ + titleFontSize: number; + /** + * top and bottom space from axis title + */ + titlePadding: number; + /** + * Should show the axis tick lines + */ + showTick: boolean; + /** + * length of the axis tick lines + */ + tickLength: number; + /** + * width of the axis tick lines + */ + tickWidth: number; + /** + * Show line across the axis + */ + showAxisLine: boolean; + /** + * Width of the axis line + */ + axisLineWidth: number; +} +/** + * The object containing configurations specific for req diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "RequirementDiagramConfig". + */ +export interface RequirementDiagramConfig extends BaseDiagramConfig { + rect_fill?: string; + text_color?: string; + rect_border_size?: string; + rect_border_color?: string; + rect_min_width?: number; + rect_min_height?: number; + fontSize?: number; + rect_padding?: number; + line_height?: number; +} +/** + * The object containing configurations specific for mindmap diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "MindmapDiagramConfig". + */ +export interface MindmapDiagramConfig extends BaseDiagramConfig { + padding: number; + maxNodeWidth: number; +} +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "GitGraphDiagramConfig". + */ +export interface GitGraphDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ + titleTopMargin: number; + diagramPadding?: number; + nodeLabel?: NodeLabel; + mainBranchName?: string; + mainBranchOrder?: number; + showCommitLabel?: boolean; + showBranches?: boolean; + rotateCommitLabel?: boolean; + parallelCommits?: boolean; + /** + * Controls whether or arrow markers in html code are absolute paths or anchors. + * This matters if you are using base tag settings. + * + */ + arrowMarkerAbsolute?: boolean; +} +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "NodeLabel". + */ +export interface NodeLabel { + width?: number; + height?: number; + x?: number; + y?: number; } /** * The object containing configurations specific for c4 diagrams @@ -617,827 +1397,6 @@ export interface C4DiagramConfig extends BaseDiagramConfig { boundaryFont?: FontCalculator; messageFont?: FontCalculator; } -/** - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "GitGraphDiagramConfig". - */ -export interface GitGraphDiagramConfig extends BaseDiagramConfig { - /** - * Margin top for the text over the diagram - */ - titleTopMargin: number; - diagramPadding?: number; - nodeLabel?: NodeLabel; - mainBranchName?: string; - mainBranchOrder?: number; - showCommitLabel?: boolean; - showBranches?: boolean; - rotateCommitLabel?: boolean; - parallelCommits?: boolean; - /** - * Controls whether or arrow markers in html code are absolute paths or anchors. - * This matters if you are using base tag settings. - * - */ - arrowMarkerAbsolute?: boolean; -} -/** - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "NodeLabel". - */ -export interface NodeLabel { - width?: number; - height?: number; - x?: number; - y?: number; -} -/** - * The object containing configurations specific for req diagrams - * - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "RequirementDiagramConfig". - */ -export interface RequirementDiagramConfig extends BaseDiagramConfig { - rect_fill?: string; - text_color?: string; - rect_border_size?: string; - rect_border_color?: string; - rect_min_width?: number; - rect_min_height?: number; - fontSize?: number; - rect_padding?: number; - line_height?: number; -} -/** - * The object containing configurations specific for mindmap diagrams - * - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "MindmapDiagramConfig". - */ -export interface MindmapDiagramConfig extends BaseDiagramConfig { - padding: number; - maxNodeWidth: number; -} -/** - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "PieDiagramConfig". - */ -export interface PieDiagramConfig extends BaseDiagramConfig { - /** - * Axial position of slice's label from zero at the center to 1 at the outside edges. - * - */ - textPosition?: number; -} -/** - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "QuadrantChartConfig". - */ -export interface QuadrantChartConfig extends BaseDiagramConfig { - /** - * Width of the chart - */ - chartWidth: number; - /** - * Height of the chart - */ - chartHeight: number; - /** - * Chart title top and bottom padding - */ - titleFontSize: number; - /** - * Padding around the quadrant square - */ - titlePadding: number; - /** - * quadrant title padding from top if the quadrant is rendered on top - */ - quadrantPadding: number; - /** - * Padding around x-axis labels - */ - xAxisLabelPadding: number; - /** - * Padding around y-axis labels - */ - yAxisLabelPadding: number; - /** - * x-axis label font size - */ - xAxisLabelFontSize: number; - /** - * y-axis label font size - */ - yAxisLabelFontSize: number; - /** - * quadrant title font size - */ - quadrantLabelFontSize: number; - /** - * quadrant title padding from top if the quadrant is rendered on top - */ - quadrantTextTopPadding: number; - /** - * padding between point and point label - */ - pointTextPadding: number; - /** - * point title font size - */ - pointLabelFontSize: number; - /** - * radius of the point to be drawn - */ - pointRadius: number; - /** - * position of x-axis labels - */ - xAxisPosition: 'top' | 'bottom'; - /** - * position of y-axis labels - */ - yAxisPosition: 'left' | 'right'; - /** - * stroke width of edges of the box that are inside the quadrant - */ - quadrantInternalBorderStrokeWidth: number; - /** - * stroke width of edges of the box that are outside the quadrant - */ - quadrantExternalBorderStrokeWidth: number; -} -/** - * This object contains configuration for XYChart axis config - * - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "XYChartAxisConfig". - */ -export interface XYChartAxisConfig { - /** - * Should show the axis labels (tick text) - */ - showLabel: boolean; - /** - * font size of the axis labels (tick text) - */ - labelFontSize: number; - /** - * top and bottom space from axis label (tick text) - */ - labelPadding: number; - /** - * Should show the axis title - */ - showTitle: boolean; - /** - * font size of the axis title - */ - titleFontSize: number; - /** - * top and bottom space from axis title - */ - titlePadding: number; - /** - * Should show the axis tick lines - */ - showTick: boolean; - /** - * length of the axis tick lines - */ - tickLength: number; - /** - * width of the axis tick lines - */ - tickWidth: number; - /** - * Show line across the axis - */ - showAxisLine: boolean; - /** - * Width of the axis line - */ - axisLineWidth: number; -} -/** - * This object contains configuration specific to XYCharts - * - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "XYChartConfig". - */ -export interface XYChartConfig extends BaseDiagramConfig { - /** - * width of the chart - */ - width: number; - /** - * height of the chart - */ - height: number; - /** - * Font size of the chart title - */ - titleFontSize: number; - /** - * Top and bottom space from the chart title - */ - titlePadding: number; - /** - * Should show the chart title - */ - showTitle: boolean; - xAxis: XYChartAxisConfig; - yAxis: XYChartAxisConfig; - /** - * How to plot will be drawn horizontal or vertical - */ - chartOrientation: 'vertical' | 'horizontal'; - /** - * Minimum percent of space plots of the chart will take - */ - plotReservedSpacePercent: number; -} -/** - * The object containing configurations specific for entity relationship diagrams - * - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "ErDiagramConfig". - */ -export interface ErDiagramConfig extends BaseDiagramConfig { - /** - * Margin top for the text over the diagram - */ - titleTopMargin: number; - /** - * The amount of padding around the diagram as a whole so that embedded - * diagrams have margins, expressed in pixels. - * - */ - diagramPadding: number; - /** - * Directional bias for layout of entities - */ - layoutDirection: 'TB' | 'BT' | 'LR' | 'RL'; - /** - * The minimum width of an entity box. Expressed in pixels. - */ - minEntityWidth: number; - /** - * The minimum height of an entity box. Expressed in pixels. - */ - minEntityHeight: number; - /** - * The minimum internal padding between text in an entity box and the enclosing box borders. - * Expressed in pixels. - * - */ - entityPadding: number; - /** - * Stroke color of box edges and lines. - */ - stroke: string; - /** - * Fill color of entity boxes - */ - fill: string; - /** - * Font size (expressed as an integer representing a number of pixels) - */ - fontSize?: number; -} -/** - * The object containing configurations specific for entity relationship diagrams - * - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "StateDiagramConfig". - */ -export interface StateDiagramConfig extends BaseDiagramConfig { - /** - * Margin top for the text over the diagram - */ - titleTopMargin: number; - arrowMarkerAbsolute?: boolean; - dividerMargin?: number; - sizeUnit?: number; - padding?: number; - textHeight?: number; - titleShift?: number; - noteMargin?: number; - forkWidth?: number; - forkHeight?: number; - miniPadding?: number; - /** - * Font size factor, this is used to guess the width of the edges labels - * before rendering by dagre layout. - * This might need updating if/when switching font - * - */ - fontSizeFactor?: number; - fontSize?: number; - labelHeight?: number; - edgeLengthFactor?: string; - compositTitleSize?: number; - radius?: number; - /** - * Decides which rendering engine that is to be used for the rendering. - * - */ - defaultRenderer: 'dagre-d3' | 'dagre-wrapper' | 'elk'; -} -/** - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "ClassDiagramConfig". - */ -export interface ClassDiagramConfig extends BaseDiagramConfig { - /** - * Margin top for the text over the diagram - */ - titleTopMargin: number; - /** - * Controls whether or arrow markers in html code are absolute paths or anchors. - * This matters if you are using base tag settings. - * - */ - arrowMarkerAbsolute?: boolean; - dividerMargin?: number; - padding?: number; - textHeight?: number; - /** - * Decides which rendering engine that is to be used for the rendering. - * - */ - defaultRenderer: 'dagre-d3' | 'dagre-wrapper' | 'elk'; - nodeSpacing?: number; - rankSpacing?: number; - /** - * The amount of padding around the diagram as a whole so that embedded - * diagrams have margins, expressed in pixels. - * - */ - diagramPadding?: number; - htmlLabels?: boolean; -} -/** - * The object containing configurations specific for journey diagrams - * - * - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "JourneyDiagramConfig". - */ -export interface JourneyDiagramConfig extends BaseDiagramConfig { - /** - * Margin to the right and left of the c4 diagram, must be a positive value. - * - */ - diagramMarginX: number; - /** - * Margin to the over and under the c4 diagram, must be a positive value. - * - */ - diagramMarginY: number; - /** - * Margin between actors - */ - leftMargin: number; - /** - * Width of actor boxes - */ - width: number; - /** - * Height of actor boxes - */ - height: number; - /** - * Margin around loop boxes - */ - boxMargin: number; - /** - * Margin around the text in loop/alt/opt boxes - */ - boxTextMargin: number; - /** - * Margin around notes - */ - noteMargin: number; - /** - * Space between messages. - */ - messageMargin: number; - /** - * Multiline message alignment - */ - messageAlign: 'left' | 'center' | 'right'; - /** - * Prolongs the edge of the diagram downwards. - * - * Depending on css styling this might need adjustment. - * - */ - bottomMarginAdj: number; - /** - * Curved Arrows become Right Angles - * - * This will display arrows that start and begin at the same node as - * right angles, rather than as curves. - * - */ - rightAngles: boolean; - taskFontSize?: string | number; - taskFontFamily?: string; - taskMargin?: number; - /** - * Width of activation box - */ - activationWidth?: number; - /** - * text placement as: tspan | fo | old only text as before - * - */ - textPlacement?: string; - actorColours?: string[]; - sectionFills?: string[]; - sectionColours?: string[]; -} -/** - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "TimelineDiagramConfig". - */ -export interface TimelineDiagramConfig extends BaseDiagramConfig { - /** - * Margin to the right and left of the c4 diagram, must be a positive value. - * - */ - diagramMarginX: number; - /** - * Margin to the over and under the c4 diagram, must be a positive value. - * - */ - diagramMarginY: number; - /** - * Margin between actors - */ - leftMargin: number; - /** - * Width of actor boxes - */ - width: number; - /** - * Height of actor boxes - */ - height: number; - padding?: number; - /** - * Margin around loop boxes - */ - boxMargin: number; - /** - * Margin around the text in loop/alt/opt boxes - */ - boxTextMargin: number; - /** - * Margin around notes - */ - noteMargin: number; - /** - * Space between messages. - */ - messageMargin: number; - /** - * Multiline message alignment - */ - messageAlign: 'left' | 'center' | 'right'; - /** - * Prolongs the edge of the diagram downwards. - * - * Depending on css styling this might need adjustment. - * - */ - bottomMarginAdj: number; - /** - * Curved Arrows become Right Angles - * - * This will display arrows that start and begin at the same node as - * right angles, rather than as curves. - * - */ - rightAngles?: boolean; - taskFontSize?: string | number; - taskFontFamily?: string; - taskMargin?: number; - /** - * Width of activation box - */ - activationWidth?: number; - /** - * text placement as: tspan | fo | old only text as before - * - */ - textPlacement?: string; - actorColours?: string[]; - sectionFills?: string[]; - sectionColours?: string[]; - disableMulticolor?: boolean; -} -/** - * The object containing configurations specific for gantt diagrams - * - * - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "GanttDiagramConfig". - */ -export interface GanttDiagramConfig extends BaseDiagramConfig { - /** - * Margin top for the text over the diagram - */ - titleTopMargin: number; - /** - * The height of the bars in the graph - */ - barHeight: number; - /** - * The margin between the different activities in the gantt diagram - */ - barGap?: number; - /** - * Margin between title and gantt diagram and between axis and gantt diagram. - * - */ - topPadding: number; - /** - * The space allocated for the section name to the right of the activities - * - */ - rightPadding: number; - /** - * The space allocated for the section name to the left of the activities - * - */ - leftPadding: number; - /** - * Vertical starting position of the grid lines - */ - gridLineStartPadding: number; - /** - * Font size - */ - fontSize: number; - /** - * Font size for sections - */ - sectionFontSize: string | number; - /** - * The number of alternating section styles - */ - numberSectionStyles: number; - /** - * Date/time format of the axis - * - * This might need adjustment to match your locale and preferences. - * - */ - axisFormat: string; - /** - * axis ticks - * - * Pattern is: - * - * ```javascript - * /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/ - * ``` - * - */ - tickInterval?: string; - /** - * When this flag is set, date labels will be added to the top of the chart - * - */ - topAxis: boolean; - /** - * Controls the display mode. - * - */ - displayMode?: '' | 'compact'; - /** - * On which day a week-based interval should start - * - */ - weekday: 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday'; -} -/** - * The object containing configurations specific for sequence diagrams - * - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "SequenceDiagramConfig". - */ -export interface SequenceDiagramConfig extends BaseDiagramConfig { - arrowMarkerAbsolute?: boolean; - hideUnusedParticipants?: boolean; - /** - * Width of the activation rect - */ - activationWidth: number; - /** - * Margin to the right and left of the sequence diagram - */ - diagramMarginX: number; - /** - * Margin to the over and under the sequence diagram - */ - diagramMarginY: number; - /** - * Margin between actors - */ - actorMargin: number; - /** - * Width of actor boxes - */ - width: number; - /** - * Height of actor boxes - */ - height: number; - /** - * Margin around loop boxes - */ - boxMargin: number; - /** - * Margin around the text in loop/alt/opt boxes - */ - boxTextMargin: number; - /** - * Margin around notes - */ - noteMargin: number; - /** - * Space between messages. - */ - messageMargin: number; - /** - * Multiline message alignment - */ - messageAlign: 'left' | 'center' | 'right'; - /** - * Mirror actors under diagram - * - */ - mirrorActors: boolean; - /** - * forces actor popup menus to always be visible (to support E2E testing). - * - */ - forceMenus: boolean; - /** - * Prolongs the edge of the diagram downwards. - * - * Depending on css styling this might need adjustment. - * - */ - bottomMarginAdj: number; - /** - * Curved Arrows become Right Angles - * - * This will display arrows that start and begin at the same node as - * right angles, rather than as curves. - * - */ - rightAngles: boolean; - /** - * This will show the node numbers - */ - showSequenceNumbers: boolean; - /** - * This sets the font size of the actor's description - */ - actorFontSize: string | number; - /** - * This sets the font family of the actor's description - */ - actorFontFamily: string; - /** - * This sets the font weight of the actor's description - */ - actorFontWeight: string | number; - /** - * This sets the font size of actor-attached notes - */ - noteFontSize: string | number; - /** - * This sets the font family of actor-attached notes - */ - noteFontFamily: string; - /** - * This sets the font weight of actor-attached notes - */ - noteFontWeight: string | number; - /** - * This sets the text alignment of actor-attached notes - */ - noteAlign: 'left' | 'center' | 'right'; - /** - * This sets the font size of actor messages - */ - messageFontSize: string | number; - /** - * This sets the font family of actor messages - */ - messageFontFamily: string; - /** - * This sets the font weight of actor messages - */ - messageFontWeight: string | number; - /** - * This sets the auto-wrap state for the diagram - */ - wrap?: boolean; - /** - * This sets the auto-wrap padding for the diagram (sides only) - */ - wrapPadding?: number; - /** - * This sets the width of the loop-box (loop, alt, opt, par) - */ - labelBoxWidth?: number; - /** - * This sets the height of the loop-box (loop, alt, opt, par) - */ - labelBoxHeight?: number; - messageFont?: FontCalculator; - noteFont?: FontCalculator; - actorFont?: FontCalculator; -} -/** - * The object containing configurations specific for flowcharts - * - * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "FlowchartDiagramConfig". - */ -export interface FlowchartDiagramConfig extends BaseDiagramConfig { - /** - * Margin top for the text over the diagram - */ - titleTopMargin: number; - /** - * Defines a top/bottom margin for subgraph titles - * - */ - subGraphTitleMargin: { - top?: number; - bottom?: number; - }; - arrowMarkerAbsolute?: boolean; - /** - * The amount of padding around the diagram as a whole so that embedded - * diagrams have margins, expressed in pixels. - * - */ - diagramPadding: number; - /** - * Flag for setting whether or not a html tag should be used for rendering labels on the edges. - * - */ - htmlLabels: boolean; - /** - * Defines the spacing between nodes on the same level - * - * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, - * and the vertical spacing for LR as well as RL graphs. - * - */ - nodeSpacing: number; - /** - * Defines the spacing between nodes on different levels - * - * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, - * and the vertical spacing for LR as well as RL graphs. - * - */ - rankSpacing: number; - /** - * Defines how mermaid renders curves for flowcharts. - * - */ - curve: 'basis' | 'linear' | 'cardinal'; - /** - * Represents the padding between the labels and the shape - * - * **Only used in new experimental rendering.** - * - */ - padding?: number; - /** - * Decides which rendering engine that is to be used for the rendering. - * - */ - defaultRenderer: 'dagre-d3' | 'dagre-wrapper' | 'elk'; - /** - * Width of nodes where text is wrapped. - * - * When using markdown strings the text ius wrapped automatically, this - * value sets the max width of a text before it continues on a new line. - * - */ - wrappingWidth: number; -} /** * The object containing configurations specific for sankey diagrams. * @@ -1470,6 +1429,47 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig { */ suffix?: string; } +/** + * 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; +} +/** + * The object containing configurations specific for block diagrams. + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "BlockDiagramConfig". + */ +export interface BlockDiagramConfig extends BaseDiagramConfig { + padding?: number; +} /** * This interface was referenced by `MermaidConfig`'s JSON-Schema * via the `definition` "FontConfig".