ngx-markdown

ngx-markdown

Version 20.1.0
Published 16 days ago
255 kB
1 dependency
MIT license

Install

npm i ngx-markdown

yarn add ngx-markdown

pnpm add ngx-markdown

Overview

Angular library that uses marked to parse markdown to html combined with Prism.js for synthax highlights

Index

Variables

variable CLIPBOARD_OPTIONS

const CLIPBOARD_OPTIONS: InjectionToken<ClipboardOptions>;

variable errorClipboardNotLoaded

const errorClipboardNotLoaded: string;

variable errorClipboardViewContainerRequired

const errorClipboardViewContainerRequired: string;

variable errorJoyPixelsNotLoaded

const errorJoyPixelsNotLoaded: string;

variable errorKatexNotLoaded

const errorKatexNotLoaded: string;

variable errorMermaidNotLoaded

const errorMermaidNotLoaded: string;

variable errorSrcWithoutHttpClient

const errorSrcWithoutHttpClient: string;

variable MARKED_EXTENSIONS

const MARKED_EXTENSIONS: InjectionToken<MarkedExtension<string, string>>;

variable MARKED_OPTIONS

const MARKED_OPTIONS: InjectionToken<MarkedOptions<string, string>>;

variable MERMAID_OPTIONS

const MERMAID_OPTIONS: InjectionToken<MermaidAPI.MermaidConfig>;

variable SANITIZE

const SANITIZE: InjectionToken<any>;

Functions

function getSanitizeProvider

getSanitizeProvider: (
    sanitize: MarkdownModuleConfig['sanitize']
) => Provider | undefined;

function isSanitizeFunction

isSanitizeFunction: (
    sanitize: SecurityContext | SanitizeFunction
) => sanitize is SanitizeFunction;

function isTypedProvider

isTypedProvider: <T extends InjectionToken<any>>(
    provider: any
) => provider is TypedProvider<T>;

function provideMarkdown

provideMarkdown: (markdownModuleConfig?: MarkdownModuleConfig) => Provider[];

Classes

class ClipboardButtonComponent

class ClipboardButtonComponent {}

property copied

readonly copied: i0.Signal<boolean>;

property copiedText

readonly copiedText: i0.Signal<'Copy' | 'Copied'>;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    ClipboardButtonComponent,
    'markdown-clipboard',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ClipboardButtonComponent, never>;

method onCopyToClipboardClick

onCopyToClipboardClick: () => void;

class ExtendedRenderer

class ExtendedRenderer extends Renderer {}

property ɵNgxMarkdownRendererExtendedForExtensions

ɵNgxMarkdownRendererExtendedForExtensions: boolean;

property ɵNgxMarkdownRendererExtendedForMermaid

ɵNgxMarkdownRendererExtendedForMermaid: boolean;

class KatexSpecificOptions

class KatexSpecificOptions {}

property allowedProtocols

allowedProtocols?: string[];

Allowed protocols in \href
Use _relative to allow relative urls
Use * to allow all protocols

property colorIsTextColor

colorIsTextColor?: boolean;

If true, \color will work like LaTeX's \textcolor and takes 2 arguments
If false, \color will work like LaTeX's \color and takes 1 argument
In both cases, \textcolor works as in LaTeX
false

property displayMode

displayMode?: boolean;

If true, math will be rendered in display mode (math in display style and center math on page)
If false, math will be rendered in inline mode false

property errorColor

errorColor?: string;

A Color string given in format #XXX or #XXXXXX

property macros

macros?: any;

A collection of custom macros.
See src/macros.js for its usage

property maxExpand

maxExpand?: number;

Limit the number of macro expansions to specified number
If set to Infinity, marco expander will try to fully expand as in LaTex
1000

property maxSize

maxSize?: number;

All user-specified sizes will be caped to maxSize ems
If set to Infinity, users can make elements and space arbitrarily large
Infinity

property strict

strict?: string | boolean | Function;

If false or "ignore", allow features that make writing in LaTex convenient but not supported by LaTex
If true or "error", throw an error for such transgressions
If "warn", warn about behavior via console.warn
"warn"

property throwOnError

throwOnError?: boolean;

If true, KaTeX will throw a ParseError when it encounters an unsupported command or invalid LaTex
If false, KaTeX will render unsupported commands as text, and render invalid LaTeX as its source code with hover text giving the error, in color given by errorColor true

class LanguagePipe

class LanguagePipe implements PipeTransform {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<LanguagePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<LanguagePipe, 'language', true>;

method transform

transform: (value: string | null, language: string) => string;

class MarkdownComponent

class MarkdownComponent implements OnChanges, AfterViewInit, OnDestroy {}

constructor

constructor(
    element: ElementRef<HTMLElement>,
    markdownService: MarkdownService,
    viewContainerRef: ViewContainerRef
);

property clipboard

clipboard: boolean;

property clipboardButtonComponent

clipboardButtonComponent: any;

property clipboardButtonTemplate

clipboardButtonTemplate: any;

property commandLine

commandLine: boolean;

property data

data: string;

property disableSanitizer

disableSanitizer: boolean;

property element

element: ElementRef<HTMLElement>;

property emoji

emoji: boolean;

property error

error: EventEmitter<string | Error>;

property filterOutput

filterOutput: string;

property host

host: string;

property inline

inline: boolean;

property katex

katex: boolean;

property katexOptions

katexOptions: KatexSpecificOptions & RenderMathInElementSpecificOptions;

property line

line: string | string[];

property lineHighlight

lineHighlight: boolean;

property lineNumbers

lineNumbers: boolean;

property lineOffset

lineOffset: number;

property load

load: EventEmitter<string>;

property markdownService

markdownService: MarkdownService;

property mermaid

mermaid: boolean;

property mermaidOptions

mermaidOptions: MermaidAPI.MermaidConfig;

property ngAcceptInputType_clipboard

protected static ngAcceptInputType_clipboard: boolean | '';

property ngAcceptInputType_commandLine

protected static ngAcceptInputType_commandLine: boolean | '';

property ngAcceptInputType_emoji

protected static ngAcceptInputType_emoji: boolean | '';

property ngAcceptInputType_katex

protected static ngAcceptInputType_katex: boolean | '';

property ngAcceptInputType_lineHighlight

protected static ngAcceptInputType_lineHighlight: boolean | '';

property ngAcceptInputType_lineNumbers

protected static ngAcceptInputType_lineNumbers: boolean | '';

property ngAcceptInputType_mermaid

protected static ngAcceptInputType_mermaid: boolean | '';

property output

output: string;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    MarkdownComponent,
    'markdown, [markdown]',
    never,
    {
        data: { alias: 'data'; required: false };
        src: { alias: 'src'; required: false };
        disableSanitizer: { alias: 'disableSanitizer'; required: false };
        inline: { alias: 'inline'; required: false };
        clipboard: { alias: 'clipboard'; required: false };
        clipboardButtonComponent: {
            alias: 'clipboardButtonComponent';
            required: false;
        };
        clipboardButtonTemplate: {
            alias: 'clipboardButtonTemplate';
            required: false;
        };
        emoji: { alias: 'emoji'; required: false };
        katex: { alias: 'katex'; required: false };
        katexOptions: { alias: 'katexOptions'; required: false };
        mermaid: { alias: 'mermaid'; required: false };
        mermaidOptions: { alias: 'mermaidOptions'; required: false };
        lineHighlight: { alias: 'lineHighlight'; required: false };
        line: { alias: 'line'; required: false };
        lineOffset: { alias: 'lineOffset'; required: false };
        lineNumbers: { alias: 'lineNumbers'; required: false };
        start: { alias: 'start'; required: false };
        commandLine: { alias: 'commandLine'; required: false };
        filterOutput: { alias: 'filterOutput'; required: false };
        host: { alias: 'host'; required: false };
        prompt: { alias: 'prompt'; required: false };
        output: { alias: 'output'; required: false };
        user: { alias: 'user'; required: false };
    },
    { error: 'error'; load: 'load'; ready: 'ready' },
    never,
    ['*'],
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownComponent, never>;

property prompt

prompt: string;

property ready

ready: EventEmitter<void>;

property src

src: string;

property start

start: number;

property user

user: string;

property viewContainerRef

viewContainerRef: ViewContainerRef;

method loadContent

loadContent: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnChanges

ngOnChanges: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method render

render: (markdown: string, decodeHtml?: boolean) => Promise<void>;

class MarkdownModule

class MarkdownModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<MarkdownModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    MarkdownModule,
    never,
    [
        typeof ClipboardButtonComponent,
        typeof LanguagePipe,
        typeof MarkdownComponent,
        typeof MarkdownPipe
    ],
    [
        typeof ClipboardButtonComponent,
        typeof LanguagePipe,
        typeof MarkdownComponent,
        typeof MarkdownPipe
    ]
>;

method forChild

static forChild: () => ModuleWithProviders<MarkdownModule>;

method forRoot

static forRoot: (
    markdownModuleConfig?: MarkdownModuleConfig
) => ModuleWithProviders<MarkdownModule>;

class MarkdownPipe

class MarkdownPipe implements PipeTransform {}

constructor

constructor(
    domSanitizer: DomSanitizer,
    elementRef: ElementRef<HTMLElement>,
    markdownService: MarkdownService,
    viewContainerRef: ViewContainerRef,
    zone: NgZone
);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<MarkdownPipe, 'markdown', true>;

method transform

transform: (value: string, options?: MarkdownPipeOptions) => Promise<SafeHtml>;

class MarkdownService

class MarkdownService {}

constructor

constructor(
    clipboardOptions: ClipboardOptions,
    extensions: MarkedExtension[],
    options: MarkedOptions,
    mermaidOptions: MermaidAPI.MermaidConfig,
    platform: Object,
    sanitize: any,
    http: HttpClient,
    sanitizer: DomSanitizer
);

property options

options: MarkedOptions;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    MarkdownService,
    [
        { optional: true },
        { optional: true },
        { optional: true },
        { optional: true },
        null,
        null,
        { optional: true },
        null
    ]
>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<MarkdownService>;

property reload$

readonly reload$: Observable<void>;

property renderer

renderer: Renderer;

method getSource

getSource: (src: string) => Observable<string>;

method highlight

highlight: (element?: Element | Document) => void;

method parse

parse: (
    markdown: string,
    parseOptions?: ParseOptions
) => string | Promise<string>;

method reload

reload: () => void;

method render

render: (
    element: HTMLElement,
    options?: RenderOptions,
    viewContainerRef?: ViewContainerRef
) => void;

Interfaces

interface ClipboardOptions

interface ClipboardOptions {}

property buttonComponent

buttonComponent?: Type<unknown>;

interface ClipboardRenderOptions

interface ClipboardRenderOptions extends ClipboardOptions {}

property buttonTemplate

buttonTemplate?: TemplateRef<unknown>;

interface MarkdownModuleConfig

interface MarkdownModuleConfig {}

property clipboardOptions

clipboardOptions?: TypedProvider<typeof CLIPBOARD_OPTIONS>;

property loader

loader?: Provider;

property markedExtensions

markedExtensions?: MultiTypedProvider<typeof MARKED_EXTENSIONS>[];

property markedOptions

markedOptions?: TypedProvider<typeof MARKED_OPTIONS>;

property mermaidOptions

mermaidOptions?: TypedProvider<typeof MERMAID_OPTIONS>;

property sanitize

sanitize?: SanitizeTokenType | TypedProvider<typeof SANITIZE>;

interface ParseOptions

interface ParseOptions {}

property decodeHtml

decodeHtml?: boolean;

property disableSanitizer

disableSanitizer?: boolean;

property emoji

emoji?: boolean;

property inline

inline?: boolean;

property markedOptions

markedOptions?: MarkedOptions;

property mermaid

mermaid?: boolean;

interface RenderMathInElementSpecificOptions

interface RenderMathInElementSpecificOptions {}

property delimiters

delimiters?:
    | ReadonlyArray<RenderMathInElementSpecificOptionsDelimiters>
    | undefined;

A list of delimiters to look for math
[ {left: "$$", right: "$$", display: true}, {left: "$", right: "$", display: false}, {left: "\[", right: "\]", display: true} ]

property ignoredClasses

ignoredClasses?: string[] | undefined;

A list of DOM node class names to ignore when recursing through
[]

property ignoredTags

ignoredTags?: ReadonlyArray<keyof HTMLElementTagNameMap> | undefined;

A list of DOM node types to ignore when recursing through
["script", "noscript", "style", "textarea", "pre", "code"]

method errorCallback

errorCallback: (msg: string, err: Error) => void;

A callback method returning a message and an error stack in case of an critical error during rendering
Parameter msg
Message generated by KaTeX
Parameter err
Caught error
console.error

interface RenderMathInElementSpecificOptionsDelimiters

interface RenderMathInElementSpecificOptionsDelimiters {}

property display

display: boolean;

A boolean of whether the math in the expression should be rendered in display mode or not

property left

left: string;

A string which starts the math expression (i.e. the left delimiter)

property right

right: string;

A string which ends the math expression (i.e. the right delimiter)

interface RenderOptions

interface RenderOptions {}

property clipboard

clipboard?: boolean;

property clipboardOptions

clipboardOptions?: ClipboardRenderOptions;

property katex

katex?: boolean;

property katexOptions

katexOptions?: KatexOptions;

property mermaid

mermaid?: boolean;

property mermaidOptions

mermaidOptions?: MermaidAPI.MermaidConfig;

Enums

enum PrismPlugin

enum PrismPlugin {
    CommandLine = 'command-line',
    LineHighlight = 'line-highlight',
    LineNumbers = 'line-numbers',
}

member CommandLine

CommandLine = 'command-line'

member LineHighlight

LineHighlight = 'line-highlight'

member LineNumbers

LineNumbers = 'line-numbers'

Type Aliases

type KatexOptions

type KatexOptions = KatexSpecificOptions & RenderMathInElementSpecificOptions;

renderMathInElement options contain KaTeX render options and renderMathInElement specific options

type MarkdownPipeOptions

type MarkdownPipeOptions = ParseOptions & RenderOptions;

type SanitizeFunction

type SanitizeFunction = (html: string) => string;

Namespaces

namespace MermaidAPI

namespace MermaidAPI {}

interface ArchitectureDiagramConfig

interface ArchitectureDiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for architecture diagrams
This interface was referenced by MermaidConfig's JSON-Schema via the definition "ArchitectureDiagramConfig".

property fontSize

fontSize?: number;

property iconSize

iconSize?: number;

property padding

padding?: number;

interface BaseDiagramConfig

interface BaseDiagramConfig {}

This interface was referenced by MermaidConfig's JSON-Schema via the definition "BaseDiagramConfig".

property useMaxWidth

useMaxWidth?: boolean;

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.

property useWidth

useWidth?: number;

interface BlockDiagramConfig

interface BlockDiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for block diagrams.
This interface was referenced by MermaidConfig's JSON-Schema via the definition "BlockDiagramConfig".

property padding

padding?: number;

interface C4DiagramConfig

interface C4DiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for c4 diagrams
This interface was referenced by MermaidConfig's JSON-Schema via the definition "C4DiagramConfig".

property boundaryFont

boundaryFont?: FontCalculator;

property boundaryFontFamily

boundaryFontFamily?: string;

This sets the font family of Boundary shape for the diagram

property boundaryFontSize

boundaryFontSize?: string | number;

This sets the font size of Boundary shape for the diagram

property boundaryFontWeight

boundaryFontWeight?: string | number;

This sets the font weight of Boundary shape for the diagram

property boxMargin

boxMargin?: number;

Margin around boxes

property c4BoundaryInRow

c4BoundaryInRow?: number;

How many boundaries to place in each row.

property c4ShapeInRow

c4ShapeInRow?: number;

How many shapes to place in each row.

property c4ShapeMargin

c4ShapeMargin?: number;

Margin between shapes

property c4ShapePadding

c4ShapePadding?: number;

Padding between shapes

property component_bg_color

component_bg_color?: string;

property component_border_color

component_border_color?: string;

property component_db_bg_color

component_db_bg_color?: string;

property component_db_border_color

component_db_border_color?: string;

property component_dbFont

component_dbFont?: FontCalculator;

property component_dbFontFamily

component_dbFontFamily?: string;

This sets the font family of Component DB shape for the diagram

property component_dbFontSize

component_dbFontSize?: string | number;

This sets the font size of Component DB shape for the diagram

property component_dbFontWeight

component_dbFontWeight?: string | number;

This sets the font weight of Component DB shape for the diagram

property component_queue_bg_color

component_queue_bg_color?: string;

property component_queue_border_color

component_queue_border_color?: string;

property component_queueFont

component_queueFont?: FontCalculator;

property component_queueFontFamily

component_queueFontFamily?: string;

This sets the font family of Component Queue shape for the diagram

property component_queueFontSize

component_queueFontSize?: string | number;

This sets the font size of Component Queue shape for the diagram

property component_queueFontWeight

component_queueFontWeight?: string | number;

This sets the font weight of Component Queue shape for the diagram

property componentFont

componentFont?: FontCalculator;

property componentFontFamily

componentFontFamily?: string;

This sets the font family of Component shape for the diagram

property componentFontSize

componentFontSize?: string | number;

This sets the font size of Component shape for the diagram

property componentFontWeight

componentFontWeight?: string | number;

This sets the font weight of Component shape for the diagram

property container_bg_color

container_bg_color?: string;

property container_border_color

container_border_color?: string;

property container_db_bg_color

container_db_bg_color?: string;

property container_db_border_color

container_db_border_color?: string;

property container_dbFont

container_dbFont?: FontCalculator;

property container_dbFontFamily

container_dbFontFamily?: string;

This sets the font family of Container DB shape for the diagram

property container_dbFontSize

container_dbFontSize?: string | number;

This sets the font size of Container DB shape for the diagram

property container_dbFontWeight

container_dbFontWeight?: string | number;

This sets the font weight of Container DB shape for the diagram

property container_queue_bg_color

container_queue_bg_color?: string;

property container_queue_border_color

container_queue_border_color?: string;

property container_queueFont

container_queueFont?: FontCalculator;

property container_queueFontFamily

container_queueFontFamily?: string;

This sets the font family of Container Queue shape for the diagram

property container_queueFontSize

container_queueFontSize?: string | number;

This sets the font size of Container Queue shape for the diagram

property container_queueFontWeight

container_queueFontWeight?: string | number;

This sets the font weight of Container Queue shape for the diagram

property containerFont

containerFont?: FontCalculator;

property containerFontFamily

containerFontFamily?: string;

This sets the font family of Container shape for the diagram

property containerFontSize

containerFontSize?: string | number;

This sets the font size of Container shape for the diagram

property containerFontWeight

containerFontWeight?: string | number;

This sets the font weight of Container shape for the diagram

property diagramMarginX

diagramMarginX?: number;

Margin to the right and left of the c4 diagram, must be a positive value.

property diagramMarginY

diagramMarginY?: number;

Margin to the over and under the c4 diagram, must be a positive value.

property external_component_bg_color

external_component_bg_color?: string;

property external_component_border_color

external_component_border_color?: string;

property external_component_db_bg_color

external_component_db_bg_color?: string;

property external_component_db_border_color

external_component_db_border_color?: string;

property external_component_dbFont

external_component_dbFont?: FontCalculator;

property external_component_dbFontFamily

external_component_dbFontFamily?: string;

This sets the font family of External Component DB shape for the diagram

property external_component_dbFontSize

external_component_dbFontSize?: string | number;

This sets the font size of External Component DB shape for the diagram

property external_component_dbFontWeight

external_component_dbFontWeight?: string | number;

This sets the font weight of External Component DB shape for the diagram

property external_component_queue_bg_color

external_component_queue_bg_color?: string;

property external_component_queue_border_color

external_component_queue_border_color?: string;

property external_component_queueFont

external_component_queueFont?: FontCalculator;

property external_component_queueFontFamily

external_component_queueFontFamily?: string;

This sets the font family of External Component Queue shape for the diagram

property external_component_queueFontSize

external_component_queueFontSize?: string | number;

This sets the font size of External Component Queue shape for the diagram

property external_component_queueFontWeight

external_component_queueFontWeight?: string | number;

This sets the font weight of External Component Queue shape for the diagram

property external_componentFont

external_componentFont?: FontCalculator;

property external_componentFontFamily

external_componentFontFamily?: string;

This sets the font family of External Component shape for the diagram

property external_componentFontSize

external_componentFontSize?: string | number;

This sets the font size of External Component shape for the diagram

property external_componentFontWeight

external_componentFontWeight?: string | number;

This sets the font weight of External Component shape for the diagram

property external_container_bg_color

external_container_bg_color?: string;

property external_container_border_color

external_container_border_color?: string;

property external_container_db_bg_color

external_container_db_bg_color?: string;

property external_container_db_border_color

external_container_db_border_color?: string;

property external_container_dbFont

external_container_dbFont?: FontCalculator;

property external_container_dbFontFamily

external_container_dbFontFamily?: string;

This sets the font family of External Container DB shape for the diagram

property external_container_dbFontSize

external_container_dbFontSize?: string | number;

This sets the font size of External Container DB shape for the diagram

property external_container_dbFontWeight

external_container_dbFontWeight?: string | number;

This sets the font weight of External Container DB shape for the diagram

property external_container_queue_bg_color

external_container_queue_bg_color?: string;

property external_container_queue_border_color

external_container_queue_border_color?: string;

property external_container_queueFont

external_container_queueFont?: FontCalculator;

property external_container_queueFontFamily

external_container_queueFontFamily?: string;

This sets the font family of External Container Queue shape for the diagram

property external_container_queueFontSize

external_container_queueFontSize?: string | number;

This sets the font size of External Container Queue shape for the diagram

property external_container_queueFontWeight

external_container_queueFontWeight?: string | number;

This sets the font weight of External Container Queue shape for the diagram

property external_containerFont

external_containerFont?: FontCalculator;

property external_containerFontFamily

external_containerFontFamily?: string;

This sets the font family of External Container shape for the diagram

property external_containerFontSize

external_containerFontSize?: string | number;

This sets the font size of External Container shape for the diagram

property external_containerFontWeight

external_containerFontWeight?: string | number;

This sets the font weight of External Container shape for the diagram

property external_person_bg_color

external_person_bg_color?: string;

property external_person_border_color

external_person_border_color?: string;

property external_personFont

external_personFont?: FontCalculator;

property external_personFontFamily

external_personFontFamily?: string;

This sets the font family of External Person shape for the diagram

property external_personFontSize

external_personFontSize?: string | number;

This sets the font size of External Person shape for the diagram

property external_personFontWeight

external_personFontWeight?: string | number;

This sets the font weight of External Person shape for the diagram

property external_system_bg_color

external_system_bg_color?: string;

property external_system_border_color

external_system_border_color?: string;

property external_system_db_bg_color

external_system_db_bg_color?: string;

property external_system_db_border_color

external_system_db_border_color?: string;

property external_system_dbFont

external_system_dbFont?: FontCalculator;

property external_system_dbFontFamily

external_system_dbFontFamily?: string;

This sets the font family of External System DB shape for the diagram

property external_system_dbFontSize

external_system_dbFontSize?: string | number;

This sets the font size of External System DB shape for the diagram

property external_system_dbFontWeight

external_system_dbFontWeight?: string | number;

This sets the font weight of External System DB shape for the diagram

property external_system_queue_bg_color

external_system_queue_bg_color?: string;

property external_system_queue_border_color

external_system_queue_border_color?: string;

property external_system_queueFont

external_system_queueFont?: FontCalculator;

property external_system_queueFontFamily

external_system_queueFontFamily?: string;

This sets the font family of External System Queue shape for the diagram

property external_system_queueFontSize

external_system_queueFontSize?: string | number;

This sets the font size of External System Queue shape for the diagram

property external_system_queueFontWeight

external_system_queueFontWeight?: string | number;

This sets the font weight of External System Queue shape for the diagram

property external_systemFont

external_systemFont?: FontCalculator;

property external_systemFontFamily

external_systemFontFamily?: string;

This sets the font family of External System shape for the diagram

property external_systemFontSize

external_systemFontSize?: string | number;

This sets the font size of External System shape for the diagram

property external_systemFontWeight

external_systemFontWeight?: string | number;

This sets the font weight of External System shape for the diagram

property height

height?: number;

Height of person boxes

property messageFont

messageFont?: FontCalculator;

property messageFontFamily

messageFontFamily?: string;

This sets the font family of Message shape for the diagram

property messageFontSize

messageFontSize?: string | number;

This sets the font size of Message shape for the diagram

property messageFontWeight

messageFontWeight?: string | number;

This sets the font weight of Message shape for the diagram

property nextLinePaddingX

nextLinePaddingX?: number;

property person_bg_color

person_bg_color?: string;

property person_border_color

person_border_color?: string;

property personFont

personFont?: FontCalculator;

property personFontFamily

personFontFamily?: string;

This sets the font weight of Person shape for the diagram

property personFontSize

personFontSize?: string | number;

This sets the font size of Person shape for the diagram

property personFontWeight

personFontWeight?: string | number;

This sets the font weight of Person shape for the diagram

property system_bg_color

system_bg_color?: string;

property system_border_color

system_border_color?: string;

property system_db_bg_color

system_db_bg_color?: string;

property system_db_border_color

system_db_border_color?: string;

property system_dbFont

system_dbFont?: FontCalculator;

property system_dbFontFamily

system_dbFontFamily?: string;

This sets the font family of System DB shape for the diagram

property system_dbFontSize

system_dbFontSize?: string | number;

This sets the font size of System DB shape for the diagram

property system_dbFontWeight

system_dbFontWeight?: string | number;

This sets the font weight of System DB shape for the diagram

property system_queue_bg_color

system_queue_bg_color?: string;

property system_queue_border_color

system_queue_border_color?: string;

property system_queueFont

system_queueFont?: FontCalculator;

property system_queueFontFamily

system_queueFontFamily?: string;

This sets the font family of System Queue shape for the diagram

property system_queueFontSize

system_queueFontSize?: string | number;

This sets the font size of System Queue shape for the diagram

property system_queueFontWeight

system_queueFontWeight?: string | number;

This sets the font weight of System Queue shape for the diagram

property systemFont

systemFont?: FontCalculator;

property systemFontFamily

systemFontFamily?: string;

This sets the font family of System shape for the diagram

property systemFontSize

systemFontSize?: string | number;

This sets the font size of System shape for the diagram

property systemFontWeight

systemFontWeight?: string | number;

This sets the font weight of System shape for the diagram

property width

width?: number;

Width of person boxes

property wrap

wrap?: boolean;

This sets the auto-wrap state for the diagram

property wrapPadding

wrapPadding?: number;

This sets the auto-wrap padding for the diagram (sides only)

interface ClassDiagramConfig

interface ClassDiagramConfig extends BaseDiagramConfig {}

This interface was referenced by MermaidConfig's JSON-Schema via the definition "ClassDiagramConfig".

property arrowMarkerAbsolute

arrowMarkerAbsolute?: boolean;

Controls whether or arrow markers in html code are absolute paths or anchors. This matters if you are using base tag settings.

property defaultRenderer

defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';

Decides which rendering engine that is to be used for the rendering.

property diagramPadding

diagramPadding?: number;

The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels.

property dividerMargin

dividerMargin?: number;

property hideEmptyMembersBox

hideEmptyMembersBox?: boolean;

property htmlLabels

htmlLabels?: boolean;

property nodeSpacing

nodeSpacing?: number;

property padding

padding?: number;

property rankSpacing

rankSpacing?: number;

property textHeight

textHeight?: number;

property titleTopMargin

titleTopMargin?: number;

Margin top for the text over the diagram

interface ErDiagramConfig

interface ErDiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for entity relationship diagrams
This interface was referenced by MermaidConfig's JSON-Schema via the definition "ErDiagramConfig".

property diagramPadding

diagramPadding?: number;

The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels.

property entityPadding

entityPadding?: number;

The minimum internal padding between text in an entity box and the enclosing box borders. Expressed in pixels.

property fill

fill?: string;

Fill color of entity boxes

property fontSize

fontSize?: number;

Font size (expressed as an integer representing a number of pixels)

property layoutDirection

layoutDirection?: 'TB' | 'BT' | 'LR' | 'RL';

Directional bias for layout of entities

property minEntityHeight

minEntityHeight?: number;

The minimum height of an entity box. Expressed in pixels.

property minEntityWidth

minEntityWidth?: number;

The minimum width of an entity box. Expressed in pixels.

property stroke

stroke?: string;

Stroke color of box edges and lines.

property titleTopMargin

titleTopMargin?: number;

Margin top for the text over the diagram

interface FlowchartDiagramConfig

interface FlowchartDiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for flowcharts
This interface was referenced by MermaidConfig's JSON-Schema via the definition "FlowchartDiagramConfig".

property arrowMarkerAbsolute

arrowMarkerAbsolute?: boolean;

property curve

curve?: 'basis' | 'linear' | 'cardinal';

Defines how mermaid renders curves for flowcharts.

property defaultRenderer

defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';

Decides which rendering engine that is to be used for the rendering.

property diagramPadding

diagramPadding?: number;

The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels.

property htmlLabels

htmlLabels?: boolean;

Flag for setting whether or not a html tag should be used for rendering labels on the edges.

property nodeSpacing

nodeSpacing?: number;

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.

property padding

padding?: number;

Represents the padding between the labels and the shape
**Only used in new experimental rendering.**

property rankSpacing

rankSpacing?: 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.

property subGraphTitleMargin

subGraphTitleMargin?: {
    top?: number;
    bottom?: number;
};

Defines a top/bottom margin for subgraph titles

property titleTopMargin

titleTopMargin?: number;

Margin top for the text over the diagram

property wrappingWidth

wrappingWidth?: number;

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.

interface FontConfig

interface FontConfig {}

This interface was referenced by MermaidConfig's JSON-Schema via the definition "FontConfig".

property fontFamily

fontFamily?: string;

The CSS [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) to use.

property fontSize

fontSize?: CSSFontSize;

property fontWeight

fontWeight?: string | number;

The font weight to use.

interface GanttDiagramConfig

interface GanttDiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for gantt diagrams
This interface was referenced by MermaidConfig's JSON-Schema via the definition "GanttDiagramConfig".

property axisFormat

axisFormat?: string;

Date/time format of the axis
This might need adjustment to match your locale and preferences.

property barGap

barGap?: number;

The margin between the different activities in the gantt diagram

property barHeight

barHeight?: number;

The height of the bars in the graph

property displayMode

displayMode?: '' | 'compact';

Controls the display mode.

property fontSize

fontSize?: number;

Font size

property gridLineStartPadding

gridLineStartPadding?: number;

Vertical starting position of the grid lines

property leftPadding

leftPadding?: number;

The space allocated for the section name to the left of the activities

property numberSectionStyles

numberSectionStyles?: number;

The number of alternating section styles

property rightPadding

rightPadding?: number;

The space allocated for the section name to the right of the activities

property sectionFontSize

sectionFontSize?: string | number;

Font size for sections

property tickInterval

tickInterval?: string;

axis ticks

Pattern is:

/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/

property titleTopMargin

titleTopMargin?: number;

Margin top for the text over the diagram

property topAxis

topAxis?: boolean;

When this flag is set, date labels will be added to the top of the chart

property topPadding

topPadding?: number;

Margin between title and gantt diagram and between axis and gantt diagram.

property weekday

weekday?:
    | 'monday'
    | 'tuesday'
    | 'wednesday'
    | 'thursday'
    | 'friday'
    | 'saturday'
    | 'sunday';

On which day a week-based interval should start

interface GitGraphDiagramConfig

interface GitGraphDiagramConfig extends BaseDiagramConfig {}

This interface was referenced by MermaidConfig's JSON-Schema via the definition "GitGraphDiagramConfig".

property arrowMarkerAbsolute

arrowMarkerAbsolute?: boolean;

Controls whether or arrow markers in html code are absolute paths or anchors. This matters if you are using base tag settings.

property diagramPadding

diagramPadding?: number;

property mainBranchName

mainBranchName?: string;

property mainBranchOrder

mainBranchOrder?: number;

property nodeLabel

nodeLabel?: NodeLabel;

property parallelCommits

parallelCommits?: boolean;

property rotateCommitLabel

rotateCommitLabel?: boolean;

property showBranches

showBranches?: boolean;

property showCommitLabel

showCommitLabel?: boolean;

property titleTopMargin

titleTopMargin?: number;

Margin top for the text over the diagram

interface JourneyDiagramConfig

interface JourneyDiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for journey diagrams
This interface was referenced by MermaidConfig's JSON-Schema via the definition "JourneyDiagramConfig".

property activationWidth

activationWidth?: number;

Width of activation box

property actorColours

actorColours?: string[];

property bottomMarginAdj

bottomMarginAdj?: number;

Prolongs the edge of the diagram downwards.
Depending on css styling this might need adjustment.

property boxMargin

boxMargin?: number;

Margin around loop boxes

property boxTextMargin

boxTextMargin?: number;

Margin around the text in loop/alt/opt boxes

property diagramMarginX

diagramMarginX?: number;

Margin to the right and left of the c4 diagram, must be a positive value.

property diagramMarginY

diagramMarginY?: number;

Margin to the over and under the c4 diagram, must be a positive value.

property height

height?: number;

Height of actor boxes

property leftMargin

leftMargin?: number;

Margin between actors

property messageAlign

messageAlign?: 'left' | 'center' | 'right';

Multiline message alignment

property messageMargin

messageMargin?: number;

Space between messages.

property noteMargin

noteMargin?: number;

Margin around notes

property rightAngles

rightAngles?: boolean;

Curved Arrows become Right Angles
This will display arrows that start and begin at the same node as right angles, rather than as curves.

property sectionColours

sectionColours?: string[];

property sectionFills

sectionFills?: string[];

property taskFontFamily

taskFontFamily?: string;

property taskFontSize

taskFontSize?: string | number;

property taskMargin

taskMargin?: number;

property textPlacement

textPlacement?: string;

text placement as: tspan | fo | old only text as before

property width

width?: number;

Width of actor boxes

interface KanbanDiagramConfig

interface KanbanDiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for kanban diagrams
This interface was referenced by MermaidConfig's JSON-Schema via the definition "KanbanDiagramConfig".

property padding

padding?: number;

property sectionWidth

sectionWidth?: number;

property ticketBaseUrl

ticketBaseUrl?: string;

interface MermaidConfig

interface MermaidConfig {}

property altFontFamily

altFontFamily?: string;

property architecture

architecture?: ArchitectureDiagramConfig;

property arrowMarkerAbsolute

arrowMarkerAbsolute?: boolean;

Controls whether or arrow markers in html code are absolute paths or anchors. This matters if you are using base tag settings.

property block

block?: BlockDiagramConfig;

property c4

c4?: C4DiagramConfig;

property class

class?: ClassDiagramConfig;

property darkMode

darkMode?: boolean;

property deterministicIds

deterministicIds?: 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.

property deterministicIDSeed

deterministicIDSeed?: string;

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.

property elk

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';
};

property er

er?: ErDiagramConfig;

property flowchart

flowchart?: FlowchartDiagramConfig;

property fontFamily

fontFamily?: string;

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

property fontSize

fontSize?: number;

property forceLegacyMathML

forceLegacyMathML?: 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.

property gantt

gantt?: GanttDiagramConfig;

property gitGraph

gitGraph?: GitGraphDiagramConfig;

property handDrawnSeed

handDrawnSeed?: number;

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.

property htmlLabels

htmlLabels?: boolean;

property journey

journey?: JourneyDiagramConfig;

property kanban

kanban?: KanbanDiagramConfig;

property layout

layout?: string;

Defines which layout algorithm to use for rendering the diagram.

property legacyMathML

legacyMathML?: boolean;

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.

property logLevel

logLevel?:
    | 'trace'
    | 0
    | 'debug'
    | 1
    | 'info'
    | 2
    | 'warn'
    | 3
    | 'error'
    | 4
    | 'fatal'
    | 5;

This option decides the amount of logging to be used by mermaid.

property look

look?: 'classic' | 'handDrawn';

Defines which main look to use for the diagram.

property markdownAutoWrap

markdownAutoWrap?: boolean;

property maxEdges

maxEdges?: number;

Defines the maximum number of edges that can be drawn in a graph.

property maxTextSize

maxTextSize?: number;

The maximum allowed size of the users text diagram

property mindmap

mindmap?: MindmapDiagramConfig;

property packet

packet?: PacketDiagramConfig;

property pie

pie?: PieDiagramConfig;

property quadrantChart

quadrantChart?: QuadrantChartConfig;

property requirement

requirement?: RequirementDiagramConfig;

property sankey

sankey?: SankeyDiagramConfig;

property secure

secure?: string[];

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.

property securityLevel

securityLevel?: 'strict' | 'loose' | 'antiscript' | 'sandbox';

Level of trust for parsed diagram

property sequence

sequence?: SequenceDiagramConfig;

property startOnLoad

startOnLoad?: boolean;

Dictates whether mermaid starts on Page load

property state

state?: StateDiagramConfig;

property suppressErrorRendering

suppressErrorRendering?: boolean;

Suppresses inserting 'Syntax error' diagram in the DOM. This is useful when you want to control how to handle syntax errors in your application.

property theme

theme?: 'default' | 'base' | 'dark' | 'forest' | 'neutral' | 'null';

Theme, the CSS style sheet. You may also use themeCSS to override this value.

property themeCSS

themeCSS?: string;

property themeVariables

themeVariables?: any;

property timeline

timeline?: TimelineDiagramConfig;

property wrap

wrap?: boolean;

property xyChart

xyChart?: XYChartConfig;

interface MindmapDiagramConfig

interface MindmapDiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for mindmap diagrams
This interface was referenced by MermaidConfig's JSON-Schema via the definition "MindmapDiagramConfig".

property maxNodeWidth

maxNodeWidth?: number;

property padding

padding?: number;

interface NodeLabel

interface NodeLabel {}

This interface was referenced by MermaidConfig's JSON-Schema via the definition "NodeLabel".

property height

height?: number;

property width

width?: number;

property x

x?: number;

property y

y?: number;

interface PacketDiagramConfig

interface PacketDiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for packet diagrams.
This interface was referenced by MermaidConfig's JSON-Schema via the definition "PacketDiagramConfig".

property bitsPerRow

bitsPerRow?: number;

The number of bits to display per row.

property bitWidth

bitWidth?: number;

The width of each bit in the packet diagram.

property paddingX

paddingX?: number;

The horizontal padding between the blocks in a row.

property paddingY

paddingY?: number;

The vertical padding between the rows.

property rowHeight

rowHeight?: number;

The height of each row in the packet diagram.

property showBits

showBits?: boolean;

Toggle to display or hide bit numbers.

interface PieDiagramConfig

interface PieDiagramConfig extends BaseDiagramConfig {}

This interface was referenced by MermaidConfig's JSON-Schema via the definition "PieDiagramConfig".

property textPosition

textPosition?: number;

Axial position of slice's label from zero at the center to 1 at the outside edges.

interface QuadrantChartConfig

interface QuadrantChartConfig extends BaseDiagramConfig {}

This interface was referenced by MermaidConfig's JSON-Schema via the definition "QuadrantChartConfig".

property chartHeight

chartHeight?: number;

Height of the chart

property chartWidth

chartWidth?: number;

Width of the chart

property pointLabelFontSize

pointLabelFontSize?: number;

point title font size

property pointRadius

pointRadius?: number;

radius of the point to be drawn

property pointTextPadding

pointTextPadding?: number;

padding between point and point label

property quadrantExternalBorderStrokeWidth

quadrantExternalBorderStrokeWidth?: number;

stroke width of edges of the box that are outside the quadrant

property quadrantInternalBorderStrokeWidth

quadrantInternalBorderStrokeWidth?: number;

stroke width of edges of the box that are inside the quadrant

property quadrantLabelFontSize

quadrantLabelFontSize?: number;

quadrant title font size

property quadrantPadding

quadrantPadding?: number;

quadrant title padding from top if the quadrant is rendered on top

property quadrantTextTopPadding

quadrantTextTopPadding?: number;

quadrant title padding from top if the quadrant is rendered on top

property titleFontSize

titleFontSize?: number;

Chart title top and bottom padding

property titlePadding

titlePadding?: number;

Padding around the quadrant square

property xAxisLabelFontSize

xAxisLabelFontSize?: number;

x-axis label font size

property xAxisLabelPadding

xAxisLabelPadding?: number;

Padding around x-axis labels

property xAxisPosition

xAxisPosition?: 'top' | 'bottom';

position of x-axis labels

property yAxisLabelFontSize

yAxisLabelFontSize?: number;

y-axis label font size

property yAxisLabelPadding

yAxisLabelPadding?: number;

Padding around y-axis labels

property yAxisPosition

yAxisPosition?: 'left' | 'right';

position of y-axis labels

interface RequirementDiagramConfig

interface RequirementDiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for req diagrams
This interface was referenced by MermaidConfig's JSON-Schema via the definition "RequirementDiagramConfig".

property fontSize

fontSize?: number;

property line_height

line_height?: number;

property rect_border_color

rect_border_color?: string;

property rect_border_size

rect_border_size?: string;

property rect_fill

rect_fill?: string;

property rect_min_height

rect_min_height?: number;

property rect_min_width

rect_min_width?: number;

property rect_padding

rect_padding?: number;

property text_color

text_color?: string;

interface RunOptions

interface RunOptions {}

Optional runtime configs.

property nodes

nodes?: ArrayLike<HTMLElement>;

The nodes to render. If this is set, querySelector will be ignored.

property postRenderCallback

postRenderCallback?: (id: string) => unknown;

A callback to call after each diagram is rendered.

property querySelector

querySelector?: string;

The query selector to use when finding elements to render. Default: ".mermaid".

property suppressErrors

suppressErrors?: boolean;

If true, errors will be logged to the console, but not thrown. Default: false

interface SankeyDiagramConfig

interface SankeyDiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for sankey diagrams.
This interface was referenced by MermaidConfig's JSON-Schema via the definition "SankeyDiagramConfig".

property height

height?: number;

property linkColor

linkColor?: SankeyLinkColor | string;

The color of the links in the sankey diagram.

property nodeAlignment

nodeAlignment?: SankeyNodeAlignment;

property prefix

prefix?: string;

The prefix to use for values

property showValues

showValues?: boolean;

Toggle to display or hide values along with title.

property suffix

suffix?: string;

The suffix to use for values

property useMaxWidth

useMaxWidth?: boolean;

property width

width?: number;

interface SequenceDiagramConfig

interface SequenceDiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for sequence diagrams
This interface was referenced by MermaidConfig's JSON-Schema via the definition "SequenceDiagramConfig".

property activationWidth

activationWidth?: number;

Width of the activation rect

property actorFont

actorFont?: FontCalculator;

property actorFontFamily

actorFontFamily?: string;

This sets the font family of the actor's description

property actorFontSize

actorFontSize?: string | number;

This sets the font size of the actor's description

property actorFontWeight

actorFontWeight?: string | number;

This sets the font weight of the actor's description

property actorMargin

actorMargin?: number;

Margin between actors

property arrowMarkerAbsolute

arrowMarkerAbsolute?: boolean;

property bottomMarginAdj

bottomMarginAdj?: number;

Prolongs the edge of the diagram downwards.
Depending on css styling this might need adjustment.

property boxMargin

boxMargin?: number;

Margin around loop boxes

property boxTextMargin

boxTextMargin?: number;

Margin around the text in loop/alt/opt boxes

property diagramMarginX

diagramMarginX?: number;

Margin to the right and left of the sequence diagram

property diagramMarginY

diagramMarginY?: number;

Margin to the over and under the sequence diagram

property forceMenus

forceMenus?: boolean;

forces actor popup menus to always be visible (to support E2E testing).

property height

height?: number;

Height of actor boxes

property hideUnusedParticipants

hideUnusedParticipants?: boolean;

property labelBoxHeight

labelBoxHeight?: number;

This sets the height of the loop-box (loop, alt, opt, par)

property labelBoxWidth

labelBoxWidth?: number;

This sets the width of the loop-box (loop, alt, opt, par)

property messageAlign

messageAlign?: 'left' | 'center' | 'right';

Multiline message alignment

property messageFont

messageFont?: FontCalculator;

property messageFontFamily

messageFontFamily?: string;

This sets the font family of actor messages

property messageFontSize

messageFontSize?: string | number;

This sets the font size of actor messages

property messageFontWeight

messageFontWeight?: string | number;

This sets the font weight of actor messages

property messageMargin

messageMargin?: number;

Space between messages.

property mirrorActors

mirrorActors?: boolean;

Mirror actors under diagram

property noteAlign

noteAlign?: 'left' | 'center' | 'right';

This sets the text alignment of actor-attached notes

property noteFont

noteFont?: FontCalculator;

property noteFontFamily

noteFontFamily?: string;

This sets the font family of actor-attached notes

property noteFontSize

noteFontSize?: string | number;

This sets the font size of actor-attached notes

property noteFontWeight

noteFontWeight?: string | number;

This sets the font weight of actor-attached notes

property noteMargin

noteMargin?: number;

Margin around notes

property rightAngles

rightAngles?: boolean;

Curved Arrows become Right Angles
This will display arrows that start and begin at the same node as right angles, rather than as curves.

property showSequenceNumbers

showSequenceNumbers?: boolean;

This will show the node numbers

property width

width?: number;

Width of actor boxes

property wrap

wrap?: boolean;

This sets the auto-wrap state for the diagram

property wrapPadding

wrapPadding?: number;

This sets the auto-wrap padding for the diagram (sides only)

interface StateDiagramConfig

interface StateDiagramConfig extends BaseDiagramConfig {}

The object containing configurations specific for entity relationship diagrams
This interface was referenced by MermaidConfig's JSON-Schema via the definition "StateDiagramConfig".

property arrowMarkerAbsolute

arrowMarkerAbsolute?: boolean;

property compositTitleSize

compositTitleSize?: number;

property defaultRenderer

defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';

Decides which rendering engine that is to be used for the rendering.

property dividerMargin

dividerMargin?: number;

property edgeLengthFactor

edgeLengthFactor?: string;

property fontSize

fontSize?: number;

property fontSizeFactor

fontSizeFactor?: 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

property forkHeight

forkHeight?: number;

property forkWidth

forkWidth?: number;

property labelHeight

labelHeight?: number;

property miniPadding

miniPadding?: number;

property nodeSpacing

nodeSpacing?: number;

property noteMargin

noteMargin?: number;

property padding

padding?: number;

property radius

radius?: number;

property rankSpacing

rankSpacing?: number;

property sizeUnit

sizeUnit?: number;

property textHeight

textHeight?: number;

property titleShift

titleShift?: number;

property titleTopMargin

titleTopMargin?: number;

Margin top for the text over the diagram

interface TimelineDiagramConfig

interface TimelineDiagramConfig extends BaseDiagramConfig {}

This interface was referenced by MermaidConfig's JSON-Schema via the definition "TimelineDiagramConfig".

property activationWidth

activationWidth?: number;

Width of activation box

property actorColours

actorColours?: string[];

property bottomMarginAdj

bottomMarginAdj?: number;

Prolongs the edge of the diagram downwards.
Depending on css styling this might need adjustment.

property boxMargin

boxMargin?: number;

Margin around loop boxes

property boxTextMargin

boxTextMargin?: number;

Margin around the text in loop/alt/opt boxes

property diagramMarginX

diagramMarginX?: number;

Margin to the right and left of the c4 diagram, must be a positive value.

property diagramMarginY

diagramMarginY?: number;

Margin to the over and under the c4 diagram, must be a positive value.

property disableMulticolor

disableMulticolor?: boolean;

property height

height?: number;

Height of actor boxes

property leftMargin

leftMargin?: number;

Margin between actors

property messageAlign

messageAlign?: 'left' | 'center' | 'right';

Multiline message alignment

property messageMargin

messageMargin?: number;

Space between messages.

property noteMargin

noteMargin?: number;

Margin around notes

property padding

padding?: number;

property rightAngles

rightAngles?: boolean;

Curved Arrows become Right Angles
This will display arrows that start and begin at the same node as right angles, rather than as curves.

property sectionColours

sectionColours?: string[];

property sectionFills

sectionFills?: string[];

property taskFontFamily

taskFontFamily?: string;

property taskFontSize

taskFontSize?: string | number;

property taskMargin

taskMargin?: number;

property textPlacement

textPlacement?: string;

text placement as: tspan | fo | old only text as before

property width

width?: number;

Width of actor boxes

interface XYChartAxisConfig

interface XYChartAxisConfig {}

This object contains configuration for XYChart axis config
This interface was referenced by MermaidConfig's JSON-Schema via the definition "XYChartAxisConfig".

property axisLineWidth

axisLineWidth?: number;

Width of the axis line

property labelFontSize

labelFontSize?: number;

font size of the axis labels (tick text)

property labelPadding

labelPadding?: number;

top and bottom space from axis label (tick text)

property showAxisLine

showAxisLine?: boolean;

Show line across the axis

property showLabel

showLabel?: boolean;

Should show the axis labels (tick text)

property showTick

showTick?: boolean;

Should show the axis tick lines

property showTitle

showTitle?: boolean;

Should show the axis title

property tickLength

tickLength?: number;

length of the axis tick lines

property tickWidth

tickWidth?: number;

width of the axis tick lines

property titleFontSize

titleFontSize?: number;

font size of the axis title

property titlePadding

titlePadding?: number;

top and bottom space from axis title

interface XYChartConfig

interface XYChartConfig extends BaseDiagramConfig {}

This object contains configuration specific to XYCharts
This interface was referenced by MermaidConfig's JSON-Schema via the definition "XYChartConfig".

property chartOrientation

chartOrientation?: 'vertical' | 'horizontal';

How to plot will be drawn horizontal or vertical

property height

height?: number;

height of the chart

property plotReservedSpacePercent

plotReservedSpacePercent?: number;

Minimum percent of space plots of the chart will take

property showTitle

showTitle?: boolean;

Should show the chart title

property titleFontSize

titleFontSize?: number;

Font size of the chart title

property titlePadding

titlePadding?: number;

Top and bottom space from the chart title

property width

width?: number;

width of the chart

property xAxis

xAxis?: XYChartAxisConfig;

property yAxis

yAxis?: XYChartAxisConfig;

type CSSFontSize

type CSSFontSize = string | number;

The font size to use

type FontCalculator

type FontCalculator = () => Partial<FontConfig>;

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:
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".

type SankeyLinkColor

type SankeyLinkColor = 'source' | 'target' | 'gradient';

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".

type SankeyNodeAlignment

type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify';

Controls the alignment of the Sankey diagrams.
See <https://github.com/d3/d3-sankey#alignments>.
This interface was referenced by MermaidConfig's JSON-Schema via the definition "SankeyNodeAlignment".

Package Files (1)

index.d.ts

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (6)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/ngx-markdown.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ngx-markdown)

HTML

<a href="https://www.jsdocs.io/package/ngx-markdown"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 16 days ago.
Package analyzed in 5349 ms.
Missing or incorrect documentation? Open an issue for this package.