@@ -57,7 +56,7 @@ describe('MarkdownModule', () => {
MarkdownModule.forRoot({
markedOptions: {
provide: MARKED_OPTIONS,
- useValue: 'mockMarkedOptions',
+ useValue: {},
},
}),
],
@@ -182,7 +181,7 @@ describe('MarkdownModule', () => {
MarkdownModule.forRoot({
markedOptions: {
provide: MARKED_OPTIONS,
- useValue: 'mockMarkedOptions',
+ useValue: {},
},
}),
],
@@ -226,7 +225,7 @@ describe('MarkdownModule', () => {
MarkdownModule.forRoot({
markedOptions: {
provide: MARKED_OPTIONS,
- useValue: 'mockMarkedOptions',
+ useValue: {},
},
}),
],
diff --git a/lib/src/markdown.module.ts b/lib/src/markdown.module.ts
index 8f9f8c7..d097a1f 100644
--- a/lib/src/markdown.module.ts
+++ b/lib/src/markdown.module.ts
@@ -1,21 +1,40 @@
import { CommonModule } from '@angular/common';
-import { ModuleWithProviders, NgModule, Provider, SecurityContext } from '@angular/core';
+import { InjectionToken, ModuleWithProviders, NgModule, Provider, SecurityContext } from '@angular/core';
import { MarkedExtension } from 'marked';
import { ClipboardButtonComponent } from './clipboard-button.component';
+import { CLIPBOARD_OPTIONS } from './clipboard-options';
import { LanguagePipe } from './language.pipe';
import { MarkdownComponent } from './markdown.component';
import { MarkdownPipe } from './markdown.pipe';
+import { MARKED_OPTIONS } from './marked-options';
+import { MERMAID_OPTIONS } from './mermaid-options';
import { provideMarkdown } from './provide-markdown';
+type InjectionTokenType
> = T extends InjectionToken ? R : unknown;
+
+interface TypedValueProvider> {
+ provide: T;
+ useValue: InjectionTokenType;
+};
+
+interface TypedFactoryProvider> {
+ provide: T;
+ useFactory: (...args: any[]) => InjectionTokenType;
+ deps?: any[];
+};
+
+type TypedProvider> = TypedValueProvider | TypedFactoryProvider;
+
// having a dependency on `HttpClientModule` within a library
// breaks all the interceptors from the app consuming the library
// here, we explicitely ask the user to pass a provider with
// their own instance of `HttpClientModule`
export interface MarkdownModuleConfig {
loader?: Provider;
- clipboardOptions?: Provider;
- markedOptions?: Provider;
+ clipboardOptions?: TypedProvider;
+ markedOptions?: TypedProvider;
markedExtensions?: MarkedExtension[];
+ mermaidOptions?: TypedProvider;
sanitize?: SecurityContext;
}
diff --git a/lib/src/markdown.service.spec.ts b/lib/src/markdown.service.spec.ts
index e801af0..bb07aca 100644
--- a/lib/src/markdown.service.spec.ts
+++ b/lib/src/markdown.service.spec.ts
@@ -608,11 +608,11 @@ describe('MarkdownService', () => {
container.append(elementOne);
container.append(elementTwo);
- const defaultOptions: MermaidAPI.Config = { startOnLoad: false };
+ const defaultOptions: MermaidAPI.MermaidConfig = { startOnLoad: false };
const mermaidElements = container.querySelectorAll('.mermaid');
window['mermaid'] = {
- initialize: (options: MermaidAPI.Config) => {},
+ initialize: (options: MermaidAPI.MermaidConfig) => {},
run: (runOptions: MermaidAPI.RunOptions) => {},
};
@@ -634,7 +634,7 @@ describe('MarkdownService', () => {
const container = document.createElement('div');
container.append(element);
- const providedOptions: MermaidAPI.Config = {
+ const providedOptions: MermaidAPI.MermaidConfig = {
startOnLoad: false,
darkMode: true,
};
@@ -642,7 +642,7 @@ describe('MarkdownService', () => {
const mermaidElements = container.querySelectorAll('.mermaid');
window['mermaid'] = {
- initialize: (options: MermaidAPI.Config) => {},
+ initialize: (options: MermaidAPI.MermaidConfig) => {},
run: (runOptions: MermaidAPI.RunOptions) => {},
};
@@ -660,7 +660,7 @@ describe('MarkdownService', () => {
const container = document.createElement('div');
window['mermaid'] = {
- initialize: (options: MermaidAPI.Config) => {},
+ initialize: (options: MermaidAPI.MermaidConfig) => {},
run: (runOptions: MermaidAPI.RunOptions) => {},
};
@@ -686,7 +686,7 @@ describe('MarkdownService', () => {
const container = document.createElement('div');
window['mermaid'] = {
- initialize: (options: MermaidAPI.Config) => {},
+ initialize: (options: MermaidAPI.MermaidConfig) => {},
run: (runOptions: MermaidAPI.RunOptions) => {},
};
@@ -723,7 +723,7 @@ describe('MarkdownService', () => {
container.append(element);
window['mermaid'] = {
- initialize: (options: MermaidAPI.Config) => {},
+ initialize: (options: MermaidAPI.MermaidConfig) => {},
run: (runOptions: MermaidAPI.RunOptions) => {},
};
@@ -774,7 +774,7 @@ describe('MarkdownService', () => {
container.append(mermaidElement);
window['mermaid'] = {
- initialize: (options: MermaidAPI.Config) => {},
+ initialize: (options: MermaidAPI.MermaidConfig) => {},
run: (runOptions: MermaidAPI.RunOptions) => {},
};
diff --git a/lib/src/markdown.service.ts b/lib/src/markdown.service.ts
index e07372b..ac098af 100644
--- a/lib/src/markdown.service.ts
+++ b/lib/src/markdown.service.ts
@@ -20,7 +20,7 @@ import { KatexOptions } from './katex-options';
import { MARKED_EXTENSIONS } from './marked-extensions';
import { MARKED_OPTIONS, MarkedOptions } from './marked-options';
import { MarkedRenderer } from './marked-renderer';
-import { MermaidAPI } from './mermaid-options';
+import { MERMAID_OPTIONS, MermaidAPI } from './mermaid-options';
// clipboard
declare let ClipboardJS: {
@@ -42,7 +42,7 @@ declare function renderMathInElement(elem: HTMLElement, options?: KatexOptions):
// mermaid
declare let mermaid: {
- initialize: (options: MermaidAPI.Config) => void;
+ initialize: (options: MermaidAPI.MermaidConfig) => void;
run: (runOptions: MermaidAPI.RunOptions) => void;
};
@@ -75,7 +75,7 @@ export interface RenderOptions {
katex?: boolean;
katexOptions?: KatexOptions;
mermaid?: boolean;
- mermaidOptions?: MermaidAPI.Config;
+ mermaidOptions?: MermaidAPI.MermaidConfig;
}
export class ExtendedRenderer extends Renderer {
@@ -104,7 +104,7 @@ export class MarkdownService {
],
};
- private readonly DEFAULT_MERMAID_OPTIONS: MermaidAPI.Config = {
+ private readonly DEFAULT_MERMAID_OPTIONS: MermaidAPI.MermaidConfig = {
startOnLoad: false,
};
@@ -149,6 +149,7 @@ export class MarkdownService {
@Inject(CLIPBOARD_OPTIONS) @Optional() private clipboardOptions: ClipboardOptions,
@Inject(MARKED_EXTENSIONS) @Optional() private extensions: MarkedExtension[],
@Inject(MARKED_OPTIONS) @Optional() options: MarkedOptions,
+ @Inject(MERMAID_OPTIONS) @Optional() private mermaidOptions: MermaidAPI.MermaidConfig,
@Inject(PLATFORM_ID) private platform: Object,
@Inject(SECURITY_CONTEXT) private securityContext: SecurityContext,
@Optional() private http: HttpClient,
@@ -209,6 +210,7 @@ export class MarkdownService {
if (mermaid) {
this.renderMermaid(element, {
...this.DEFAULT_MERMAID_OPTIONS,
+ ...this.mermaidOptions,
...mermaidOptions,
});
}
@@ -429,7 +431,7 @@ export class MarkdownService {
}
}
- private renderMermaid(element: HTMLElement, options: MermaidAPI.Config = this.DEFAULT_MERMAID_OPTIONS): void {
+ private renderMermaid(element: HTMLElement, options: MermaidAPI.MermaidConfig = this.DEFAULT_MERMAID_OPTIONS): void {
if (!isPlatformBrowser(this.platform)) {
return;
}
diff --git a/lib/src/mermaid-options.ts b/lib/src/mermaid-options.ts
index 38a20e5..2ba1b16 100644
--- a/lib/src/mermaid-options.ts
+++ b/lib/src/mermaid-options.ts
@@ -1,352 +1,1557 @@
+import { InjectionToken } from '@angular/core';
+
+export const MERMAID_OPTIONS = new InjectionToken('MERMAID_OPTIONS');
+
/* eslint-disable */
export namespace MermaidAPI {
-
- export enum SecurityLevel {
+ /**
+ * JavaScript function that returns a `FontConfig`.
+ *
+ * By default, these return the appropriate `*FontSize`, `*FontFamily`, `*FontWeight`
+ * values.
+ *
+ * For example, the font calculator called `boundaryFont` might be defined as:
+ *
+ * ```javascript
+ * boundaryFont: function () {
+ * return {
+ * fontFamily: this.boundaryFontFamily,
+ * fontSize: this.boundaryFontSize,
+ * fontWeight: this.boundaryFontWeight,
+ * };
+ * }
+ * ```
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "FontCalculator".
+ */
+ export type FontCalculator = () => Partial;
+ /**
+ * Picks the color of the sankey diagram links, using the colors of the source and/or target of the links.
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "SankeyLinkColor".
+ */
+ export type SankeyLinkColor = 'source' | 'target' | 'gradient';
+ /**
+ * Controls the alignment of the Sankey diagrams.
+ *
+ * See .
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "SankeyNodeAlignment".
+ */
+ export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify';
+ /**
+ * The font size to use
+ */
+ export type CSSFontSize = string | number;
+
+ export interface MermaidConfig {
/**
- * (default) tags in text are encoded, click functionality is disabled
+ * Theme, the CSS style sheet.
+ * You may also use `themeCSS` to override this value.
+ *
*/
- Strict = 'strict',
-
+ theme?: 'default' | 'base' | 'dark' | 'forest' | 'neutral' | 'null';
+ themeVariables?: any;
+ themeCSS?: string;
/**
- * tags in text are allowed, click functionality is enabled
+ * Defines which main look to use for the diagram.
+ *
*/
- Loose = 'loose',
-
+ look?: 'classic' | 'handDrawn';
/**
- * html tags in text are allowed, (only script element is removed), click functionality is enabled
+ * Defines the seed to be used when using handDrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
+ *
*/
- Antiscript = 'antiscript',
-
+ handDrawnSeed?: number;
+ /**
+ * Defines which layout algorithm to use for rendering the diagram.
+ *
+ */
+ layout?: string;
+ /**
+ * The maximum allowed size of the users text diagram
+ */
+ maxTextSize?: number;
+ /**
+ * Defines the maximum number of edges that can be drawn in a graph.
+ *
+ */
+ maxEdges?: number;
+ elk?: {
+ /**
+ * Elk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
+ *
+ */
+ mergeEdges?: boolean;
+ /**
+ * Elk specific option affecting how nodes are placed.
+ *
+ */
+ nodePlacementStrategy?: 'SIMPLE' | 'NETWORK_SIMPLEX' | 'LINEAR_SEGMENTS' | 'BRANDES_KOEPF';
+ /**
+ * This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.
+ *
+ */
+ cycleBreakingStrategy?:
+ | 'GREEDY'
+ | 'DEPTH_FIRST'
+ | 'INTERACTIVE'
+ | 'MODEL_ORDER'
+ | 'GREEDY_MODEL_ORDER';
+ };
+ darkMode?: boolean;
+ htmlLabels?: boolean;
+ /**
+ * Specifies the font to be used in the rendered diagrams.
+ * Can be any possible CSS `font-family`.
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
+ *
+ */
+ fontFamily?: string;
+ altFontFamily?: string;
+ /**
+ * This option decides the amount of logging to be used by mermaid.
+ *
+ */
+ logLevel?: 'trace' | 0 | 'debug' | 1 | 'info' | 2 | 'warn' | 3 | 'error' | 4 | 'fatal' | 5;
+ /**
+ * Level of trust for parsed diagram
+ */
+ securityLevel?: 'strict' | 'loose' | 'antiscript' | 'sandbox';
+ /**
+ * Dictates whether mermaid starts on Page load
+ */
+ startOnLoad?: 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 option controls which `currentConfig` keys are considered secure and
+ * can only be changed via call to `mermaid.initialize`.
+ * This prevents malicious graph directives from overriding a site's default security.
+ *
+ */
+ secure?: string[];
+ /**
+ * This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
+ * without their own MathML implementation. If this option is disabled and MathML is not supported, the math
+ * equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will
+ * fall back to legacy rendering for KaTeX.
+ *
+ */
+ legacyMathML?: boolean;
+ /**
+ * This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
+ * fonts and browser's MathML implementation, this option is recommended if consistent rendering is important.
+ * If set to true, ignores legacyMathML.
+ *
+ */
+ forceLegacyMathML?: boolean;
+ /**
+ * This option controls if the generated ids of nodes in the SVG are
+ * generated randomly or based on a seed.
+ * If set to `false`, the IDs are generated based on the current date and
+ * thus are not deterministic. This is the default behavior.
+ *
+ * This matters if your files are checked into source control e.g. git and
+ * should not change unless content is changed.
+ *
+ */
+ deterministicIds?: boolean;
+ /**
+ * This option is the optional seed for deterministic ids.
+ * If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
+ * You can set this attribute to base the seed on a static string.
+ *
+ */
+ deterministicIDSeed?: string;
+ flowchart?: FlowchartDiagramConfig;
+ sequence?: SequenceDiagramConfig;
+ gantt?: GanttDiagramConfig;
+ journey?: JourneyDiagramConfig;
+ timeline?: TimelineDiagramConfig;
+ class?: ClassDiagramConfig;
+ state?: StateDiagramConfig;
+ er?: ErDiagramConfig;
+ pie?: PieDiagramConfig;
+ quadrantChart?: QuadrantChartConfig;
+ xyChart?: XYChartConfig;
+ requirement?: RequirementDiagramConfig;
+ architecture?: ArchitectureDiagramConfig;
+ mindmap?: MindmapDiagramConfig;
+ kanban?: KanbanDiagramConfig;
+ gitGraph?: GitGraphDiagramConfig;
+ c4?: C4DiagramConfig;
+ sankey?: SankeyDiagramConfig;
+ packet?: PacketDiagramConfig;
+ block?: BlockDiagramConfig;
+ wrap?: boolean;
+ fontSize?: number;
+ markdownAutoWrap?: boolean;
/**
- * with this security level all rendering takes place in a sandboxed iframe.
- * This prevent any javascript running in the context.
- * This may hinder interactive functionality of the diagram like scripts,
- * popups in sequence diagram or links to other tabs/targets etc.
+ * Suppresses inserting 'Syntax error' diagram in the DOM.
+ * This is useful when you want to control how to handle syntax errors in your application.
+ *
*/
- Sandbox = 'sandbox'
+ suppressErrorRendering?: boolean;
}
-
- export enum Theme {
+ /**
+ * 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 {
/**
- * Designed to modified, as the name implies it is supposed to be used as the base for making custom themes.
+ * Margin top for the text over the diagram
*/
- Base = 'base',
-
+ titleTopMargin?: number;
/**
- * A theme full of light greens that is easy on the eyes.
+ * Defines a top/bottom margin for subgraph titles
+ *
*/
- Forest = 'forest',
-
+ subGraphTitleMargin?: {
+ top?: number;
+ bottom?: number;
+ };
+ arrowMarkerAbsolute?: boolean;
/**
- * A theme that would go well with other dark colored elements.
+ * The amount of padding around the diagram as a whole so that embedded
+ * diagrams have margins, expressed in pixels.
+ *
*/
- Dark = 'dark',
-
+ diagramPadding?: number;
/**
- * The default theme for all diagrams.
+ * Flag for setting whether or not a html tag should be used for rendering labels on the edges.
+ *
*/
- Default = 'default',
-
+ 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';
/**
- * The theme to be used for black and white printing
+ * 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.
+ *
*/
- Neutral = 'neutral'
+ wrappingWidth?: number;
}
-
- export enum LogLevel {
- Debug = 1,
- Info,
- Warn,
- Error,
- Fatal
+ /**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "BaseDiagramConfig".
+ */
+ export interface BaseDiagramConfig {
+ useWidth?: number;
+ /**
+ * When this flag is set to `true`, the height and width is set to 100%
+ * and is then scaled with the available space.
+ * If set to `false`, the absolute space required is used.
+ *
+ */
+ useMaxWidth?: boolean;
}
-
- export interface FlowChartConfig {
+ /**
+ * 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;
/**
- * **diagramPadding** - amount of padding around the diagram as a whole
- * default: 8
+ * Width of the activation rect
*/
- diagramPadding?: number | undefined;
-
+ activationWidth?: number;
/**
- * **htmlLabels** - Flag for setting whether or not a html tag should be used for rendering labels
- * on the edges
- * default: true
+ * Margin to the right and left of the sequence diagram
*/
- htmlLabels?: boolean | undefined;
-
+ diagramMarginX?: number;
/**
- * **nodeSpacing** - Defines the spacing between nodes on the same level
- * default: 50
+ * Margin to the over and under the sequence diagram
*/
- nodeSpacing?: number | undefined;
-
+ diagramMarginY?: number;
/**
- * **rankSpacing** - Defines the spacing between nodes on different levels
- * default: 50
+ * Margin between actors
*/
- rankSpacing?: number | undefined;
-
+ actorMargin?: number;
/**
- * default: 'monotoneX'
+ * Width of actor boxes
*/
- curve?: string | undefined;
-
+ width?: number;
/**
- * **rankSpacing** - Only used in new experimental rendering, represents the padding between the labels and the shape
- * default: 15
+ * Height of actor boxes
*/
- padding?: number | undefined;
-
+ height?: number;
+ /**
+ * Margin around loop boxes
+ */
+ boxMargin?: number;
+ /**
+ * Margin around the text in loop/alt/opt boxes
+ */
+ boxTextMargin?: number;
+ /**
+ * Margin around notes
+ */
+ noteMargin?: number;
/**
- * default: true
+ * Space between messages.
*/
- useMaxWidth?: boolean | undefined;
+ 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;
}
-
- export interface SequenceDiagramConfig {
+ /**
+ * 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 {
/**
- * **diagramMarginX** - margin to the right and left of the sequence diagram
- * default: 50
+ * Margin top for the text over the diagram
*/
- diagramMarginX?: number | undefined;
-
+ titleTopMargin?: number;
/**
- * **diagramMarginY** - margin to the over and under the sequence diagram
- * default: 10
+ * The height of the bars in the graph
*/
- diagramMarginY?: number | undefined;
-
+ barHeight?: number;
/**
- * **actorMargin** - Margin between actors
- * default: 10
+ * The margin between the different activities in the gantt diagram
*/
- actorMargin?: number | undefined;
-
+ barGap?: number;
/**
- * **width** - Width of actor boxes
- * default: 150
+ * Margin between title and gantt diagram and between axis and gantt diagram.
+ *
*/
- width?: number | undefined;
-
+ topPadding?: number;
/**
- * **height** - Height of actor boxes
- * default: 65
+ * The space allocated for the section name to the right of the activities
+ *
*/
- height?: number | undefined;
-
+ rightPadding?: number;
/**
- * **boxMargin** - Margin around loop boxes
- * default: 10
+ * The space allocated for the section name to the left of the activities
+ *
*/
- boxMargin?: number | undefined;
-
+ leftPadding?: number;
/**
- * **boxTextMargin** - margin around the text in loop/alt/opt boxes
- * default: 5
+ * Vertical starting position of the grid lines
*/
- boxTextMargin?: number | undefined;
-
+ gridLineStartPadding?: number;
/**
- * **noteMargin** - margin around notes
- * default: 10
+ * Font size
*/
- noteMargin?: number | undefined;
-
+ fontSize?: number;
/**
- * **messageMargin** - Space between messages
- * default: 35
+ * Font size for sections
*/
- messageMargin?: number | undefined;
-
+ sectionFontSize?: string | number;
/**
- * **mirrorActors** - mirror actors under diagram
- * default: true
+ * The number of alternating section styles
*/
- mirrorActors?: boolean | undefined;
-
+ numberSectionStyles?: number;
/**
- * **bottomMarginAdj** - Depending on css styling this might need adjustment.
- * Prolongs the edge of the diagram downwards
- * default: 1
+ * Date/time format of the axis
+ *
+ * This might need adjustment to match your locale and preferences.
+ *
*/
- bottomMarginAdj?: number | undefined;
-
+ axisFormat?: string;
/**
- * **useMaxWidth** - when this flag is set the height and width is set to 100% and is then scaling with the
- * available space if not the absolute space required is used
- * default: true
+ * axis ticks
+ *
+ * Pattern is:
+ *
+ * ```javascript
+ * /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/
+ * ```
+ *
*/
- useMaxWidth?: boolean | undefined;
-
+ tickInterval?: string;
+ /**
+ * When this flag is set, date labels will be added to the top of the chart
+ *
+ */
+ topAxis?: boolean;
/**
- * This will display arrows that start and begin at the same node as right angles, rather than a curve
- * Default value: false
+ * Controls the display mode.
+ *
*/
- rightAngles?: boolean | undefined;
+ displayMode?: '' | 'compact';
+ /**
+ * On which day a week-based interval should start
+ *
+ */
+ weekday?: 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
}
-
- export interface GanttConfig {
+ /**
+ * 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 {
/**
- * **titleTopMargin** - margin top for the text over the gantt diagram
- * default: 25
+ * Margin to the right and left of the c4 diagram, must be a positive value.
+ *
*/
- titleTopMargin?: number | undefined;
-
+ diagramMarginX?: number;
/**
- * **barHeight** - the height of the bars in the graph
- * default: 20
+ * Margin to the over and under the c4 diagram, must be a positive value.
+ *
*/
- barHeight?: number | undefined;
-
+ diagramMarginY?: number;
/**
- * **barGap** - the margin between the different activities in the gantt diagram
- * default: 4
+ * Margin between actors
*/
- barGap?: number | undefined;
-
+ leftMargin?: number;
/**
- * **topPadding** - margin between title and gantt diagram and between axis and gantt diagram.
- * default: 50
+ * Width of actor boxes
*/
- topPadding?: number | undefined;
-
+ width?: number;
/**
- * **leftPadding** - the space allocated for the section name to the left of the activities.
- * default: 75
+ * Height of actor boxes
*/
- leftPadding?: number | undefined;
-
+ height?: number;
/**
- * **gridLineStartPadding** - Vertical starting position of the grid lines
- * default: 35
+ * Margin around loop boxes
*/
- gridLineStartPadding?: number | undefined;
-
+ boxMargin?: number;
/**
- * **fontSize** - font size ...
- * default: 11
+ * Margin around the text in loop/alt/opt boxes
*/
- fontSize?: number | undefined;
-
+ boxTextMargin?: number;
/**
- * **fontFamily** - font family ...
- * default: '"Open-Sans", "sans-serif"'
+ * Margin around notes
*/
- fontFamily?: string | undefined;
-
+ noteMargin?: number;
/**
- * **numberSectionStyles** - the number of alternating section styles
- * default: 4
+ * Space between messages.
*/
- numberSectionStyles?: number | undefined;
-
+ 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;
/**
- * **axisFormat** - datetime format of the axis, this might need adjustment to match your locale and preferences
- * default: '%Y-%m-%d'
+ * Curved Arrows become Right Angles
+ *
+ * This will display arrows that start and begin at the same node as
+ * right angles, rather than as curves.
+ *
*/
- axisFormat?: string | undefined;
+ 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[];
}
-
- export interface RunOptions {
+ /**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "TimelineDiagramConfig".
+ */
+ export interface TimelineDiagramConfig extends BaseDiagramConfig {
/**
- * The query selector to use when finding elements to render. Default: `".mermaid"`.
+ * Margin to the right and left of the c4 diagram, must be a positive value.
+ *
*/
- querySelector?: string;
-
+ diagramMarginX?: number;
/**
- * The nodes to render. If this is set, `querySelector` will be ignored.
+ * Margin to the over and under the c4 diagram, must be a positive value.
+ *
*/
- nodes?: ArrayLike;
-
+ diagramMarginY?: number;
/**
- * A callback to call after each diagram is rendered.
+ * Margin between actors
*/
- postRenderCallback?: (id: string) => unknown;
-
+ leftMargin?: number;
/**
- * If `true`, errors will be logged to the console, but not thrown. Default: `false`
+ * Width of actor boxes
*/
- suppressErrors?: boolean;
+ 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;
}
-
- export interface Config {
+ /**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "ClassDiagramConfig".
+ */
+ export interface ClassDiagramConfig extends BaseDiagramConfig {
/**
- * ### securityLevel
- * This changes the default behaviour of mermaid so that after upgrade to 8.2,
- * unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
- * **sandbox** security level is still in the beta version.
- * default: SecurityLevel.Strict
+ * Margin top for the text over the diagram
*/
- securityLevel?: SecurityLevel | undefined;
-
- theme?: Theme | undefined;
-
- themeVariables?: any; // [todo]
-
- themeCSS?: string | undefined;
-
- maxTextSize?: number | undefined;
-
- darkMode?: boolean | undefined;
-
- fontFamily?: string | undefined;
-
+ titleTopMargin?: number;
/**
- * logLevel , decides the amount of logging to be used.
- * default: LogLevel.Fatal
+ * Controls whether or arrow markers in html code are absolute paths or anchors.
+ * This matters if you are using base tag settings.
+ *
*/
- logLevel?: LogLevel | undefined;
-
+ arrowMarkerAbsolute?: boolean;
+ dividerMargin?: number;
+ padding?: number;
+ textHeight?: number;
/**
- * **startOnLoad** - This options controls whether or mermaid starts when the page loads
- * default: true
+ * Decides which rendering engine that is to be used for the rendering.
+ *
*/
- startOnLoad?: boolean | undefined;
-
+ defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';
+ nodeSpacing?: number;
+ rankSpacing?: number;
/**
- * **arrowMarkerAbsolute** - This options controls whether or arrow markers in html code will be absolute paths or
- * an anchor, #. This matters if you are using base tag settings.
- * default: false
+ * The amount of padding around the diagram as a whole so that embedded
+ * diagrams have margins, expressed in pixels.
+ *
*/
- arrowMarkerAbsolute?: boolean | undefined;
-
- secure?: Array | undefined;
-
- deterministicIds?: boolean | undefined;
-
- deterministicIDSeed?: string | undefined;
-
+ diagramPadding?: number;
+ htmlLabels?: boolean;
+ hideEmptyMembersBox?: 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 {
/**
- * ### flowchart
- * *The object containing configurations specific for flowcharts*
+ * Margin top for the text over the diagram
*/
- flowchart?: FlowChartConfig | undefined;
-
+ titleTopMargin?: number;
+ arrowMarkerAbsolute?: boolean;
+ dividerMargin?: number;
+ sizeUnit?: number;
+ padding?: number;
+ textHeight?: number;
+ titleShift?: number;
+ noteMargin?: number;
+ nodeSpacing?: number;
+ rankSpacing?: number;
+ forkWidth?: number;
+ forkHeight?: number;
+ miniPadding?: number;
/**
- * ### sequenceDiagram
- * The object containing configurations specific for sequence diagrams
+ * 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
+ *
*/
- sequence?: SequenceDiagramConfig | undefined;
-
+ fontSizeFactor?: number;
+ fontSize?: number;
+ labelHeight?: number;
+ edgeLengthFactor?: string;
+ compositTitleSize?: number;
+ radius?: number;
/**
- * ### gantt
- * The object containing configurations specific for gantt diagrams*
+ * Decides which rendering engine that is to be used for the rendering.
+ *
*/
- gantt?: GanttConfig | undefined;
-
- /** To supress mermaid warning **/
-
- journey?: any; // [todo]
-
- class?: any; // [todo]
-
- git?: any; // [todo]
-
- state?: any; // [todo]
-
- pie?: any; // [todo]
-
- requirement?: any; // [todo]
+ 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 architecture diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "ArchitectureDiagramConfig".
+ */
+ export interface ArchitectureDiagramConfig extends BaseDiagramConfig {
+ padding?: number;
+ iconSize?: number;
+ fontSize?: 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;
+ }
+ /**
+ * The object containing configurations specific for kanban diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "KanbanDiagramConfig".
+ */
+ export interface KanbanDiagramConfig extends BaseDiagramConfig {
+ padding?: number;
+ sectionWidth?: number;
+ ticketBaseUrl?: string;
+ }
+ /**
+ * 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
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "C4DiagramConfig".
+ */
+ export interface C4DiagramConfig 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 shapes
+ */
+ c4ShapeMargin?: number;
+ /**
+ * Padding between shapes
+ */
+ c4ShapePadding?: number;
+ /**
+ * Width of person boxes
+ */
+ width?: number;
+ /**
+ * Height of person boxes
+ */
+ height?: number;
+ /**
+ * Margin around boxes
+ */
+ boxMargin?: number;
+ /**
+ * How many shapes to place in each row.
+ */
+ c4ShapeInRow?: number;
+ nextLinePaddingX?: number;
+ /**
+ * How many boundaries to place in each row.
+ */
+ c4BoundaryInRow?: number;
+ /**
+ * This sets the font size of Person shape for the diagram
+ */
+ personFontSize?: string | number;
+ /**
+ * This sets the font weight of Person shape for the diagram
+ */
+ personFontFamily?: string;
+ /**
+ * This sets the font weight of Person shape for the diagram
+ */
+ personFontWeight?: string | number;
+ /**
+ * This sets the font size of External Person shape for the diagram
+ */
+ external_personFontSize?: string | number;
+ /**
+ * This sets the font family of External Person shape for the diagram
+ */
+ external_personFontFamily?: string;
+ /**
+ * This sets the font weight of External Person shape for the diagram
+ */
+ external_personFontWeight?: string | number;
+ /**
+ * This sets the font size of System shape for the diagram
+ */
+ systemFontSize?: string | number;
+ /**
+ * This sets the font family of System shape for the diagram
+ */
+ systemFontFamily?: string;
+ /**
+ * This sets the font weight of System shape for the diagram
+ */
+ systemFontWeight?: string | number;
+ /**
+ * This sets the font size of External System shape for the diagram
+ */
+ external_systemFontSize?: string | number;
+ /**
+ * This sets the font family of External System shape for the diagram
+ */
+ external_systemFontFamily?: string;
+ /**
+ * This sets the font weight of External System shape for the diagram
+ */
+ external_systemFontWeight?: string | number;
+ /**
+ * This sets the font size of System DB shape for the diagram
+ */
+ system_dbFontSize?: string | number;
+ /**
+ * This sets the font family of System DB shape for the diagram
+ */
+ system_dbFontFamily?: string;
+ /**
+ * This sets the font weight of System DB shape for the diagram
+ */
+ system_dbFontWeight?: string | number;
+ /**
+ * This sets the font size of External System DB shape for the diagram
+ */
+ external_system_dbFontSize?: string | number;
+ /**
+ * This sets the font family of External System DB shape for the diagram
+ */
+ external_system_dbFontFamily?: string;
+ /**
+ * This sets the font weight of External System DB shape for the diagram
+ */
+ external_system_dbFontWeight?: string | number;
+ /**
+ * This sets the font size of System Queue shape for the diagram
+ */
+ system_queueFontSize?: string | number;
+ /**
+ * This sets the font family of System Queue shape for the diagram
+ */
+ system_queueFontFamily?: string;
+ /**
+ * This sets the font weight of System Queue shape for the diagram
+ */
+ system_queueFontWeight?: string | number;
+ /**
+ * This sets the font size of External System Queue shape for the diagram
+ */
+ external_system_queueFontSize?: string | number;
+ /**
+ * This sets the font family of External System Queue shape for the diagram
+ */
+ external_system_queueFontFamily?: string;
+ /**
+ * This sets the font weight of External System Queue shape for the diagram
+ */
+ external_system_queueFontWeight?: string | number;
+ /**
+ * This sets the font size of Boundary shape for the diagram
+ */
+ boundaryFontSize?: string | number;
+ /**
+ * This sets the font family of Boundary shape for the diagram
+ */
+ boundaryFontFamily?: string;
+ /**
+ * This sets the font weight of Boundary shape for the diagram
+ */
+ boundaryFontWeight?: string | number;
+ /**
+ * This sets the font size of Message shape for the diagram
+ */
+ messageFontSize?: string | number;
+ /**
+ * This sets the font family of Message shape for the diagram
+ */
+ messageFontFamily?: string;
+ /**
+ * This sets the font weight of Message shape for the diagram
+ */
+ messageFontWeight?: string | number;
+ /**
+ * This sets the font size of Container shape for the diagram
+ */
+ containerFontSize?: string | number;
+ /**
+ * This sets the font family of Container shape for the diagram
+ */
+ containerFontFamily?: string;
+ /**
+ * This sets the font weight of Container shape for the diagram
+ */
+ containerFontWeight?: string | number;
+ /**
+ * This sets the font size of External Container shape for the diagram
+ */
+ external_containerFontSize?: string | number;
+ /**
+ * This sets the font family of External Container shape for the diagram
+ */
+ external_containerFontFamily?: string;
+ /**
+ * This sets the font weight of External Container shape for the diagram
+ */
+ external_containerFontWeight?: string | number;
+ /**
+ * This sets the font size of Container DB shape for the diagram
+ */
+ container_dbFontSize?: string | number;
+ /**
+ * This sets the font family of Container DB shape for the diagram
+ */
+ container_dbFontFamily?: string;
+ /**
+ * This sets the font weight of Container DB shape for the diagram
+ */
+ container_dbFontWeight?: string | number;
+ /**
+ * This sets the font size of External Container DB shape for the diagram
+ */
+ external_container_dbFontSize?: string | number;
+ /**
+ * This sets the font family of External Container DB shape for the diagram
+ */
+ external_container_dbFontFamily?: string;
+ /**
+ * This sets the font weight of External Container DB shape for the diagram
+ */
+ external_container_dbFontWeight?: string | number;
+ /**
+ * This sets the font size of Container Queue shape for the diagram
+ */
+ container_queueFontSize?: string | number;
+ /**
+ * This sets the font family of Container Queue shape for the diagram
+ */
+ container_queueFontFamily?: string;
+ /**
+ * This sets the font weight of Container Queue shape for the diagram
+ */
+ container_queueFontWeight?: string | number;
+ /**
+ * This sets the font size of External Container Queue shape for the diagram
+ */
+ external_container_queueFontSize?: string | number;
+ /**
+ * This sets the font family of External Container Queue shape for the diagram
+ */
+ external_container_queueFontFamily?: string;
+ /**
+ * This sets the font weight of External Container Queue shape for the diagram
+ */
+ external_container_queueFontWeight?: string | number;
+ /**
+ * This sets the font size of Component shape for the diagram
+ */
+ componentFontSize?: string | number;
+ /**
+ * This sets the font family of Component shape for the diagram
+ */
+ componentFontFamily?: string;
+ /**
+ * This sets the font weight of Component shape for the diagram
+ */
+ componentFontWeight?: string | number;
+ /**
+ * This sets the font size of External Component shape for the diagram
+ */
+ external_componentFontSize?: string | number;
+ /**
+ * This sets the font family of External Component shape for the diagram
+ */
+ external_componentFontFamily?: string;
+ /**
+ * This sets the font weight of External Component shape for the diagram
+ */
+ external_componentFontWeight?: string | number;
+ /**
+ * This sets the font size of Component DB shape for the diagram
+ */
+ component_dbFontSize?: string | number;
+ /**
+ * This sets the font family of Component DB shape for the diagram
+ */
+ component_dbFontFamily?: string;
+ /**
+ * This sets the font weight of Component DB shape for the diagram
+ */
+ component_dbFontWeight?: string | number;
+ /**
+ * This sets the font size of External Component DB shape for the diagram
+ */
+ external_component_dbFontSize?: string | number;
+ /**
+ * This sets the font family of External Component DB shape for the diagram
+ */
+ external_component_dbFontFamily?: string;
+ /**
+ * This sets the font weight of External Component DB shape for the diagram
+ */
+ external_component_dbFontWeight?: string | number;
+ /**
+ * This sets the font size of Component Queue shape for the diagram
+ */
+ component_queueFontSize?: string | number;
+ /**
+ * This sets the font family of Component Queue shape for the diagram
+ */
+ component_queueFontFamily?: string;
+ /**
+ * This sets the font weight of Component Queue shape for the diagram
+ */
+ component_queueFontWeight?: string | number;
+ /**
+ * This sets the font size of External Component Queue shape for the diagram
+ */
+ external_component_queueFontSize?: string | number;
+ /**
+ * This sets the font family of External Component Queue shape for the diagram
+ */
+ external_component_queueFontFamily?: string;
+ /**
+ * This sets the font weight of External Component Queue shape for the diagram
+ */
+ external_component_queueFontWeight?: 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;
+ person_bg_color?: string;
+ person_border_color?: string;
+ external_person_bg_color?: string;
+ external_person_border_color?: string;
+ system_bg_color?: string;
+ system_border_color?: string;
+ system_db_bg_color?: string;
+ system_db_border_color?: string;
+ system_queue_bg_color?: string;
+ system_queue_border_color?: string;
+ external_system_bg_color?: string;
+ external_system_border_color?: string;
+ external_system_db_bg_color?: string;
+ external_system_db_border_color?: string;
+ external_system_queue_bg_color?: string;
+ external_system_queue_border_color?: string;
+ container_bg_color?: string;
+ container_border_color?: string;
+ container_db_bg_color?: string;
+ container_db_border_color?: string;
+ container_queue_bg_color?: string;
+ container_queue_border_color?: string;
+ external_container_bg_color?: string;
+ external_container_border_color?: string;
+ external_container_db_bg_color?: string;
+ external_container_db_border_color?: string;
+ external_container_queue_bg_color?: string;
+ external_container_queue_border_color?: string;
+ component_bg_color?: string;
+ component_border_color?: string;
+ component_db_bg_color?: string;
+ component_db_border_color?: string;
+ component_queue_bg_color?: string;
+ component_queue_border_color?: string;
+ external_component_bg_color?: string;
+ external_component_border_color?: string;
+ external_component_db_bg_color?: string;
+ external_component_db_border_color?: string;
+ external_component_queue_bg_color?: string;
+ external_component_queue_border_color?: string;
+ personFont?: FontCalculator;
+ external_personFont?: FontCalculator;
+ systemFont?: FontCalculator;
+ external_systemFont?: FontCalculator;
+ system_dbFont?: FontCalculator;
+ external_system_dbFont?: FontCalculator;
+ system_queueFont?: FontCalculator;
+ external_system_queueFont?: FontCalculator;
+ containerFont?: FontCalculator;
+ external_containerFont?: FontCalculator;
+ container_dbFont?: FontCalculator;
+ external_container_dbFont?: FontCalculator;
+ container_queueFont?: FontCalculator;
+ external_container_queueFont?: FontCalculator;
+ componentFont?: FontCalculator;
+ external_componentFont?: FontCalculator;
+ component_dbFont?: FontCalculator;
+ external_component_dbFont?: FontCalculator;
+ component_queueFont?: FontCalculator;
+ external_component_queueFont?: FontCalculator;
+ boundaryFont?: FontCalculator;
+ messageFont?: FontCalculator;
+ }
+ /**
+ * The object containing configurations specific for sankey diagrams.
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "SankeyDiagramConfig".
+ */
+ export interface SankeyDiagramConfig extends BaseDiagramConfig {
+ width?: number;
+ height?: number;
+ /**
+ * The color of the links in the sankey diagram.
+ *
+ */
+ linkColor?: SankeyLinkColor | string;
+ nodeAlignment?: SankeyNodeAlignment;
+ useMaxWidth?: boolean;
+ /**
+ * Toggle to display or hide values along with title.
+ *
+ */
+ showValues?: boolean;
+ /**
+ * The prefix to use for values
+ *
+ */
+ prefix?: string;
+ /**
+ * The suffix to use for values
+ *
+ */
+ 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".
+ */
+ export interface FontConfig {
+ fontSize?: CSSFontSize;
+ /**
+ * The CSS [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) to use.
+ */
+ fontFamily?: string;
+ /**
+ * The font weight to use.
+ */
+ fontWeight?: string | number;
+ }
+ /**
+ * Optional runtime configs.
+ */
+ export interface RunOptions {
+ /**
+ * The query selector to use when finding elements to render. Default: `".mermaid"`.
+ */
+ querySelector?: string;
+ /**
+ * The nodes to render. If this is set, `querySelector` will be ignored.
+ */
+ nodes?: ArrayLike;
+ /**
+ * A callback to call after each diagram is rendered.
+ */
+ postRenderCallback?: (id: string) => unknown;
+ /**
+ * If `true`, errors will be logged to the console, but not thrown. Default: `false`
+ */
+ suppressErrors?: boolean;
}
-}
+}
\ No newline at end of file
diff --git a/lib/src/provide-markdown.ts b/lib/src/provide-markdown.ts
index 5b47a99..79cf6c1 100644
--- a/lib/src/provide-markdown.ts
+++ b/lib/src/provide-markdown.ts
@@ -9,6 +9,7 @@ export function provideMarkdown(markdownModuleConfig?: MarkdownModuleConfig): Pr
markdownModuleConfig?.loader ?? [],
markdownModuleConfig?.clipboardOptions ?? [],
markdownModuleConfig?.markedOptions ?? [],
+ markdownModuleConfig?.mermaidOptions ?? [],
{
provide: MARKED_EXTENSIONS,
useValue: markdownModuleConfig?.markedExtensions ?? [],