Interface MermaidConfig

interface MermaidConfig {
    altFontFamily?: string;
    architecture?: ArchitectureDiagramConfig;
    arrowMarkerAbsolute?: boolean;
    block?: BlockDiagramConfig;
    c4?: C4DiagramConfig;
    class?: ClassDiagramConfig;
    darkMode?: boolean;
    deterministicIds?: boolean;
    deterministicIDSeed?: string;
    dompurifyConfig?: Config;
    elk?: {
        considerModelOrder?:
            | "NONE"
            | "NODES_AND_EDGES"
            | "PREFER_EDGES"
            | "PREFER_NODES";
        cycleBreakingStrategy?: | "GREEDY"
        | "DEPTH_FIRST"
        | "INTERACTIVE"
        | "MODEL_ORDER"
        | "GREEDY_MODEL_ORDER";
        forceNodeModelOrder?: boolean;
        mergeEdges?: boolean;
        nodePlacementStrategy?: | "SIMPLE"
        | "NETWORK_SIMPLEX"
        | "LINEAR_SEGMENTS"
        | "BRANDES_KOEPF";
    };
    er?: ErDiagramConfig;
    flowchart?: FlowchartDiagramConfig;
    fontFamily?: string;
    fontSize?: number;
    forceLegacyMathML?: boolean;
    gantt?: GanttDiagramConfig;
    gitGraph?: GitGraphDiagramConfig;
    handDrawnSeed?: number;
    htmlLabels?: boolean;
    ishikawa?: IshikawaDiagramConfig;
    journey?: JourneyDiagramConfig;
    kanban?: KanbanDiagramConfig;
    layout?: string;
    legacyMathML?: boolean;
    logLevel?: | 0
    | 1
    | 3
    | 2
    | "error"
    | 5
    | 4
    | "info"
    | "warn"
    | "debug"
    | "trace"
    | "fatal";
    look?: "classic"
    | "handDrawn";
    markdownAutoWrap?: boolean;
    maxEdges?: number;
    maxTextSize?: number;
    mindmap?: MindmapDiagramConfig;
    packet?: PacketDiagramConfig;
    pie?: PieDiagramConfig;
    quadrantChart?: QuadrantChartConfig;
    radar?: RadarDiagramConfig;
    requirement?: RequirementDiagramConfig;
    sankey?: SankeyDiagramConfig;
    secure?: string[];
    securityLevel?: "sandbox" | "strict" | "loose" | "antiscript";
    sequence?: SequenceDiagramConfig;
    startOnLoad?: boolean;
    state?: StateDiagramConfig;
    suppressErrorRendering?: boolean;
    theme?: "default" | "forest" | "dark" | "neutral" | "null" | "base";
    themeCSS?: string;
    themeVariables?: any;
    timeline?: TimelineDiagramConfig;
    venn?: VennDiagramConfig;
    wrap?: boolean;
    xyChart?: XYChartConfig;
}

Properties

`Optional`altFontFamily

altFontFamily?: string

`Optional`architecture

architecture?: ArchitectureDiagramConfig

`Optional`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.

`Optional`block

block?: BlockDiagramConfig

`Optional`c4

c4?: C4DiagramConfig

`Optional`class

class?: ClassDiagramConfig

`Optional`darkMode

darkMode?: boolean

`Optional`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.

`Optional`deterministicIDSeed

deterministicIDSeed?: string

This option is the optional seed for deterministic ids. If set to undefined but deterministicIds is true, a simple number iterator is used. You can set this attribute to base the seed on a static string.

`Optional`dompurifyConfig

dompurifyConfig?: Config

`Optional`elk

elk?: {
    considerModelOrder?:
        | "NONE"
        | "NODES_AND_EDGES"
        | "PREFER_EDGES"
        | "PREFER_NODES";
    cycleBreakingStrategy?: | "GREEDY"
    | "DEPTH_FIRST"
    | "INTERACTIVE"
    | "MODEL_ORDER"
    | "GREEDY_MODEL_ORDER";
    forceNodeModelOrder?: boolean;
    mergeEdges?: boolean;
    nodePlacementStrategy?: | "SIMPLE"
    | "NETWORK_SIMPLEX"
    | "LINEAR_SEGMENTS"
    | "BRANDES_KOEPF";
}

Type Declaration

OptionalconsiderModelOrder?: "NONE" | "NODES_AND_EDGES" | "PREFER_EDGES" | "PREFER_NODES"
Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
OptionalcycleBreakingStrategy?: "GREEDY" | "DEPTH_FIRST" | "INTERACTIVE" | "MODEL_ORDER" | "GREEDY_MODEL_ORDER"
This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.
OptionalforceNodeModelOrder?: boolean
The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
OptionalmergeEdges?: boolean
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.
OptionalnodePlacementStrategy?: "SIMPLE" | "NETWORK_SIMPLEX" | "LINEAR_SEGMENTS" | "BRANDES_KOEPF"
Elk specific option affecting how nodes are placed.

`Optional`er

er?: ErDiagramConfig

`Optional`flowchart

flowchart?: FlowchartDiagramConfig

`Optional`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

`Optional`fontSize

fontSize?: number

`Optional`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.

`Optional`gantt

gantt?: GanttDiagramConfig

`Optional`gitGraph

gitGraph?: GitGraphDiagramConfig

`Optional`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.

`Optional`htmlLabels

htmlLabels?: boolean

Flag for setting whether or not a html tag should be used for rendering labels on nodes and edges. Note: Diagram-specific htmlLabels settings (e.g., flowchart.htmlLabels) are deprecated. Use this root-level htmlLabels setting instead. The root-level htmlLabels takes precedence over any diagram-specific settings.

`Optional`ishikawa

ishikawa?: IshikawaDiagramConfig

`Optional`journey

journey?: JourneyDiagramConfig

`Optional`kanban

kanban?: KanbanDiagramConfig

`Optional`layout

layout?: string

Defines which layout algorithm to use for rendering the diagram.

`Optional`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.

`Optional`logLevel

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

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

`Optional`look

look?: "classic" | "handDrawn"

Defines which main look to use for the diagram.

`Optional`markdownAutoWrap

markdownAutoWrap?: boolean

`Optional`maxEdges

maxEdges?: number

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

`Optional`maxTextSize

maxTextSize?: number

The maximum allowed size of the users text diagram

`Optional`mindmap

mindmap?: MindmapDiagramConfig

`Optional`packet

packet?: PacketDiagramConfig

`Optional`pie

pie?: PieDiagramConfig

`Optional`quadrantChart

quadrantChart?: QuadrantChartConfig

`Optional`radar

radar?: RadarDiagramConfig

`Optional`requirement

requirement?: RequirementDiagramConfig

`Optional`sankey

sankey?: SankeyDiagramConfig

`Optional`secure

secure?: string[]

This option controls which currentConfig keys are considered secure and can only be changed via call to mermaid.initialize. This prevents malicious graph directives from overriding a site's default security.

`Optional`securityLevel

securityLevel?: "sandbox" | "strict" | "loose" | "antiscript"

Level of trust for parsed diagram

`Optional`sequence

sequence?: SequenceDiagramConfig

`Optional`startOnLoad

startOnLoad?: boolean

Dictates whether mermaid starts on Page load

`Optional`state

state?: StateDiagramConfig

`Optional`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.

`Optional`theme

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

`Optional`themeCSS

themeCSS?: string

`Optional`themeVariables

themeVariables?: any

`Optional`timeline

timeline?: TimelineDiagramConfig

`Optional`venn

venn?: VennDiagramConfig

`Optional`wrap

wrap?: boolean

`Optional`xyChart

xyChart?: XYChartConfig

Interface MermaidConfig

Index

Properties

Properties

OptionalaltFontFamily

Optionalarchitecture

OptionalarrowMarkerAbsolute

Optionalblock

Optionalc4

Optionalclass

OptionaldarkMode

OptionaldeterministicIds

OptionaldeterministicIDSeed

OptionaldompurifyConfig

Optionalelk

Type Declaration

OptionalconsiderModelOrder?: "NONE" | "NODES_AND_EDGES" | "PREFER_EDGES" | "PREFER_NODES"

OptionalcycleBreakingStrategy?: "GREEDY" | "DEPTH_FIRST" | "INTERACTIVE" | "MODEL_ORDER" | "GREEDY_MODEL_ORDER"

OptionalforceNodeModelOrder?: boolean

OptionalmergeEdges?: boolean

OptionalnodePlacementStrategy?: "SIMPLE" | "NETWORK_SIMPLEX" | "LINEAR_SEGMENTS" | "BRANDES_KOEPF"

Optionaler

Optionalflowchart

OptionalfontFamily

OptionalfontSize

OptionalforceLegacyMathML

Optionalgantt

OptionalgitGraph

OptionalhandDrawnSeed

OptionalhtmlLabels

Optionalishikawa

Optionaljourney

Optionalkanban

Optionallayout

OptionallegacyMathML

OptionallogLevel

Optionallook

OptionalmarkdownAutoWrap

OptionalmaxEdges

OptionalmaxTextSize

Optionalmindmap

Optionalpacket

Optionalpie

OptionalquadrantChart

Optionalradar

Optionalrequirement

Optionalsankey

Optionalsecure

OptionalsecurityLevel

Optionalsequence

OptionalstartOnLoad

Optionalstate

OptionalsuppressErrorRendering

Optionaltheme

OptionalthemeCSS

OptionalthemeVariables

Optionaltimeline

Optionalvenn

Optionalwrap

OptionalxyChart

Settings

On This Page

`Optional`altFontFamily

`Optional`architecture

`Optional`arrowMarkerAbsolute

`Optional`block

`Optional`c4

`Optional`class

`Optional`darkMode

`Optional`deterministicIds

`Optional`deterministicIDSeed

`Optional`dompurifyConfig

`Optional`elk

`Optional`considerModelOrder?: "NONE" | "NODES_AND_EDGES" | "PREFER_EDGES" | "PREFER_NODES"

`Optional`cycleBreakingStrategy?: "GREEDY" | "DEPTH_FIRST" | "INTERACTIVE" | "MODEL_ORDER" | "GREEDY_MODEL_ORDER"

`Optional`forceNodeModelOrder?: boolean

`Optional`mergeEdges?: boolean

`Optional`nodePlacementStrategy?: "SIMPLE" | "NETWORK_SIMPLEX" | "LINEAR_SEGMENTS" | "BRANDES_KOEPF"

`Optional`er

`Optional`flowchart

`Optional`fontFamily

`Optional`fontSize

`Optional`forceLegacyMathML

`Optional`gantt

`Optional`gitGraph

`Optional`handDrawnSeed

`Optional`htmlLabels

`Optional`ishikawa

`Optional`journey

`Optional`kanban

`Optional`layout

`Optional`legacyMathML

`Optional`logLevel

`Optional`look

`Optional`markdownAutoWrap

`Optional`maxEdges

`Optional`maxTextSize

`Optional`mindmap

`Optional`packet

`Optional`pie

`Optional`quadrantChart

`Optional`radar

`Optional`requirement

`Optional`sankey

`Optional`secure

`Optional`securityLevel

`Optional`sequence

`Optional`startOnLoad

`Optional`state

`Optional`suppressErrorRendering

`Optional`theme

`Optional`themeCSS

`Optional`themeVariables

`Optional`timeline

`Optional`venn

`Optional`wrap

`Optional`xyChart