Skip to main content
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.
​
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;
}

Build docs developers (and LLMs) love

Get started for freeTalk to us