Skip to content

mermaid


Interface: Mermaid ​

Defined in: packages/mermaid/src/mermaid.ts:433

Properties ​

contentLoaded() ​

contentLoaded: () => void

Defined in: packages/mermaid/src/mermaid.ts:451

##contentLoaded Callback function that is called when page is loaded. This functions fetches configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the page.

Returns ​

void


detectType() ​

detectType: (text, config?) => string

Defined in: packages/mermaid/src/mermaid.ts:453

Detects the type of the graph text.

Takes into consideration the possible existence of an %%init directive

Parameters ​

text ​

string

The text defining the graph. For example:

Code:
mermaid
Ctrl + Enter|
config? ​

MermaidConfig

The mermaid config.

Returns ​

string

A graph definition key


getRegisteredDiagramsMetadata() ​

getRegisteredDiagramsMetadata: () => Pick<ExternalDiagramDefinition, "id">[]

Defined in: packages/mermaid/src/mermaid.ts:455

Gets the metadata for all registered diagrams. Currently only the id is returned.

Returns ​

Pick<ExternalDiagramDefinition, "id">[]

An array of objects with the id of the diagram.


init() ​

init: (config?, nodes?, callback?) => Promise<void>

Defined in: packages/mermaid/src/mermaid.ts:446

init ​

Parameters ​

config? ​

MermaidConfig

Deprecated, please set configuration in initialize.

nodes? ​

Default: .mermaid. One of the following:

  • A DOM Node
  • An array of DOM nodes (as would come from a jQuery selector)
  • A W3C selector, a la .mermaid

string | HTMLElement | NodeListOf<HTMLElement>

callback? ​

(id) => unknown

Called once for each rendered diagram's id.

Returns ​

Promise<void>

Deprecated ​

Use initialize and run instead.

Renders the mermaid diagrams

Deprecated ​

Use initialize and run instead.


initialize() ​

initialize: (config) => void

Defined in: packages/mermaid/src/mermaid.ts:450

Used to set configurations for mermaid. This function should be called before the run function.

Parameters ​

config ​

MermaidConfig

Configuration object for mermaid.

Returns ​

void


mermaidAPI ​

mermaidAPI: Readonly<{ defaultConfig: MermaidConfig; getConfig: () => MermaidConfig; getDiagramFromText: (text, metadata) => Promise<Diagram>; getSiteConfig: () => MermaidConfig; globalReset: () => void; initialize: (userOptions) => void; parse: {(text, parseOptions): Promise<false | ParseResult>; (text, parseOptions?): Promise<ParseResult>; }; render: (id, text, svgContainingElement?) => Promise<RenderResult>; reset: () => void; setConfig: (conf) => MermaidConfig; updateSiteConfig: (conf) => MermaidConfig; }>

Defined in: packages/mermaid/src/mermaid.ts:440

Internal

Deprecated ​

Use parse and render instead. Please open a discussion if your use case does not fit the new API.


parse() ​

parse: {(text, parseOptions): Promise<false | ParseResult>; (text, parseOptions?): Promise<ParseResult>; }

Defined in: packages/mermaid/src/mermaid.ts:441

Call Signature ​

(text, parseOptions): Promise<false | ParseResult>

Parse the text and validate the syntax.

Parameters ​
text ​

string

The mermaid diagram definition.

parseOptions ​

ParseOptions & object

Options for parsing.

Returns ​

Promise<false | ParseResult>

An object with the diagramType set to type of the diagram if valid. Otherwise false if parseOptions.suppressErrors is true.

See ​

ParseOptions

Throws ​

Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.

Call Signature ​

(text, parseOptions?): Promise<ParseResult>

Parse the text and validate the syntax.

Parameters ​
text ​

string

The mermaid diagram definition.

parseOptions? ​

ParseOptions

Options for parsing.

Returns ​

Promise<ParseResult>

An object with the diagramType set to type of the diagram if valid. Otherwise false if parseOptions.suppressErrors is true.

See ​

ParseOptions

Throws ​

Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.


parseError? ​

optional parseError: ParseErrorFunction

Defined in: packages/mermaid/src/mermaid.ts:435


registerExternalDiagrams() ​

registerExternalDiagrams: (diagrams, opts) => Promise<void>

Defined in: packages/mermaid/src/mermaid.ts:449

Used to register external diagram types.

Parameters ​

diagrams ​

ExternalDiagramDefinition[]

Array of ExternalDiagramDefinition.

opts ​

If opts.lazyLoad is false, the diagrams will be loaded immediately.

lazyLoad? ​

boolean = true

Returns ​

Promise<void>


registerIconPacks() ​

registerIconPacks: (iconLoaders) => void

Defined in: packages/mermaid/src/mermaid.ts:454

Parameters ​

iconLoaders ​

IconLoader[]

Returns ​

void


registerLayoutLoaders() ​

registerLayoutLoaders: (loaders) => void

Defined in: packages/mermaid/src/mermaid.ts:448

Parameters ​

loaders ​

LayoutLoaderDefinition[]

Returns ​

void


render() ​

render: (id, text, svgContainingElement?) => Promise<RenderResult>

Defined in: packages/mermaid/src/mermaid.ts:442

Renders the diagram, holding the diagram config scope for exactly as long as the render. Leaving it set would make getConfig() report the last diagram's appearance as the global answer for every caller between renders.

Parameters ​

id ​

string

text ​

string

svgContainingElement? ​

Element

Returns ​

Promise<RenderResult>


run() ​

run: (options) => Promise<void>

Defined in: packages/mermaid/src/mermaid.ts:447

run ​

Function that goes through the document to find the chart definitions in there and render them.

The function tags the processed attributes with the attribute data-processed and ignores found elements with the attribute already set. This way the init function can be triggered several times.

Code:
mermaid
Ctrl + Enter|

Renders the mermaid diagrams

Parameters ​

options ​

RunOptions = ...

Optional runtime configs

Returns ​

Promise<void>


setParseErrorHandler() ​

setParseErrorHandler: (parseErrorHandler) => void

Defined in: packages/mermaid/src/mermaid.ts:452

setParseErrorHandler Alternative to directly setting parseError using: ​

js
mermaid.parseError = function (err, hash) {
  forExampleDisplayErrorInGui(err); // do something with the error
};

This is provided for environments where the mermaid object can't directly have a new member added to it (eg. dart interop wrapper). (Initially there is no parseError member of mermaid).

Parameters ​

parseErrorHandler ​

(err, hash) => void

New parseError() callback.

Returns ​

void


startOnLoad ​

startOnLoad: boolean

Defined in: packages/mermaid/src/mermaid.ts:434

Opens in mermaid.ai