Skip to content

mermaid


Interface: Mermaid

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

Properties

contentLoaded()

contentLoaded: () => void

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

##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:449

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:

config?

MermaidConfig

The mermaid config.

Returns

string

A graph definition key


getRegisteredDiagramsMetadata()

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

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

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:442

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:446

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:436

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:437

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.

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:431


registerExternalDiagrams()

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

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

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:450

Parameters

iconLoaders

IconLoader[]

Returns

void


registerLayoutLoaders()

registerLayoutLoaders: (loaders) => void

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

Parameters

loaders

LayoutLoaderDefinition[]

Returns

void


render()

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

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

Parameters

id

string

text

string

svgContainingElement?

Element

Returns

Promise<RenderResult>

Deprecated

  • use the mermaid.render function instead of mermaid.mermaidAPI.render

Deprecated for external use.


run()

run: (options) => Promise<void>

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

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.

Renders the mermaid diagrams

Parameters

options

RunOptions = ...

Optional runtime configs

Returns

Promise<void>


setParseErrorHandler()

setParseErrorHandler: (parseErrorHandler) => void

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

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:430

Opens in MermaidChart.com