• Version 18.0.0
  • Published
  • 315 kB
  • 1 dependency
  • MIT license


npm i ngx-markdown
yarn add ngx-markdown
pnpm add ngx-markdown


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







Type Aliases




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[]>;

                  variable MARKED_OPTIONS

                  const MARKED_OPTIONS: InjectionToken<MarkedOptions>;

                    variable SECURITY_CONTEXT

                    const SECURITY_CONTEXT: InjectionToken<SecurityContext>;


                      function provideMarkdown

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


                        class ClipboardButtonComponent

                        class ClipboardButtonComponent {}

                          property copied$

                          readonly copied$: any;

                            property copiedText$

                            readonly copiedText$: any;

                              property ɵcmp

                              static ɵcmp: i0.ɵɵComponentDeclaration<

                                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


                                            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


                                            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


                                            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


                                            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 {}


                                                      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.Config;

                                                                                                    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<
                                                                                                                    'markdown, [markdown]',
                                                                                                                    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' },

                                                                                                                      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<
                                                                                                                                                    typeof i2.ClipboardButtonComponent,
                                                                                                                                                    typeof i3.LanguagePipe,
                                                                                                                                                    typeof i4.MarkdownComponent,
                                                                                                                                                    typeof i5.MarkdownPipe
                                                                                                                                                    typeof i2.ClipboardButtonComponent,
                                                                                                                                                    typeof i3.LanguagePipe,
                                                                                                                                                    typeof i4.MarkdownComponent,
                                                                                                                                                    typeof i5.MarkdownPipe

                                                                                                                                                      method forChild

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

                                                                                                                                                        method forRoot

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

                                                                                                                                                          class MarkdownPipe

                                                                                                                                                          class MarkdownPipe implements PipeTransform {}


                                                                                                                                                            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 {}


                                                                                                                                                                      clipboardOptions: ClipboardOptions,
                                                                                                                                                                      extensions: MarkedExtension[],
                                                                                                                                                                      options: MarkedOptions,
                                                                                                                                                                      platform: Object,
                                                                                                                                                                      securityContext: SecurityContext,
                                                                                                                                                                      http: HttpClient,
                                                                                                                                                                      sanitizer: DomSanitizer

                                                                                                                                                                        property options

                                                                                                                                                                        options: MarkedOptions;

                                                                                                                                                                          property ɵfac

                                                                                                                                                                          static ɵfac: i0.ɵɵFactoryDeclaration<
                                                                                                                                                                          { optional: true },
                                                                                                                                                                          { optional: true },
                                                                                                                                                                          { optional: true },
                                                                                                                                                                          { optional: true },

                                                                                                                                                                            property ɵprov

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

                                                                                                                                                                              property reload$

                                                                                                                                                                              readonly reload$: Observable<void>;

                                                                                                                                                                                property renderer

                                                                                                                                                                                renderer: MarkedRenderer;

                                                                                                                                                                                  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;


                                                                                                                                                                                            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?: Provider;

                                                                                                                                                                                                        property loader

                                                                                                                                                                                                        loader?: Provider;

                                                                                                                                                                                                          property markedExtensions

                                                                                                                                                                                                          markedExtensions?: MarkedExtension[];

                                                                                                                                                                                                            property markedOptions

                                                                                                                                                                                                            markedOptions?: Provider;

                                                                                                                                                                                                              property sanitize

                                                                                                                                                                                                              sanitize?: SecurityContext;

                                                                                                                                                                                                                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

                                                                                                                                                                                                                                | 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


                                                                                                                                                                                                                                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.Config;


                                                                                                                                                                                                                                                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;


                                                                                                                                                                                                                                                          namespace MermaidAPI

                                                                                                                                                                                                                                                          namespace MermaidAPI {}

                                                                                                                                                                                                                                                            interface Config

                                                                                                                                                                                                                                                            interface Config {}

                                                                                                                                                                                                                                                              property arrowMarkerAbsolute

                                                                                                                                                                                                                                                              arrowMarkerAbsolute?: boolean | undefined;
                                                                                                                                                                                                                                                              • **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

                                                                                                                                                                                                                                                              property class

                                                                                                                                                                                                                                                              class?: any;

                                                                                                                                                                                                                                                                property darkMode

                                                                                                                                                                                                                                                                darkMode?: boolean | undefined;

                                                                                                                                                                                                                                                                  property deterministicIds

                                                                                                                                                                                                                                                                  deterministicIds?: boolean | undefined;

                                                                                                                                                                                                                                                                    property deterministicIDSeed

                                                                                                                                                                                                                                                                    deterministicIDSeed?: string | undefined;

                                                                                                                                                                                                                                                                      property flowchart

                                                                                                                                                                                                                                                                      flowchart?: FlowChartConfig | undefined;
                                                                                                                                                                                                                                                                      • ### flowchart *The object containing configurations specific for flowcharts*

                                                                                                                                                                                                                                                                      property fontFamily

                                                                                                                                                                                                                                                                      fontFamily?: string | undefined;

                                                                                                                                                                                                                                                                        property gantt

                                                                                                                                                                                                                                                                        gantt?: GanttConfig | undefined;
                                                                                                                                                                                                                                                                        • ### gantt The object containing configurations specific for gantt diagrams*

                                                                                                                                                                                                                                                                        property git

                                                                                                                                                                                                                                                                        git?: any;

                                                                                                                                                                                                                                                                          property journey

                                                                                                                                                                                                                                                                          journey?: any;
                                                                                                                                                                                                                                                                          • To supress mermaid warning *

                                                                                                                                                                                                                                                                          property logLevel

                                                                                                                                                                                                                                                                          logLevel?: LogLevel | undefined;
                                                                                                                                                                                                                                                                          • logLevel , decides the amount of logging to be used. default: LogLevel.Fatal

                                                                                                                                                                                                                                                                          property maxTextSize

                                                                                                                                                                                                                                                                          maxTextSize?: number | undefined;

                                                                                                                                                                                                                                                                            property pie

                                                                                                                                                                                                                                                                            pie?: any;

                                                                                                                                                                                                                                                                              property requirement

                                                                                                                                                                                                                                                                              requirement?: any;

                                                                                                                                                                                                                                                                                property secure

                                                                                                                                                                                                                                                                                secure?: Array<keyof Config> | undefined;

                                                                                                                                                                                                                                                                                  property securityLevel

                                                                                                                                                                                                                                                                                  securityLevel?: SecurityLevel | undefined;
                                                                                                                                                                                                                                                                                  • ### 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

                                                                                                                                                                                                                                                                                  property sequence

                                                                                                                                                                                                                                                                                  sequence?: SequenceDiagramConfig | undefined;
                                                                                                                                                                                                                                                                                  • ### sequenceDiagram The object containing configurations specific for sequence diagrams

                                                                                                                                                                                                                                                                                  property startOnLoad

                                                                                                                                                                                                                                                                                  startOnLoad?: boolean | undefined;
                                                                                                                                                                                                                                                                                  • **startOnLoad** - This options controls whether or mermaid starts when the page loads default: true

                                                                                                                                                                                                                                                                                  property state

                                                                                                                                                                                                                                                                                  state?: any;

                                                                                                                                                                                                                                                                                    property theme

                                                                                                                                                                                                                                                                                    theme?: Theme | undefined;

                                                                                                                                                                                                                                                                                      property themeCSS

                                                                                                                                                                                                                                                                                      themeCSS?: string | undefined;

                                                                                                                                                                                                                                                                                        property themeVariables

                                                                                                                                                                                                                                                                                        themeVariables?: any;

                                                                                                                                                                                                                                                                                          interface FlowChartConfig

                                                                                                                                                                                                                                                                                          interface FlowChartConfig {}

                                                                                                                                                                                                                                                                                            property curve

                                                                                                                                                                                                                                                                                            curve?: string | undefined;
                                                                                                                                                                                                                                                                                            • default: 'monotoneX'

                                                                                                                                                                                                                                                                                            property diagramPadding

                                                                                                                                                                                                                                                                                            diagramPadding?: number | undefined;
                                                                                                                                                                                                                                                                                            • **diagramPadding** - amount of padding around the diagram as a whole default: 8

                                                                                                                                                                                                                                                                                            property htmlLabels

                                                                                                                                                                                                                                                                                            htmlLabels?: boolean | undefined;
                                                                                                                                                                                                                                                                                            • **htmlLabels** - Flag for setting whether or not a html tag should be used for rendering labels on the edges default: true

                                                                                                                                                                                                                                                                                            property nodeSpacing

                                                                                                                                                                                                                                                                                            nodeSpacing?: number | undefined;
                                                                                                                                                                                                                                                                                            • **nodeSpacing** - Defines the spacing between nodes on the same level default: 50

                                                                                                                                                                                                                                                                                            property padding

                                                                                                                                                                                                                                                                                            padding?: number | undefined;
                                                                                                                                                                                                                                                                                            • **rankSpacing** - Only used in new experimental rendering, represents the padding between the labels and the shape default: 15

                                                                                                                                                                                                                                                                                            property rankSpacing

                                                                                                                                                                                                                                                                                            rankSpacing?: number | undefined;
                                                                                                                                                                                                                                                                                            • **rankSpacing** - Defines the spacing between nodes on different levels default: 50

                                                                                                                                                                                                                                                                                            property useMaxWidth

                                                                                                                                                                                                                                                                                            useMaxWidth?: boolean | undefined;
                                                                                                                                                                                                                                                                                            • default: true

                                                                                                                                                                                                                                                                                            interface GanttConfig

                                                                                                                                                                                                                                                                                            interface GanttConfig {}

                                                                                                                                                                                                                                                                                              property axisFormat

                                                                                                                                                                                                                                                                                              axisFormat?: string | undefined;
                                                                                                                                                                                                                                                                                              • **axisFormat** - datetime format of the axis, this might need adjustment to match your locale and preferences default: '%Y-%m-%d'

                                                                                                                                                                                                                                                                                              property barGap

                                                                                                                                                                                                                                                                                              barGap?: number | undefined;
                                                                                                                                                                                                                                                                                              • **barGap** - the margin between the different activities in the gantt diagram default: 4

                                                                                                                                                                                                                                                                                              property barHeight

                                                                                                                                                                                                                                                                                              barHeight?: number | undefined;
                                                                                                                                                                                                                                                                                              • **barHeight** - the height of the bars in the graph default: 20

                                                                                                                                                                                                                                                                                              property fontFamily

                                                                                                                                                                                                                                                                                              fontFamily?: string | undefined;
                                                                                                                                                                                                                                                                                              • **fontFamily** - font family ... default: '"Open-Sans", "sans-serif"'

                                                                                                                                                                                                                                                                                              property fontSize

                                                                                                                                                                                                                                                                                              fontSize?: number | undefined;
                                                                                                                                                                                                                                                                                              • **fontSize** - font size ... default: 11

                                                                                                                                                                                                                                                                                              property gridLineStartPadding

                                                                                                                                                                                                                                                                                              gridLineStartPadding?: number | undefined;
                                                                                                                                                                                                                                                                                              • **gridLineStartPadding** - Vertical starting position of the grid lines default: 35

                                                                                                                                                                                                                                                                                              property leftPadding

                                                                                                                                                                                                                                                                                              leftPadding?: number | undefined;
                                                                                                                                                                                                                                                                                              • **leftPadding** - the space allocated for the section name to the left of the activities. default: 75

                                                                                                                                                                                                                                                                                              property numberSectionStyles

                                                                                                                                                                                                                                                                                              numberSectionStyles?: number | undefined;
                                                                                                                                                                                                                                                                                              • **numberSectionStyles** - the number of alternating section styles default: 4

                                                                                                                                                                                                                                                                                              property titleTopMargin

                                                                                                                                                                                                                                                                                              titleTopMargin?: number | undefined;
                                                                                                                                                                                                                                                                                              • **titleTopMargin** - margin top for the text over the gantt diagram default: 25

                                                                                                                                                                                                                                                                                              property topPadding

                                                                                                                                                                                                                                                                                              topPadding?: number | undefined;
                                                                                                                                                                                                                                                                                              • **topPadding** - margin between title and gantt diagram and between axis and gantt diagram. default: 50

                                                                                                                                                                                                                                                                                              interface RunOptions

                                                                                                                                                                                                                                                                                              interface RunOptions {}

                                                                                                                                                                                                                                                                                                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 SequenceDiagramConfig

                                                                                                                                                                                                                                                                                                interface SequenceDiagramConfig {}

                                                                                                                                                                                                                                                                                                  property actorMargin

                                                                                                                                                                                                                                                                                                  actorMargin?: number | undefined;
                                                                                                                                                                                                                                                                                                  • **actorMargin** - Margin between actors default: 10

                                                                                                                                                                                                                                                                                                  property bottomMarginAdj

                                                                                                                                                                                                                                                                                                  bottomMarginAdj?: number | undefined;
                                                                                                                                                                                                                                                                                                  • **bottomMarginAdj** - Depending on css styling this might need adjustment. Prolongs the edge of the diagram downwards default: 1

                                                                                                                                                                                                                                                                                                  property boxMargin

                                                                                                                                                                                                                                                                                                  boxMargin?: number | undefined;
                                                                                                                                                                                                                                                                                                  • **boxMargin** - Margin around loop boxes default: 10

                                                                                                                                                                                                                                                                                                  property boxTextMargin

                                                                                                                                                                                                                                                                                                  boxTextMargin?: number | undefined;
                                                                                                                                                                                                                                                                                                  • **boxTextMargin** - margin around the text in loop/alt/opt boxes default: 5

                                                                                                                                                                                                                                                                                                  property diagramMarginX

                                                                                                                                                                                                                                                                                                  diagramMarginX?: number | undefined;
                                                                                                                                                                                                                                                                                                  • **diagramMarginX** - margin to the right and left of the sequence diagram default: 50

                                                                                                                                                                                                                                                                                                  property diagramMarginY

                                                                                                                                                                                                                                                                                                  diagramMarginY?: number | undefined;
                                                                                                                                                                                                                                                                                                  • **diagramMarginY** - margin to the over and under the sequence diagram default: 10

                                                                                                                                                                                                                                                                                                  property height

                                                                                                                                                                                                                                                                                                  height?: number | undefined;
                                                                                                                                                                                                                                                                                                  • **height** - Height of actor boxes default: 65

                                                                                                                                                                                                                                                                                                  property messageMargin

                                                                                                                                                                                                                                                                                                  messageMargin?: number | undefined;
                                                                                                                                                                                                                                                                                                  • **messageMargin** - Space between messages default: 35

                                                                                                                                                                                                                                                                                                  property mirrorActors

                                                                                                                                                                                                                                                                                                  mirrorActors?: boolean | undefined;
                                                                                                                                                                                                                                                                                                  • **mirrorActors** - mirror actors under diagram default: true

                                                                                                                                                                                                                                                                                                  property noteMargin

                                                                                                                                                                                                                                                                                                  noteMargin?: number | undefined;
                                                                                                                                                                                                                                                                                                  • **noteMargin** - margin around notes default: 10

                                                                                                                                                                                                                                                                                                  property rightAngles

                                                                                                                                                                                                                                                                                                  rightAngles?: boolean | undefined;
                                                                                                                                                                                                                                                                                                  • This will display arrows that start and begin at the same node as right angles, rather than a curve Default value: false

                                                                                                                                                                                                                                                                                                  property useMaxWidth

                                                                                                                                                                                                                                                                                                  useMaxWidth?: boolean | undefined;
                                                                                                                                                                                                                                                                                                  • **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

                                                                                                                                                                                                                                                                                                  property width

                                                                                                                                                                                                                                                                                                  width?: number | undefined;
                                                                                                                                                                                                                                                                                                  • **width** - Width of actor boxes default: 150

                                                                                                                                                                                                                                                                                                  enum LogLevel

                                                                                                                                                                                                                                                                                                  enum LogLevel {
                                                                                                                                                                                                                                                                                                  Debug = 1,
                                                                                                                                                                                                                                                                                                  Info = 2,
                                                                                                                                                                                                                                                                                                  Warn = 3,
                                                                                                                                                                                                                                                                                                  Error = 4,
                                                                                                                                                                                                                                                                                                  Fatal = 5,

                                                                                                                                                                                                                                                                                                    member Debug

                                                                                                                                                                                                                                                                                                    Debug = 1

                                                                                                                                                                                                                                                                                                      member Error

                                                                                                                                                                                                                                                                                                      Error = 4

                                                                                                                                                                                                                                                                                                        member Fatal

                                                                                                                                                                                                                                                                                                        Fatal = 5

                                                                                                                                                                                                                                                                                                          member Info

                                                                                                                                                                                                                                                                                                          Info = 2

                                                                                                                                                                                                                                                                                                            member Warn

                                                                                                                                                                                                                                                                                                            Warn = 3

                                                                                                                                                                                                                                                                                                              enum SecurityLevel

                                                                                                                                                                                                                                                                                                              enum SecurityLevel {
                                                                                                                                                                                                                                                                                                              Strict = 'strict',
                                                                                                                                                                                                                                                                                                              Loose = 'loose',
                                                                                                                                                                                                                                                                                                              Antiscript = 'antiscript',
                                                                                                                                                                                                                                                                                                              Sandbox = 'sandbox',

                                                                                                                                                                                                                                                                                                                member Antiscript

                                                                                                                                                                                                                                                                                                                Antiscript = 'antiscript'
                                                                                                                                                                                                                                                                                                                • html tags in text are allowed, (only script element is removed), click functionality is enabled

                                                                                                                                                                                                                                                                                                                member Loose

                                                                                                                                                                                                                                                                                                                Loose = 'loose'
                                                                                                                                                                                                                                                                                                                • tags in text are allowed, click functionality is enabled

                                                                                                                                                                                                                                                                                                                member Sandbox

                                                                                                                                                                                                                                                                                                                Sandbox = 'sandbox'
                                                                                                                                                                                                                                                                                                                • 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.

                                                                                                                                                                                                                                                                                                                member Strict

                                                                                                                                                                                                                                                                                                                Strict = 'strict'
                                                                                                                                                                                                                                                                                                                • (default) tags in text are encoded, click functionality is disabled

                                                                                                                                                                                                                                                                                                                enum Theme

                                                                                                                                                                                                                                                                                                                enum Theme {
                                                                                                                                                                                                                                                                                                                Base = 'base',
                                                                                                                                                                                                                                                                                                                Forest = 'forest',
                                                                                                                                                                                                                                                                                                                Dark = 'dark',
                                                                                                                                                                                                                                                                                                                Default = 'default',
                                                                                                                                                                                                                                                                                                                Neutral = 'neutral',

                                                                                                                                                                                                                                                                                                                  member Base

                                                                                                                                                                                                                                                                                                                  Base = 'base'
                                                                                                                                                                                                                                                                                                                  • Designed to modified, as the name implies it is supposed to be used as the base for making custom themes.

                                                                                                                                                                                                                                                                                                                  member Dark

                                                                                                                                                                                                                                                                                                                  Dark = 'dark'
                                                                                                                                                                                                                                                                                                                  • A theme that would go well with other dark colored elements.

                                                                                                                                                                                                                                                                                                                  member Default

                                                                                                                                                                                                                                                                                                                  Default = 'default'
                                                                                                                                                                                                                                                                                                                  • The default theme for all diagrams.

                                                                                                                                                                                                                                                                                                                  member Forest

                                                                                                                                                                                                                                                                                                                  Forest = 'forest'
                                                                                                                                                                                                                                                                                                                  • A theme full of light greens that is easy on the eyes.

                                                                                                                                                                                                                                                                                                                  member Neutral

                                                                                                                                                                                                                                                                                                                  Neutral = 'neutral'
                                                                                                                                                                                                                                                                                                                  • The theme to be used for black and white printing

                                                                                                                                                                                                                                                                                                                  Package Files (14)

                                                                                                                                                                                                                                                                                                                  Dependencies (1)

                                                                                                                                                                                                                                                                                                                  Dev Dependencies (0)

                                                                                                                                                                                                                                                                                                                  No dev dependencies.

                                                                                                                                                                                                                                                                                                                  Peer Dependencies (6)


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

                                                                                                                                                                                                                                                                                                                  You may also use to create a custom badge linking to

                                                                                                                                                                                                                                                                                                                  • Markdown
                                                                                                                                                                                                                                                                                                                  • HTML
                                                                                                                                                                                                                                                                                                                    <a href=""><img src="" alt=""></a>