ngx-markdown
- Version 19.0.0
- Published
- 252 kB
- 1 dependency
- MIT license
Install
npm i ngx-markdown
yarn add ngx-markdown
pnpm add ngx-markdown
Overview
Angular library that uses marked to parse markdown to html combined with Prism.js for synthax highlights
Index
Variables
Functions
Classes
MarkdownComponent
- clipboard
- clipboardButtonComponent
- clipboardButtonTemplate
- commandLine
- data
- disableSanitizer
- element
- emoji
- error
- filterOutput
- host
- inline
- katex
- katexOptions
- line
- lineHighlight
- lineNumbers
- lineOffset
- load
- loadContent()
- markdownService
- mermaid
- mermaidOptions
- ngAcceptInputType_clipboard
- ngAcceptInputType_commandLine
- ngAcceptInputType_emoji
- ngAcceptInputType_katex
- ngAcceptInputType_lineHighlight
- ngAcceptInputType_lineNumbers
- ngAcceptInputType_mermaid
- ngAfterViewInit()
- ngOnChanges()
- ngOnDestroy()
- output
- ɵcmp
- ɵfac
- prompt
- ready
- render()
- src
- start
- user
- viewContainerRef
Interfaces
Enums
Type Aliases
Namespaces
MermaidAPI
- ArchitectureDiagramConfig
- BaseDiagramConfig
- BlockDiagramConfig
- C4DiagramConfig
- ClassDiagramConfig
- CSSFontSize
- ErDiagramConfig
- FlowchartDiagramConfig
- FontCalculator
- FontConfig
- GanttDiagramConfig
- GitGraphDiagramConfig
- JourneyDiagramConfig
- KanbanDiagramConfig
- MermaidConfig
- MindmapDiagramConfig
- NodeLabel
- PacketDiagramConfig
- PieDiagramConfig
- QuadrantChartConfig
- RequirementDiagramConfig
- RunOptions
- SankeyDiagramConfig
- SankeyLinkColor
- SankeyNodeAlignment
- SequenceDiagramConfig
- StateDiagramConfig
- TimelineDiagramConfig
- XYChartAxisConfig
- XYChartConfig
Variables
variable CLIPBOARD_OPTIONS
const CLIPBOARD_OPTIONS: InjectionToken<ClipboardOptions>;
variable errorClipboardNotLoaded
const errorClipboardNotLoaded: string;
variable errorClipboardViewContainerRequired
const errorClipboardViewContainerRequired: string;
variable errorJoyPixelsNotLoaded
const errorJoyPixelsNotLoaded: string;
variable errorKatexNotLoaded
const errorKatexNotLoaded: string;
variable errorMermaidNotLoaded
const errorMermaidNotLoaded: string;
variable errorSrcWithoutHttpClient
const errorSrcWithoutHttpClient: string;
variable MARKED_EXTENSIONS
const MARKED_EXTENSIONS: InjectionToken<MarkedExtension[]>;
variable MARKED_OPTIONS
const MARKED_OPTIONS: InjectionToken<MarkedOptions>;
variable MERMAID_OPTIONS
const MERMAID_OPTIONS: InjectionToken<MermaidAPI.MermaidConfig>;
variable SECURITY_CONTEXT
const SECURITY_CONTEXT: InjectionToken<SecurityContext>;
Functions
function provideMarkdown
provideMarkdown: (markdownModuleConfig?: MarkdownModuleConfig) => Provider[];
Classes
class ClipboardButtonComponent
class ClipboardButtonComponent {}
property copied$
readonly copied$: any;
property copiedText$
readonly copiedText$: any;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< ClipboardButtonComponent, 'markdown-clipboard', never, {}, {}, never, never, true, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<ClipboardButtonComponent, never>;
method onCopyToClipboardClick
onCopyToClipboardClick: () => void;
class ExtendedRenderer
class ExtendedRenderer extends Renderer {}
property ɵNgxMarkdownRendererExtendedForExtensions
ɵNgxMarkdownRendererExtendedForExtensions: boolean;
property ɵNgxMarkdownRendererExtendedForMermaid
ɵNgxMarkdownRendererExtendedForMermaid: boolean;
class KatexSpecificOptions
class KatexSpecificOptions {}
property allowedProtocols
allowedProtocols?: string[];
Allowed protocols in
\href
Use
_relative
to allow relative urlsUse
*
to allow all protocols
property colorIsTextColor
colorIsTextColor?: boolean;
If
true
,\color
will work like LaTeX's\textcolor
and takes 2 argumentsIf
false
,\color
will work like LaTeX's\color
and takes 1 argumentIn both cases,
\textcolor
works as in LaTeXfalse
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 LaTex1000
property maxSize
maxSize?: number;
All user-specified sizes will be caped to
maxSize
emsIf set to Infinity, users can make elements and space arbitrarily large
Infinity
property strict
strict?: string | boolean | Function;
If
false
or"ignore"
, allow features that make writing in LaTex convenient but not supported by LaTexIf
true
or"error"
, throw an error for such transgressionsIf
"warn"
, warn about behavior viaconsole.warn
"warn"
property throwOnError
throwOnError?: boolean;
If
true
, KaTeX will throw aParseError
when it encounters an unsupported command or invalid LaTexIf
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 {}
class MarkdownComponent
class MarkdownComponent implements OnChanges, AfterViewInit, OnDestroy {}
constructor
constructor( element: ElementRef<HTMLElement>, markdownService: MarkdownService, viewContainerRef: ViewContainerRef);
property clipboard
clipboard: boolean;
property clipboardButtonComponent
clipboardButtonComponent: any;
property clipboardButtonTemplate
clipboardButtonTemplate: any;
property commandLine
commandLine: boolean;
property data
data: string;
property disableSanitizer
disableSanitizer: boolean;
property element
element: ElementRef<HTMLElement>;
property emoji
emoji: boolean;
property error
error: EventEmitter<string | Error>;
property filterOutput
filterOutput: string;
property host
host: string;
property inline
inline: boolean;
property katex
katex: boolean;
property katexOptions
katexOptions: KatexSpecificOptions & RenderMathInElementSpecificOptions;
property line
line: string | string[];
property lineHighlight
lineHighlight: boolean;
property lineNumbers
lineNumbers: boolean;
property lineOffset
lineOffset: number;
property load
load: EventEmitter<string>;
property markdownService
markdownService: MarkdownService;
property mermaid
mermaid: boolean;
property mermaidOptions
mermaidOptions: MermaidAPI.MermaidConfig;
property ngAcceptInputType_clipboard
protected static ngAcceptInputType_clipboard: boolean | '';
property ngAcceptInputType_commandLine
protected static ngAcceptInputType_commandLine: boolean | '';
property ngAcceptInputType_emoji
protected static ngAcceptInputType_emoji: boolean | '';
property ngAcceptInputType_katex
protected static ngAcceptInputType_katex: boolean | '';
property ngAcceptInputType_lineHighlight
protected static ngAcceptInputType_lineHighlight: boolean | '';
property ngAcceptInputType_lineNumbers
protected static ngAcceptInputType_lineNumbers: boolean | '';
property ngAcceptInputType_mermaid
protected static ngAcceptInputType_mermaid: boolean | '';
property output
output: string;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< MarkdownComponent, 'markdown, [markdown]', never, { data: { alias: 'data'; required: false }; src: { alias: 'src'; required: false }; disableSanitizer: { alias: 'disableSanitizer'; required: false }; inline: { alias: 'inline'; required: false }; clipboard: { alias: 'clipboard'; required: false }; clipboardButtonComponent: { alias: 'clipboardButtonComponent'; required: false; }; clipboardButtonTemplate: { alias: 'clipboardButtonTemplate'; required: false; }; emoji: { alias: 'emoji'; required: false }; katex: { alias: 'katex'; required: false }; katexOptions: { alias: 'katexOptions'; required: false }; mermaid: { alias: 'mermaid'; required: false }; mermaidOptions: { alias: 'mermaidOptions'; required: false }; lineHighlight: { alias: 'lineHighlight'; required: false }; line: { alias: 'line'; required: false }; lineOffset: { alias: 'lineOffset'; required: false }; lineNumbers: { alias: 'lineNumbers'; required: false }; start: { alias: 'start'; required: false }; commandLine: { alias: 'commandLine'; required: false }; filterOutput: { alias: 'filterOutput'; required: false }; host: { alias: 'host'; required: false }; prompt: { alias: 'prompt'; required: false }; output: { alias: 'output'; required: false }; user: { alias: 'user'; required: false }; }, { error: 'error'; load: 'load'; ready: 'ready' }, never, ['*'], true, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownComponent, never>;
property prompt
prompt: string;
property ready
ready: EventEmitter<void>;
property src
src: string;
property start
start: number;
property user
user: string;
property viewContainerRef
viewContainerRef: ViewContainerRef;
method loadContent
loadContent: () => void;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngOnChanges
ngOnChanges: () => void;
method ngOnDestroy
ngOnDestroy: () => void;
method render
render: (markdown: string, decodeHtml?: boolean) => Promise<void>;
class MarkdownModule
class MarkdownModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<MarkdownModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< MarkdownModule, never, [ any, 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 {}
constructor
constructor( domSanitizer: DomSanitizer, elementRef: ElementRef<HTMLElement>, markdownService: MarkdownService, viewContainerRef: ViewContainerRef, zone: NgZone);
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownPipe, never>;
property ɵpipe
static ɵpipe: i0.ɵɵPipeDeclaration<MarkdownPipe, 'markdown', true>;
method transform
transform: (value: string, options?: MarkdownPipeOptions) => Promise<SafeHtml>;
class MarkdownService
class MarkdownService {}
constructor
constructor( clipboardOptions: ClipboardOptions, extensions: MarkedExtension[], options: MarkedOptions, mermaidOptions: MermaidAPI.MermaidConfig, platform: Object, securityContext: SecurityContext, http: HttpClient, sanitizer: DomSanitizer);
property options
options: MarkedOptions;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< MarkdownService, [ { optional: true }, { optional: true }, { optional: true }, { optional: true }, null, null, { optional: true }, null ]>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<MarkdownService>;
property reload$
readonly reload$: Observable<void>;
property renderer
renderer: 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;
Interfaces
interface ClipboardOptions
interface ClipboardOptions {}
property buttonComponent
buttonComponent?: Type<unknown>;
interface ClipboardRenderOptions
interface ClipboardRenderOptions extends ClipboardOptions {}
property buttonTemplate
buttonTemplate?: TemplateRef<unknown>;
interface MarkdownModuleConfig
interface MarkdownModuleConfig {}
property clipboardOptions
clipboardOptions?: TypedProvider<typeof CLIPBOARD_OPTIONS>;
property loader
loader?: Provider;
property markedExtensions
markedExtensions?: MarkedExtension[];
property markedOptions
markedOptions?: TypedProvider<typeof MARKED_OPTIONS>;
property mermaidOptions
mermaidOptions?: TypedProvider<typeof MERMAID_OPTIONS>;
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
delimiters?: | ReadonlyArray<RenderMathInElementSpecificOptionsDelimiters> | undefined;
A list of delimiters to look for math
[ {left: "$$", right: "$$", display: true}, {left: "\(", right: "\)", display: false}, {left: "\[", right: "\]", display: true} ]
property ignoredClasses
ignoredClasses?: string[] | undefined;
A list of DOM node class names to ignore when recursing through
[]
property ignoredTags
ignoredTags?: ReadonlyArray<keyof HTMLElementTagNameMap> | undefined;
A list of DOM node types to ignore when recursing through
["script", "noscript", "style", "textarea", "pre", "code"]
method errorCallback
errorCallback: (msg: string, err: Error) => void;
A callback method returning a message and an error stack in case of an critical error during rendering
Parameter msg
Message generated by KaTeX
Parameter err
Caught error
console.error
interface RenderMathInElementSpecificOptionsDelimiters
interface RenderMathInElementSpecificOptionsDelimiters {}
property display
display: boolean;
A boolean of whether the math in the expression should be rendered in display mode or not
property left
left: string;
A string which starts the math expression (i.e. the left delimiter)
property right
right: string;
A string which ends the math expression (i.e. the right delimiter)
interface RenderOptions
interface RenderOptions {}
property clipboard
clipboard?: boolean;
property clipboardOptions
clipboardOptions?: ClipboardRenderOptions;
property katex
katex?: boolean;
property katexOptions
katexOptions?: KatexOptions;
property mermaid
mermaid?: boolean;
property mermaidOptions
mermaidOptions?: MermaidAPI.MermaidConfig;
Enums
enum PrismPlugin
enum PrismPlugin { CommandLine = 'command-line', LineHighlight = 'line-highlight', LineNumbers = 'line-numbers',}
member CommandLine
CommandLine = 'command-line'
member LineHighlight
LineHighlight = 'line-highlight'
member LineNumbers
LineNumbers = 'line-numbers'
Type Aliases
type KatexOptions
type KatexOptions = KatexSpecificOptions & RenderMathInElementSpecificOptions;
renderMathInElement options contain KaTeX render options and renderMathInElement specific options
type MarkdownPipeOptions
type MarkdownPipeOptions = ParseOptions & RenderOptions;
Namespaces
namespace MermaidAPI
namespace MermaidAPI {}
interface ArchitectureDiagramConfig
interface ArchitectureDiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for architecture diagrams
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"ArchitectureDiagramConfig".
interface BaseDiagramConfig
interface BaseDiagramConfig {}
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"BaseDiagramConfig".
property useMaxWidth
useMaxWidth?: boolean;
When this flag is set to
true
, the height and width is set to 100% and is then scaled with the available space. If set tofalse
, the absolute space required is used.
property useWidth
useWidth?: number;
interface BlockDiagramConfig
interface BlockDiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for block diagrams.
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"BlockDiagramConfig".
property padding
padding?: number;
interface C4DiagramConfig
interface C4DiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for c4 diagrams
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"C4DiagramConfig".
property boundaryFont
boundaryFont?: FontCalculator;
property boundaryFontFamily
boundaryFontFamily?: string;
This sets the font family of Boundary shape for the diagram
property boundaryFontSize
boundaryFontSize?: string | number;
This sets the font size of Boundary shape for the diagram
property boundaryFontWeight
boundaryFontWeight?: string | number;
This sets the font weight of Boundary shape for the diagram
property boxMargin
boxMargin?: number;
Margin around boxes
property c4BoundaryInRow
c4BoundaryInRow?: number;
How many boundaries to place in each row.
property c4ShapeInRow
c4ShapeInRow?: number;
How many shapes to place in each row.
property c4ShapeMargin
c4ShapeMargin?: number;
Margin between shapes
property c4ShapePadding
c4ShapePadding?: number;
Padding between shapes
property component_bg_color
component_bg_color?: string;
property component_border_color
component_border_color?: string;
property component_db_bg_color
component_db_bg_color?: string;
property component_db_border_color
component_db_border_color?: string;
property component_dbFont
component_dbFont?: FontCalculator;
property component_dbFontFamily
component_dbFontFamily?: string;
This sets the font family of Component DB shape for the diagram
property component_dbFontSize
component_dbFontSize?: string | number;
This sets the font size of Component DB shape for the diagram
property component_dbFontWeight
component_dbFontWeight?: string | number;
This sets the font weight of Component DB shape for the diagram
property component_queue_bg_color
component_queue_bg_color?: string;
property component_queue_border_color
component_queue_border_color?: string;
property component_queueFont
component_queueFont?: FontCalculator;
property component_queueFontFamily
component_queueFontFamily?: string;
This sets the font family of Component Queue shape for the diagram
property component_queueFontSize
component_queueFontSize?: string | number;
This sets the font size of Component Queue shape for the diagram
property component_queueFontWeight
component_queueFontWeight?: string | number;
This sets the font weight of Component Queue shape for the diagram
property componentFont
componentFont?: FontCalculator;
property componentFontFamily
componentFontFamily?: string;
This sets the font family of Component shape for the diagram
property componentFontSize
componentFontSize?: string | number;
This sets the font size of Component shape for the diagram
property componentFontWeight
componentFontWeight?: string | number;
This sets the font weight of Component shape for the diagram
property container_bg_color
container_bg_color?: string;
property container_border_color
container_border_color?: string;
property container_db_bg_color
container_db_bg_color?: string;
property container_db_border_color
container_db_border_color?: string;
property container_dbFont
container_dbFont?: FontCalculator;
property container_dbFontFamily
container_dbFontFamily?: string;
This sets the font family of Container DB shape for the diagram
property container_dbFontSize
container_dbFontSize?: string | number;
This sets the font size of Container DB shape for the diagram
property container_dbFontWeight
container_dbFontWeight?: string | number;
This sets the font weight of Container DB shape for the diagram
property container_queue_bg_color
container_queue_bg_color?: string;
property container_queue_border_color
container_queue_border_color?: string;
property container_queueFont
container_queueFont?: FontCalculator;
property container_queueFontFamily
container_queueFontFamily?: string;
This sets the font family of Container Queue shape for the diagram
property container_queueFontSize
container_queueFontSize?: string | number;
This sets the font size of Container Queue shape for the diagram
property container_queueFontWeight
container_queueFontWeight?: string | number;
This sets the font weight of Container Queue shape for the diagram
property containerFont
containerFont?: FontCalculator;
property containerFontFamily
containerFontFamily?: string;
This sets the font family of Container shape for the diagram
property containerFontSize
containerFontSize?: string | number;
This sets the font size of Container shape for the diagram
property containerFontWeight
containerFontWeight?: string | number;
This sets the font weight of Container shape for the diagram
property diagramMarginX
diagramMarginX?: number;
Margin to the right and left of the c4 diagram, must be a positive value.
property diagramMarginY
diagramMarginY?: number;
Margin to the over and under the c4 diagram, must be a positive value.
property external_component_bg_color
external_component_bg_color?: string;
property external_component_border_color
external_component_border_color?: string;
property external_component_db_bg_color
external_component_db_bg_color?: string;
property external_component_db_border_color
external_component_db_border_color?: string;
property external_component_dbFont
external_component_dbFont?: FontCalculator;
property external_component_dbFontFamily
external_component_dbFontFamily?: string;
This sets the font family of External Component DB shape for the diagram
property external_component_dbFontSize
external_component_dbFontSize?: string | number;
This sets the font size of External Component DB shape for the diagram
property external_component_dbFontWeight
external_component_dbFontWeight?: string | number;
This sets the font weight of External Component DB shape for the diagram
property external_component_queue_bg_color
external_component_queue_bg_color?: string;
property external_component_queue_border_color
external_component_queue_border_color?: string;
property external_component_queueFont
external_component_queueFont?: FontCalculator;
property external_component_queueFontFamily
external_component_queueFontFamily?: string;
This sets the font family of External Component Queue shape for the diagram
property external_component_queueFontSize
external_component_queueFontSize?: string | number;
This sets the font size of External Component Queue shape for the diagram
property external_component_queueFontWeight
external_component_queueFontWeight?: string | number;
This sets the font weight of External Component Queue shape for the diagram
property external_componentFont
external_componentFont?: FontCalculator;
property external_componentFontFamily
external_componentFontFamily?: string;
This sets the font family of External Component shape for the diagram
property external_componentFontSize
external_componentFontSize?: string | number;
This sets the font size of External Component shape for the diagram
property external_componentFontWeight
external_componentFontWeight?: string | number;
This sets the font weight of External Component shape for the diagram
property external_container_bg_color
external_container_bg_color?: string;
property external_container_border_color
external_container_border_color?: string;
property external_container_db_bg_color
external_container_db_bg_color?: string;
property external_container_db_border_color
external_container_db_border_color?: string;
property external_container_dbFont
external_container_dbFont?: FontCalculator;
property external_container_dbFontFamily
external_container_dbFontFamily?: string;
This sets the font family of External Container DB shape for the diagram
property external_container_dbFontSize
external_container_dbFontSize?: string | number;
This sets the font size of External Container DB shape for the diagram
property external_container_dbFontWeight
external_container_dbFontWeight?: string | number;
This sets the font weight of External Container DB shape for the diagram
property external_container_queue_bg_color
external_container_queue_bg_color?: string;
property external_container_queue_border_color
external_container_queue_border_color?: string;
property external_container_queueFont
external_container_queueFont?: FontCalculator;
property external_container_queueFontFamily
external_container_queueFontFamily?: string;
This sets the font family of External Container Queue shape for the diagram
property external_container_queueFontSize
external_container_queueFontSize?: string | number;
This sets the font size of External Container Queue shape for the diagram
property external_container_queueFontWeight
external_container_queueFontWeight?: string | number;
This sets the font weight of External Container Queue shape for the diagram
property external_containerFont
external_containerFont?: FontCalculator;
property external_containerFontFamily
external_containerFontFamily?: string;
This sets the font family of External Container shape for the diagram
property external_containerFontSize
external_containerFontSize?: string | number;
This sets the font size of External Container shape for the diagram
property external_containerFontWeight
external_containerFontWeight?: string | number;
This sets the font weight of External Container shape for the diagram
property external_person_bg_color
external_person_bg_color?: string;
property external_person_border_color
external_person_border_color?: string;
property external_personFont
external_personFont?: FontCalculator;
property external_personFontFamily
external_personFontFamily?: string;
This sets the font family of External Person shape for the diagram
property external_personFontSize
external_personFontSize?: string | number;
This sets the font size of External Person shape for the diagram
property external_personFontWeight
external_personFontWeight?: string | number;
This sets the font weight of External Person shape for the diagram
property external_system_bg_color
external_system_bg_color?: string;
property external_system_border_color
external_system_border_color?: string;
property external_system_db_bg_color
external_system_db_bg_color?: string;
property external_system_db_border_color
external_system_db_border_color?: string;
property external_system_dbFont
external_system_dbFont?: FontCalculator;
property external_system_dbFontFamily
external_system_dbFontFamily?: string;
This sets the font family of External System DB shape for the diagram
property external_system_dbFontSize
external_system_dbFontSize?: string | number;
This sets the font size of External System DB shape for the diagram
property external_system_dbFontWeight
external_system_dbFontWeight?: string | number;
This sets the font weight of External System DB shape for the diagram
property external_system_queue_bg_color
external_system_queue_bg_color?: string;
property external_system_queue_border_color
external_system_queue_border_color?: string;
property external_system_queueFont
external_system_queueFont?: FontCalculator;
property external_system_queueFontFamily
external_system_queueFontFamily?: string;
This sets the font family of External System Queue shape for the diagram
property external_system_queueFontSize
external_system_queueFontSize?: string | number;
This sets the font size of External System Queue shape for the diagram
property external_system_queueFontWeight
external_system_queueFontWeight?: string | number;
This sets the font weight of External System Queue shape for the diagram
property external_systemFont
external_systemFont?: FontCalculator;
property external_systemFontFamily
external_systemFontFamily?: string;
This sets the font family of External System shape for the diagram
property external_systemFontSize
external_systemFontSize?: string | number;
This sets the font size of External System shape for the diagram
property external_systemFontWeight
external_systemFontWeight?: string | number;
This sets the font weight of External System shape for the diagram
property height
height?: number;
Height of person boxes
property messageFont
messageFont?: FontCalculator;
property messageFontFamily
messageFontFamily?: string;
This sets the font family of Message shape for the diagram
property messageFontSize
messageFontSize?: string | number;
This sets the font size of Message shape for the diagram
property messageFontWeight
messageFontWeight?: string | number;
This sets the font weight of Message shape for the diagram
property nextLinePaddingX
nextLinePaddingX?: number;
property person_bg_color
person_bg_color?: string;
property person_border_color
person_border_color?: string;
property personFont
personFont?: FontCalculator;
property personFontFamily
personFontFamily?: string;
This sets the font weight of Person shape for the diagram
property personFontSize
personFontSize?: string | number;
This sets the font size of Person shape for the diagram
property personFontWeight
personFontWeight?: string | number;
This sets the font weight of Person shape for the diagram
property system_bg_color
system_bg_color?: string;
property system_border_color
system_border_color?: string;
property system_db_bg_color
system_db_bg_color?: string;
property system_db_border_color
system_db_border_color?: string;
property system_dbFont
system_dbFont?: FontCalculator;
property system_dbFontFamily
system_dbFontFamily?: string;
This sets the font family of System DB shape for the diagram
property system_dbFontSize
system_dbFontSize?: string | number;
This sets the font size of System DB shape for the diagram
property system_dbFontWeight
system_dbFontWeight?: string | number;
This sets the font weight of System DB shape for the diagram
property system_queue_bg_color
system_queue_bg_color?: string;
property system_queue_border_color
system_queue_border_color?: string;
property system_queueFont
system_queueFont?: FontCalculator;
property system_queueFontFamily
system_queueFontFamily?: string;
This sets the font family of System Queue shape for the diagram
property system_queueFontSize
system_queueFontSize?: string | number;
This sets the font size of System Queue shape for the diagram
property system_queueFontWeight
system_queueFontWeight?: string | number;
This sets the font weight of System Queue shape for the diagram
property systemFont
systemFont?: FontCalculator;
property systemFontFamily
systemFontFamily?: string;
This sets the font family of System shape for the diagram
property systemFontSize
systemFontSize?: string | number;
This sets the font size of System shape for the diagram
property systemFontWeight
systemFontWeight?: string | number;
This sets the font weight of System shape for the diagram
property width
width?: number;
Width of person boxes
property wrap
wrap?: boolean;
This sets the auto-wrap state for the diagram
property wrapPadding
wrapPadding?: number;
This sets the auto-wrap padding for the diagram (sides only)
interface ClassDiagramConfig
interface ClassDiagramConfig extends BaseDiagramConfig {}
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"ClassDiagramConfig".
property arrowMarkerAbsolute
arrowMarkerAbsolute?: boolean;
Controls whether or arrow markers in html code are absolute paths or anchors. This matters if you are using base tag settings.
property defaultRenderer
defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';
Decides which rendering engine that is to be used for the rendering.
property diagramPadding
diagramPadding?: number;
The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels.
property dividerMargin
dividerMargin?: number;
property hideEmptyMembersBox
hideEmptyMembersBox?: boolean;
property htmlLabels
htmlLabels?: boolean;
property nodeSpacing
nodeSpacing?: number;
property padding
padding?: number;
property rankSpacing
rankSpacing?: number;
property textHeight
textHeight?: number;
property titleTopMargin
titleTopMargin?: number;
Margin top for the text over the diagram
interface ErDiagramConfig
interface ErDiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for entity relationship diagrams
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"ErDiagramConfig".
property diagramPadding
diagramPadding?: number;
The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels.
property entityPadding
entityPadding?: number;
The minimum internal padding between text in an entity box and the enclosing box borders. Expressed in pixels.
property fill
fill?: string;
Fill color of entity boxes
property fontSize
fontSize?: number;
Font size (expressed as an integer representing a number of pixels)
property layoutDirection
layoutDirection?: 'TB' | 'BT' | 'LR' | 'RL';
Directional bias for layout of entities
property minEntityHeight
minEntityHeight?: number;
The minimum height of an entity box. Expressed in pixels.
property minEntityWidth
minEntityWidth?: number;
The minimum width of an entity box. Expressed in pixels.
property stroke
stroke?: string;
Stroke color of box edges and lines.
property titleTopMargin
titleTopMargin?: number;
Margin top for the text over the diagram
interface FlowchartDiagramConfig
interface FlowchartDiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for flowcharts
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"FlowchartDiagramConfig".
property arrowMarkerAbsolute
arrowMarkerAbsolute?: boolean;
property curve
curve?: 'basis' | 'linear' | 'cardinal';
Defines how mermaid renders curves for flowcharts.
property defaultRenderer
defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';
Decides which rendering engine that is to be used for the rendering.
property diagramPadding
diagramPadding?: number;
The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels.
property htmlLabels
htmlLabels?: boolean;
Flag for setting whether or not a html tag should be used for rendering labels on the edges.
property nodeSpacing
nodeSpacing?: number;
Defines the spacing between nodes on the same level
Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the vertical spacing for LR as well as RL graphs.
property padding
padding?: number;
Represents the padding between the labels and the shape
**Only used in new experimental rendering.**
property rankSpacing
rankSpacing?: number;
Defines the spacing between nodes on different levels
Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the vertical spacing for LR as well as RL graphs.
property subGraphTitleMargin
subGraphTitleMargin?: { top?: number; bottom?: number;};
Defines a top/bottom margin for subgraph titles
property titleTopMargin
titleTopMargin?: number;
Margin top for the text over the diagram
property wrappingWidth
wrappingWidth?: number;
Width of nodes where text is wrapped.
When using markdown strings the text ius wrapped automatically, this value sets the max width of a text before it continues on a new line.
interface FontConfig
interface FontConfig {}
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"FontConfig".
property fontFamily
fontFamily?: string;
The CSS [
font-family
](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) to use.
property fontSize
fontSize?: CSSFontSize;
property fontWeight
fontWeight?: string | number;
The font weight to use.
interface GanttDiagramConfig
interface GanttDiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for gantt diagrams
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"GanttDiagramConfig".
property axisFormat
axisFormat?: string;
Date/time format of the axis
This might need adjustment to match your locale and preferences.
property barGap
barGap?: number;
The margin between the different activities in the gantt diagram
property barHeight
barHeight?: number;
The height of the bars in the graph
property displayMode
displayMode?: '' | 'compact';
Controls the display mode.
property fontSize
fontSize?: number;
Font size
property gridLineStartPadding
gridLineStartPadding?: number;
Vertical starting position of the grid lines
property leftPadding
leftPadding?: number;
The space allocated for the section name to the left of the activities
property numberSectionStyles
numberSectionStyles?: number;
The number of alternating section styles
property rightPadding
rightPadding?: number;
The space allocated for the section name to the right of the activities
property sectionFontSize
sectionFontSize?: string | number;
Font size for sections
property tickInterval
tickInterval?: string;
axis ticks
Pattern is:
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/
property titleTopMargin
titleTopMargin?: number;
Margin top for the text over the diagram
property topAxis
topAxis?: boolean;
When this flag is set, date labels will be added to the top of the chart
property topPadding
topPadding?: number;
Margin between title and gantt diagram and between axis and gantt diagram.
property weekday
weekday?: | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
On which day a week-based interval should start
interface GitGraphDiagramConfig
interface GitGraphDiagramConfig extends BaseDiagramConfig {}
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"GitGraphDiagramConfig".
property arrowMarkerAbsolute
arrowMarkerAbsolute?: boolean;
Controls whether or arrow markers in html code are absolute paths or anchors. This matters if you are using base tag settings.
property diagramPadding
diagramPadding?: number;
property mainBranchName
mainBranchName?: string;
property mainBranchOrder
mainBranchOrder?: number;
property nodeLabel
nodeLabel?: NodeLabel;
property parallelCommits
parallelCommits?: boolean;
property rotateCommitLabel
rotateCommitLabel?: boolean;
property showBranches
showBranches?: boolean;
property showCommitLabel
showCommitLabel?: boolean;
property titleTopMargin
titleTopMargin?: number;
Margin top for the text over the diagram
interface JourneyDiagramConfig
interface JourneyDiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for journey diagrams
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"JourneyDiagramConfig".
property activationWidth
activationWidth?: number;
Width of activation box
property actorColours
actorColours?: string[];
property bottomMarginAdj
bottomMarginAdj?: number;
Prolongs the edge of the diagram downwards.
Depending on css styling this might need adjustment.
property boxMargin
boxMargin?: number;
Margin around loop boxes
property boxTextMargin
boxTextMargin?: number;
Margin around the text in loop/alt/opt boxes
property diagramMarginX
diagramMarginX?: number;
Margin to the right and left of the c4 diagram, must be a positive value.
property diagramMarginY
diagramMarginY?: number;
Margin to the over and under the c4 diagram, must be a positive value.
property height
height?: number;
Height of actor boxes
property leftMargin
leftMargin?: number;
Margin between actors
property messageAlign
messageAlign?: 'left' | 'center' | 'right';
Multiline message alignment
property messageMargin
messageMargin?: number;
Space between messages.
property noteMargin
noteMargin?: number;
Margin around notes
property rightAngles
rightAngles?: boolean;
Curved Arrows become Right Angles
This will display arrows that start and begin at the same node as right angles, rather than as curves.
property sectionColours
sectionColours?: string[];
property sectionFills
sectionFills?: string[];
property taskFontFamily
taskFontFamily?: string;
property taskFontSize
taskFontSize?: string | number;
property taskMargin
taskMargin?: number;
property textPlacement
textPlacement?: string;
text placement as: tspan | fo | old only text as before
property width
width?: number;
Width of actor boxes
interface KanbanDiagramConfig
interface KanbanDiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for kanban diagrams
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"KanbanDiagramConfig".
property padding
padding?: number;
property sectionWidth
sectionWidth?: number;
property ticketBaseUrl
ticketBaseUrl?: string;
interface MermaidConfig
interface MermaidConfig {}
property altFontFamily
altFontFamily?: string;
property architecture
architecture?: ArchitectureDiagramConfig;
property arrowMarkerAbsolute
arrowMarkerAbsolute?: boolean;
Controls whether or arrow markers in html code are absolute paths or anchors. This matters if you are using base tag settings.
property block
block?: BlockDiagramConfig;
property c4
c4?: C4DiagramConfig;
property class
class?: ClassDiagramConfig;
property darkMode
darkMode?: boolean;
property deterministicIds
deterministicIds?: boolean;
This option controls if the generated ids of nodes in the SVG are generated randomly or based on a seed. If set to
false
, the IDs are generated based on the current date and thus are not deterministic. This is the default behavior.This matters if your files are checked into source control e.g. git and should not change unless content is changed.
property deterministicIDSeed
deterministicIDSeed?: string;
This option is the optional seed for deterministic ids. If set to
undefined
but deterministicIds istrue
, a simple number iterator is used. You can set this attribute to base the seed on a static string.
property elk
elk?: { /** * Elk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram. * */ mergeEdges?: boolean; /** * Elk specific option affecting how nodes are placed. * */ nodePlacementStrategy?: | 'SIMPLE' | 'NETWORK_SIMPLEX' | 'LINEAR_SEGMENTS' | 'BRANDES_KOEPF'; /** * This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops. * */ cycleBreakingStrategy?: | 'GREEDY' | 'DEPTH_FIRST' | 'INTERACTIVE' | 'MODEL_ORDER' | 'GREEDY_MODEL_ORDER';};
property er
er?: ErDiagramConfig;
property flowchart
flowchart?: FlowchartDiagramConfig;
property fontFamily
fontFamily?: string;
Specifies the font to be used in the rendered diagrams. Can be any possible CSS
font-family
. See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
property fontSize
fontSize?: number;
property forceLegacyMathML
forceLegacyMathML?: boolean;
This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS fonts and browser's MathML implementation, this option is recommended if consistent rendering is important. If set to true, ignores legacyMathML.
property gantt
gantt?: GanttDiagramConfig;
property gitGraph
gitGraph?: GitGraphDiagramConfig;
property handDrawnSeed
handDrawnSeed?: number;
Defines the seed to be used when using handDrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
property htmlLabels
htmlLabels?: boolean;
property journey
journey?: JourneyDiagramConfig;
property kanban
kanban?: KanbanDiagramConfig;
property layout
layout?: string;
Defines which layout algorithm to use for rendering the diagram.
property legacyMathML
legacyMathML?: boolean;
This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers without their own MathML implementation. If this option is disabled and MathML is not supported, the math equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will fall back to legacy rendering for KaTeX.
property logLevel
logLevel?: | 'trace' | 0 | 'debug' | 1 | 'info' | 2 | 'warn' | 3 | 'error' | 4 | 'fatal' | 5;
This option decides the amount of logging to be used by mermaid.
property look
look?: 'classic' | 'handDrawn';
Defines which main look to use for the diagram.
property markdownAutoWrap
markdownAutoWrap?: boolean;
property maxEdges
maxEdges?: number;
Defines the maximum number of edges that can be drawn in a graph.
property maxTextSize
maxTextSize?: number;
The maximum allowed size of the users text diagram
property mindmap
mindmap?: MindmapDiagramConfig;
property packet
packet?: PacketDiagramConfig;
property pie
pie?: PieDiagramConfig;
property quadrantChart
quadrantChart?: QuadrantChartConfig;
property requirement
requirement?: RequirementDiagramConfig;
property sankey
sankey?: SankeyDiagramConfig;
property secure
secure?: string[];
This option controls which
currentConfig
keys are considered secure and can only be changed via call tomermaid.initialize
. This prevents malicious graph directives from overriding a site's default security.
property securityLevel
securityLevel?: 'strict' | 'loose' | 'antiscript' | 'sandbox';
Level of trust for parsed diagram
property sequence
sequence?: SequenceDiagramConfig;
property startOnLoad
startOnLoad?: boolean;
Dictates whether mermaid starts on Page load
property state
state?: StateDiagramConfig;
property suppressErrorRendering
suppressErrorRendering?: boolean;
Suppresses inserting 'Syntax error' diagram in the DOM. This is useful when you want to control how to handle syntax errors in your application.
property theme
theme?: 'default' | 'base' | 'dark' | 'forest' | 'neutral' | 'null';
Theme, the CSS style sheet. You may also use
themeCSS
to override this value.
property themeCSS
themeCSS?: string;
property themeVariables
themeVariables?: any;
property timeline
timeline?: TimelineDiagramConfig;
property wrap
wrap?: boolean;
property xyChart
xyChart?: XYChartConfig;
interface MindmapDiagramConfig
interface MindmapDiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for mindmap diagrams
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"MindmapDiagramConfig".
property maxNodeWidth
maxNodeWidth?: number;
property padding
padding?: number;
interface NodeLabel
interface NodeLabel {}
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"NodeLabel".
interface PacketDiagramConfig
interface PacketDiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for packet diagrams.
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"PacketDiagramConfig".
property bitsPerRow
bitsPerRow?: number;
The number of bits to display per row.
property bitWidth
bitWidth?: number;
The width of each bit in the packet diagram.
property paddingX
paddingX?: number;
The horizontal padding between the blocks in a row.
property paddingY
paddingY?: number;
The vertical padding between the rows.
property rowHeight
rowHeight?: number;
The height of each row in the packet diagram.
property showBits
showBits?: boolean;
Toggle to display or hide bit numbers.
interface PieDiagramConfig
interface PieDiagramConfig extends BaseDiagramConfig {}
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"PieDiagramConfig".
property textPosition
textPosition?: number;
Axial position of slice's label from zero at the center to 1 at the outside edges.
interface QuadrantChartConfig
interface QuadrantChartConfig extends BaseDiagramConfig {}
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"QuadrantChartConfig".
property chartHeight
chartHeight?: number;
Height of the chart
property chartWidth
chartWidth?: number;
Width of the chart
property pointLabelFontSize
pointLabelFontSize?: number;
point title font size
property pointRadius
pointRadius?: number;
radius of the point to be drawn
property pointTextPadding
pointTextPadding?: number;
padding between point and point label
property quadrantExternalBorderStrokeWidth
quadrantExternalBorderStrokeWidth?: number;
stroke width of edges of the box that are outside the quadrant
property quadrantInternalBorderStrokeWidth
quadrantInternalBorderStrokeWidth?: number;
stroke width of edges of the box that are inside the quadrant
property quadrantLabelFontSize
quadrantLabelFontSize?: number;
quadrant title font size
property quadrantPadding
quadrantPadding?: number;
quadrant title padding from top if the quadrant is rendered on top
property quadrantTextTopPadding
quadrantTextTopPadding?: number;
quadrant title padding from top if the quadrant is rendered on top
property titleFontSize
titleFontSize?: number;
Chart title top and bottom padding
property titlePadding
titlePadding?: number;
Padding around the quadrant square
property xAxisLabelFontSize
xAxisLabelFontSize?: number;
x-axis label font size
property xAxisLabelPadding
xAxisLabelPadding?: number;
Padding around x-axis labels
property xAxisPosition
xAxisPosition?: 'top' | 'bottom';
position of x-axis labels
property yAxisLabelFontSize
yAxisLabelFontSize?: number;
y-axis label font size
property yAxisLabelPadding
yAxisLabelPadding?: number;
Padding around y-axis labels
property yAxisPosition
yAxisPosition?: 'left' | 'right';
position of y-axis labels
interface RequirementDiagramConfig
interface RequirementDiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for req diagrams
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"RequirementDiagramConfig".
property fontSize
fontSize?: number;
property line_height
line_height?: number;
property rect_border_color
rect_border_color?: string;
property rect_border_size
rect_border_size?: string;
property rect_fill
rect_fill?: string;
property rect_min_height
rect_min_height?: number;
property rect_min_width
rect_min_width?: number;
property rect_padding
rect_padding?: number;
property text_color
text_color?: string;
interface RunOptions
interface RunOptions {}
Optional runtime configs.
property nodes
nodes?: ArrayLike<HTMLElement>;
The nodes to render. If this is set,
querySelector
will be ignored.
property postRenderCallback
postRenderCallback?: (id: string) => unknown;
A callback to call after each diagram is rendered.
property querySelector
querySelector?: string;
The query selector to use when finding elements to render. Default:
".mermaid"
.
property suppressErrors
suppressErrors?: boolean;
If
true
, errors will be logged to the console, but not thrown. Default:false
interface SankeyDiagramConfig
interface SankeyDiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for sankey diagrams.
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"SankeyDiagramConfig".
property height
height?: number;
property linkColor
linkColor?: SankeyLinkColor | string;
The color of the links in the sankey diagram.
property nodeAlignment
nodeAlignment?: SankeyNodeAlignment;
property prefix
prefix?: string;
The prefix to use for values
property showValues
showValues?: boolean;
Toggle to display or hide values along with title.
property suffix
suffix?: string;
The suffix to use for values
property useMaxWidth
useMaxWidth?: boolean;
property width
width?: number;
interface SequenceDiagramConfig
interface SequenceDiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for sequence diagrams
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"SequenceDiagramConfig".
property activationWidth
activationWidth?: number;
Width of the activation rect
property actorFont
actorFont?: FontCalculator;
property actorFontFamily
actorFontFamily?: string;
This sets the font family of the actor's description
property actorFontSize
actorFontSize?: string | number;
This sets the font size of the actor's description
property actorFontWeight
actorFontWeight?: string | number;
This sets the font weight of the actor's description
property actorMargin
actorMargin?: number;
Margin between actors
property arrowMarkerAbsolute
arrowMarkerAbsolute?: boolean;
property bottomMarginAdj
bottomMarginAdj?: number;
Prolongs the edge of the diagram downwards.
Depending on css styling this might need adjustment.
property boxMargin
boxMargin?: number;
Margin around loop boxes
property boxTextMargin
boxTextMargin?: number;
Margin around the text in loop/alt/opt boxes
property diagramMarginX
diagramMarginX?: number;
Margin to the right and left of the sequence diagram
property diagramMarginY
diagramMarginY?: number;
Margin to the over and under the sequence diagram
property forceMenus
forceMenus?: boolean;
forces actor popup menus to always be visible (to support E2E testing).
property height
height?: number;
Height of actor boxes
property hideUnusedParticipants
hideUnusedParticipants?: boolean;
property labelBoxHeight
labelBoxHeight?: number;
This sets the height of the loop-box (loop, alt, opt, par)
property labelBoxWidth
labelBoxWidth?: number;
This sets the width of the loop-box (loop, alt, opt, par)
property messageAlign
messageAlign?: 'left' | 'center' | 'right';
Multiline message alignment
property messageFont
messageFont?: FontCalculator;
property messageFontFamily
messageFontFamily?: string;
This sets the font family of actor messages
property messageFontSize
messageFontSize?: string | number;
This sets the font size of actor messages
property messageFontWeight
messageFontWeight?: string | number;
This sets the font weight of actor messages
property messageMargin
messageMargin?: number;
Space between messages.
property mirrorActors
mirrorActors?: boolean;
Mirror actors under diagram
property noteAlign
noteAlign?: 'left' | 'center' | 'right';
This sets the text alignment of actor-attached notes
property noteFont
noteFont?: FontCalculator;
property noteFontFamily
noteFontFamily?: string;
This sets the font family of actor-attached notes
property noteFontSize
noteFontSize?: string | number;
This sets the font size of actor-attached notes
property noteFontWeight
noteFontWeight?: string | number;
This sets the font weight of actor-attached notes
property noteMargin
noteMargin?: number;
Margin around notes
property rightAngles
rightAngles?: boolean;
Curved Arrows become Right Angles
This will display arrows that start and begin at the same node as right angles, rather than as curves.
property showSequenceNumbers
showSequenceNumbers?: boolean;
This will show the node numbers
property width
width?: number;
Width of actor boxes
property wrap
wrap?: boolean;
This sets the auto-wrap state for the diagram
property wrapPadding
wrapPadding?: number;
This sets the auto-wrap padding for the diagram (sides only)
interface StateDiagramConfig
interface StateDiagramConfig extends BaseDiagramConfig {}
The object containing configurations specific for entity relationship diagrams
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"StateDiagramConfig".
property arrowMarkerAbsolute
arrowMarkerAbsolute?: boolean;
property compositTitleSize
compositTitleSize?: number;
property defaultRenderer
defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';
Decides which rendering engine that is to be used for the rendering.
property dividerMargin
dividerMargin?: number;
property edgeLengthFactor
edgeLengthFactor?: string;
property fontSize
fontSize?: number;
property fontSizeFactor
fontSizeFactor?: number;
Font size factor, this is used to guess the width of the edges labels before rendering by dagre layout. This might need updating if/when switching font
property forkHeight
forkHeight?: number;
property forkWidth
forkWidth?: number;
property labelHeight
labelHeight?: number;
property miniPadding
miniPadding?: number;
property nodeSpacing
nodeSpacing?: number;
property noteMargin
noteMargin?: number;
property padding
padding?: number;
property radius
radius?: number;
property rankSpacing
rankSpacing?: number;
property sizeUnit
sizeUnit?: number;
property textHeight
textHeight?: number;
property titleShift
titleShift?: number;
property titleTopMargin
titleTopMargin?: number;
Margin top for the text over the diagram
interface TimelineDiagramConfig
interface TimelineDiagramConfig extends BaseDiagramConfig {}
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"TimelineDiagramConfig".
property activationWidth
activationWidth?: number;
Width of activation box
property actorColours
actorColours?: string[];
property bottomMarginAdj
bottomMarginAdj?: number;
Prolongs the edge of the diagram downwards.
Depending on css styling this might need adjustment.
property boxMargin
boxMargin?: number;
Margin around loop boxes
property boxTextMargin
boxTextMargin?: number;
Margin around the text in loop/alt/opt boxes
property diagramMarginX
diagramMarginX?: number;
Margin to the right and left of the c4 diagram, must be a positive value.
property diagramMarginY
diagramMarginY?: number;
Margin to the over and under the c4 diagram, must be a positive value.
property disableMulticolor
disableMulticolor?: boolean;
property height
height?: number;
Height of actor boxes
property leftMargin
leftMargin?: number;
Margin between actors
property messageAlign
messageAlign?: 'left' | 'center' | 'right';
Multiline message alignment
property messageMargin
messageMargin?: number;
Space between messages.
property noteMargin
noteMargin?: number;
Margin around notes
property padding
padding?: number;
property rightAngles
rightAngles?: boolean;
Curved Arrows become Right Angles
This will display arrows that start and begin at the same node as right angles, rather than as curves.
property sectionColours
sectionColours?: string[];
property sectionFills
sectionFills?: string[];
property taskFontFamily
taskFontFamily?: string;
property taskFontSize
taskFontSize?: string | number;
property taskMargin
taskMargin?: number;
property textPlacement
textPlacement?: string;
text placement as: tspan | fo | old only text as before
property width
width?: number;
Width of actor boxes
interface XYChartAxisConfig
interface XYChartAxisConfig {}
This object contains configuration for XYChart axis config
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"XYChartAxisConfig".
property axisLineWidth
axisLineWidth?: number;
Width of the axis line
property labelFontSize
labelFontSize?: number;
font size of the axis labels (tick text)
property labelPadding
labelPadding?: number;
top and bottom space from axis label (tick text)
property showAxisLine
showAxisLine?: boolean;
Show line across the axis
property showLabel
showLabel?: boolean;
Should show the axis labels (tick text)
property showTick
showTick?: boolean;
Should show the axis tick lines
property showTitle
showTitle?: boolean;
Should show the axis title
property tickLength
tickLength?: number;
length of the axis tick lines
property tickWidth
tickWidth?: number;
width of the axis tick lines
property titleFontSize
titleFontSize?: number;
font size of the axis title
property titlePadding
titlePadding?: number;
top and bottom space from axis title
interface XYChartConfig
interface XYChartConfig extends BaseDiagramConfig {}
This object contains configuration specific to XYCharts
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"XYChartConfig".
property chartOrientation
chartOrientation?: 'vertical' | 'horizontal';
How to plot will be drawn horizontal or vertical
property height
height?: number;
height of the chart
property plotReservedSpacePercent
plotReservedSpacePercent?: number;
Minimum percent of space plots of the chart will take
property showTitle
showTitle?: boolean;
Should show the chart title
property titleFontSize
titleFontSize?: number;
Font size of the chart title
property titlePadding
titlePadding?: number;
Top and bottom space from the chart title
property width
width?: number;
width of the chart
property xAxis
xAxis?: XYChartAxisConfig;
property yAxis
yAxis?: XYChartAxisConfig;
type CSSFontSize
type CSSFontSize = string | number;
The font size to use
type FontCalculator
type FontCalculator = () => Partial<FontConfig>;
JavaScript function that returns a
FontConfig
.By default, these return the appropriate
*FontSize
,*FontFamily
,*FontWeight
values.For example, the font calculator called
boundaryFont
might be defined as:boundaryFont: function () {return {fontFamily: this.boundaryFontFamily,fontSize: this.boundaryFontSize,fontWeight: this.boundaryFontWeight,};}This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"FontCalculator".
type SankeyLinkColor
type SankeyLinkColor = 'source' | 'target' | 'gradient';
Picks the color of the sankey diagram links, using the colors of the source and/or target of the links.
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"SankeyLinkColor".
type SankeyNodeAlignment
type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify';
Controls the alignment of the Sankey diagrams.
See <https://github.com/d3/d3-sankey#alignments>.
This interface was referenced by
MermaidConfig
's JSON-Schema via thedefinition
"SankeyNodeAlignment".
Package Files (14)
- index.d.ts
- src/clipboard-button.component.d.ts
- src/clipboard-options.d.ts
- src/katex-options.d.ts
- src/language.pipe.d.ts
- src/markdown.component.d.ts
- src/markdown.module.d.ts
- src/markdown.pipe.d.ts
- src/markdown.service.d.ts
- src/marked-extensions.d.ts
- src/marked-options.d.ts
- src/mermaid-options.d.ts
- src/prism-plugin.d.ts
- src/provide-markdown.d.ts
Dependencies (1)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (6)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/ngx-markdown
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ngx-markdown)
- HTML<a href="https://www.jsdocs.io/package/ngx-markdown"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 8320 ms. - Missing or incorrect documentation? Open an issue for this package.