Interface MermaidConfig

interface MermaidConfig {
    altFontFamily?: string;
    architecture?: ArchitectureDiagramConfig;
    arrowMarkerAbsolute?: boolean;
    block?: BlockDiagramConfig;
    c4?: C4DiagramConfig;
    class?: ClassDiagramConfig;
    darkMode?: boolean;
    deterministicIDSeed?: string;
    deterministicIds?: boolean;
    dompurifyConfig?: Config;
    elk?: {
        cycleBreakingStrategy?: "GREEDY" | "DEPTH_FIRST" | "INTERACTIVE" | "MODEL_ORDER" | "GREEDY_MODEL_ORDER";
        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;
    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;
    requirement?: RequirementDiagramConfig;
    sankey?: SankeyDiagramConfig;
    secure?: string[];
    securityLevel?: "strict" | "loose" | "antiscript" | "sandbox";
    sequence?: SequenceDiagramConfig;
    startOnLoad?: boolean;
    state?: StateDiagramConfig;
    suppressErrorRendering?: boolean;
    theme?: "default" | "forest" | "dark" | "neutral" | "null" | "base";
    themeCSS?: string;
    themeVariables?: any;
    timeline?: TimelineDiagramConfig;
    wrap?: boolean;
    xyChart?: XYChartConfig;
}

Properties

altFontFamily? architecture? arrowMarkerAbsolute? block? c4? class? darkMode? deterministicIDSeed? deterministicIds? dompurifyConfig? elk? er? flowchart? fontFamily? fontSize? forceLegacyMathML? gantt? gitGraph? handDrawnSeed? htmlLabels? journey? kanban? layout? legacyMathML? logLevel? look? markdownAutoWrap? maxEdges? maxTextSize? mindmap? packet? pie? quadrantChart? requirement? sankey? secure? securityLevel? sequence? startOnLoad? state? suppressErrorRendering? theme? themeCSS? themeVariables? timeline? wrap? xyChart?

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 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 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 dompurifyConfig

dompurifyConfig?: Config

Optional elk

elk?: {
    cycleBreakingStrategy?: "GREEDY" | "DEPTH_FIRST" | "INTERACTIVE" | "MODEL_ORDER" | "GREEDY_MODEL_ORDER";
    mergeEdges?: boolean;
    nodePlacementStrategy?: "SIMPLE" | "NETWORK_SIMPLEX" | "LINEAR_SEGMENTS" | "BRANDES_KOEPF";
}

Type declaration

  • Optional cycleBreakingStrategy?: "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.

  • Optional mergeEdges?: 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.

  • Optional nodePlacementStrategy?: "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

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 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?: "strict" | "loose" | "antiscript" | "sandbox"

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?: "default" | "forest" | "dark" | "neutral" | "null" | "base"

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 wrap

wrap?: boolean

Optional xyChart

xyChart?: XYChartConfig

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc