MermaidConfig

Configuration interface for Mermaid diagrams

The MermaidConfig interface defines all configuration options available for Mermaid diagrams. This includes global settings, theme configuration, security options, and diagram-specific configurations.

Properties

theme · 'default' | 'base' | 'dark' | 'forest' | 'neutral' | 'null'

The CSS style sheet theme for the diagram. You may also use themeCSS to override this value.

themeVariables · any

Variables to customize the selected theme.

themeCSS · string

Custom CSS to override theme styles.

look · 'classic' | 'handDrawn'

Defines which main look to use for the diagram.

handDrawnSeed · number · default: 0

Seed for the handDrawn look. Important for automated tests as they will always find differences without the seed. Default value of 0 gives a random seed.

layout · string

Defines which layout algorithm to use for rendering the diagram.

maxTextSize · number

The maximum allowed size of the user’s text diagram.

maxEdges · number

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

elk · object

Configuration options for the ELK layout algorithm.

Show ELK properties

mergeEdges · boolean

Allows edges to share path where convenient. Can make for pretty diagrams but can also make it harder to read.

nodePlacementStrategy · 'SIMPLE' | 'NETWORK_SIMPLEX' | 'LINEAR_SEGMENTS' | 'BRANDES_KOEPF'

Affects how nodes are placed.

cycleBreakingStrategy · 'GREEDY' | 'DEPTH_FIRST' | 'INTERACTIVE' | 'MODEL_ORDER' | 'GREEDY_MODEL_ORDER'

Strategy to find cycles in the graph and decide which edges need adjustment to break loops.

forceNodeModelOrder · boolean

The node order given by the model does not change to produce a better layout.

considerModelOrder · '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.

darkMode · boolean

Enable dark mode styling.

htmlLabels · boolean

Whether to use HTML tags for rendering labels on nodes and edges. Diagram-specific htmlLabels settings are deprecated; use this root-level setting instead.

fontFamily · string

Specifies the font to be used in the rendered diagrams. Can be any possible CSS font-family.

altFontFamily · string

Alternative font family.

logLevel · 'trace' | 0 | 'debug' | 1 | 'info' | 2 | 'warn' | 3 | 'error' | 4 | 'fatal' | 5

The amount of logging to be used by Mermaid.

securityLevel · 'strict' | 'loose' | 'antiscript' | 'sandbox'

Level of trust for parsed diagram.

• strict: Only safe elements and attributes are allowed
• loose: All elements and attributes are allowed
• antiscript: Scripts are not allowed
• sandbox: Sandboxed rendering

startOnLoad · boolean

Dictates whether Mermaid starts on page load.

arrowMarkerAbsolute · boolean

Controls whether arrow markers in HTML code are absolute paths or anchors. This matters if you are using base tag settings.

secure · string[]

Specifies 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.

legacyMathML · boolean

Specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers without their own MathML implementation. If disabled and MathML is not supported, math equations are replaced with a warning. If enabled and MathML is not supported, Mermaid falls back to legacy rendering for KaTeX.

forceLegacyMathML · boolean

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.

deterministicIds · boolean · default: false

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 matters if your files are checked into source control (e.g., git) and should not change unless content is changed.

deterministicIDSeed · string

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.

dompurifyConfig · DOMPurifyConfiguration

Configuration options to pass to the dompurify library.

wrap · boolean

Enable text wrapping.

fontSize · number

Default font size for diagrams.

markdownAutoWrap · boolean

Enable automatic wrapping for markdown content.

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.

Diagram-specific configurations

flowchart · FlowchartDiagramConfig

Configuration specific to flowchart diagrams.

sequence · SequenceDiagramConfig

Configuration specific to sequence diagrams.

gantt · GanttDiagramConfig

Configuration specific to Gantt diagrams.

journey · JourneyDiagramConfig

Configuration specific to journey diagrams.

timeline · TimelineDiagramConfig

Configuration specific to timeline diagrams.

class · ClassDiagramConfig

Configuration specific to class diagrams.

state · StateDiagramConfig

Configuration specific to state diagrams.

er · ErDiagramConfig

Configuration specific to entity relationship diagrams.

pie · PieDiagramConfig

Configuration specific to pie diagrams.

quadrantChart · QuadrantChartConfig

Configuration specific to quadrant chart diagrams.

xyChart · XYChartConfig

Configuration specific to XY chart diagrams.

requirement · RequirementDiagramConfig

Configuration specific to requirement diagrams.

architecture · ArchitectureDiagramConfig

Configuration specific to architecture diagrams.

mindmap · MindmapDiagramConfig

Configuration specific to mindmap diagrams.

ishikawa · IshikawaDiagramConfig

Configuration specific to Ishikawa diagrams.

kanban · KanbanDiagramConfig

Configuration specific to Kanban diagrams.

gitGraph · GitGraphDiagramConfig

Configuration specific to Git graph diagrams.

c4 · C4DiagramConfig

Configuration specific to C4 diagrams.

sankey · SankeyDiagramConfig

Configuration specific to Sankey diagrams.

packet · PacketDiagramConfig

Configuration specific to packet diagrams.

block · BlockDiagramConfig

Configuration specific to block diagrams.

radar · RadarDiagramConfig

Configuration specific to radar diagrams.

venn · VennDiagramConfig

Configuration specific to Venn diagrams.

Example usage

import mermaid from 'mermaid';

mermaid.initialize({
  theme: 'dark',
  logLevel: 'error',
  securityLevel: 'strict',
  startOnLoad: true,
  deterministicIds: true,
  deterministicIDSeed: 'my-seed',
  flowchart: {
    curve: 'basis',
    padding: 20,
    nodeSpacing: 50,
    rankSpacing: 50
  },
  sequence: {
    mirrorActors: true,
    showSequenceNumbers: true
  }
});

TypeScript definition

export interface MermaidConfig {
  theme?: 'default' | 'base' | 'dark' | 'forest' | 'neutral' | 'null';
  themeVariables?: any;
  themeCSS?: string;
  look?: 'classic' | 'handDrawn';
  handDrawnSeed?: number;
  layout?: string;
  maxTextSize?: number;
  maxEdges?: number;
  elk?: {
    mergeEdges?: boolean;
    nodePlacementStrategy?: 'SIMPLE' | 'NETWORK_SIMPLEX' | 'LINEAR_SEGMENTS' | 'BRANDES_KOEPF';
    cycleBreakingStrategy?: 'GREEDY' | 'DEPTH_FIRST' | 'INTERACTIVE' | 'MODEL_ORDER' | 'GREEDY_MODEL_ORDER';
    forceNodeModelOrder?: boolean;
    considerModelOrder?: 'NONE' | 'NODES_AND_EDGES' | 'PREFER_EDGES' | 'PREFER_NODES';
  };
  darkMode?: boolean;
  htmlLabels?: boolean;
  fontFamily?: string;
  altFontFamily?: string;
  logLevel?: 'trace' | 0 | 'debug' | 1 | 'info' | 2 | 'warn' | 3 | 'error' | 4 | 'fatal' | 5;
  securityLevel?: 'strict' | 'loose' | 'antiscript' | 'sandbox';
  startOnLoad?: boolean;
  arrowMarkerAbsolute?: boolean;
  secure?: string[];
  legacyMathML?: boolean;
  forceLegacyMathML?: boolean;
  deterministicIds?: boolean;
  deterministicIDSeed?: string;
  flowchart?: FlowchartDiagramConfig;
  sequence?: SequenceDiagramConfig;
  gantt?: GanttDiagramConfig;
  // ... other diagram configs
  dompurifyConfig?: DOMPurifyConfiguration;
  wrap?: boolean;
  fontSize?: number;
  markdownAutoWrap?: boolean;
  suppressErrorRendering?: boolean;
}